浏览器渲染问题

[yongheng2016]

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

根据各个浏览器对页面的处理机制不同，实际网页呈现考虑因素不同，其放置的顺序也存在差异： 一. Chrome和Safari看到css会立即停止渲染，去加载css；所以放置位置要求不高；（白屏问题）

二. Firefox

1. css放置在head中的处理机制和Chrome/Safari完全一致；（白屏问题）
2. css放置在body中和IE/Edge的处理机制一样，尽量靠后放；（闪烁问题）

三. IE/Edge中css会阻塞后面样式的显示，尽量靠后放；（闪烁问题）

四. js加载会阻塞后面的内容；所以存在白屏问题；尽量放置在后面；

综上结合各个浏览器，如果要避免闪烁，css放在head头部，如果要避免白屏，css尽量放置在后面；

解释白屏和FOUC

白屏或闪烁是无法避免的，只能二选一；(1.化好妆,才出门 2.先出门,中途化妆)

根据各个浏览器的侧重点不同，白屏和闪烁的处理机制也不同：

• Chrome和Safari。当发现后即停止渲染，在所有css加载完成之前，页面上不会显示任何东西。
• Firefox。head标签中的行为与Chrome/Safari中完全一致，这些link标签全部加载完成之前，页面上不显示内容；而body标签中的则不阻塞任何内容显示。
• IE/Edge。未加载完成的标签只阻塞其后面的HTML内容显示，而对其前面的HTML内容则不阻塞。

参考：http://blog.shaochuancs.com/new-css-loading-method/

async和defer的作用是什么？有什么区别

作用：可以让后续文档和js并行加载； 区别：差别在于脚本下载完成后何时执行；

• defer：在js加载完成后，它的执行要在所有元素解析完成后才能执行；（有先后顺序）
• async：加载和渲染后续文档的过程和js的加载、执行并行进行；（没有顺序可言）

蓝色代表网络读取，红色代表执行时间，绿色代表HTML解析；

参考：https://segmentfault.com/q/1010000000640869

简述网页的渲染机制（下载->解析->渲染->执行->预下载）

解析：

浏览器会解析以下三种：

• 一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
• CSS，解析CSS会产生CSS规则树。
• Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

DOM解析

CSS解析

渲染：

渲染的流程基本上如下（黄色的四个步骤）：

• 计算CSS样式
• 构建Render Tree
• Layout – 定位坐标和大小，是否换行，各种position, overflow, z-index属性 ……
• 正式开画

参考：

• http://www.jianshu.com/p/e141d1543143
• http://coolshell.cn/articles/9666.html