浏览器加载、解析、渲染初探

一：加载

　　引起浏览器阻塞的两种情况：

　　1：外部js的引入会引起浏览器的加载阻塞，因为js有可能会操作dom树，例如document.write;

　　2: css表的引入也有可能会引起浏览器的阻塞。不影响js的加载，却影响js的执行，因为js的执行有可能会获取到dom节点的样式；从而也可能引起阻塞；

 

　　优化：

　　1：引用的js文件放在body的最后。注意：这只能提高dom树的加载速度，dom树的渲染其实还是要等到js执行完成才能渲染；

　　2：js函数长时间执行，建议使用settimeout；因为js执行完成指的是主线程的代码，settimeout的代码并不会引起资源阻塞；loop event之一；

　　3：将多个js资源打包合成为一个；

　　4：引用的js资源加上defer="defer" async="async"；告诉浏览器将推迟对脚本的解释。defer="defer"For IE；async="async"For HTML5；

二：解析

　　1：解析三个东西，分别是HTML/SVG/XHTML,CSS和Javascript; HTML会生成DOM树，CSS会生成样式规则树，而js则间接操作这两树；

　　2：根据Dom Tree和CSS rule Tree 生成 Rendering Tree;

　　3: 调用操作系统Native GUI的API绘制。

三：渲染

　　1：计算CSS样式

　　2：构建Render Tree

　　3：Layout-定位坐标和大小

　　4：正式开画

　　5：提高渲染性能的几个关键点

　　　　1：不要js直接修改样式，使用className；使多次操作dom变成一次性操作；

　　　　2：不要把DOM结点的属性值放在一个循环里当成循环里的变量；否则会造成多次Reflow；

　　　　3：尽可能的修改层级比较低的DOM；

　　　　4：为动画的HTML元件使用fixed或absoult的position；因为这两个属性只是在自身元素Reflow；

　　　　5：千万不要使用table布局，牵一发动全身

 

　　另外，需要区分Repaint和Reflow。

　　Repaint：元素的大小没有变化，例如背景颜色；

　　Reflow：元素的大小发生改变，可能会导致兄弟节点、父节点都要重画；

 

参考：http://coolshell.cn/articles/9666.html

　　　http://www.ruanyifeng.com/blog/2013/10/event_loop.html

　　　http://www.jianshu.com/p/e141d1543143