最近读过《高性能javascript》,记录如下: PS: 没有什么JS代码会重要到可以影响用户体验的程度 1. 由于浏览器在执行js代码时,会阻塞其他资源的下载 2. 无阻塞的脚本 * 延迟的脚本(defer) + 并不是理想的跨浏览器解决方案 * 动态脚本元素 + 通过动态创建script元素来获取脚本 * XHR脚本注入 + 通过ajax请求获取js,然后动态创建script元素,并将responseText附加到script中 + 不能跨域 PS:推荐学习开源组件LABjs(开源无阻塞脚本加载工具,可以管理不同脚本的依赖关系) 3. 数据访问相关问题 * 改变作用域链 ** with和try+catch语句 ** 使用with语句时,运行期山下文的作用域链临时被改变了。这时一个新的可变对象被创建,它包含了参数指定的对象的所有属性。这个对象被推入所用域链的头部,这意味着函数的所有局部变量现在处于第二个所用域链对象中。因此访问代价变得更高。 ** try catch语句具有同样的问题,不过它是非常有用的语句,不建议完全避免。 * 缓存对象成员 * 访问直接量和局部变量的速度最快,相反,访问数组元素和对象成员相对较慢 * 嵌套的对象成员会明显影响性能,尽量少用 * 属性或者方法在原型链中的位置越深,访问它的速度越慢 4. dom编程 * HTML集合一直与文档保持着连接,每次需要最新信息时,都会重复执行查询的过程,哪怕是获取集合里的元素个数 * 遍历dom树中节点时,推荐使用nextSibling(IE6、7十分推荐) * 最小化dom访问次数 * 小心处理HTML文档集合,因为它实时连系着底层文档 * 如果可以的话,使用更快的API(比如:querySelectorAll, firstElementChild) * 留意重绘和重排;批量修改样式时,“离线”操作dom树,使用缓存,并减少访问布局信息的次数 PS: 有关重绘和重排请参考: * 使用事件委托来减少时间处理器的数量(主要利用冒泡原理)
5. 算法和流程控制 * for in 循环的每次迭代都会产生更多开销(建议不要使用for in遍历数组成员) * js引擎支持的递归数量与js调用堆栈大小直接相关,只有ie例外,它的调用栈于系统空闲内存有关 * 使用Memoization方法避免重复工作(缓存计算数据) 6. 正则表达式(待继续学习) 7. 快速响应的用户界面 * 浏览器限制了js任务的运行时间 * 单个js操作花费的总时间不应该超过100ms(超过100ms意味着用户会感到自己与界面失去联系) * 使用定时器让出时间片段,定时器建议时间最小25ms(windows系统中定时器分辨率为15ms)(详细信息请参考:http://hi.baidu.com/chyong168/blog/item/330b6f07392d8c60020881bc.html) * 尝试HTML5中的Web Workers API ** 可以使得代码运行且不占用浏览器UI线程的东西 ** 每个新的worker都在自己的线程中运行代码 8. Ajax * 数据格式 ** xml ** json ** json-p ** html ** 自定义格式 * Ajax性能指南 ** 缓存数据 *** 设置http头 *** 本地存储
9. 编程实践 * 避免双重求值 ** eval、Function ** setTimeout和setInterval建议传入函数而不是字符串来作为第一个参数 ** 不要重复工作(不要做已经完成的工作) *** 示例:addHandler function addHandler(target, eventType, handler) { if(target.addEventListener) { target.addEventListener(eventType, handler, false); } else { target.attachEvent("on" + eventType, handler); } } 上述代码对做了不同浏览器的兼容,看似充分优化,隐藏的性能问题在于每次函数调用时都做了重复工作。每次检查过程都相同:看看置顶方法是否存在,用户不可能在页面加载完成后奇迹般得改变浏览器,那么这次检查就是重复的。 *** 解决方案: + 延迟加载 function addHandler(target, eventType, handler) { //重写现有函数 if(target.addEventListener) { addHandler = function(target, eventType, handler) { target.addEventListener(eventType, handler, false); } } else { addHandler = function(target, eventType, handler) { target.attachEvent("on" + eventType, handler); } } //调用新函数 addHandler(target, eventType, handler) } + 条件预加载 ++ 在脚本加载期间提前检测,而不会等到函数被调用 |