经过一段测试发现如下结果。
首先是谷歌浏览器。
谷歌浏览器在首次渲染的时候,是等到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代码中的div数量到一定程度时候,在观察timeline发现,当html解析一定程度时就会进行一次渲染
html解析-->(解析代码数量够)-->渲染一部分html-->遇到(alert或者死循环)-->阻塞-->阻塞结束,继续渲染
而此次测试使用的firefox和ie11浏览器,对于while(true)的表现是
html解析-->遇到js-->终止渲染-->(死循环)-->循环结束,继续渲染
并未出现边解析变渲染的效果(也就是不管在js之前html解析了多少也不会进行渲染)
而两款浏览器对alert则进行了优化,alert并不会阻断渲染。