一直很好奇chrome和firefox这两大浏览器的页面渲染有什么不同，今天自己写了些html代码来做了下检验。

先做html编码，代码如下：

<!DOCTYPE html>
<html>
    <head>
        <title>测试浏览器渲染</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    </head>
    <body>
        <img src="data:images/marx.png">
        <div>Render html</div>
        <div id="test">正在执行...</div>
        <script type="text/javascript" src="lib/jquery-1.7.1.js"></script>
        <script>
            var end = 1000000;
             
            for(i=1;i<=end;i++)
            {
                $("#test").html("执行js"+i);
            }
        </script>
        <link rel="stylesheet" type="text/css" href="css/renderA.css">
    </body>
</html>

在css文件引入的前面写了段耗时较长的js代码，目的就是想检验一下css未引入时，两个浏览器渲染页面有什么不同，然后我做了件看起来无关紧要的事，将这个页面部署在tomcat server里，再启动tomcat，在浏览器里查看渲染效果，看起来有点多此一举，但是不这样做的话，firefox浏览器控制台下面的网络栏看不到文件加载的具体详情，这个我还没找到为啥，先去查查资料吧。好了，启动server，在浏览器里查看渲染效果。

先看看在chrome 里的渲染效果（我这里没安装chrome浏览器，用的是360浏览器，并切换至多标签模式，这模式就是使用chrome浏览器的内核，吐槽：该死的瓜子二手车，尼玛这广告无处不在）。

可以看到renderA.css文件处于pending状态，写的样式

body {
background-color: navy;
color:#ffffff;

}

也暂时未生效，但是img图片和文字是先加载出来了的，随后，在那个超长的for循环完成之后，css文件加载上来了，渲染生效了

同时，我在firefox里也做了实验，先输入地址，看到效果却是这样子的

因为那段for循环未执行完，css也未加载上来，整个html未读取完，所以网页内容仍然是设置的默认页面，除了个jquery文件处于pending状态，什么都没有加载上来，页面上什么都没有，还是原来的默认页面内容。

随后，js那段for循环执行完毕，css加载完毕，html读取完毕，才渲染整个页面。

看到了区别，大致总结了一下chrome和firefox浏览器渲染的不同：

1、chrome不管html读取完没有，总是有一个预加载的，img图片或者其他元素都是预先加载上来了的，虽然样式有点丑；

firefox没有这个预加载的过程，中规中矩的等待整个html文件读取完毕，再行加载各元素。

2、chrome渲染虽然也是等整个html文件读取完毕，再行渲染，但是它的预加载为他加分不少，这样子做的缺点在于有一个超级丑的展示过程，看着难受；

firefox虽然没有这个预加载，没有那个特丑的展示过程，只要渲染完毕，展示给用户的就是一个好看的有样式的页面，但是缺点在于如果这一下渲染的东西过多，或者同时还要下发请求查询数据什么的，浏览器压力恐怕有些大，尤其是部分较低版本的firefox浏览器稳定性并不好，这时候有挂掉的可能。

当然也有共同点：

1、js脚本执行阻塞了页面的渲染；

2、样式的渲染都是css文件加载完之后才开始的；

大致就写这儿多吧，关于浏览器渲染差别的探讨还要继续，加油自己！

chrome和Firefox浏览器渲染页面的不同的更多相关文章

  1. 浏览器渲染页面的时候，不同的script块之间的关系

    浏览器渲染页面时,当读到script元素的时候,浏览器中的js引擎会分多个script代码块来读取,不同的script代码出错互不影响,但是由于script中的变量作用域是全局,所以前面代码块声明的变 ...

  2. 网页性能优化：防止JavaScript、CSS阻塞浏览器渲染页面

    网页中引用的外部文件: JavaScritp.CSS 等常常会阻塞浏览器渲染页面.假设在 <head> 中引用的某个 JavaScript 文件由于各种不给力需要2秒来加载,那么浏览器渲染 ...

  3. 浅谈浏览器解析 URL+DNS 域名解析+TCP 三次握手与四次挥手+浏览器渲染页面

    (1)浏览器解析 URL 为了能让我们的知识层面看起来更有深度,我们应该考虑下面两个问题了: 从浏览器输入 URL 到渲染成功的过程中,究竟发生了什么? 浏览器渲染过程中,发生了什么,是不是也有重绘与 ...

  4. 浏览器渲染页面原理，reflow、repaint及其优化

    浏览器的主要组件包括: 1.      用户界面 - 包括地址栏.前进/后退按钮.书签菜单等.除了浏览器主窗口显示的你请求的页面外,其他显示的各个部分都属于用户界面. 2.      浏览器引擎 - ...

  5. 怎么在Chrome和Firefox浏览器中清除HSTS设置？

    HSTS代表的是HTTPS严格传输安全协议,它是一个网络安全政策机制,能够强迫浏览器只通过安全的HTTPS连接(永远不能通过HTTP)与网站交互.这能够帮助防止协议降级攻击和cookie劫持. HST ...

  6. 160826、浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘

    一.浏览器渲染页过程描述   1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...

  7. 浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘。

    一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DOM树 ...

  8. Chrome和Firefox浏览器调试对比

    最近的项目中使用Extjs5, 其中主要的一个特点就是js文件的动态加载,之前使用Firefox浏览器对js文件进行调试,打断点时,只对当次调试有效,刷新之后,由于动态加载的js文件(文件名后面加了一 ...

  9. IE， Chrome和Firefox浏览器 差异对比

    最近的项目中使用Extjs5.6, 其中主要的一个特点就是js文件的动态加载,之前使用Firefox浏览器对js文件进行调试,打断点时,只对当次调试有效,刷新之后,由于动态加载的js文件(文件名后面加 ...

随机推荐

  1. Coursera课程笔记----C程序设计进阶----Week 5

    指针(二) (Week 5) 字符串与指针 指向数组的指针 int a[10]; int *p; p = a; 指向字符串的指针 指向字符串的指针变量 char a[10]; char *p; p = ...

  2. Day_12【集合】扩展案例2_键盘录入一个字符串，对其进行去重，并将去重后的字符串组成新数组

    需求分析:键盘读取一行输入,去掉其中重复字符, 打印出不同的那些字符 思路: 1.键盘录入字符串 2.遍历字符串,将每个字符存储到集合中 3.将集合中重复的字符去掉 4.创建新集合,遍历老集合,获取老 ...

  3. Power BI：社保、公积金增减

    本月和上月比较,社保.公积金有增减,拓展开来,每两个相邻月份比较,社保.公积金有增减. 数据放在SQL Server Express,有公司.姓名.分类.个人缴费金额.单位缴费金额.年月等字段,uni ...

  4. [LA7139 Rotation(2014 shanghai onsite)]二维树状数组

    题意:有一个n*m的矩形,一辆车从左上角出发,沿一条路径走,路径是由矩形上每个单元格的边构成的,最后回到左上角,求车子在每个格子转过圈数的平方和. 思路:假设需要记录每个格子转的顺时针的圈数(为负表示 ...

  5. [hdu5371 Hotaru's problem]最大回文半径

    题意:在一个字符串里面找最长的[A][B][A]子串,其中[A][B]是回文串,[A]和[B]的长度相等 思路:[A][B]是回文串,所以[B][A]也是回文串.先预处理出每个点的最大回文半径Ri,枚 ...

  6. [zoj3623]背包模型

    给定n种物品,每种物品需要ti时间生产出来,生产出来以后,每单位时间可以创造wi个价值.如果需要创造至少W个价值,求最少时间. 思路:dp[j]表示用时间j所能创造的最大价值,则有转移方程:dp[j ...

  7. ipad4密码忘记锁定了如何破解

    ipad4更新后被要求输入密码,但很长一段时间后忘记了,一直想不起来,也没有忘记密码的选项,以下是简单的破解方法. 注意:没有备份的资料是要被清空的 一.windows10系统,安装iTunes安装 ...

  8. android 百度地图v3.2.0获取实际地址

    百度地图升级到v3.2.0后,api发生挺大的变化的,但是下载的Demo却不是最新版本的. 在v3.2.0之前获取详细地址只要:option.setIsNeedAddress(true); 但是升级后 ...

  9. js 前端实现文件流下载的几种方式

    后端是用Java写的一个下载的接口,返回的是文件流,需求:点击,请求,下载 利用iframe实现文件流下载 //把上一次创建的iframe删掉,不然随着下载次数的增多页面上会一堆的iframe var ...

  10. MCP3421使用详解

    0 摘要 因某项目需要,需要采集微弱的电压信号,且对电压精度要求较高,于是选中MCP3421这款18 bit 高精度IIC AD转换芯片.本文将结合MCP3421的手册,对该芯片的使用进行详细解释,并 ...