HTML5性能优化-极道先生

HTML5性能优化

在看完这两章内容之后，我意犹未尽，于是乎从网上搜索关键字[Java Web高性能]，在IBM社区找到两篇不错的文章，而让人更意外的是我发现那两篇文章的内容跟《高性能HTML5》前两章高度相似，不知道是谁抄袭谁的，大家可以鉴别下真伪，下面附上地址。

http://dl2.iteye.com/upload/attachment/0097/9373/b0e69540-e703-3530-81bb-c93de7b850a6.pdf

http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf1/

http://www.ibm.com/developerworks/cn/java/j-lo-javawebhiperf2/

前面是读后感，下面是我针对最近几天学习到的提高Web性能进行了篇幅不小的总结，一来为新人提供帮助，二来自己做一下笔记，加深记忆。

性能之前端篇

--减少重绘

在HTML页面完成展现之后，动态改变页面元素或调整CSS样式都会引起浏览器重绘，性能的损耗直接取决于动态改变的范围：如果只是改变一个元素的颜色之类的信息则只会重绘该元素；而如果是增删节点或调整节点位置则会引起其兄弟节点也一并重绘。

减少重绘并不是说不要重绘，而是要注意重绘范围：①改动的DOM元素越深则影响越小，所以尽量深入节点改动；②对某些DOM样式有多重变动尽量合并到一起修改。

以改变一个标签的背景色、宽度和颜色为例。

传统的代码 
  
  var  example = document.getElementById("example" ); 
 example.ondblclick  =  function  () { 
 example.style.backgroundColor  = "red" ; 
 example.style.width  = "200px" ; 
 example.style.color  = "white" ; 
 } 
    

查看更多关于HTML5性能优化-极道先生的详细内容...