高性能 JavaScript 笔记 （一）

加载和执行

1.按顺序加载

可以在 html 任何位置引入 js ，但值得注意的是，浏览器总是先下载 js 再渲染 dom 元素，js 控制 dom 元素时，必须在元素加载完之后才可以正常执行。因此，建议将 js 放在文件末尾，一是保证 dom 元素已经加载完毕，二是在 js 文件较多的情况下，尽可能减少页面延迟。

还建议尽量减少 js 文件数量，避免多此发起链接请求浪费时间。

2.动态脚本元素

代码如下：

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "file1.js";
document.getElementssByTagName("head")[0].appendChild(script);

这段代码被添加到页面时会开始下载 file1.js 文件。但是由于 js 加载文件是异步加载的，所以在下载 file1.js  文件时，不会阻塞页面的其他进程。

js文件是下载一部分立即执行该部分。一般来说不会有什么问题，但是如果代码提供了供其他页面调用的接口时，我们就必须等到js代码下载完之后再执行，那么如何获取它的加载状态呢？可以通过 onload 函数进行监听，script 函数接收完之后会出发一个 load 事件。

var script = document.createElement("script");
script.type = "text/javascript";
script.onload = function(){
    alert("script loaded");
}
script.src = "file1.js";
document.getElementssByTagName("head")[0].appendChild(script);

3.XMLHttpRequest 脚本注入

 

通过 get 请求来获取 js 文件。这样做的好处是，可以自由控制 js 执行时间。