zj1 JS相关概念

2017-05-22 本文已影响0人 molly的红草帽

CSS和JS在网页中的放置顺序是怎样的？
解释白屏和FOUC
async和defer的作用是什么？有什么区别
简述网页的渲染机制

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

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="xx.css">
  <link rel="stylesheet" href="yy.css">
</head>  
<body>  
  <!-- 这里放内容 -->
  <script src="xx.js"></script>
  <script src="yy.js"></script>
</body>  
</html>

css应该放在<body>之前，一般放在<head>标签里面。
js应该放在<body>里面，作为body内容的最后部分。

这是因为浏览器自上而下解析，css在前面，浏览器在解析html的时候已经有对应的样式，可避免出现短暂的样式错乱。如果js放在body前面，只有在js解析执行完成后才开始解析呈现body里面的内容，时间的延迟可能导致浏览器白屏。

2.解释白屏和FOUC

白屏

如果把样式放在底部，对于IE和chrome浏览器，在某些场景下(新窗口打开，刷新等)页面会出现白屏,而不是内容逐步展现

这是因为当html的内容很多时，html解析完成，但css还没解析完成时页面是没有内容的，也就是白屏。
如果使用 @import 标签，即使 CSS 放入 link，并且放在头部，也可能出现白屏

因为使用@import引入css文件，在浏览器开始呈现网页之前，它必须下载并解析布局页面所需的任何样式表，即使样式表处于缓存的外部文件中，也必须等浏览器从磁盘加载样式表完成以后，渲染才会开始。因此css @import引起的css解析延迟会加长页面留白期。 link同理。
因此建议使用 link 标签将样式表放在顶部。
JavaScript 放入页面顶部
js脚本会阻塞后面内容的呈现
js脚本会阻塞其后组件的下载
因此加载 JavaScript 时,会禁用并发，并且阻止其他内容的下载。所以把 JavaScript 放入页面顶部也会导致白屏现象。

FOUC

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

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

async

<script async src="script.js"></script>

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

defer

<script defer src="script.js"></script>

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

区别
defer:脚本延迟到文档解析和显示后执行，有顺序
async:不保证顺序

4.简述网页的渲染机制

1. 解析

1.解析 HTML/SVG/XHTML 标签, 构建 DOM 树
2.解析 CSS 标签, 构建 CSSOM 树
3.解析Javascript, 主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree

API（Application Programming Interface,应用程序编程接口）

2.把 DOM 和 CSSOM 组合成渲染树 (render tree)
注：

Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。

CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。

3.最后通过调用操作系统Native GUI的API绘制，网页形成。
详细的网页的渲染机制点击这里

注：Firefox

Firefox基本上来说是通过CSS 解析生成 CSS Rule Tree，然后，通过比对DOM生成Style Context Tree，然后Firefox通过把Style Context Tree和其Render Tree（Frame Tree）关联上，就完成了。注意：Render Tree会把一些不可见的结点去除掉。而Firefox中所谓的Frame就是一个DOM结点，不要被其名字所迷惑了。

参考文章
Render-tree Construction, Layout, and Paint
How browsers work