浏览器渲染
2017-08-02 本文已影响0人
peaceChierdo
1. CSS和JS在网页中的放置顺序是怎样的？
- 浏览器对于图片和CSS，在加载时会并发加载（比如一个域名下同时加载两个文件）
- 浏览器对于JavaScript，在加载时会禁用并发，并且阻止其后的文件的加载及组件的下载。
- CSS放在head标签中，让其先渲染。
<head>
<link rel="stylesheet" href="index.css">
.....
</head>
- JS放在body标签的最后
<body>
...
<script src="index.js"></script>
</body>
2. 解释白屏和FOUC
- 白屏
- 因为浏览器的渲染引擎在获得内容后的工作流程是逐步进行的，大多数浏览器（IE、chrome）是等样式加载再绘制给用户看。所以当css样式表放在html底部时，解析加载过程中会出现白屏现象，等浏览器解析完成才会显示页面。
- 如果使用@import标签，即使css放在link，并且放在头部，也可能出现白屏。(@import引用的CSS会等到页面全部被下载完再被加载)
- 由于JS会阻塞后面内容的呈现和组件的下载（加载JavaScript时会禁用并发），所以若将JavaScript放在顶部页会导致白屏。
- FOUC
即Flash of Unstyled Content。
指的是逐步加载无样式的内容，等CSS加载完成后页面突然展现的样子。也就是说，浏览器加载了无样式内容，又突然解析到了样式，会对页面进行重新的渲染，这时候就会产生FOUC现象。在IE浏览器中，如果把样式放在底部，某些场景下（点击链接、输入URL、使用书签进入等等），就会出现FOUC现象。对于 Firefox 则会一直表现出 FOUC。
3. async和defer的作用是什么？有什么区别
-
都只对外部脚本文件有效
- <script src="script.js"></script>
没有 defer 或 async时，浏览器从上到下解析HTML文件，当解析到 标签的时候会立即下载脚本并执行，只有当加载执行脚本之后浏览器才能继续解析 标签之后的文档内容，而async和defer属性就是改变这种加载方式的作用。 - <script async src="script.js"></script>
有async，表示应该立即下载脚本，不影响页面其他操作诸如其他脚本的下载， async属性会使加载和渲染文档元素的过程和JS脚本加载和执行并行进行（即异步）。 async不保证按照指定顺序执行JS脚本，第二个JS可能会比第一个JS文件先执行。所以多个JS文件若设置此属性应避免依赖。 - <script defer src="script.js"></script>
有defer，表示脚本可以延迟到文档完全被解析之后再执行。IE7及更早版本对嵌入脚本也支持这个属性。defer 脚本延迟到文档完全解析渲染后按照顺序执行。
- <script src="script.js"></script>
4. 简述网页的渲染机制
- 解析HTML标签，构建DOM树。
- 解析CSS标签，构建CSSOM树。
- 把DOM和CSSOM组合成渲染树（render tree）。
- 在渲染树的基础上进行布局，计算每个节点的几何结构。
- 把每个节点绘制到屏幕上（painting）。
webkitflow.png
