JavaScript的加载和执行（Loading and Execution）
JavaScript的阻塞特性
- 当浏览器遇到JavaScript代码段时（不管是内嵌还是外链），由于不确定其是否会进行DOM操作，所以都会等待脚本的解析和执行完成后，再往下运行。此时页面渲染和用户交互都是被阻塞的，这就是 JavaScript的阻塞特性 。
JavaScript阻塞特性的思考
- 雅虎性能小组对JS代码优化的首要规则就是，通过改变
<script>脚本的位置来减少对页面加载的影响。也就是说将<script>元素放到<body>标签底部，这样页面的CSS和图片等资源文件加载时，就不需要等待JS代码的解析和执行了。 - 除此之外，减少
<script>标签的数量也能改善阻塞的情况- 我们可以合并
<script>代码段，因为浏览器在解析HTML页面时，每遇到一个<script>标签，都会因为执行脚本而导致一定的延时。 - 我们还需要尽可能的合并外链的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);
}
}
}
```
网友评论