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);
}
}
}
```