Now WEB applications, including websites, are almost inseparable from JavaScript, and it is safe to say that there is no WEB application that does not use JavaScript. In this article, I’ll summarize some JavaScript optimization tips for WEB rendering speed and performance.
1. Extract JavaScript into a separate file
Extracting scripts as separate.js files has many advantages, including significantly reducing the size of the HTML code.
2. The asynchronous
The async property tells the browser that the script does not affect the DOM or CSSOM and can only be processed after the entire page has loaded and rendered. The async property applies only to scripts placed in separate files.
3. Block the JavaScript
Blocking JavaScript is a script that must be executed before building the CSSOM tree, and the JS script blocks rendering, either as a tag with a SRC attribute or as an inline script.
4. defer
The defer attribute works exactly like the lock script you added before the body end tag. It works because even if a
5. Compress JavaScript scripts
You can minimize any text resource by removing superfluous characters, such as Spaces, tabs, newlines, and even entire comment blocks. JavaScript code can be minimized compared to HTML or CSS code. Thanks to many syntax shortening techniques, we have more possibilities in this area. The names of functions and variables can be converted to single-letter equivalents without changing the meaning of programming functionality. Read more about minimizing text resources and techniques for automating the process.
6. Browser caching (cache-Control, Expires, e-tag)
Once downloaded, the.js file containing the JavaScript code can be saved in the browser’s cache: usually on a local disk. The next time a child page accesses this file, it will not have to download and perform expensive HTTP and download requests again. The server may send a cache-Control or Expires header that tells the browser to copy the file and use the unchanged version for a specified period of time.
7. The compression
JavaScript files are text, and it is well known that text can be compressed using standard data compression algorithms, compression performed on the server side using modules such as Brotli, GZP or Deflate is invisible to the user, and can save up to 80% of traffic. The Google-developed Brotli module or the traditional Deflate or GZIP module should be installed and enabled by default on any server that serves JavaScript files and other text resources (CSS, XML).
8. Remove unused JavaScript code
Sometimes JavaScript scripts are attached to pages that have no functionality, either libraries already used on another child page or functionality that has been withdrawn in a subsequent update.
9. Request caching for external services
If you refer to it repeatedly and know that it won’t change very often, you can store the contents of a JSON or XML file in a temporary variable.
10. The throttle
Throttling techniques can be used when programming lazy-loading mechanisms, including reducing the intensity of the trigger, using simple constructs with conditional statements and setTimeout to cause event listeners to ignore certain events and still work.
conclusion
Taking advantage of page optimization on the JavaScript side is worthwhile because the same functionality implemented in different ways can significantly slow down a page or have no effect on its load time.