谷歌(版本 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. Oracle 外网访问

    环境:centos7+oracle 11gr2 公网:固定IP 症状:1521端口正常,netmanager配置测试正常,plsql连接提示ORA-12514: TNS:listener does n ...

  2. git推送本地分支到远程分支

    场景 有时候我们开发需要开一个分支,这样可以有效的并行开发. 开分支有两种方式: 一种是在远程开好分支,本地直接拉下来; 一种是本地开好分支,推送到远程. 远程先开好分支然后拉到本地 git chec ...

  3. 3、项目资源的提供 - PMO项目管理办公室

    PMO项目管理办公室也需要对项目相关的资源进行提供,从而针对项目的资源也进行标准化和规范化的管理.也就是说,PMO项目管理办公室就是提供项目相关的规范化资源内容,从而统一管理项目相关的内容,达到规范的 ...

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

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

  5. Java 修饰符

    Java语言提供了很多修饰符,主要分为以下两类: 访问修饰符 非访问修饰符 修饰符用来定义类.方法或者变量,通常放在语句的最前端.我们通过下面的例子来说明: public class classNam ...

  6. 用普通计算机假设基于liunx系统的NAS部署FineReport决策系统

    何为NAS? 简单说就是连接在网络上,具备资料存储功能的装置因此也称为“网络存储器”.它是一种专用数据存储服务器.他以数据为中心,将存储设备与服务器彻底分离,集中管理数据,从而释放带宽.提高性能.降低 ...

  7. TCP连接建立和终止小结

    TCP连接建立(三次握手) 如图: 请求端发送一个SYN到服务器的相应端口,以及初始序号ISN 服务器发送包含服务器的初始序号的SYN作为应答,同时确认序号设置为客户的ISN+1 客户将确认序号设置为 ...

  8. List集合的removeAll(Collection<E> col) 和clear方法的区别

    //removeAll()方法private static void testList(){ List<String> list = new ArrayList<String> ...

  9. AC日记——蓬莱山辉夜 codevs 2830

    2830 蓬莱山辉夜  时间限制: 1 s  空间限制: 32000 KB  题目等级 : 黄金 Gold 题解  查看运行结果     题目描述 Description 在幻想乡中,蓬莱山辉夜是月球 ...

  10. 《深入理解Java内存模型》读书总结

    概要 文章是<深入理解Java内容模型>读书笔记,该书总共包括了3部分的知识. 第1部分,基本概念 包括"并发.同步.主内存.本地内存.重排序.内存屏障.happens befo ...