你的位置:首页 > Java教程

[Java教程]高性能javascript学习笔记(一)


高性能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代码的推荐做法:两步

  1. 先添加动态加载所需的代码,越少越好;
  2. 然后加载初始化页面所需的剩余的代码。

方法一:

<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方式