谷歌(版本 55.0.2883.87 m),火狐(48.0.2),ie(11.576.14393.0)对三个浏览器简单的进行了一下试验发现,谷歌浏览器是等到html全部解析完毕之后才开始渲染,而另外两款浏览器则是边解析边渲染。

测试代码

<!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>

  谷歌浏览器

点击确定关闭alert后,页面才开始渲染。

火狐浏览器

alert弹出时,页面已经渲染。

ie11

alert弹出时,页面已经渲染。

但是发现一个问题,就是当把alert换成一个阻塞js代码时候,三款浏览器的页面渲染都被阻塞了;

<!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啊是</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>
var time=+new Date();
while(true){
if(+new Date()-time>3000){
break;
}
}
</script>
</body>
<html>

  

谷歌浏览器,火狐浏览器,ie浏览器解析顺序的更多相关文章

  1. 经典面试题:浏览器是怎样解析CSS的?

    摘要: 理解浏览器原理. 解析 一旦 CSS 被浏览器下载,CSS 解析器就会被打开来处理它遇到的任何 CSS.这可以是单个文档内的 CSS.<style>标记内的 CSS,也可以是 DO ...

  2. 火狐Firefox 浏览器 onblur() 并且alert()时文本被选中问题

    说明:镜像是组成在线实验课程的基础环境,教师设计的实验绑定一个或多个镜像,就组成了一讲独立的在线实验课程. 镜像名称:     火狐Firefox 浏览器 onblur() 并且alert()时文本被 ...

  3. 1.Google Chrome浏览器 控制台全解析

    Google Chrome浏览器 控制台全解析 在Google Chrome浏览器出来之前,我一直使用FireFox,因为FireFox的插件非常丰富,更因为FireFox有强大的Firebug,对于 ...

  4. Js 日期选择,可以的一个页面中重复使用本JS日历,兼容IE及火狐等主流浏览器,而且界面简洁、美观,操作体验也不错。

    <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="con ...

  5. 三大浏览器(火狐-谷歌-IE浏览器)驱动版本下载

    1.chrome浏览器: 对于chrome浏览器,有时候会有闪退的情况,有时候也许是版本冲突的问题,我们要对照着这个表来对照查看是不是webdriver和chrome版本不对应 点击下载chrome的 ...

  6. js的解析顺序 作用域 严格模式

    一.javascript的解析顺序 我们大家所理解的代码的执行顺序都是从上到下的,但是实际上确不是这样的.我们看一下下面的代码. 1 alert(a); 2 var a = 1; 如果执行顺序是从上到 ...

  7. javascript的解析顺序

    一.javascript的解析顺序 我们大家所理解的代码的执行顺序都是从上到下的,但是实际上确不是这样的.我们看一下下面的代码. 1 alert(a);2 var a = 1;如果执行顺序是从上到下的 ...

  8. 步步深入:MySQL架构总览->查询执行流程->SQL解析顺序

    前言: 一直是想知道一条SQL语句是怎么被执行的,它执行的顺序是怎样的,然后查看总结各方资料,就有了下面这一篇博文了. 本文将从MySQL总体架构--->查询执行流程--->语句执行顺序来 ...

  9. Python的方法解析顺序(MRO)[转]

    本文转载自: http://hanjianwei.com/2013/07/25/python-mro/ 对于支持继承的编程语言来说,其方法(属性)可能定义在当前类,也可能来自于基类,所以在方法调用时就 ...

随机推荐

  1. swift-分支

    swift相当于OC的比较 if后的括号可以省略 if后只能接bool值 if后的大括号不能省略 let num1 = 5.0 let num2 = 4.0 let boo :Bool = true ...

  2. oncopy="document.selection.empty()"跟oncopy="return false"什么区别?

    实现效果一样,禁止复制. 区别: oncopy="document.selection.empty()"  没禁止,只是把它复制的内容,变成空了: oncopy="ret ...

  3. ASP.NET MVC 5 02 - ASP.NET MVC 1-5 各版本特点

    参考书籍:<ASP.NET MVC 4 高级编程>.<ASP.NET MVC 5 高级编程>.<C#高级编程(第8版)>.<使用ASP.NET MVC开发企业 ...

  4. Hibernate 系列 05 - Session 类

    引导目录: Hibernate 系列教程 目录 前言: Session是Hibernate运作的中心,对象的生命周期.事务的管理.数据库的存取都与Session息息相关. 就如同在编写JDBC时需要关 ...

  5. 使用专业的消息队列产品rabbitmq之centos7环境安装

      我们在项目开发的时候都不可避免的会有异步化的问题,比较好的解决方案就是使用消息队列,可供选择的队列产品也有很多,比如轻量级的redis, 当然还有重量级的专业产品rabbitmq,rabbitmq ...

  6. CSS3:RGBA的使用方法

    1.说明 此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度. RGBA(R,G,B,A) 2.取值 R: 红色值,正整数值的取值范围为:0 - 255,百分数值的取值范围为:0.0% ...

  7. postgres创建表的过程以及部分源码分析

    背景:修改pg内核,在创建表时,表名不能和当前的用户名同名. 首先我们知道DefineRelation此函数是最终创建表结构的函数,最主要的参数是CreateStmt这个结构,该结构如下 typede ...

  8. 【linux】free命令中cached和buffers的区别

    一.命令 [root@localhost ~]# free -m total used free shared buffers cached Mem: 7869 7651 218 1 191 5081 ...

  9. 在Azure上部署Windows Server Core

    作为服务器操作系统,图形界面真心有些多余了,这也是很多人喜欢Linux服务器的原因之一.从Windows Server 2008开始,微软提供了Server Core版本,其实就是一个没有图形界面的服 ...

  10. java数组

    1.java是否可以像c一次样搞个不定长数组? 不可以那样写,那样写是非法的.数组构造的时候必须指定长度,因为JVM要知道需要在堆上分配多少空间.也就是要初始化数组的话让JVM知道要给数组分配多少空间 ...