JS相关概念
2017-11-16 本文已影响0人
Sunset125
一.CSS和JS在网页中的放置顺序是怎样的？
<html>
<head>
<meta charset="utf-8">
<title>JS test</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
……
<script src="index.js"></script>
</body>
</html>
一般而言，css是放在<head>标签内，用<link>进行引用；而javascript的位置在<body>的闭合标签之前，但是也可以放置在<head>标签内，但是由于在进行页面渲染的时候，js会阻塞html以及css的解析，从而造成白屏现象，所以放置于最后就可以避免这种情况的发生。
二.解释白屏和FOUC
- 白屏现象：
- 如果把样式放在底部，对于ie浏览器，在某些场景下(新窗口打开，刷新等)，页面会等到html加载完再进行加载css样式，会出现白屏，而不是内容逐步呈现。
- 如果使用@import标签，即使css放入
<link>，并且放在头部，也有可能白屏。 - 脚本会阻塞后面内容的呈现和下载，所以js放置在
<head>中也会导致白屏的可能，外部脚本加载过长(比如一直无法下载完成)，就会出现出现网页暂时失去响应。
- FOUC(Flash of Unstyled Content) 无样式内容闪烁：
如果把样式放在底部，对于IE浏览器，在某些场景下(点击链接，输入URL，使用书签进入等)，会出现 FOUC 现象(逐步加载无样式的内容，等CSS加载后页面突然展现样式)。对于 Firefox 会一直表现出 FOUC。
这是由于这些浏览器在绘制页面时并不需要等待css全部加载完成，只要html加载完成就开始绘制页面，而在加载CSS文件的过程中不断刷新样式，重新绘制页面。
三.async和defer的作用是什么？有什么区别
JS 在 HTML 中引入有三种<script> <script async> <script defer>。
- 直接引入<script>
<script src="script.js"></script>
浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。这样会阻塞浏览器渲染，必须等到 JS 下载并执行才继续解析 HTML。
2.async 方式引入
<script async src="script.js"></script>
加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步），同时阻塞 HTML 解析。
3.defer 方式引入
<script defer src="script.js"></script>
加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
如图所示：
js 引入的三种方式
四.简述网页的渲染机制
- 解析html构建DOM树。
- 解析CSS构建CSSOM树。
- 把DOM和CSSOM组合成渲染树（Render Tree）。
- 在渲染树的基础上进行布局，计算每个节点的几何结构（Layout Tree）。
- 把每个节点绘制到屏幕上（Painting)。
