html图片显示和夫宽一样,javascript - 浏览器解析html与渲染顺序问题

巴扎黑2017-04-11 11:11:043楼

经过一段测试发现如下结果。

首先是谷歌浏览器。

谷歌浏览器在首次渲染的时候，是等到html全部解析完毕之后才进行页面的渲染，而进行页面刷新操作的时候，谷歌浏览器会对html进行边解析边渲染，但是需要解析一定数量的dom.

测试如下图。

测试代码

浏览器测试

.box1{

color:red;

}

我是天才

1啊是sd第三方s的士大夫f444速度啊分士大夫2222

1啊是sd第三方s的士大夫f速度啊分士大夫222

1啊是sd第三方s的士的士大2222夫士大夫大夫f速度啊分士大夫

var time=+new Date();

while(true){

if(+new Date()-time>3000){

break;

}

}

通过谷歌浏览器的timeline调试工具发现，此时在解析html时并未进行渲染(解析dom数量并未达到一定程度)

在html解析完成之后才进行渲染，

所以大致过程是html解析-->(解析代码数量少不进行渲染)-->遇到(alert或者死循环)-->阻塞-->阻塞结束，渲染页面

而增加HTML代码中的p数量到一定程度时候，在观察timeline发现，当html解析一定程度时就会进行一次渲染

html解析-->(解析代码数量够)-->渲染一部分html-->遇到(alert或者死循环)-->阻塞-->阻塞结束，继续渲染

而此次测试使用的firefox和ie11浏览器，对于while(true)的表现是

html解析-->遇到js-->终止渲染-->(死循环)-->循环结束，继续渲染

并未出现边解析变渲染的效果(也就是不管在js之前html解析了多少也不会进行渲染)

而两款浏览器对alert则进行了优化，alert并不会阻断渲染。