JS相关概念

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

  
  
  


  ……
  

      一般而言，css是放在标签内，用进行引用；而javascript的位置在的闭合标签之前，但是也可以放置在标签内，但是由于在进行页面渲染的时候，js会阻塞html以及css的解析，从而造成白屏现象，所以放置于最后就可以避免这种情况的发生。

二.解释白屏和FOUC

• 白屏现象：
  • 如果把样式放在底部，对于ie浏览器，在某些场景下(新窗口打开，刷新等)，页面会等到html加载完再进行加载css样式，会出现白屏，而不是内容逐步呈现。
  • 如果使用@import标签，即使css放入，并且放在头部，也有可能白屏。
  • 脚本会阻塞后面内容的呈现和下载，所以js放置在中也会导致白屏的可能，外部脚本加载过长(比如一直无法下载完成)，就会出现出现网页暂时失去响应。
• FOUC(Flash of Unstyled Content) 无样式内容闪烁：
        如果把样式放在底部，对于IE浏览器，在某些场景下(点击链接，输入URL，使用书签进入等)，会出现 FOUC 现象(逐步加载无样式的内容，等CSS加载后页面突然展现样式)。对于 Firefox 会一直表现出 FOUC。
        这是由于这些浏览器在绘制页面时并不需要等待css全部加载完成，只要html加载完成就开始绘制页面，而在加载CSS文件的过程中不断刷新样式，重新绘制页面。

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

JS 在 HTML 中引入有三种
浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。这样会阻塞浏览器渲染，必须等到 JS 下载并执行才继续解析 HTML。

2.async 方式引入

加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步），同时阻塞 HTML 解析。

3.defer 方式引入

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

如图所示：

js 引入的三种方式

四.简述网页的渲染机制

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