《高性能JavaScript》读书笔记①加载和执行

2016-09-17 本文已影响112人梁同学de自言自语

JavaScript的加载和执行（Loading and Execution）

JavaScript的阻塞特性

当浏览器遇到JavaScript代码段时（不管是内嵌还是外链），由于不确定其是否会进行DOM操作，所以都会等待脚本的解析和执行完成后，再往下运行。此时页面渲染和用户交互都是被阻塞的，这就是 JavaScript的阻塞特性 。

JavaScript阻塞特性的思考

雅虎性能小组对JS代码优化的首要规则就是，通过改变<script>脚本的位置来减少对页面加载的影响。也就是说将<script>元素放到<body>标签底部，这样页面的CSS和图片等资源文件加载时，就不需要等待JS代码的解析和执行了。
除此之外，减少<script>标签的数量也能改善阻塞的情况
1. 我们可以合并<script>代码段，因为浏览器在解析HTML页面时，每遇到一个<script>标签，都会因为执行脚本而导致一定的延时。
2. 我们还需要尽可能的合并外链的JavaScript文件。测试发现，下载一个100KB的JS文件比下载四个25KB的JS文件要快，是因为每次HTTP请求相当于重新进行一次Socket连接，会产生性能损耗。

实现Noblocking Scripts（无阻塞的脚本）的几种方式

Deferred Scripts （脚本延迟）
针对JavaScript的阻塞特性，很多人首先想到的办法可能是：能不能先下载JS文件，等页面加载完成后，再去解析和执行引入的JavaScript代码呢？
针对此种设想，HTML4标准为<script>标签提供了defer属性。意味着可以先下载JS文件(同时允许并行下载)，等到DOM加载完成(即onload事件被触发前)，才会执行其中的代码段。
```
<script type="text/javascript" src="file1.js" defer/>
```
注意：该属性只对声明了src属性的<script>标签生效，另外HTML5规范中引入了async属性，和defer属性一样，也是用于异步加载脚本的

Dynamic Script Elements （动态脚本元素）
我们知道DOM(文档对象模型)机制使得我们可以动态的创建、编辑、移动和删除HTML元素，这里面当然也包含<script>元素。也就是说，其实我们是可以通过JavaScript代码来动态构建<script>标签的。

//创建script元素
var script = document.creatElement("script"); 
//指定元素的type属性
script.type = "text/javascript"; 
//指定URL
script.src = "file1.js"; 
//将新的script标签加入到文档头部
document.getElementByTagName("head")[0].appendChild(script);

注意，当新的<script>元素被加入到<head>时，会立即开始下载file1.js文件，并执行其中的JS脚本。这种方式的优势就在于，能够把<script>脚本放在页面<head>区域，避免影页面其他部分的加载。
如果需要监听脚本的下载状态，可以通过onload()方法监听脚本加载完成的状态：

var script = document.creatElement("script");
script.type = "text/javascript";
//js下载完毕后的监听（IE中不可用）
script.onload = function(){
    alert("script loaded!");
};
script.src = "file1.js";
document.getElementByTagName("head")[0].appendChild(script);

但是onload()方法仅在Firefox、Chrome、Opera和Safari3+ 浏览器中支持，如果想在IE浏览器要监听js脚本的下载状态，则可以通过监听<script>元素的readyState状态属性来实现。
readyState有五种取值，但是微软的相关文档表明，在整个<script>元素生命周期中，并非readyState的每个值都会用到。最终表明<script>元素加载完毕的是"loaded"和"complete"两个状态，所以我们要检查这两个状态。

var script = document.creatElement("script");
script.type = "text/javascript";
//js下载完毕后的监听（IE）
script.onreadystatechange = function(){
    if(script.readyState == "loaded" || script.readyState == "complete"){
        alert("script loaded!");
    }
}

由此可见通过动态脚本元素的方式解决JavaScript的阻塞问题时，如果需监听下载状态，还需要针对不同浏览器做封装处理。

//定义公共的js加载方法（有没有觉得这种callback的方式和$.Ajax很类似？）
function loadScript(url,callback){
    var script = document.creatElement("script");
    script.type = "text/javascript";
    //判断如果能获取readyState属性，则表明是IE浏览器
    if(script.readyState){
     script.onreadystatechange = function(){
         if(script.readyState == "loaded" || script.readyState == "complete"){
         script.onreadysatechange = null;
         callback();
     }
     }
    //其他浏览器
    }else{
     script.onload = function(){
     callback();
     }
    }
    script.src = url;
    document.getElementByTagName("head")[0].appendChild(script);
}

//调用
loadScript("file1.js",function(){
 alert("script loaded!");
});

XMLHttpRequest Script Injection （XMLHttpRequest脚本注入）
另一种无阻赛加载脚本的方式，是使用XMLHttpRequest(XHR)对象加载JS脚本
由于XMLHttpRequest脚本注入的方式，由JS脚本的加载以及<script>元素的创建两部分组成，我们就可更加灵活的控制JavaScript脚本，比如先加载，等到需要时候再执行。

//创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//通过GET请求加载file1.js
xhr.open("get","file1.js",true);
//通过XHR对象的onreadystatechange()方法监听readState属性的变化
xhr.onreadystatechange = function(){
//readyState属性表示XHR对象请求的就绪状态：0-请求未初始化；1-请求已建立；2-请求已发送；3-请求处理中；4-响应已完成
if(xhr.readyState == 4){
//status属性表示HTTP请求的状态码：200-(OK)请求成功；304-(Not Modified)从缓存中读取；状态码小于300都表示请求成功
if(xhr.status >= 200 && (xhr.status < 300 || xhr.status == 304)){
//创建script元素
var script = document.creatElement("script");
//指定元素的type属性
script.type = "text/javascript";
//将response响应内容填充到script元素中
script.text = xhr.responseText;
//当把script元素添加到body时，js代码会被立即执行
document.body.appendChild(script);
}
}
}
```

《高性能JavaScript》读书笔记①加载和执行

JavaScript的加载和执行（Loading and Execution）

JavaScript的阻塞特性

JavaScript阻塞特性的思考

实现Noblocking Scripts（无阻塞的脚本）的几种方式

猜你喜欢

热点阅读