浏览器的渲染机制

：点上面关注免费学习前端知识！

---

1. CSS和JS在网页中的放置顺序是怎样的？

CSS一般放在HTML的头部，也就是head标签里面，这样做的好处是避免因为CSS未加载而造成的白屏效果，HTML中，代码是从上到下依次解析的，如果CSS放在后面，那么加载完HTML的时候CSS还没有加载，HTML无法被渲染，网页出现白屏效果，当CSS加载完之后，HTML才会变成加载完样式之后的效果。

JS一般放在HTML的尾部，也就是body闭合标签的前面，这样做的好处是可以避免JS出现没有效果的现象，想象一下，假如JS放在前面，我的HTML还没加载完，我的JS怎么去控制还没有加载出来的HTML标签或者CSS效果？另外一个原因就是白屏，当JS文件较大，却放在HTML头部，JS加载时（非异步情况），其他文件都会暂停加载，导致在JS加载的这段时间内，DOM树和CSSOM树都没有渲染，屏幕白屏。

2.解释白屏和FOUC

1. 白屏

如果把样式放在底部，对于IE浏览器，在某些场景下（比如打开新窗口，刷新网页）会出现白屏，而不是内容逐步展现。IE浏览器中DOM树和CSSOM树必须都加载完之后，才会组合成渲染树，开始绘制内容，所以样式放在最底下，加载完HTML，却没有相应的样式，无法绘制内容，屏幕白屏。

使用@import 标签，即使CSS放入link，并且放在头部，也有可能出现白屏。因为@import标签要等所有的HTML中所有的内容加载完之后再开始执行，所以一般我们不使用@import标签。

JS文件较大，却放在HTML头部，JS加载时（非异步情况），其他文件都会暂停加载，导致在JS加载的这段时间内，DOM树和CSSOM树都没有渲染，屏幕白屏。对于IE浏览器和Webkit内核的浏览器来讲，他的DOM树和CSSOM树必须都渲染完成，浏览器才会开始绘制内容。

2.FOUC

即 Flash of unstyled Content，翻译为无样式内容闪烁。如果将样式放在底部，对于firefox浏览器来说，它会逐步加载无样式的内容，等CSS全部加载完毕再突然展现样式效果。

3.async和defer的作用是什么？有什么区别

1.两者的作用都是异步执行或加载script脚本，所谓的异步就是加载script脚本或执行script脚本的同时，也可以加载HTML和CSS。                                                                 
2.不同的地方在于async是加载到它，他就开始异步加载和执行。而defer只是异步加载，却是推迟了它的异步执行，要在所有的HTML和CSS解析和渲染之后，DomContentLoaded事件触发之前，才开始异步执行。             
3.在加载多个JS脚本的时候，async是无顺序的加载，而defer是有顺序的加载。

4.简述网页的渲染机制

1.首先网页的渲染机制其实就是浏览器的渲染机制，网页的渲染机制是由浏览器的特性来决定的。不同的浏览器有不同的渲染机制，两种典型的代表就是chrome浏览器和firefox浏览器，另外IE的浏览器与chrome的浏览器渲染机制类似。                                                                         
2.chrome浏览器的渲染过程：

解析HTML，构建DOM树

解析CSS，构建CSSOM树

把DOM和CSSOM组合成渲染树(render tree)

在渲染器的基础上进行布局，计算每个节点的几何结构

把每个节点绘制到屏幕上(painting)

3.firefox浏览的渲染过程：

解析HTML，构建DOM树

绘制HTML内容

解析CSS，构建CSSOM树

把DOM和CSSOM组合成渲染树(render tree)

在渲染器的基础上进行布局，计算每个节点的几何结构

给所有的HTML内容添加样式

作者：饥人谷_金龙
链接：http://www.jianshu.com/p/558fd74359e9
來源：简书

完

看前端技术文章，就在Web前端精髓