JS相关概念

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

1. css放到head标签内
2. js一般放到body尾部，因为js会涉及dom的操作，所以会等dom都加载完成后，再去加载js。

解释白屏和FOUC

白屏现象：

1. 器需要加载html文件和所有css文件后，构造了渲染树后，再把树节点渲染在屏幕上。如果暂时加载不到css文件，则会阻塞渲染过程，造成白屏现象。
2. 如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现。
3. 如果使用 @import 标签（使用@import标签引入样式文件的情况下，会等待html文件加载完成后才加载css文件）,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。

FOUC(Flash of Unstyled Content) 无样式内容闪烁：

如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .

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

没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

在有 async 的情况下，JavaScript 脚本一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果 JavaScript 脚本前后有依赖性，使用 async 就很有可能出现错误。

网页渲染参考

简述网页的渲染机制

• 解析html构建DOM树
• 解析CSS构建CSSOM树
• 把DOM和CSSOM组合成渲染树（Render Tree）
• 在渲染树的基础上进行布局，计算每个节点的几何结构（Layout Tree）
• 把每个节点绘制到屏幕上（Painting）

渲染路径.png

为了构建render tree，浏览器大致会做以下几个方面：

1. 从DOM树的根部开始，经过每一个可见的节点。

• 有一些节点像script tags，meta tags等是不可见的，有一些会被忽略掉，因为他们不会被反映到渲染的结果上。
• 有一些节点通过css隐藏起来，也会被忽略掉（display：none）。

2. 对于一些可见的节点，在CSSOM上找到相对应的设置。
3. 结合内容和样式发出可见的节点。
   最终输出在屏幕上的是内容和样式结合的渲染。当渲染树完成时，我们下一步将进入布局layout阶段。

到目前为止，我们已经计算了了那些可见的节点和他们的样式，但我们还没有计算他们在屏幕上确切的位置和大小，这就是布局阶段，也被称为“reflow”。
要计算出每一个对象确切的位置和大小，浏览器从render tree的根部开始，经过节点。让我们考虑一下这个简单的例子：

  
    
    
  
  
    

      
Hello world!
    
  

在上面的网页中，body包含两个嵌套的div：第一个div将节点的宽度设置为整个界面的50%，第二个节点，将节点宽度设成其父节点的50%，也就是整个界面的25%。

布局过程的输出结果是一个盒模型，能够精准的在界面中体现每一个元素确切的位置和大小，所有相对的度量方式都会被转换成像素表示。
最后，现在我们知道哪一个节点是可见的，还有他们的样式以及几何构成，我们可以将这些信息传给最后的阶段，这个阶段将会把这些把render tree 上的节点转化成真正的图像。这一阶段经常被称为“painting”或“rasterizing”。
浏览器会花一些时间去做这些工作。然而，chrome 开发工具会提供一些关于上面三个阶段的原理。让我们看一下例子“hello world”的layout布局阶段：

Paste_Image.png

• 在时间线上，我们可以看到layout事件捕获了render tree的结构，位置和大小在时间线上。
• 当layout完成时，浏览器开始了“paint setup”和“paint”事件，将渲染树render tree转化成图像。

执行渲染树的结构，布局和paint所花的时间会由于文件大小，所设置样式的不同而不同，越大的文件和越复杂的样式，所花的时间越多（如：一个纯色是很好画的，而一个阴影需要更多的时间）。
最终网页出项在屏幕上：

我们再简单回忆一下浏览器的步骤：

1. 处理html，构建DOM树。
2. 处理css，构建CSSOM树。
3. 结合DOM和CSSOM构成渲染树render tree。
4. 开始布局，计算每个节点的几何结构。
5. paint，画出每个节点。

我们的演示网页看起来很简单，但它也需要一些工作。无论DOM或CSSOM被改变，我们都必须重复以上过程，去计算出哪些图像需要重新渲染。
**Optimizing the critical rendering path is the process of minimizing the total amount of time spent performing steps 1 through 5 in the above sequence. **Doing so renders content to the screen as quickly as possible and also reduces the amount of time between screen updates after the initial render; that is, achieve higher refresh rates for interactive content.

参考