Performance Level from BigStock
The web page development is following the assumption that the web page can be rendered almost correctly without JS errors, even if all JS files are interrupted. Simply speaking, deferring JS execution follows these 2 rules,
The following code snippet for a master page indicates how we do JS deferring in development.
In development, usually some nested web pages or modules depend on some external JS files or JS code execution. In this case, the variables "_lazyLoadScripts" and "_lazyExecutedCallbacks" are used, which are defined in the head of master page as the code snippet above.
See the following code snippet about how these two variables work in a nested page or module.
The pushed JS execution in "_lazyExecutedCallbacks" and inserted external JS files in "_lazyLoadScripts" are all executed in "website-lazy-load.js" as following code snippet.
- A reasonable process to develop a web page is that first write HTML and CSS. Start to write JS for animation or other purposes after the web page works in browsers as the expectation.
- Don't bind events on HTML elements like onclick="...", but do it when the document is ready. This helps that there is no JS error if users click a button before JS files are loaded.
- If there are some external JS files you have to load site widely, write them in "website-lazy-load.js" and load them dynamically, such as Google Analytics tracking JS file, Google AdSense JS file, etc.
- This approach works for external CSS files as well, but don't do it for main CSS file.