极客观点
项目管理
HarmonyOS
谷歌（版本 55.0.2883.87 m），火狐（48.0.2），ie(11.576.14393.0)对三个浏览器简单的进行了一下试验发现。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>浏览器测试</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<style>
.box1{
color:red;
}
</style>
</head>
<body>
<div class="box1">1啊222333是</div>
<div class="box1">1啊是sd第三方s的士大夫f444速度啊分士大夫2222</div>
<div class="box1">1啊是sd第三方s的士大夫f速度啊分士大夫222</div>
<div class="box1">1啊是sd第三方s的士的士大2222夫士大夫大夫f速度啊分士大夫</div>
<script>
alert(1);
</script>
</body>
<html>谷歌浏览器
火狐浏览器
ie11
出现这种情况，我的理解是谷歌浏览器是等到html全部解析完毕之后才开始渲染，而另外两款浏览器则是边解析边渲染。
然而，当把script里面的js代码从alert换成
var time=+new Date();
while(true){
if(+new Date()-time>3000){
break;
}
}时候发现，三款浏览器都需要经过3秒延迟之后才进行页面渲染更新。
我的问题是，为什么这段延迟代码和上面的通过alert实现的阻塞 两者在页面渲染结果不一样？
经过一段测试发现如下结果。
首先是谷歌浏览器。
谷歌浏览器在首次渲染的时候，是等到html全部解析完毕之后才进行页面的渲染，而进行页面刷新操作的时候，谷歌浏览器会对html进行边解析边渲染，但是需要解析一定数量的dom.
测试如下图。
测试代码
通过谷歌浏览器的timeline调试工具发现，此时在解析html时并未进行渲染（解析dom数量并未达到一定程度）
在html解析完成之后才进行渲染，
所以大致过程是html解析-->(解析代码数量少不进行渲染)-->遇到(alert或者死循环)-->阻塞-->阻塞结束，渲染页面
而增加HTML代码中的div数量到一定程度时候，在观察timeline发现，当html解析一定程度时就会进行一次渲染
html解析-->(解析代码数量够)-->渲染一部分html-->遇到(alert或者死循环)-->阻塞-->阻塞结束，继续渲染
而此次测试使用的firefox和ie11浏览器，对于while(true)的表现是
html解析-->遇到js-->终止渲染-->(死循环)-->循环结束，继续渲染
并未出现边解析变渲染的效果（也就是不管在js之前html解析了多少也不会进行渲染）
而两款浏览器对alert则进行了优化，alert并不会阻断渲染。