Analysis of Javascript loading-JS Tutorial-php.cn

This article mainly introduces the analysis of Javascript loading, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

1. Browser loading

(1) Synchronous loading

In a web page, the way the browser loads js files is through the tag. As shown below:

//内嵌脚本 // code here! //加载外部脚本 Copy after login tag is very convenient. As long as it is added, the browser can read and run it. However, when reading, the browser follows the appearance of the tag. Sequentially, Javascript files are read and then run immediately. As a result, when multiple files depend on each other, the file with the smallest dependency must be placed at the front and the file with the greatest dependency must be placed at the end. Otherwise, the code will report an error. , I believe everyone has a deep understanding of it when using bootstrap. On the other hand, browsers load the tag in synchronous mode, which means that the page waits for the JavaScript file to be loaded before running the subsequent code. When there are many tags, the browser cannot read them at the same time. It must read one and then the other, which causes the reading time to be greatly extended, the page response is slow, and the user experience is affected. Synchronous mode, also known as blocking mode, will prevent the browser from subsequent processing and stop subsequent parsing. Only when the current loading is completed can the next operation be performed, so synchronous execution is safe by default. But if there are behaviors such as outputting document content, modifying DOM, redirection, etc. in js, it will cause blocking. Therefore, it is generally recommended to place the tag at the end of , which can reduce page blocking.

(2) Asynchronous loading

In order to solve this problem, ES5 uses the DOM method to dynamically load JavaScript script files .

function loadScript(url) { var script = document.createElement("script"); script.type="text/javascript"; script.src=url; document.body.appendChild(script); } Copy after login This method creates a new tag and sets its src attribute to read the javacript file asynchronously

This will not cause page blocking, but there will be another The problem is, if other script files depend on it, there is no guarantee when this script will be loaded.

Another loading method is to use the defer and async attributes to make the script load asynchronously. When the rendering engine encounters this line of command, it will start to download the external script, but will not wait for it to be downloaded and executed, but will directly execute the following commands. The difference between defer and async is: defer will not be executed until the entire page is rendered normally in memory (the DOM structure is completely generated and other scripts are executed); async once the download is completed, the rendering engine will interrupt the rendering and execute this script Later, continue rendering. That is, defer is executed after rendering, and async is executed after downloading. In addition, if there are multiple defer scripts, they will be loaded in the order in which they appear on the page, while multiple async scripts cannot guarantee the loading order.

# EE9 and below have some quite bad errors in the delay implementation, resulting in the order of execution cannot be guaranteed. If you need to support <= IE9, I recommend not using defer, and if execution order is important, include the script without attributes.

Copy after login How to choose defer and async. If the script used is a module and does not depend on any other script files, use async; if the script depends on other scripts or is dependent on other scripts, use defer; if the script file is small and is dependent on an async script, use internal Embed script puts this file in front of all async scripts.

Another method is asynchronous loading of the onload event.

Due to the dynamic nature of Javascript, there are many asynchronous loading methods: XHR Injection, XHR eval, Script In Iframe, document.write("<script type='text/javascript' src=' '") Etc.;

XHR injection: Get Javascript through XMLHttpRequest, and then create a script element and insert it into the DOM structure. After the ajax request is successful, set script.text to the responseText returned after the request is successful.

var insertJS = function(){ alert($); }; var iframe = document.createElement("iframe"); document.body.appendChild(iframe); var doc = iframe.contentWindow.document;//获取iframe中的window doc.open(); doc.write(" var insertJS = function(){}; "); doc.close(); Copy after login 2. Lazy loading

有些JS代码在某些情况下需要使用，并不是页面初始化的时候就要用到。延迟加载就是为解决这个问题。将JS切分成许多模块，页面初始化时只将事件处理程序添加到UI元素上，然后其它JavaScript代码的加载延迟到第一次用户交互或者其他条件需要用到的时候再加载。类似图片的懒加载。这样做的目的是可以渐进式地载入页面，尽可能快地为用户提供目前需要的信息，其余部分的内容可以在用户浏览该页面时在后台载入。

JavaScript的加载分为两个部分：下载和执行脚本，异步加载只解决了下载的问题，但是代码在下载完成后就可能会立即执行，在执行过程中浏览器储与阻塞状态，响应不了任何需求。为了解决JavaScript延迟加载的问题，可以利用异步加载缓存起来，所以不会立即执行，然后在第一次需要的时候再执行。

第二部分内容的载入可以用创建动态脚本的形式：

window.onload = function() { var script = document.createElement("script"); script.type="text/javascript"; script.src="demo.js"; document.documentElement.firstChild.appendChild("script"); } Copy after login 3. 按需加载

可以通过创建一个require方法，包含需要加载的脚本名称和附加脚本加载完成后需要执行的回调函数。

function require(file, callback) { var script = document.getElementsByTagName("script")[0]; var newjs = document.createElement("script");

newjs.onload= function() { callback(); }; newjs.src=file; script.parentNode.insertBefore(newjs, script); } Copy after login 以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！