HTML5: WEB WORKER

Bài viết được dịch từ series How JS Works của team SessionStack với sự chấp nhận của Co-founder & CEO Alexander Zlatkov

Đục khoét Javascript (Phần 1): Khái quát mắng về engine, runtime với callstack

Đục khoét Javascript (Phần 2): Bên trong engine V8 & 5 mẹo để buổi tối ưu hóa code

Đục khoét Javascript (Phần 3): Quản lý bộ lưu trữ và 4 ngôi trường phù hợp nhỉ phổ biến

Đục khoét Javascript (Phần 4): Event loop, xây dựng bất đồng bộ & 5 mẹo cải thiện Async/Await

Đục khoét Javascript (Phần 5): Đào sâu WebSocket & HTTP/2 cùng với SSE + Hãy chọn giá chỉ đúng!

Đục khoét Javascript (Phần 6): So sánh cùng với WebAssembly + lúc như thế nào cần sử dụng nó xuất sắc rộng dùng JS

*

Chào các bạn đến cùng với bài bác đồ vật 7 trong series đục khoét cùng mày mò Javascript tương tự như những yếu tố của chính nó. Trong quá trình khẳng định cùng tìm hiểu các nhân tố chủ chốt, người sáng tác cũng chia sẻ một trong những hiệ tượng mà người ta sẽ dùng để làm xuất bản SessionStaông xã, một áp dụng Javascript đào bới sự mạnh khỏe, hiệu năng cao với định hình.

Bạn đang xem: Html5: web worker

Trong bài bác này bọn họ đã khám phá về Web Workers: một chiếc nhìn tổng quan, luận bàn về các một số loại worker khách hàng nhau, các nguyên tố của chính nó vận động với nhau như thế nào cùng gần như ưu thế cũng tương tự nhược điểm của chính nó trong những ngữ chình họa không giống nhau. Cuối cùng, team tác giả đã cung cấp 5 trường phù hợp nhưng trong những số đó Web Worker là sự chọn lọc đúng đắn.

Bạn sẽ thân quen cùng với thực sự rằng Javascript chạy 1-1 luồng nlỗi bọn họ đang bàn bạc cụ thể làm việc bài xích trước. JS cũng góp các developer viết code bất đồng nhất.

Những tiêu giảm của lập trình sẵn bất đồng bộ

Chúng ta sẽ bàn luận sinh sống bài bác trước về xây dựng bất đồng điệu và lúc nào thì nên cần sử dụng.

Lập trình bất đồng hóa cho phép UI của ứng dụng trlàm việc bắt buộc mềm mịn và mượt mà, bằng phương pháp "lên lịch" mang đến từng phần của code được thực hiện ngơi nghỉ thời hạn cân xứng vào sự kiện loop, cho nên vì thế nó có thể chấp nhận được render UI được thực hiện trước.

Một ngôi trường hòa hợp tốt để cần sử dụng lập trình sẵn bất đồng điệu là lúc ta Gọi Ajax request. Bởi vày request rất có thể tốn các thời hạn phải rất có thể để cho nó chạy bất đồng bộ và trong lúc client chờ công dụng trả về, đông đảo code không giống vẫn được thực thi.

// Giả sử bạn cần sử dụng jQueryjQuery.ajax( url: "https://api.example.com/endpoint", success: function(response) // code được tiến hành Khi response trả về );Nhưng điều đó lại tạo ra sự việc khác: request được cách xử lý bởi Web API của trình ưng chuẩn, tuy nhiên có tác dụng nắm như thế nào mà code không giống rất có thể chạy bất đồng bộ? Ví dụ trường hợp nhỏng code bên trong một success callbachồng lại chạy ngốn rất nhiều CPU:

var result = performCPUIntensiveCalculation();Nếu nlỗi performCPUIntensiveCalculation chưa hẳn là một trong request HTTP. tuy nhiên lại bloông xã code giải pháp xử lý (ví dụ: 1 vòng lặp hết sức lớn), không tồn tại cách làm sao nhằm giải pchờ event loop và unblock đến UI trình săn sóc, nó vẫn đóng băng và ko bình luận lại với user.

Nghĩa là trong Javascript, phần đông hàm bất đồng nhất chỉ xử lý vấn đề nhỏ của hạn chế nghỉ ngơi 1-1 luồng.

Trong gần như trường hòa hợp đó, bạn có thể khiến cho unblock UI khỏi quá trình tính toán thù thừa lâu bằng cách sử dụng setTimeout. lấy ví dụ, bóc một chuỗi giải pháp xử lý tính toán phức hợp vào trong nhiều lời Call setTimeout, bằng phương pháp kia chúng ta có thể đặt nó vào số đông "vị trí" khác nhau trong event loop và bí quyết này hoàn toàn có thể giúp cho render UI được tốt rộng.

Cùng xem một ví dụ dễ dàng và đơn giản về tính toán số vừa đủ của 1 mảng số nguyên:

function average(numbers) { var len = numbers.length, sum = 0, i; if (len === 0) return 0; for (i = 0; i Dưới đây là giải pháp ta viết lại code bên trên cùng "giả lập" trường vừa lòng bất đồng bộ:

function averageAsync(numbers, callback) { var len = numbers.length, sum = 0; if (len === 0) return 0; function calculateSumAsync(i) { if (i Cách này đang dùng setTimeout nhằm thêm từng bước một thực hiện tính tân oán vào trong event loop. Giữa mỗi lần tính toán thù sẽ có đầy đủ thời gian cho các tính tân oán được thêm vào và giải pđợi trình chăm chú không bị ngừng hoạt động.

Web Workers mang đến giải cứu

HTML5 mang đến mang đến họ không ít sản phẩm công nghệ tốt vời:

GeolocationApplication cacheLocal StorageDrag và DropWeb Workers

Web Workers là quá trình vào trình chăm sóc nhưng rất có thể được dùng để tiến hành Javascript code mà không cản trở event loop

Điều này thực thụ vi diệu. Toàn cỗ mô hình của Javascript dựa vào ý tưởng về môi trường đối kháng luồng tuy vậy lúc này là có Web Workers với nó gỡ bỏ (một phần nào) sự hạn chế kia.

Web Workers có thể chấp nhận được developer đặt gần như quá trình tất cả thời gian chạy nhiều năm cùng phần lớn công việc nặng nề về xử lý tính tân oán vào background mà lại không gây trngơi nghỉ hổ thẹn mang đến UI, làm cho app của bạn mềm mịn rộng. Hình như, không cần phải xài triông chồng cùng với setTimeout nhằm xí gạt event loop nữa.

Ở trên đây gồm một demo mẫu mã mô tả sự không giống nhau Khi tiến hành sắp xếp mảng sử dụng cùng ko dùng Web Workers.

Khái quát tháo về Web Workers

Web Workers được cho phép các bạn có tác dụng hồ hết câu hỏi như thật thi các đoạn code cách xử trí tốn thời gian để tính tân oán các phxay tính tổn hao nheiefu CPU nhưng ko làm cho cản ngăn UI. Thực ra, nó đang chạy song tuy vậy. Web Workers là đa luồng.

Bạn đang thắc mắc: "Chđọng không phải Javascript là ngôn ngữ đối kháng luồng à?"

Đây là thời điểm cơ mà bạn sẽ thốt lên aha không thể tinh được Khi phân biệt Javascript là 1 trong ngữ điệu ko quan niệm mô hình quy trình. Web Workers không hẳn là một trong những phần của Javascript, nó là nhân tài của trình duyệt y nhưng rất có thể truy xuất trải qua Javascript. Đa số các trình để mắt tới bao gồm lịch sử hào hùng về solo tiến trình (tiếng thì biến đổi rồi), và nhiều phần các tiến hành của Javascript những diễn ra trên trình để mắt. Web Workers không được thực hiện bên trên Node.js, nó có có mang tương đối không giống một ít về cluster tốt child_process.

Có 3 nhiều loại Web Workers được đề cùa đến trong thông số kỹ thuật:

Dedicated Workers (Worker chuyên dụng)

Dedicated Web Workers được khởi sinh sản vày quy trình bao gồm và chỉ còn rất có thể giao tiếp với quá trình đó.

*

Shared Workers (Worker chia sẻ)

Shared Workers hoàn toàn có thể được truy vấn bởi tất cả các quá trình chạy trên cùng origin (không giống tab trình coi ngó, iframe hay những những shared worker khác)

*

Nếu bạn có nhu cầu cần sử dụng test SessionStaông chồng để hiểu với tìm hiểu lại hầu như vụ việc chuyên môn cũng giống như UX trên webứng dụng của chúng ta, team SessionStaông xã đang có phiên bản sử dụng test miễn tầm giá, tại đây nhé.

Service Workers (Worker dịch vụ)

Một Service Worker là worker phía sự khiếu nại (event-driven) được đăng ký cùng với origin và path. Nó có thể điều khiển web page/site mà nó links, can thiệp cùng sửa đổi sự điều phối cùng các những hiểu biết tài nguim, lưu giữ đệm tài nguyên với phong thái cực kỳ chi tiết nhằm được cho phép bạn bao gồm toàn quyền điều khiển về việc phầm mềm của bạn giải pháp xử lý ra sao trong từng trường đúng theo ví dụ (ví dụ như Khi rớt mạng)

*

Trong bài này bọn họ đang tập trung vào Dedicated Worker và chỉ gọi nó bên dưới cái thương hiệu Web Workers hoặc Worker

Web Workers vận động như vậy nào?

Web Workers được thực hiện bên dưới dạng đuôi .js cùng được đính hẳn nhiên request HTTPhường bất đồng nhất vào website của bạn. Những request này được ẩn hoàn toàn vị Web Worker API

Workers sử dụng message giao diện quy trình nhằm triển khai quá trình chuyển động tuy vậy tuy nhiên. Chúng rất có thể giữ mang đến UI được cập nhật tiên tiến nhất, rất có thể hệ trọng và mượt mà cùng với người dùng một cách hoàn hảo nhất.

Web Workers chạy vào một các bước xa lánh trong trình ưng chuẩn. Do sẽ là code bọn chúng triển khai cần phải đặt trong 1 file riêng biệt biệt. Điều này cực kỳ đặc biệt quan trọng nhé.

Cách chế tác worker cơ bản

var worker = new Worker("task.js");Nếu task.js tồn tại với có thể truy vấn được, trình coi xét đang thiết lập cấu hình một các bước new để download tệp tin bất đồng điệu. Sau Khi quá trình download file hoàn toàn, nó sẽ tiến hành code trong những số đó cùng worker ban đầu thao tác làm việc.

Trong trường phù hợp file lỗi không load được thì trả về 404 với worker đã dừng lại một bí quyết im lặng như chưa tồn tại gì xảy ra.

Xem thêm:

Để bắt đầu sinh sản worker, bạn cần điện thoại tư vấn cách làm postMessage:

worker.postMessage();Giao tiếp của Web WorkerĐể giao tiếp thân một Web Worker với trang của chúng ta thì bạn cần phải thực hiện thủ tục postMessage hoặc kênh phạt sóng (Broadcast channel).

Phương thức postMessage

Các trình phê chuẩn new hỗ trợ object JSON như thể param đầu tiên của phương thức trong khi các trình chu đáo cũ hơn vậy thì chọn string

Dưới đó là ví dụ về một page gồm worker rất có thể tiếp xúc qua lại cùng với nó thế nào bằng phương pháp truyền một object JSON. Truyền string cũng tương tự:

Start computationVà đoạn code của worker:

self.addEventListener("message", function(e) var data = e.data; switch (data.cmd) case "average": var result = calculateAverage(data); // Tính mức độ vừa phải cộng xuất phát điểm từ một array self.postMessage(result); break; default: self.postMessage("Unknown command"); , false);lúc click vào button, trang thiết yếu sẽ Gọi tới postMessage. Dòng worker.postMessage truyền một object JSON vào worker, object đựng thông báo là cmd với data. Worker vẫn xử trí message thông sang 1 message handler đã có định nghĩa.

lúc message mang đến, những thao tác làm việc tính toán thù đích thực sẽ được thực hiện vào worker cơ mà ko ngăn cản sự kiện loop. Worker bình chọn event e được truyền vào cùng xúc tiến y như một hàm Javascript thông thường. Lúc xong Việc hiệu quả sẽ tiến hành trả trở lại mang đến trang chủ yếu.

Trong ngữ chình ảnh của worker, cả self cùng this những sẽ tmê mẩn chiếu mang đến global scope.

Có 2 phương pháp để giới hạn worker: điện thoại tư vấn hàm worker.terminate() từ bên cạnh trang bao gồm hoặc hotline self.close() bên trong worker.

Kênh vạc sóng (Broadcast Channel)

Broadcast Channel y hệt như một API tiếp xúc tổng thể. Nó được cho phép họ broadcast message tới tất cả các ngữ chình ảnh cùng chia sẻ bình thường origin. Tất cả các tab trình săn sóc, iframe hoặc worker ship hàng bình thường origin hoàn toàn có thể phát cùng nhấn message.

// Kết nối mang đến một broadcast channelvar bc = new BroadcastChannel("test_channel");// lấy ví dụ gửi một message đơn giảnbc.postMessage("This is a chạy thử message.");// lấy ví dụ về một sự kiện handler bao gồm chức// năng in message ra consolebc.onmessage = function (e) console.log(e.data); // Ngắt kết nốibc.close()Xem hình minc họa thì bạn sẽ gọi bí quyết hoạt động của Broadcast Channel ví dụ hơn:

*

Broadcast Channel bị giảm bớt cung ứng từ các trình duyệt:

*

Kích thước message

Có 2 cách để gửi message trong Web Workers:

Sao chxay message: message được serialized, sao chép, gửi đi với được de-serialized sinh hoạt đầu tê. Trang web với worker không dùng chung instance, chính vì thế sau cuối là tác dụng sẽ bị trùng lặp ở cả 2 phía. Đa số các trình ưng chuẩn thực hiện kỹ năng này bằng phương pháp encoding/decoding giá trị ở cả 2 phía thành JSON một phương pháp tự động hóa. Đúng nhỏng dự đân oán thì các chuyển động dữ liệu như vậy này bổ sung cập nhật thêm chi phí đáng kể vào Việc truyền tải message. Message càng mập thì thời hạn gửi càng lâu.

Tính năng có sẵn của Web Workers

Web Workder chỉ gồm truy tìm xuất tới một tập hợp nhỏ dại các thiên tài của Javascript bởi vì bản chất nhiều luồng của chính nó, dưới đó là list những tính năng:

Object navigatorObject location (chỉ gọi - read only)XMLHttpRequestsetTimeout()/clearTimeout() với setInterval()/clearInterval()Import script phía bên ngoài thông qua importScripts()Hạn chế của Web Workers

Hơi bi thảm là Web Worker không có quyền truy cập đến một vài tính năng đặc biệt quan trọng của Javascript:

DOM (not thread-safe)Object windowObject documentObject parent

Điều này tức là Web Worker thiết yếu biến hóa DOM (và UI). Nó có thể khá khó khăn, nhưng nếu như khách hàng đang quen cùng với viêc sử dụng Web Worker đúng chuẩn thì bạn sẽ ban đầu áp dụng khả năng "tính tân oán độc lập" của nó trong những lúc những code biến đổi UI đang rất được giải pháp xử lý và chuyển động. Worker đang quan tâm toàn bộ hồ hết phần nặng nề nhọc tập cho bạn cùng khi sẽ ngừng viêc thì chúng ta chỉ cần gửi công dụng ra màn hình hiển thị để cập nhật UI đến phù hợp.

Xử lý lỗi

Giống như code Javascript khác, các bạn sẽ buộc phải giải pháp xử lý lỗi lúc Web Worker phun ra. Nếu có lỗi xẩy ra trong quy trình worker thực thi, ErrorEvent sẽ được bắn. Interface này đã bao gồm 3 trực thuộc tính hữu ích cho việc tìm kiếm ra bạn đang không đúng nơi nào:

filename: thương hiệu của worker script gây ra lỗilineno: số của dòng tạo ra lỗimessage: biểu thị lỗi

Ví dụ:

function onError(e) console.log("Line: " + e.lineno); console.log("In: " + e.filename); console.log("Message: " + e.message);var worker = new Worker("workerWithError.js");worker.addEventListener("error", onError, false);worker.postMessage(); // Khởi tạo worker cơ mà không truyền messageself.addEventListener("message", function(e) postMessage(x * 2); // Intentional error. "x" is not defined.;Tại đây các bạn thấy rằng chúng ta tạo nên worker cùng ban đầu listen sự khiếu nại error.

Bên vào worker (file workerWithError.js) bọn họ cố ý tạo thành một exception bằng phương pháp nhân x cùng với 2 trong những lúc x không hề mãi mãi trong scope đó. Exception được phun ra lúc khởi chế tác script cùng hàm onError được Gọi với công bố về lỗi.

Trường hòa hợp đề nghị thực hiện Web Workers

Cho mang lại hiện giờ thì họ sẽ phân tích về ưu điểm và tinh giảm của Web Workers. Cùng xem những ngôi trường hơp nào thì dùng bọn chúng là tốt nhất:

Mã hóa (Encryption): Mã hóa end-to-kết thúc (E2EE) ngày càng phổ biến bởi sự tăng thêm nghiêm ngặt về các cơ chế của dữ liệu nhạy bén và cá nhân. Mã hóa rất có thể tương đối tốn thời gian, đặc biệt quan trọng giả dụ có rất nhiều tài liệu rất cần được mã hóa liên tiếp (trước khi gửi về VPS chẳng hạn). Đây là 1 trong những trường hòa hợp trong đó Web Worker là gạn lọc cực tốt do nó không yêu cầu truy tìm xuất cho DOM hay những máy không giống, chỉ đơn thuần là thuật toán thù mã hóa. Một khi đã có đẩy vào worker xử trí, nó sẽ hoạt động khôn cùng trơn tru và không ảnh hưởng mang đến đòi hỏi của người dùng.Tải trước dữ liệu: Để buổi tối ưu trang web hoặc webphầm mềm với nâng cấp thời hạn loading, chúng ta cũng có thể dựa vào vả Web Workers để load với lưu tài liệu trước cùng áp dụng chúng về sau khi cần mang lại. Web Workers tốt nhất trong trường thích hợp này do nó ko hình ảnh đào bới UI, ko y như lúc ta cần sử dụng nhưng mà không có workers.Progressive sầu Web Apps: Chúng rất cần phải load thiệt nhanh kể cả khi liên kết mạng không ổn định. Nghĩa là tài liệu rất cần phải được lưu bên trên trình chăm chút. IndexDB hoặc mọi API tựa như cung ứng xuất sắc khoản này. Về cơ bản thì tàng trữ sinh hoạt phía client là quan trọng. Để có thể thực hiện nhưng mà ko gây cản trở mang đến UI, công việc cần được được ngừng trong Web Workers. Trong trường đúng theo của IndexDB, gồm một API bất nhất quán cho phép chúng ta làm việc này mà lại ko cần sử dụng workers, mặc dù cũng có một API đồng hóa trước đây (hoàn toàn có thể sẽ được reviews lại) chỉ được phép chạy phía bên trong workers.Kiểm tra chính tả (Spell checking): một cỗ spell checker cơ phiên bản hoạt động như sau: công tác đã hiểu một file tự điển cùng với danh sách những trường đoản cú đúng thiết yếu tả. Từ điển sẽ được parse thành lá tìm kiếm tìm (tìm kiếm tree) để hoàn toàn có thể tìm kiếm kiếm vnạp năng lượng bạn dạng tác dụng. Lúc một tự được chuyển vào checker, công tác sẽ kiểm soát nếu như nó mãi mãi trong cây tìm kiếm kiếm. Nếu trường đoản cú đó không tồn tại, chương trình sẽ cung cấp tự thay thế bằng phương pháp đổi khác cam kết từ sửa chữa và khám nghiệm nếu như kia là một trong những trường đoản cú vừa lòng lệ ví như nó là từ bỏ nhưng user ao ước viết ra. Tất cả quá trình này rất có thể tiện lợi giảm mua đến khối hệ thống bởi Web Workers và user rất có thể gõ chữ, viết câu cơ mà không gây cản trở cùng với UI trong những khi worker thực hiện tất cả các phần tìm kiếm kiếm cùng đưa ra khuyến cáo.

Hiệu năng với độ tin tưởng là vô cùng đặc trưng đối với team SessionStack. Lý vì là vì một Lúc gắn vào SessionStaông chồng vào web app của khách hàng, chương trình vẫn bắt đầu lưu lại đầy đủ vật dụng tự đổi khác bên trên DOM cùng ảnh hưởng người dùng cho các request mạng, exception không được xử trí với những thông báo lỗi. Tất cả tài liệu được truyền về mang đến hệ thống của lịch trình vào thời gian thực để rất có thể có thể chấp nhận được các bạn chạy lại các issue từ bỏ webtiện ích dưới dạng Clip cùng xem thử điều gì đang diễn ra cùng với user. Tất cả vấn đề đó được triển khai với độ trễ về tối thiểu và không tồn tại tác động cho tính năng của app của doanh nghiệp.

Đây là nguyên nhân nhưng team tác giả đang đưa toàn cục xúc tích và ngắn gọn (phần nào có thể) từ bỏ cả tlỗi viện quản lý điều hành và phần player vào Web Worker để cách xử trí các công viêc nặng trĩu download với CPU nlỗi băm để chứng thực tính toàn vẹn dữ liệu, render, vân vân.

Công nghệ website thường xuyên thay đổi với cải cách và phát triển vì vậy team người sáng tác đã đi thêm 1 chặng đường lâu năm nhằm bảo đảm an toàn SessionStachồng thật dịu và không khiến ảnh hưởng mang lại tính năng của người tiêu dùng.

Có bạn dạng cần sử dụng thử miễn phí nếu bạn có nhu cầu test SessionStaông xã.

*