JS相关概念

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

• CSS要放头部head中的link标签内引入。如果CSS放在后面可能页面会出现闪跳的感觉，或者是白屏或者布局混乱样式很丑直到CSS加载完成。
• js文件要放在<script></script>标签中，置于</body>最后 </html>之前，用于最后渲染。js是阻塞加载，会影响页面加载的速度，如果js文件比较大，算法也比较复杂的话，影响更大。

解释白屏和FOUC

产生白屏与FOUC（无样式内容闪烁）的根本原因是由于浏览器加载与显示页面方式不同造成的。
在不同浏览器对css和html的处理方式不同，一种（IE和Chrome）是等待css加载完成后，对html进行渲染并显示，另一种（Firefox）是先对html元素进行展示，等css加载完成之后，再对html进行样式的设置；前者会造成白屏，后者则会造成FOUC。

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

• 作用：是script标签的两个属性，脚本引用异步设置。用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。
• 区别：
  • async <script async src="script.js"></script>
    有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
  • defer <script defer src="script.js"></script>
    有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

简述网页的渲染机制

1. 构建DOM树(DOM tree)：从上到下解析HTML文档生成DOM节点树（DOM tree），也叫内容树（content tree）；
2. 构建CSSOM(CSS Object Model)树：加载解析样式生成CSSOM树；
3. 执行JavaScript：加载并执行JavaScript代码（包括内联代码或外联JavaScript文件）；
4. 构建渲染树(render tree)：根据DOM树和CSSOM树,生成渲染树(render tree)；
   渲染树：按顺序展示在屏幕上的一系列矩形，这些矩形带有字体，颜色和尺寸等视觉属性。
5. 布局（layout）：根据渲染树将节点树的每一个节点布局在屏幕上的正确位置；

6. 绘制（painting）：遍历渲染树绘制所有节点，为每一个节点适用对应的样式，这一过程是通过UI后端模块完成；

   
   流程.png
   Webkit渲染引擎流程.png

参考1
参考2