chrome和Firefox浏览器渲染页面的不同
2017-04-03 19:06
323 查看
一直很好奇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="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文件加载完之后才开始的;
大致就写这儿多吧,关于浏览器渲染差别的探讨还要继续,加油自己!
先做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="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 和 IE9+浏览器的Ctrl+F 查找功能会影响页面渲染
- ubuntu 12.04 firefox chrome等浏览器页面乱码
- javascript 禁止页面选取-兼容IE、Chrome和firefox浏览器
- ubuntu 12.04 firefox chrome等浏览器页面乱码
- 根据firefox,ie等不同的浏览器跳转到对应页面
- IE 、Firefox、Chrome 浏览器在 F12 控制台下切换至不同框架介绍
- 解决struts2 下载中文名称乱码问题 适应不同三大主流浏览器 chrome28.0.1500.95、 firefox 23.0.1 、 IE11
- JSF1.2页面跳转时,IE和Chrome,FireFox浏览器不兼容的一个小问题
- uploadify 3.1 /3.2 在Firefox,Chrome 浏览器下,进入页面请求两次问题解决办法。
- 浏览器和明星八卦:IE,FIREFOX和CHROME有相同代码
- IE与Firefox等浏览器对容器width的不同解释及解决办法
- Chrome和Firefox浏览器一样可以很强大
- 如何在IE, Firefox, Opera浏览器中支持页面弹出并回传数据
- 话说页面兼容不同浏览器
- JavaScript无提示关闭当前页面窗口,兼容IE/Firefox/Chrome (Close the current page window without confirm by JavaScript, support all browsers)
- 判断浏览器 Firefox Opera Safari Chrome IE5 6 7 8 各版本
- IE和Firefox浏览器CSS网页布局不同点
- 最新浏览器调查:Firefox、Safari、Chrome市场占有率上升
- PHP 根据来访这的浏览器语言不同自动跳转中英文页面
- JavaScript无提示关闭当前页面窗口,兼容IE/Firefox/Chrome