标签：http 通配符 one com 动画 避免 设置 绘制 文档
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
1、若遇到css，则构建css rule tree，
2、若遇到html标签，则构建dom tree，
3、若遇到js，则什么都不干，等js解析执行完成，js可能在此阶段修改dom tree 或css rule tree，浏览器希望等所有的都定下来后，再往下走。
-------以上为构建dom
4、然后等到某一部分内容都解析完成了，比如一个<div>...</div>这里所有的内容都解析完了，就利用这部分内容的相关的dom tree 和 css rule tree 生成一个render树（此过程中会将一些display none的元素干掉），
--------以上为构建render树
5、浏览器开始为每个元素定位
--------以上为布局render树
6、然后通过浏览器的绘制展现实际的元素给用户。
--------以上为绘制render树
7、然后浏览器接着往下执行，在后面的任何地方，若有对之前渲染过的部分有（布局）影响，就reflow之前的布局，重新走一遍流程，若只是对颜色等做了修改，不影响布局，则repain；reflow性能比repain 低。
启发
js要放在最后
css选择符从右到左寻找，故尽量使用子选择符 #tp > p{}，而不是后代选择符 #tp p，更不要用通配符*
dom的结构，尽量减少嵌套深度
对于动画的部分（频繁修改的dom元素），采用脱离文档流的布局（fixed absoult），避免reflow
尽量用css类来定义或改变dom元素的样式，而不是直接对dom进行一个个属性设置，减少repain次数
尽量给图片等元素加上宽高，因为图片请求加载后，浏览器继续渲染，等图片回来后，宽高变了，影响了布局，浏览器不得不对这部分内容进行reflow
引自：
http://www.cnblogs.com/laojun/p/7062348.html
标签：http 通配符 one com 动画 避免 设置 绘制 文档
原文地址：https://www.cnblogs.com/ziqingmo/p/9475360.html
