高性能javascript学习笔记(一)
第一章 加载和执行
<script>标签每次出现都让页面等待脚本的解析和执行,无论当前javascript代码是内嵌的还是包含在外链文件中的,都必须停下来等待脚本执行完成之后才继续页面的下载和渲染,用户的交互。
因为当遇到<script>标签时,HTML页面无法获知javascript代码会不会该改变页面的内容,因此页面会停止下载和渲染,等待执行完javascript代码之后才继续。
1、 脚本位置
浏览器在解析到<body>之前不会渲染页面的任何部分,js文件下载之后还有一段延时用于执行,在不能并行下载的浏览器中很耗时,IE8,Firefox3.5,Safari4和Chrome2允许并行下载javascript文件,但是仍然会阻塞其他资源下载和页面渲染。
因此尽可能的将的<script>标签放到<body>标签的底部,减少对整个页面下载的影响。
2、组织脚本
每个<script>标签初始下载时都会阻塞页面渲染,应该减少页面包含的<script>标签数,包括内嵌脚本和外链脚本。
内嵌脚本放在外链样式<link>标签之后,内嵌脚本为了在执行时获得最精确的样式信息,会阻塞页面渲染而去等待样式表的下载,因此不要把内嵌脚本紧跟在<link>标签之后。
外链脚本:HTTP请求会带来额外的性能开销,因此下载单个100KB的文件比下载4个25KB的文件快,减少页面中外链脚本文件的数量有助于改善性能。
大型网站依赖多个javascript脚本文件,我们可以将多个javascript文件合并为一个文件,只引用一个<script>标签,减少性能消耗。
文件合并工作可以通过离线打包工具或者类似Yahoo!combo handler的实时在线服务实现。
雅虎提供了合并处理器。通过使用指定文件(一个或多个)合并处理后的URL来获取任意数量的YUI文件。
3、无阻塞的脚本
减少javascript文件大小并限制HTTP请求数只是优化web的第一步,下载单个的较大的javascript文件只请求一个HTTP,但是会锁死浏览器一大段时间,阻塞页面。所以需要向页面中逐步加载javascript文件,这样某种程度上不会阻塞浏览器。
无阻塞的秘诀:在页面加载完成后才加载javascript代码,就是window对象的load事件触发之后再下载脚本。
1)延迟的脚本
HTML4为<script>标签定义了一个扩展属性:defer。该属性只在IE4和Firefox3.5的浏览器中支持,在其他浏览器,defer会被直接忽视。
defer属性指明本元素所含的脚本不会修改DOM,代码可以安全的延迟执行。
外链
<script type = "text/javascript" src = "file.js" defer></script>
内嵌:
<script defer> alert(defer)</script>
任何带defer属性的<script>元素在DOM完成加载之前都不会执行,无论是内嵌还是外链。
可以放在文档的任何位置,对应的javascript文件在页面解析到<script>标签时才开始下载,但是不会执行,直到DOM加载完成(onload事件被触发之前)。
带有defer属性的javascript文件下载时不会阻塞浏览器其他的进程,它可以和页面中的其它资源并行下载。
若是目标浏览器只是IE和Firefox3.5,可以很好的延迟,但若是兼容其他则不可取。
2)动态脚本元素
使用DOM动态的创建script标签:
var script = document.createElement("script");script.type = "text/javascript";script.src = "file.js";document.getElementByTagName("head")[0].appendChild(script);
技术重点:无论何时开始下载,文件的下载和执行都不会阻塞页面其他元素的进程,甚至可以将代码放到<head>区域也不会影响页面其他部分。
将新创建的<script>标签添加到<head>标签中比添加到<body>中保险。
该元素在被添加到页面时下载,下载动态脚本文件返回的代码,会被立刻执行(除了Firefox和Opera会等待此前所有的动态脚本节点执行完毕,之后才执行)。
将script加入head之后我们不能马上调用其中的js。因为浏览器是异步加载这个js文件的,我们不知道他什么时候加载完,非IE浏览器会在<script>元素接收完成时触发一个loadhi见,因此可以监听此事件来获得脚本加载完成时的状态。
IE支持另外一种实现方式,它会触发一个readystatechange事件,<script>元素提供一个readyState属性,它的值在外链文件下载的过程的不同阶段会发生变化,有五种值:
“uninitialized”初始状态
“loading”开始下载
“loaded”下载完成
“interactive”数据完成下载但尚不可用
“complete”所有数据已准备就绪
兼容标准和IE的方法:
callback()是完成接js文件加载后的回调函数
function loadScript(url,callback){ var head= document.getElementsByTagName('head')[0]; var script= document.createElement('script');
script.type= 'text/javascript'; //IE if(script.readyState){ script.onreadystatechange = function () { if (this.readyState == 'complete' || script.readyState == "loaded") {
script.onreadystatechange = null; callback(); } }; }else{//其他浏览器 script.onload = function(){ callback(); }; } script.src = "url"; head.appendChild(script);}
3)
使用
首先创建一个
例子:
var xhr = new "get","file.js",true);xhr.onreadystatechange = function(){ if(xhr.readySate == 4){ //2xx表示有效响应,304表示从缓存中读取 if(xhr.status >= 200&&xhr.status < 300 || xhr.status == 304){ var script = document.createElement("script"); script.type = "text/javascript"; //用text相当于创建一个带有内联脚本的<script>标签 script.text = xhr.responseText; document.body.sppendChild(script); } }};xhr.send(null);
主要优点:
- javascript文件不会自动执行,你可以下载javascript文件但是不执行它,等到准备好的时候再执行。
- 同样的代码在主流浏览器中都能执行。
缺点:不能跨域请求js文件。大型的web通常不是采用XHR脚本注入
4)无阻塞模式(推荐)
向页面中添加大量javascript代码的推荐做法:两步
- 先添加动态加载所需的代码,越少越好;
- 然后加载初始化页面所需的剩余的代码。
方法一:
<script type="text/javascript" src = "loader.js"></script>//上面代码引入loadScript函数<script type="text/script"> //"he-rest.js"剩余的javascript代码 loadScript("the-rest.js",function(){ Application.init(); })</script>//将这段代码放到</body>闭合标签之前。
方法二:直接将loadScript函数嵌入页面,产生一次HTTP请求。
放到下面代码之前:
<script type="text/script"> ///*loadScript函数*/ ......... loadScript("the-rest.js",function(){ Application.init(); })</script>
5)YUI3方式
6)LABjs方式
原标题:高性能javascript学习笔记(一)
关键词:JavaScript