Javascipt is slowly becoming the dominant and the most popular programming language today, a premise for a series of front-end framwork, famous plugins that are slowly changing the world. Therefore, learning and understanding this language, only it helps programmers not be afraid of starvation in this competitive environment, when everyone knows how to do, the better will be the winner, it is possible. show through the results that the application they create gives the user experience. In today’s full text article, I will introduce some tools to improve the performance of a javascript program, hoping to help something in the process of working with your JS. (go)
1. Web worker
Web worker is javascript that runs in the background, without affecting the performance of the page.
As you know when executing a script on the HTML page, understand that the web page will be completely frozen until the script is finished, click, select, etc. So the web worker was born to help separate a certain flow of work without affecting the operation of the user, they can freely operate on the site while the other script is still running.
Using the web worker is quite simple:
First you need to check if the web worker is supported on your browser by:
1 2 3 4 5 6 7 | <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> <span class="token punctuation">(</span> Worker <span class="token punctuation">)</span> <span class="token operator">!==</span> <span class="token string">"undefined"</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Yes! Web worker support!</span> <span class="token comment">// Some code.....</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token comment">// Sorry! No Web Worker support..</span> <span class="token punctuation">}</span> |
First we need to initialize a worker with the purpose of running in the background named workder_file.js
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">var</span> i <span class="token operator">=</span> <span class="token number">0</span> <span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">timedCount</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> i <span class="token operator">=</span> i <span class="token operator">+</span> <span class="token number">1</span> <span class="token punctuation">;</span> <span class="token function">postMessage</span> <span class="token punctuation">(</span> i <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token function">setTimeout</span> <span class="token punctuation">(</span> <span class="token string">"timedCount()"</span> <span class="token punctuation">,</span> <span class="token number">500</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">timedCount</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
Next, after having a simple background task, we create a web worker object.
1 2 3 4 | <span class="token keyword">if</span> <span class="token punctuation">(</span> <span class="token keyword">typeof</span> <span class="token punctuation">(</span> w <span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token string">"undefined"</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> w <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Worker</span> <span class="token punctuation">(</span> <span class="token string">"worker_file.js"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
The above code checks to see if the worker does not yet exist, then initialize the worker and specify the path to the worker to run, here is the file worker_file.js that is responsible for calculating and returning the output for us to display. go to the web. The display on the web we can do the following:
1 2 3 4 | w <span class="token punctuation">.</span> <span class="token function-variable function">onmessage</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> event <span class="token punctuation">)</span> <span class="token punctuation">{</span> document <span class="token punctuation">.</span> <span class="token function">getElementById</span> <span class="token punctuation">(</span> <span class="token string">"result"</span> <span class="token punctuation">)</span> <span class="token punctuation">.</span> innerHTML <span class="token operator">=</span> event <span class="token punctuation">.</span> data <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> |
To create a running worker stop we can execute the command terminate it as follows:
1 2 | w <span class="token punctuation">.</span> <span class="token function">terminate</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
So we can use web worker to completely separate the calculation and display, after calculating the web worker will return the result by postMessage (), the rest will be outside. Retrieve and display it on the page. Quite simple, huh 
2. Deferred Scripts
Keep turning around this blocking-script, because it is the weakness that makes your website block when a script is processed, so we can also completely stop this execution until the html. The load is finished using the defer keyword when declaring a javascipt file
1 2 | <span class="token operator"><</span> script type <span class="token operator">=</span> <span class="token string">"text/javascript"</span> src <span class="token operator">=</span> <span class="token string">"file1.js"</span> defer <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> script <span class="token operator">></span> |
And in the process of downloading the js file it also does not block your website.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> title</span> <span class="token punctuation">></span></span> Script Defer Example <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> title</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token attr-name">defer</span> <span class="token punctuation">></span></span> <span class="token script language-javascript"> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">"defer"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token punctuation">></span></span> <span class="token script language-javascript"> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">"script"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token punctuation">></span></span> <span class="token script language-javascript"> window <span class="token punctuation">.</span> <span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">"load"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> </span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
In the example above, we will show 3 times the alert, if the browser does not support defer, the execution order will be defer -> script -> load, while in the browser support defer, the order will be script-> defer- > load. The defer is executed before the onload event is fired.
3. Dynamic Script Elements
The DOM allows us to create dynamic HTML elements using javascript.
1 2 3 4 5 | <span class="token keyword">var</span> script <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">createElement</span> <span class="token punctuation">(</span> <span class="token string">"script"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> script <span class="token punctuation">.</span> type <span class="token operator">=</span> <span class="token string">"text/javascript"</span> <span class="token punctuation">;</span> script <span class="token punctuation">.</span> src <span class="token operator">=</span> <span class="token string">"file1.js"</span> <span class="token punctuation">;</span> document <span class="token punctuation">.</span> <span class="token function">getElementsByTagName</span> <span class="token punctuation">(</span> <span class="token string">"head"</span> <span class="token punctuation">)</span> <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">appendChild</span> <span class="token punctuation">(</span> script <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
The code in file1.js will load when its element is added to the page. What is special about this type of load is that it does not block page handlers, but the problem with this technique is that it only works if the js file operates independently of any script. Any other, If this script is the interface used in a different script then all we need to do will be tracking to see when this file has finished loading. The job seems a bit more difficult.
1 2 3 4 5 6 7 8 9 | <span class="token keyword">var</span> script <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">createElement</span> <span class="token punctuation">(</span> <span class="token string">"script"</span> <span class="token punctuation">)</span> script <span class="token punctuation">.</span> type <span class="token operator">=</span> <span class="token string">"text/javascript"</span> <span class="token punctuation">;</span> <span class="token comment">//Firefox, Opera, Chrome, Safari 3+</span> script <span class="token punctuation">.</span> <span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">alert</span> <span class="token punctuation">(</span> <span class="token string">"Script loaded!"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> script <span class="token punctuation">.</span> src <span class="token operator">=</span> <span class="token string">"file1.js"</span> <span class="token punctuation">;</span> document <span class="token punctuation">.</span> <span class="token function">getElementsByTagName</span> <span class="token punctuation">(</span> <span class="token string">"head"</span> <span class="token punctuation">)</span> <span class="token punctuation">[</span> <span class="token number">0</span> <span class="token punctuation">]</span> <span class="token punctuation">.</span> <span class="token function">appendChild</span> <span class="token punctuation">(</span> script <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
4. XMLHttpRequest Script Injection
One of the nonblocking script approaches is to get js code through an XMLHttpRequest (XHR) object and then inject it into the page.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token keyword">var</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> xhr <span class="token punctuation">.</span> <span class="token function">open</span> <span class="token punctuation">(</span> <span class="token string">"get"</span> <span class="token punctuation">,</span> <span class="token string">"file1.js"</span> <span class="token punctuation">,</span> <span class="token boolean">true</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> xhr <span class="token punctuation">.</span> <span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> xhr <span class="token punctuation">.</span> readyState <span class="token operator">==</span> <span class="token number">4</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> xhr <span class="token punctuation">.</span> status <span class="token operator">>=</span> <span class="token number">200</span> <span class="token operator">&&</span> xhr <span class="token punctuation">.</span> status <span class="token operator"><</span> <span class="token number">300</span> <span class="token operator">||</span> xhr <span class="token punctuation">.</span> status <span class="token operator">==</span> <span class="token number">304</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> script <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">createElement</span> <span class="token punctuation">(</span> <span class="token string">"script"</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> script <span class="token punctuation">.</span> type <span class="token operator">=</span> <span class="token string">"text/javascript"</span> <span class="token punctuation">;</span> script <span class="token punctuation">.</span> text <span class="token operator">=</span> xhr <span class="token punctuation">.</span> responseText <span class="token punctuation">;</span> document <span class="token punctuation">.</span> body <span class="token punctuation">.</span> <span class="token function">appendChild</span> <span class="token punctuation">(</span> script <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> xhr <span class="token punctuation">.</span> <span class="token function">send</span> <span class="token punctuation">(</span> <span class="token keyword">null</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
The above code will send a Get request to file1.js then use the onreadystatechange event to check readyStatus, and check the HTTP status code to see if it has success 200 or get a response from the cache with status 304. If all is verified an element New will be created and script will be executed. This way you can completely load a script without executing it.
5. Conclusion
Above are some ways to deal with javascipt to improve your website performance, although there are many difficulties but we can continue to learn to apply to our web application. Hope to bring you better results in improving your work skills as well as performance and find the best measures suitable for your application.