高性能javascript学习笔记.docVIP

高性能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支持另外一种实现方式，它会