高性能JavaScript之脚本加载与执行

心已赠人 2021-12-21 10:33 259阅读 0赞

管理浏览器中的JavaScript 代码是个非常棘手的问题，因为代码的加载和执行过程会阻塞浏览器的其他过程，比如用户界面绘制、首屏显示和用户交互等。

*  推荐将所有的 script 标签放到 body 标签的底部，以尽量减少对整个页面下载的影响。
 *  考虑到 HTTP 请求会带来额外的性能和时间上的消耗，下载单个 100kb 的文件比下载 4 个 25kb 的文件要快，所以尽量减少（合并脚本）页面中外连接脚本文件的数量将会改善性能。
 *  HTML 4 为 script 标签定义了一个扩展属性：defer。defer 属性指明本元素所含的脚本不会修改 DOM，虽然会立即下载，但是并不会下载完立即执行，知道 DOM 加载完成（onload 事件被触发前执行）。HMTL 5 新添加了一个 async 属性，也是用于异步加载脚本。async 和 defer 的异同：相同点是都采用并行下载，在下载过程中不会产生阻塞；不同点在于执行时机，async 加载完立即执行，而 defer 需要等到 DOM 加载完后执行。
 *  动态添加脚本元素

var script = document.createElement('script');
    script.src = 'mian.js';
    document.getElementsByTagName('body')[0].appendChild(script);

*  XMLHttpRequest 脚本注入：优点在于可以下载 JavaScript 而不会立即执行