web前端性能优化-高性能javascript学习

最近读过《高性能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) 

}

+ 条件预加载

   ++ 在脚本加载期间提前检测，而不会等到函数被调用