Vì vậy, đã làm việc với một lượng lớn Javascript và DOM trong những tháng qua, tôi muốn bắt đầu xem xét một số API trình duyệt bổ sung. Một trong những giao diện như vậy là API nhân viên web. …

Bạn đang xem: nhân viên web là gì

Nhân viên web được giải thích về Hiệu suất kết xuất

Đây là cái nhìn đầu tiên của tôi về API Web worker và tôi chia sẻ một số điều tôi đã học được. Khám phá chủ đề này đã mang lại cho tôi rất nhiều khái niệm. Sau đó, nhiệm vụ trở thành nói về những chủ đề này bằng cách giải thích về chúng vừa đủ để mang lại hiểu biết khái niệm về Nhân viên web. Bài viết sử dụng hiệu suất kết xuất trang trình duyệt để chứng minh việc sử dụng Web worker. Hy vọng rằng bạn sẽ thấy hầu hết nó hữu ích và nó cung cấp cho bạn đủ hiểu biết để tìm hiểu thêm.

A Demo

Javascript làm gì trên một trang web? Về cơ bản, nó thao túng DOM, tất cả chúng ta đều biết điều đó. Chúng tôi cũng biết mã JS phía máy khách có thể thực hiện các hoạt động không liên quan trực tiếp đến việc thay đổi kích thước các phần tử hoặc thay đổi kiểu. Vấn đề là một số hoạt động như vậy có thể là các hàm Javascript tốn kém về mặt tính toán có thể khiến trang bị trễ hoặc không phản hồi. Đây là những gì chúng tôi sẽ khắc phục với Nhân viên web.

Hãy xem xét bản trình diễn giả tạo này (bạn cũng có thể thử tính năng này trên màn hình cảm ứng):

di chuyển con trỏ chuột qua màn hình

Di chuyển thập tự giá có vẻ bồn chồn và không trơn tru (hoặc buồn tẻ ). Tại sao ..?

Một con đường vòng ngắn : 60 FPS

Khi bạn nhìn chằm chằm vào màn hình, màn hình sẽ hiển thị ở tốc độ 60 khung hình / giây, tức là cứ mỗi giây, 60 khung hình riêng lẻ được vẽ lên màn hình.

Khi mọi thứ thay đổi trên một trang web chẳng hạn như an phần tử được thay đổi kích thước hoặc sự kiện cuộn được kích hoạt, trình duyệt sẽ phải hiển thị trang dựa trên thay đổi mới này để bạn với tư cách là người dùng có thể phản hồi lại trang. Hãy tưởng tượng nếu trình duyệt mất thời gian để vẽ trang sau một sự kiện. Nó sẽ cảm thấy không phản hồi, giống như trường hợp với bản demo, bạn kéo con trỏ chuột và nó không theo kịp bạn.

Để các thay đổi trên trang xuất hiện ngay lập tức, trình duyệt sẽ phải vẽ lại trang sau mỗi 16ms ( 1 / 60fps = thời gian cho một khung hình). Đây không phải là yêu cầu đối với tất cả các sự kiện, chẳng hạn như nhấp vào nút thay đổi màu nền của trang không yêu cầu trình duyệt cập nhật trang 60 lần trong 1 giây vì thay đổi màu nền có thể được chụp trong một khung hình hoặc qua một vài khung hình, chẳng hạn 16ms * 6 khung hình = 96ms , sẽ trông vẫn đẹp ngay lập tức. Tuy nhiên, nếu có quá nhiều sự kiện do người dùng kích hoạt, chẳng hạn như khi chơi trò chơi hoặc trong trường hợp của chúng tôi là di chuyển dấu chéo đang theo dõi chuột trên màn hình, trình duyệt sẽ phải vẽ lại trang sau mỗi 16ms để nắm bắt thay đổi sau mỗi 16ms . Điều này cung cấp một kết xuất đủ mượt mà để mắt người không thể nhận thấy bất kỳ câu nói lắp nào để người dùng có thể tiếp tục phản hồi kết quả đầu ra.

Quay lại Bản trình diễn

 

document.addEventListener ('mousemove', function () {
let cross = document.getElementsByClassName ('x') [0];
cross.style.left = String (event.clientX) + 'px';
cross.style.top = String (event.clientY) + 'px';
pause (100) ; // Tôi mất 100ms để hoàn tất quá trình thực thi
.
.
});

Con lai la div phần tử có thuộc tính style được thay đổi để phản ánh vị trí của chuột khi nó di chuyển trên màn hình. Bất cứ khi nào trình duyệt phát hiện sự thay đổi về nội dung hoặc kiểu của một phần tử, nó sẽ cập nhật trang đó. Như chúng ta đã thảo luận, việc đi qua con trỏ chuột yêu cầu trình duyệt cập nhật trang sau mỗi 16ms để hiển thị mượt mà. Ở đây với các sự kiện mousemove và các bản cập nhật DOM tiếp theo, chúng tôi sẽ thêm 100ms vào < code class = "fn mp mq mr ms b"> 16ms ngân sách thời gian với hàm pause đang chạy dài. Điều này có nghĩa là cần khoảng 110ms để tạo khung (= cập nhật trang một lần). Sự kiện mousemove được kích hoạt liên tục theo thời gian, tức là di chuyển dấu chéo trên màn hình, khi đó sẽ cung cấp cho chúng tôi tốc độ khung hình là 9fps trông sẽ rất lag.

Tốc độ khung hình được chụp cho bản demo (không có nhân viên)

Hàm pause được giới thiệu trong sự kiện trình xử lý như một trình giữ chỗ để chứng minh một tập lệnh nặng về tính toán mà không liên quan đến việc thay đổi bất kỳ thứ gì trên giao diện người dùng. Trong một ứng dụng web sản xuất, đoạn mã chạy dài này có thể là một tập lệnh xử lý hình ảnh hoặc một tập lệnh xử lý tập hợp dữ liệu lớn ở phía sau phản hồi XHR hoặc bất kỳ thứ gì khác tốn nhiều thời gian tính toán.

Xem Thêm  Thao tác với indexOf trong Java - chỉ mục của trong java

Bây giờ nếu bạn tăng độ trễ lên cao đủ, nó sẽ dẫn đến chuyển động chéo thậm chí còn trở nên chậm chạp hơn cuối cùng lật trang và mọi thứ trong đó không phản hồi (không cần phải thử điều này). Trình duyệt nhìn thấy đặc điểm thời gian thực thi (hoặc độ trễ) này của một tập lệnh không phản hồi và trả về một cảnh báo cho bạn tùy chọn tiếp tục chờ hoặc thoát trang (việc thoát trang kết thúc quá trình, thường là kết thúc việc mất tab trên cùng một miền). Thông báo về trang không phản hồi

Hãy bắt đầu bằng cách xem lại các tác vụ được thực hiện bởi trình duyệt web tại đây. Bắt đầu với sự kiện mousemove , Javascript thông qua API trình duyệt thực hiện các thay đổi đối với thuộc tính style phần tử trang, Javascript cũng chạy một số mã tốn thời gian không liên quan đến DOM hoặc CSSOM . Việc thay đổi kiểu phần tử sẽ kích hoạt chỉnh lại (tính toán lại vị trí của phần tử trên trang), sau đó là sơn lại (làm đầy pixel) của khung nhìn, dẫn đến vị trí được cập nhật của hình chữ thập trên màn hình, tức là hình chữ thập đã di chuyển. Chuỗi các bước này xảy ra mỗi khi kích hoạt sự kiện mousemove . Việc xem xét cách trình duyệt quản lý các tác vụ này sẽ cho chúng ta biết cách mà một tập lệnh đang chạy dài có thể bị chặn hiển thị.

Đường ống hiển thị trình duyệt

Khi bạn kích hoạt một trình duyệt, nó sẽ quay một vài quy trình (và luồng ) xử lý các trách nhiệm như yêu cầu mạng, tương tác với giao diện người dùng của trình duyệt, tính liên tục của dữ liệu / lưu trữ và kết xuất trang. Cách các tác vụ này được chia thành các quy trình (và luồng) khác nhau là việc triển khai cụ thể, tuy nhiên tất cả các trình duyệt đều chạy quy trình kết xuất. Quá trình này chịu trách nhiệm hiển thị nội dung trên màn hình.

Quy trình kết xuất sinh ra chủ đề chính (trong số những người khác). Chuỗi chính chịu trách nhiệm phân tích cú pháp HTML, xây dựng DOM, thực thi Javascript và tính toán bố cục của các phần tử trên trang trước khi trình duyệt vẽ các pixel trên màn hình. Đó là một số điều mà chuỗi chính đang làm trước khi trang cuối cùng được hiển thị. Điều quan trọng cần lưu ý là mỗi bước phụ thuộc vào kết quả từ hoạt động trước đó. Ví dụ: nếu Javascript thêm một nút vào DOM, thì tất cả các bước tiếp theo, tức là tạo cây kết xuất, tính toán bố cục và yêu cầu tô vẽ được thực hiện tuần tự để hiển thị một trang.

Bây giờ bạn có thể thấy thời gian chạy JS ảnh hưởng như thế nào đến tốc độ của trang được hiển thị vì đây là một liên kết trong chuỗi sự kiện kết thúc bằng một trang được cập nhật.

Quá trình hiển thị trang (mô hình chung)

Mã JS demo thực hiện hai việc, thực hiện các thay đổi đối với DOM và chạy một số mã không liên quan ( hàm tạm dừng ). Mã JS được thực thi bất cứ khi nào luồng chính mang lại quyền điều khiển cho công cụ Javascript. Vậy khi nào điều đó xảy ra?

  1. Một, trong lần tải trang đầu tiên. Khi trình phân tích cú pháp HTML gặp thẻ script, mã JS sẽ được thực thi. Nếu mã này tốn thời gian, bất kể nó có thao túng DOM hay không, việc hiển thị trang sẽ bị trì hoãn. Cụ thể, thời gian tải bị ảnh hưởng (bài viết này không đề cập đến ví dụ).
  2. Hai, trong một sự kiện đầu vào, chẳng hạn như nhấp chuột, cuộn hoặc di chuyển chuột (ví dụ minh họa). Trình xử lý sự kiện thực thi mã JS được liên kết. Khả năng phản hồi của trang đối với sự kiện đầu vào bị ảnh hưởng do mã tốn thời gian chạy mỗi khi trang cố gắng cập nhật sau thay đổi trong phần tử div < code class = "fn mp mq mr ms b"> style property.

Xóa Javascript không cần thiết khỏi đường dẫn hiển thị có nghĩa là chúng tôi nhận được cập nhật trang nhanh hơn và thời gian phản hồi tốt hơn cho các sự kiện đầu vào. Nhân viên web có thể giúp chúng tôi điều đó.

Xem Thêm  Lập trình tân binh - ngôn ngữ bậc cao là gì

Nhân viên Web

Web worker cho phép bạn tạo các luồng bổ sung để chạy các tập lệnh, giải phóng luồng chính để chỉ hoạt động với giao diện người dùng, do đó tránh xử lý bất kỳ mã JS mạnh nào có thể chặn giao diện người dùng. Web Worker có ngữ cảnh thực thi của riêng họ, (được gọi là phạm vi toàn cầu của Worker), là ngữ cảnh không phải cửa sổ tách biệt với ngữ cảnh toàn cục / cửa sổ và vòng lặp sự kiện của riêng nó. Các đối tượng Web worker cũng có quyền truy cập vào một vài API Web , góp phần vào tính linh hoạt của nó để chạy các loại tác vụ khác nhau trong chuỗi nền . Nhân viên web không có quyền truy cập vào API DOM.

Tạo đối tượng worker tiêu chuẩn khá đơn giản. Nó được thực hiện bằng cách chuyển cho hàm tạo URL cho tệp script sẽ được chạy trong chuỗi nền. Loại nhân viên này còn được gọi là Nhân viên chuyên dụng vì chúng được liên kết với chuỗi chính và chúng tồn tại trong suốt thời gian của người tạo ra nó.

 

// Ngữ cảnh cửa sổ, tập lệnh chính
const worker = new Worker ('worker.js');

Bây giờ chúng ta có tập lệnh ( worker.js ) được tải bởi đối tượng worker , tiếp theo phải là một số phương tiện để luồng chính nói chuyện với luồng nhân viên nền và ngược lại.

Thông báo này truyền giữa luồng chính và luồng công nhân được thực hiện thông qua phương thức postMessage () .

 

// Ngữ cảnh cửa sổ, tập lệnh chính
worker.postMessage ('hey làm gì đó cho tôi !, cảm ơn');

Trao đổi tin nhắn giữa main script và worker scripts

Sử dụng addEventListener bạn có thể thiết lập trình xử lý sự kiện cho sự kiện message . Đây là cách luồng chính và luồng công nhân biết rằng họ đã nhận được thông báo. Bản thân thư có thể truy cập được thông qua thuộc tính event.data .

 

// Worker Global Scope, worker script
// 'self' chỉ trả về ngữ cảnh hiện tại (WorkerGlobalScope)

self.addEventListener ('message', function () {
if (event.data == = 'này, hãy làm gì đó cho tôi !, cảm ơn') {
// đang thực hiện công việc
if (taskComplete ()) {
self.postMessage ('all done!');
}
}
}

Khi nhiệm vụ đã hoàn thành, luồng công nhân có thể được xóa bằng worker.termina () < /code>.

 

// Ngữ cảnh cửa sổ , tập lệnh chính
worker.addEventListen er ('message', function () {
if (event.data === 'all done!') {
worker.termina ();
}
} < / p>

Bây giờ chúng ta hãy xem bản trình diễn của chúng tôi được triển khai với nhân viên web.

di chuyển dấu chéo trên màn hình

Smooth. Mã JS dài hạn được thực thi trên một chuỗi riêng biệt với chuỗi chính, giải phóng chuỗi sau để giải quyết các tác vụ liên quan đến làm việc với DOM và cập nhật vị trí của dấu thập trên màn hình.

Một điều chúng ta chưa thảo luận là bộ đếm 'Hoàn thành tính toán'. Bộ đếm này theo dõi số lần mã đang chạy dài (hàm pause được chế tạo) được gọi. Trong bản trình diễn của chúng tôi được triển khai với worker, bạn có thể thấy bộ đếm tiếp tục tăng ngay cả sau khi sự kiện mousemove dừng. Điều này cho thấy rằng chức năng pause được chạy hoàn toàn độc lập với luồng chính, cho phép trình duyệt cập nhật màn hình với vị trí mới của dấu thập mà không có độ trễ vốn có với một kịch bản chạy dài. Trong khi đó, bản demo không có worker có bộ đếm bắt đầu, tăng dần và dừng với mỗi mousemove , theo sau là lần truy cập hiệu suất rõ ràng.

Phân tích Hiệu suất

Trình phân tích thời gian chạy Chrome DevTools (Cmd + Option + J, Tab Hiệu suất ) sẽ giúp chúng tôi tóm tắt mọi thứ chúng tôi đã thảo luận cho đến nay.

Chạy bản demo mà không có nhân viên làm việc dẫn đến kết xuất vị trí chéo trên màn hình kém. Chúng tôi biết điều này là do hàm pause chiếm hầu hết quỹ thời gian có sẵn để hiển thị khung tại 60 khung hình / giây .

Phân tích hiệu suất - Janky

Trong chuỗi chính, sự kiện mousemove cần một lượng thời gian đáng kể, được hiển thị dọc theo trục x, để hoàn thành việc thực thi trình xử lý sự kiện của nó ( 101,75ms ). Do đó, thời gian cần để hiển thị một khung liên tục trên 110ms , cao hơn nhiều so với Khoảng thời gian 16ms cần thiết cho đầu ra 60 khung hình / giây .

Mặt khác, chạy demo với nhân viên cho phép chúng tôi kết xuất miễn phí jank do chuỗi công nhân nhận nhiệm vụ thực thi mã Javascript tốn thời gian.

Phân tích hiệu suất - Jank Miễn phí

Hiện có luồng chính và luồng công nhân được hiển thị trong bảng hiệu suất. Tốc độ khung hình ở mức nhất quán 60 khung hình / giây với mỗi khung hình mất khoảng 16 mili giây để hiển thị. Việc thực thi trình xử lý sự kiện mousemove , tính toán kiểu, tính toán bố cục và tô các pixel trên màn hình đều diễn ra trong một phần nhỏ của 16ms (hiển thị trong vòng tròn nhỏ màu đỏ). Phần thời gian này đã bị che khuất bởi mã JS chạy trong trình xử lý sự kiện trong trường hợp trước.

Toàn bộ tác vụ chạy hàm pause được tải xuống chuỗi công nhân . Bạn có thể thấy rằng phải mất một vài khung hình ( 101,63ms ) để hoàn thành tuy nhiên nó không ảnh hưởng đến việc hiển thị trang theo bất kỳ cách nào.

Kết thúc

Web worker đang giải quyết sự đồng thời với bản chất luồng đơn của quá trình kết xuất trang trình duyệt. Trình duyệt tạo các chuỗi bổ sung để xử lý các chức năng Javascript không liên quan đến tương tác với giao diện người dùng, cho phép chuỗi chính tiếp tục với quá trình hiển thị trang.

Bạn có thể đọc thêm về web worker trong các liên kết được cung cấp bên dưới. Bây giờ là tất cả, chúc mừng.

Tài liệu tham khảo và Đọc thêm:


Xem thêm những thông tin liên quan đến chủ đề nhân viên web là gì

Học lập trình web ra làm gì? Cách kiếm tiền từ nghề lập trình web bạn cần biết | Unitop.vn

  • Tác giả: Phan Văn Cương [Học Web Online]
  • Ngày đăng: 2019-10-01
  • Đánh giá: 4 ⭐ ( 5843 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các bạn xem lộ trình học đi làm sau 3-5 tháng tại đây: https://unitop.vn
    Học lập trình web ra làm gì là câu hỏi mà lập trình viên cần biết trước khi học bất kỳ ngôn ngữ nào bạn cũng đừng quyên tìm hiểu xem cơ hội nghề nghiệp trong tương lai nó như thế nào cho nghề lập trình web.

    Việc biết được chính xác sau này mình làm gì để kiếm được thu nhập từ những kỹ năng lập trình web của mình vô cùng quan trọng. Nó tạo ra cho chúng ta rất nhiều cảm hứng để học tập và có kế hoạch để phát triển.

    Trong video này tôi chia sẻ đến bạn 3 cấp độ quan trọng để kiểm tiền từ nghề lập trình web

    1. Nhân viên lập trình cho các công ty
    2. Nhân viên lập trình + Làm dự án ngoài
    3. Làm việc tự do

    Chiến lược để từng bước đi qua 3 cấp độ này tôi đã chia sẻ cụ thể trong video. Bạn hãy dành thời gian nó để áp dụng.
    ------
    » » Bấm đăng ký kênh để tránh bỏ sót video mới://bit.ly/2RMvXez
    » » Nhận tài liệu học web miễn phí qua mail: https://www.hocwebdilam.com
    ------------
    Liên Kết Quan Trọng
    » Nhận tài liệu miễn phí: https://hocwebdilam.com?utm_source=yo...
    » Blog lập trình: http://unitop.com.vn
    » Đăng ký khoá học web đi làm: https://unitop.vn
    » Fanpage: https://facebook.com/unitop.vn
    » Fb: https://facebook.com/cuongtienlen

    --------------------------
    Xem Lộ Trình Học Lập Trình Web Đi Làm
    » http://unitop.vn

    unitop hocwebdilam

Nghề SEO là làm gì ? Lương bao nhiêu ? Học nghề SEO ở đâu ?

  • Tác giả: thptchuyensonla.edu.vn
  • Đánh giá: 4 ⭐ ( 1270 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nghề SEO là làm gì? SEO là gì trong Marketing? Làm SEO cần những kỹ năng gì, học ngành nào, trường nào? Lương nghề SEO bao nhiêu? Những kỹ năng cần có? Tất cả mình sẽ chia sẻ trong bài viết này nhé.

Nhân Viên Admin Là Gì? Công Việc Làm Admin Là Làm Gì?

  • Tác giả: glints.com
  • Đánh giá: 4 ⭐ ( 2226 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nhân viên Admin là gì? Công việc của admin là gì? Cơ hội việc làm và mức lương có ổn định không? Cùng Glints tìm hiểu qua bài viết nhé!

Web Developer là gì? Mô tả công việc của một Web Developer

  • Tác giả: vieclam.thegioididong.com
  • Đánh giá: 3 ⭐ ( 6722 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về công việc Web Developer cũng như mức lương và cơ hội nghề nghiệp trong tương lai. Các yếu tố để trở thành một Web Developer xuất sắc!

Nhân Viên Tư Vấn Website Là Gì? Làm Những Công Việc Gì?

  • Tác giả: www.semtek.com.vn
  • Đánh giá: 4 ⭐ ( 5465 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đang tìm hiểu về nhân viên tư vấn website là gì? Công việc của nhân viên tư vấn website là gì? Và cần có những kỹ năng nào? XEM NGAY NHÉ!

Lương của nhân viên thiết kế website bao nhiêu? Cách tăng thu nhập?

  • Tác giả: news.timviec.com.vn
  • Đánh giá: 3 ⭐ ( 9377 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngành thiết kế web lương cao không? Mức lương của nhân viên thiết kế website sẽ dao động trong khoảng từ 3 triệu đến 20 triệu một tháng.

Nhân viên IT là gì? Những thông tin cần biết để trở thành nhân viên IT

  • Tác giả: blog.topcv.vn
  • Đánh giá: 4 ⭐ ( 1763 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Nhu cầu tuyển dụng nhân viên IT luôn thuộc top 10 trên thị trường lao động. Vậy nhân viên IT là gì mà hot như vậy? Làm thế nào để theo nghề này?

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php