浏览器的渲染

2017-12-04 本文已影响0人羌生

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

js理论上可以在html的任何地方链入或放置，为了更好的呈现页面效果，提升体验，css应被放入到HTML的<head></head>标签里，js应放在<body>的底部，</body>之前。

二，解释白屏和FOUC

白屏:

1.1 如果把样式放在底部,对于一些浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现，这是因为我们访问网页所呈现的是结合解析HTML标签自上而下构造的DOM树与解析CSS后的CSSOM树结合在一起组成渲染树所布局和绘制的，如果一个网页的HTML文本内容很多，这样把样式放在body底部，会造成页面生产渲染树的延迟，所以形成了白屏，这种情况下的白屏不是一个bug，而是浏览器的渲染机制。
1.2 如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏，这是因为@import 标签不会被立即执行，所以也出现了白屏的现象。

FOUC

2.1 Firefox 有所不同，如果把样式放在底部，Firefox会出现FOUC（无样式内容闪烁），这是也是因为浏览器的渲染机制，它的渲染机制是先自上而下解析HTML标签构造DOM树并呈现出来，然后解析CSS，最后才会呈现样式，期间会逐步加载无样式内容；

三，sync和defer的作用是什么？有什么区别？

默认引用script:

          <script type="text/javascript" src="javascript.js"></script>

当浏览器遇到 script 标签时，文档的解析将停止，并立即下载并执行脚本，脚本执行完毕后将继续解析文档。

async模式 :

     <script type="text/javascript" src="javascript.js" async="async"></script>

当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程中文档将停止解析，直到脚本执行完毕。

defer模式:

    <script type="text/javascript" src="javascript.js" async="async"></script>

当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，待到文档解析完成，脚本才会执行。

四，简述网页的渲染机制

解析 HTML 标签, 构建 DOM 树
解析 CSS 标签, 构建 CSSOM 树
把 DOM 和 CSSOM 组合成渲染树 (render tree)
在渲染树的基础上进行布局, 计算每个节点的几何结构
把每个节点绘制到屏幕上 (painting)