今天在slideshare上看到一个有关浏览器解析和渲染的技术分享，感觉不错，所以想写些东西，总结一下顺便加深印象。
这属于前端性能范畴，对此感兴趣的朋友有两本书值得一看：《high performance javascript》和《even faster websites》。
回过头来，我主要想说说浏览器的render部分。
首先来了解浏览器的reflow和repaint事件。
凡是对前端UI进行了操作，如插入DOM节点，修改DOM元素的尺寸，布局，字体颜色等。均会触发浏览器的reflow或者repaint事件。
更详细点的话，凡是影响到页面layout的操作，都会触发reflow以重新计算页面布局，随之repaint来重绘页面。
而repaint，对于字体的大小，颜色，页面元素的背景改变会触发repaint重绘页面。
可以看出触发reflow的操作也会触发repaint，反之则不一定。而且基本都是对DOM元素的操作。
ppt中还提到，浏览器对render进行了一定的优化，进行队列和缓存处理以提高render性能。
对于解决方案，其中也列出几个很有操作性的方法。
-
减少对DOM Tree的操作,对DOM操作进行缓存
这里可以采用documentFragment.通过查MDN可以 了解到，documentFragment可以作为DOM元素的缓存，可以通过它appendChild，但不会影响到DOM Tree，最后可以把documentFragment一并插 如DOM Tree中，很显然这样对性能有益。
或者先对要操作的DOM元素进行隐藏（display:none），等所有操作结束后，再显示该元素。
-
一次性修改样式
当修改的样式属性较多时，建议不要采用el.style.color = '#dcdcdc'的方法逐个设值。 可以采用定义一个外部class，用el.className = 'definedClass'来实现。 或者用el.style.cssText = 'color: red; 30px;....'。
-
缓存DOM元素layout相关属性
如ppt中所演示的,用变量来储存DOM元素的width，offsetTop等属性值，避免反复重新取值,避免一些不必要地 重复计算。
-
关于animation的帧宽
ppt中列出了一些流行js库的默认配置, 一篇博客提到动画的间隔时间设的太短，会导致浏览器太过负荷，导致一定的失帧。
最后感谢ppt作者的分享，从中学到不少。