in Codex

YUIConf 高性能的javascript

PPT:http://lanyrd.com/2010/yuiconf/sqky/
翻译:greengnn

避免加载缓慢javascript

  • js置于底部
  • 尽可能的合并js
  • 选择一个合适的方式加载js
    1. 动态创建js
    2. 延迟js
    3. 异步js

避免执行缓慢的js

  • 不要让js执行超过50ms
  • 分离过长的js进程
    1. Timers
    2. Web Workers

避免长时间的UI更新

  • 小心repaint和reflow
  • 不在文档上展现复杂的DOM运算
    1. 先把DOM移除,更改后重新添加
    2. 把元素display设置为none,更改后再还原display
    3. 使用DocumentFragment元素,把DOM创建后在一次性展示
  • 把所有的样式变化合并到一组,使用className切换代替style,或者cssText
  • 避免意外的reflow,比如offsetTop,多次使用把他们缓存到变量里。

代码:

/* creat script */
var script = document.createElement("script"),
body = document.body;
script.type = "text/javascript";
script.src = "xhr.js";
body.insertBefore(script,body.firstChild);
console.log("created xhr.js");
/* loadScript */
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
console.log("created");
}
loadScript("xhr2.js",function(){console.log("loaded xhr2.js");});
/* DocumentFragment 减少reflow */
var list = document.body,fragment = document.createDocumentFragment(),i,item;
for (i=0;i<10 ;i++ ) { item = document.createElement("p"); item.innerHTML = "item#"+i; fragment.appendChild(item); } list.appendChild(fragment);

Write a Comment

Comment