2. IT
    3. js 文件的加载解析

    js 文件的加载解析

    xiaoxiao2021-03-25  64

    js文件的加载特点：

        1. js文件加载完成后会立即进行执行。（可能后面的内容会对 js 文件有取节点的作用，但是如果js在前面则如发取道）

    2.执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）。原因：因为浏览器需要一个稳定的DOM树结构，而JS中很有可能有 代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现。

    减少 JavaScript 对性能的影响的方法：

    将所有的script标签放到页面底部，也就是body闭合标签之前，这能确保在脚本执行前页面已经完成了DOM树渲染。尽可能地合并脚本。页面中的script标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。采用无阻塞下载 JavaScript 脚本的方法：  （1）使用script标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）；  （2）使用动态创建的script元素来下载并执行代码； js脚本defer属性和async属性的对比：

      1.如果没有derfer 和 async属性的脚本，该脚本会在脚本文件加载完毕执行，而且也会阻止后面内容的加载。

          2.只有derfer属性的时候，脚本文件的加载过程会和后续HTML文档加载异步进行。但是脚本文件会在所有的元素解析完成之后进行执行.DOMContentLocded事件触发之前完成。

         3.有async属性的脚本，脚本文件的加载过程会和后续HTML文档加载异步进行，但是该脚本加载完之后就会执行，即使在文档中前面的脚本还没有执行。只要后面的脚本加载完成就会执行。

            在这里绿色的线代表文档的加载    蓝色的线代表脚本的加载  红色代表脚本文件的执行

    async它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

    从实际的角度出发：将所有的脚本文件要放在body元素关闭之前。这是对于旧版本浏览器的唯一优化

    转载请注明原文地址: https://ju.6miu.com/read-36730.html

    技术

    最新回复(0)