JS相关概念

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

  1. 在html中,代码是从上到下依次解析的,如果css放在后面,那么加载完html的时候css还没有加载,html无法被渲染,网页会出现白屏,故css一般放在html头部,head标签内。
  2. JS一般放在html的尾部,也就是body闭合标签的前面。JS用来控制html和css,所谓控制即当html和css加载完成后,才能对其进行操作。还有一个原因是白屏,如果放在html头部的JS文件较大,JS加载时(非异步情况),其他文件都会暂停加载,导致在JS加载的这段时间内,DOM树和CSSOM树都没有渲染,屏幕白屏。

2、解释白屏和FOUC

白屏:

如果把样式放在底部,对于IE浏览器,在某些场景下(比如打开新窗口,刷新网页)会出现白屏,而不是内容逐步展现。IE浏览器中DOM树和CSSOM树必须都加载完之后,才会组合成渲染树,开始绘制内容,所以样式放在最底下,加载完HTML,却没有相应的样式,无法绘制内容,屏幕白屏。使用@import 标签时,即使CSS通过link引入并且放在头部,也有可能出现白屏。因为@import标签要等所有的HTML中所有的内容加载完之后再开始执行。还有如前所述,JS文件过大且放在头部,也会导致白屏。

FOUC:

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

3、async和defer的作用是什么?有什么区别

  1. 两者的作用都是异步执行或加载script脚本,所谓的异步就是加载script脚本或执行script脚本的同时,也可以加载HTML和CSS。没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
  2. 不同的地方在于async是加载到它,他就开始异步加载和执行。而defer只是异步加载,却是推迟了它的异步执行,要在所有的HTML和CSS解析和渲染之后,DomContentLoaded事件触发之前,才开始异步执行。
  3. 在加载多个JS脚本的时候,async是无顺序的加载,而defer是有顺序的加载。如果 JavaScript 脚本前后有依赖性,使用 async 就很有可能出现错误。

4、简述网页的渲染机制

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

你可能感兴趣的:(JS相关概念)