浏览器的渲染原理

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

css样式放在head标签中，通常引入方式为

js放置在body标签的最后，因为相对于其他的图片或者css来说，js是阻塞的，所以等页面的渲染树成行后引入js就可以避免白屏现象，通常外链引入方式为

解释白屏和FOUC

浏览器的白屏与无样式内容闪烁（Flash of unstyled content）,是由于浏览器加载与显示页面方式不同造成的：

• IE会出现白屏现象，这是因为其等待页面组件包括样式表全部加载完成后才呈现整个页面。若样式表放在页面底部，将会出现白屏

• FireFox 当把样式表放在页面底部时，会遇到FOUC问题，因为FF为了用户体验，对所有都是对页面中的组件逐步呈现。

• 此外，引入样式表时，有两种方式：link和@import
  link:
  @import:
  
  一个style块可以包含多个@import规则，但@import规则必须放在所有其他规则之前。
  使用@import规则需要注意的是：即便把@import规则放在文档的head标签中，可能导致页面组件下载时的无序性，进而导致白屏（对于IE）和FOUC(对于FF)问题的产生。

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

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

简述网页的渲染机制

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