首先,必须熟悉的是雅虎的那一套http://developer.yahoo.com/performance/rules.html英文原版,很详细,当然也可以去网上so中文版的。
下面列出在技术分享会上的一些需要注意的点:
1、引入js最好在文档的底部,当然也要根据具体情况而定。
2、合并脚本,减少HTTP请求数量,我们一般有两种解决方案:
①.在发布之前,就把多个脚本合并成一个脚本。
②.在请求的时候,src="1.js,2.js……",这样通过一次http请求,就能加载多个js文件
3、无阻塞的脚本
①.defer属性,但是有兼容性的问题,只有IE支持此属性。
②.动态脚本:loadscript 一般来说,在 HTML 页面中应该只加载基本的 JS 文件,以使得页面能够尽快地显示出来,然后在页面载入完毕之后,利用 onload 事件再载入其它 JS 文件,动态加载 JS 文件的方法很简单,可以用下面的函数来实现:
var loadScript = function(url) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.body.appendChild(script); };
这样增加的 script 元素,它的内容不一定是立即下载并执行的。如果我们想知道这个 JS 文件何时已经下载并执行完毕,然后运行后面的依赖代码,可以用下面的方法来判断(下面例子来自《高性能 JavaScript 编程》):
var loadScript = function(url, callback) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; if (script.readyState) { script.onreadystatechange = function() { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; callback(); } }; } else { script.onload = function() { callback(); }; } document.body.appendChild(script); };
其中 IE 浏览器不支持 script 元素的 onload 事件,因此我们改用 onreadystatechange 事件
③.XHR脚本注入:分离了下载和执行,但不能跨域,意味着不能从CDN下载文件。
4、理解作用域链、理解闭包,注意IE闭包内存泄漏等。
http://www.ibm.com/developerworks/web/library/wa-memleak/?S_TACT=105AGX52&S_CMP=cn-a-wa
http://msdn.microsoft.com/en-us/library/bb250448.aspx
尽量减少with和eval的使用,try catch也会改变作用域。
5、访问DOM需要注意,HTML集合是一个非常昂贵的东西,每一次访问HTML集合都需要重新计算一次,所以我们在使用html集合的一些属性的时候,最后把他用变量保存下来,而不是每次都去访问。
6、重绘重排:dom树、渲染树。每次页面布局和几何属性改变时都需要重排
①.合并dom和样式的修改
②.离线操作dom
③.缓存布局信息
7、UI线程
①.使用定时器让出时间片
②.web workers,实现多线程,独立于UI线程,专注于处理数据。