JS相关概念和浏览器渲染原理
2017-11-27 本文已影响0人
gigi1226
1.CSS和JS在网页中的放置顺序是怎样的？
CSS：css样式放在head中,因为如果放在</body>标签的前面，那么当DOM树构建完成了，渲染树才构建，那么当渲染树构建完成，浏览器不得不再重新渲染整个页面，这样造成了资源的浪费。如果放在<head> </head>之间，浏览器边构建边渲染，效率高得多。
JS：js放在body 标签内的最后，script 标签内。外链接用 <script src=""></script>，内部的用 <script></script>。这样就不会出现网页加载时白屏和FOUC的情况，可以确保在脚本执行前页面已经完成了渲染。
2.解释白屏和FOUC
白屏：
- 如果把样式放在底部，对于IE浏览器，在某些情景下，新窗口对于IE浏览器，在某些情景下（新窗口打开，刷新等）页面会出现白屏，而不是内容逐渐展现
- 如果使用@import标签，即使CSS放入link,并且放在头部，也可能出现白屏
- 对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件)。 但在加载 JavaScript 时，会禁用并发，并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏 现象.
FOUC(flash of unstyled content)无样式内容闪烁：
- 如果把样式放在底部，对于IE浏览器，在某些场景下（点击链接，输入URL，使用书签进入等），会出现FOUC现象（逐步加载无样式的内容，等CSS记载后页面突然展现样式）。对于Firefox会一直表现出FOUC
3.async和defer的作用是什么？有什么区别
- 没有defer或async，浏览器会立即加载并指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
- 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
- 有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
- 浏览器在解析HTML文件时，遇上没有设置defer或async属性的脚本，浏览器读到该脚本就加载并执行，脚本会阻塞其后内容的执行；
- 遇上设有async属性的脚本，会在HTML解析过程中下载该脚本，并在完成下载后暂停HTML的解析来执行这个异步脚本，直到执行完成后再继续HTML的解析；
- 遇上有defer属性的脚本，会在HTML解析过程中下载该脚本，在HTML解析完成后才执行该文件，延迟脚本按照它们在文档中出现的顺序执行。
- async属性可以保证脚本下载的同时，浏览器进行渲染。需要注意的是，一旦采用这个属性就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行哪个脚本。
4.简述网页的渲染机制
- 解析html标签，构建dom树
- 解析css标签，构建cssom树
- 把dom和cssom组合成渲染树（render tree）
- 在渲染树的基础上进行布局，计算每个节点的几何结构
-
把每个节点绘制到屏幕上（painting）
chrome等浏览器
1739898-56a58b58bb5dcc0e.png
Mozilla 的 Gecko 呈现引擎主流程（firefox浏览器）
image008.jpg
-
解析 HTML 标签到 Content Sink
-
这时，先加载Content Sink 里面的内容，页面上会显示一个无样式的内容
-
循环加载 CSS 样式，每次加载一部分 CSS 样式后，会重新渲染页面
