Shulou(Shulou.com)06/01 Report--

1. JS blocking

When downloading JS files, all browsers will block other activities on the page, including the download of other resources and the presentation of page contents, and so on. Only when JS downloads, parses, and executes, will the later operations be carried out. In modern browsers, CSS resources and image p_w_picpath resources are downloaded in parallel. The default number of parallel loads in IE6 is 2, and the default number of parallel loads after IE6 and in other browsers is 6.

After the browser receives the HTML document from the server, and converts the HTML into a DOM tree in memory, if the CSS file is introduced and p_w_picpaths is added during the conversion process, the CSS file and images will be loaded in parallel while the document is loaded. But JS is different, because the browser needs a stable DOM tree structure, and there is likely to be code in JS that directly changes the DOM tree structure, such as using [xss_clean] or appendChild, or even directly using location.href to jump. Browsers need to rebuild the DOM tree in order to prevent JS from modifying the DOM tree, so it will block other downloads and rendering. Without using asynchronous loading (async) or lazy loading (defer), subsequent JS files can be loaded only after a JS file has been loaded and parsed. Parallel loading of scripts can be realized by using deferred scripts and asynchronous scripts. The following discussion is in the absence of these two attributes.

(1) blocking of embedded scripts

The js code written directly in the HTML document is embedded JS, and the embedded script does not need to be loaded and can be executed directly, so when the page has an embedded script, it can be executed directly, resulting in blocking the loading of all resources and the rendering of the page.

Embedded JS blocks the presentation of all content on the page. Blogjavaspan CSDNspan blog Park span ABCspan AAAspan / / cycle for 5 seconds var n = Number (new Date ()); var N2 = Number (new Date ()); while ((N2-n))

< (6*1000)){n2 = Number(new Date());} MSNspan GOOGLEspan YAHOOspan 上面的内嵌脚不仅会阻塞第二个ul的展示，也会阻塞第一个ul的展示，页面在5秒前是一片空白，当延迟结束后才展现所有的内容 （2）外联脚本阻塞 外联脚本不一样，外联脚本只有当页面加载到该之后才会加载外联脚本，所以外联脚本只会阻塞其后面的内容的呈现以及资源的下载，在下面的代码中，页面会先展示一部分内容，后面一部分内容在5秒后展现 外联JS文件只会阻塞后面的资源的下载和呈现 blogjavaspan CSDNspan 博客园span ABCspan AAAspan MSNspan GOOGLEspan YAHOOspan 二、嵌入JS导致CSS阻塞加载的问题 的 Title fireBug中的时间栈： 谷歌中的事件栈： 在上图中CSS和图片是并行下载的，通过时间线可以看出，后面的图片并没有等到CSS文件完全加载完后在加载。 （2）内嵌脚本导致CSS阻塞页面 Title function a(){};

Time stack in fireBug:

Time stack in Google:

Through the above image in the fox fire due to the role of embedded script to make the picture have to wait until the complete loading of css after loading, that is, CSS blocked the loading of the image. The essence is that the browser maintains the order of CSS and JS in the HTML, that is, the CSS file that appears in front of the JS needs to be loaded and parsed before the embedded JS is executed, and the embedded JS will block the following content.

(2) Outreach script

Title

Outreach scripts block the loading of later resources, but neither inline nor outreach scripts are blocked in Google browser

Third, in order not to block the location of the page script

(1) reduce the occurrence of merge scripts as much as possible

(2) try to use the outreach script and place the script at the bottom

(3) use deferred scripts and asynchronous scripts

(4) embedded scripts are placed to be executed in _ window.onload

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.