网页的渲染机制

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

1. CSS最好放入header中，即放在网页内容（html标签中包含的文字和图片等）和js脚本之前
   <link href="index.css" rel="stylesheet">
2. js因为JS会阻塞HTML、CSS和图片的加载，并且可能修改DOM，所以JS需要放到最后加载，有四种方式：

• 放在html中</body>前 <script src='index.js'></script>
• 放在head标签内，同时在script标签内添加"defer"或"async"来延迟或异步加载js。

//延迟加载defer:脚本延迟到文档解析和显示后执行，有顺序
<script defer src='index1.js'></script>
//异步加载async:不保证顺序
<script async src='index2.js'></script>

• 用createElement来动态生成，这个要注意加载顺序
• 用ajax加载

解释白屏和FOUC

白屏的发生情形:

1. 将css文件放在html文档的最后;
2. 使用@import引入css（因为通过@import引入的css文件会被最后加载，因此也会导致白屏）;
3. 将js文件放在头部，而未使用defer或async延迟或异步加载js文件，导致js阻塞html和css的加载

原因:对于-webkit内核的浏览器（IE也会产生），在进行网页渲染时，会同时加载html和css分别构建DOM树和CSSOM，等两者都构建完成后，再绘制渲染树，然后将页面显示出来。如果在html中将css文件放置在文档最后，那么将会导致CSSOM晚于DOM树的建立，浏览器需要等待CSSOM建立，然后才进行网页内容的绘制，这个等待的过程，没有内容显示，就导致了白屏的产生，因此在开发中，需要将CSS放在head标签内，让其与html内容同时被加载。js也是同理，阻塞了CSSO和DOM树的创建。

FOUC：仍是由于浏览器的解析造成的，由于浏览器先显示已加载的html内容，逐步加载无样式的内容，等css加载后页面突然展现样式。主要发生浏览器是火狐浏览器。

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

async：让script.js和其他元素异步加载和执行
defer：让script.js的执行再所有元素解析完成之后
相同点:

1. 在加载脚本时，不阻塞页面的渲染
2. 对于inline script无效
3. 使用这两个属性的脚本中不能调用document.write
4. 有脚本的onload事件回调

区别：

• 执行时刻

1. async属性会在脚本下载完成之后异步执行，同时是在window的load事件之前执行，因此可能会出现打乱脚本执行顺序的情况；（无顺序）
2. defer属性的脚本是在页面被解析完成之后才会被执行，按照脚本排列顺序执行，同时是在document的DOMcontentLoader之前执行(有顺序)

• 使用这两个属性会有的三种情况：

1. 如果async为true，那么脚本在加载完成后立刻执行
2. 如果async为false，defer为true，则脚本在页面解析完成后执行
3. 如果async为false、defer也为false，那么脚本会阻塞页面解析，转而下载脚本，并立即执行

建议：无论是使用async还是defer，都需要对js文件进行整理，哪些文件有依赖，哪些需要延迟加载，做好js代码的合并和拆分，然后再根据页面需要合理使用这两个属性

简述网页的渲染机制

1. HTML代码转化成DOM
2. CSS代码转化成CSSOM（CSS Object Model）
3. 结合DOM和CSSOM，生成一棵渲染树（包含每个节点的视觉信息）
4. 生成布局（layout），即将所有渲染树的所有节点进行平面合成
5. 将布局绘制（paint）在屏幕上

生成布局"（flow）和"绘制"（paint）这两步，合称为"渲染"

网页生成的时候，至少会渲染一次。用户访问的过程中，还会不断重新渲染。
以下三种情况，会导致网页重新渲染。

1. 修改DOM
2. 修改样式表
3. 用户事件（比如鼠标悬停、页面滚动、输入框键入文字、改变窗口大小等等）

重新渲染，就需要重新生成布局和重新绘制。前者叫做"重排"（reflow），后者叫做"重绘"（repaint）。
需要注意的是，"重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。

参考链接：阮一峰
若想自己动手测试一下浏览器的渲染机制，可看这一篇文章