JS相关概念
2016-12-30 本文已影响7人
不是我的简书
1、CSS和JS在网页中的放置顺序是怎样的？参考
- css应该放在<head>标签中
- js应该放在</body>标签结尾处
- js所依赖的库(比如jquery)放置在js的前面
各个浏览器渲染机制可能略有偏差，为了防止出现白屏或者FOUC等情况，以上摆放最佳
2、解释白屏和FOUC（无样式内容闪烁）
参考1
参考2
浏览器的白屏与无样式内容闪烁（Flash of unstyled content）白屏和FOUC不能共存，是由于浏览器加载与显示页面方式不同造成的，使用<link>标签将样式表放在文档的<head>中可以解决这个情况
-
白屏：当把css样式表放在底部或者使用@import方式引入时一些浏览器例如chrome和IE，加载和渲染机制是等css全部加载解析完后再渲染展示页面，而这个等待的时间称为白屏。
-
FOUC（无样式内容闪烁）：将样式放在底部或引入@import，IE 会先加载整个 HTML 文档的 DOM ，然后再去导入外部的 CSS 文件，因此在页面 DOM 加载完成到 CSS 导入完成中间会有一段时间页面上的内容是没有样式的，时间长短跟网速和计算机性能有关（逐步加载无样式的内容,等CSS加载后页面突然展现样式）。
3、async和defer的作用是什么？有什么区别参考
<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是会打断后面HTML的解析，只有等该脚本执行完成后，浏览器才继续解析后面的HTML文档元素。
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
<script defer src="myscript.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
下图可以非常好的表示这个过程的差别，其中：蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。
4、简述网页的渲染机制
- 解析HTML标签，构建DOM树。
- 解析CSS标签，构建CSSOM树。
- 通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。
- 在渲染树的基础上，计算每个节点的几何机构。
- 把每个节点绘制到屏幕上 (painting)
