浏览器渲染

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

• 浏览器对于图片和CSS，在加载时会并发加载（比如一个域名下同时加载两个文件）
• 浏览器对于JavaScript，在加载时会禁用并发，并且阻止其后的文件的加载及组件的下载。

• CSS放在head标签中，让其先渲染。

.....

• JS放在body标签的最后

...

2. 解释白屏和FOUC

• 白屏
  • 因为浏览器的渲染引擎在获得内容后的工作流程是逐步进行的，大多数浏览器（IE、chrome）是等样式加载再绘制给用户看。所以当css样式表放在html底部时，解析加载过程中会出现白屏现象，等浏览器解析完成才会显示页面。
  • 如果使用@import标签，即使css放在link，并且放在头部，也可能出现白屏。(@import引用的CSS会等到页面全部被下载完再被加载)
  • 由于JS会阻塞后面内容的呈现和组件的下载（加载JavaScript时会禁用并发），所以若将JavaScript放在顶部页会导致白屏。
• FOUC
  即Flash of Unstyled Content。
  指的是逐步加载无样式的内容，等CSS加载完成后页面突然展现的样子。也就是说，浏览器加载了无样式内容，又突然解析到了样式，会对页面进行重新的渲染，这时候就会产生FOUC现象。在IE浏览器中，如果把样式放在底部，某些场景下（点击链接、输入URL、使用书签进入等等），就会出现FOUC现象。对于 Firefox 则会一直表现出 FOUC。

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

• 都只对外部脚本文件有效

  • 
    没有 defer 或 async时，浏览器从上到下解析HTML文件，当解析到 标签的时候会立即下载脚本并执行，只有当加载执行脚本之后浏览器才能继续解析 标签之后的文档内容，而async和defer属性就是改变这种加载方式的作用。
  • 
    有async，表示应该立即下载脚本，不影响页面其他操作诸如其他脚本的下载， async属性会使加载和渲染文档元素的过程和JS脚本加载和执行并行进行（即异步）。 async不保证按照指定顺序执行JS脚本，第二个JS可能会比第一个JS文件先执行。所以多个JS文件若设置此属性应避免依赖。
  • 
    有defer，表示脚本可以延迟到文档完全被解析之后再执行。IE7及更早版本对嵌入脚本也支持这个属性。defer 脚本延迟到文档完全解析渲染后按照顺序执行。

4. 简述网页的渲染机制

1. 解析HTML标签，构建DOM树。
2. 解析CSS标签，构建CSSOM树。
3. 把DOM和CSSOM组合成渲染树（render tree）。
4. 在渲染树的基础上进行布局，计算每个节点的几何结构。
5. 把每个节点绘制到屏幕上（painting）。

webkitflow.png