[This video] (https://www.bililibili.com/video/av18682336/) has 15+MB BAS screen scripts that need to be deciphered, which could cause the page card to die for about 7 seconds, during which the UI is frozen and experienced a bad experience, and if it is optimized using WebWorkers to place the resolution in Webworks, it can avoid the page freeze caused by UI thread blocking.

#!

One-way

Use parse to simulate resolution functions

index.js

♪ Protected ♪

This time the page will be stuck to 1s and the output of a ‘diygod’.

Use Web Workers

index.js

♪ Protected ♪

worker.js

♪ Protected ♪

This is one of the most basic uses of WebWorkers, where index.js transfers 1,000 to worker.js, worker.js decipher 1,000 ms in the backstage, then transfer the result ‘DIYgod’ back to index.js, so that it does not take the js main line and avoids the death of the page card.

Embedded Walker

Last step we loaded two js files, index.js and worker.js, citing index.js in HTML, and then index.js will load workingr.js, so what if we don’t want to create a separate Worker file?

index.js

♪ Protected ♪

URL.createObjecturl(blob) will create a DomString, which contains a URL for blob.

Opens the network tab on the console, and you see the browser loading a strange js file like < < PROTECTED_BLONK_9>, the js file about which is exactly the string we’re sending to the worldblob.

This URL is the only one and its life cycle and document binding in the window where it is created will remain valid as long as the page exists.

Use webpack worker-loader

In the last step, we put the js code in a string, which does not split the module and is not conducive to later maintenance, if the project is using webpack, install [worker-loader] (https://github.com/webpack-contrib/worker-loader) to solve this problem.

index.js

♪ Protected ♪

worker.js

♪ Protected ♪

parse.js

♪ Protected ♪

All you have to do is use the worker-loader reference to the worker.js module, and the rest of the worker-loader will help us to process it automatically, and the final result will be similar to the code of our last step.

When comparing to WebWorkers:

index.js

♪ PROTECTED ♪

parse.js (no change)

♪ Protected ♪

This would be easy to maintain without modifying the original resolution module, which is non-intrusive, by adding a workingr.js transit module and changing the call method.

Performance

If I put a calculation into four Workers, would it be four times faster?

No, not only will it not be four times faster, but it will be slower.

WebWorkers is not intended to shorten the calculation time, but to avoid the UI thread freeze. Acts such as creating threads, wiring, transmitting data, etc. would lead to a slightly slower calculation than a single-wire process.

I’ve recorded the time when the first video was deciphered with 100 bullet screens in different worker numbers, seven times taking averages:

The speed of resolution without using Worker is the fastest, one Worker is much slower than the others, and there is no significant difference in the speed of 2,3,4,5 6 Workers, but the number of Workers is increasing and slowing.

And a relatively small number of magazines were tested, and the result was that the speed of the 12,34,5 worker was similar.

Finally, it was decided not to use 2 Workers for the analysis.

Optimizing results is inexhaustible. It does not need to wait for resolution to be completed before other operations can be performed. 。