浏览器是如何处理页面元素的Download?

首先,浏览器对于script的下载是避免并行进行的。HTTP/1.1协议中规定浏览器和同一host之间只建立最多两个连接,也就是说允许的最 大并行度为2(当然,对IE和Firefox来说,你都可以通过修改浏览器的设置来扩大这个并行度)。但对于Script的下载来说,浏览器在开始下载 Script之后,是不会并行的下载其他element的。不会并行下载script这一点是一个事实,但浏览器为什么要采用这种策略,以及浏览器我们提 到的“将Script放到HTML文件中尽量靠近尾部”到底能起到多大的作用,需要注意哪些事项,我希望在这篇文章中进一步的进行讨论。

<HTML>
Test javascript download page
<script src="jsdownload_j1.js"></script>
<script src="jsdownload_j2.js"></script>
This is a simple page to test javascript download.
<input onclick="OnB1Click()" name="testButton" type="button" value="Click Me" />
<img src="Sunset_small.JPG" alt="" />
<img src="Blue_hills_small.JPG" alt="" />
</HTML>

这个HTML文件include了两个javascript文件,含有两张图片。两个javascript文件内容分别如下:

//jsdownload_j1.js:
function OnJ1B1Click()
{
  alert("A simple test");
}

//jsdownload_j2.js:
function OnB1Click()
{
  OnJ1B1Click();
}

从代码中看出,这个HTML文件很简单,带有两张图片和一个button,当button被click的时候,调用 jsdownload_j2.js的OnB1Click()函数,而OnB1Click()函数是简单的调用jsdownload_j1.js文件中的 OnJ1B1Click()函数。

我们来看看用IBM Page Detailer工具获得的IE浏览器访问该页面时的页面元素下载图:

从图中可以看到,javascript的下载block了其他元素的下载,因此第一个可视元素(图片)的下载完成是在1.33秒的时刻,也就是说,用户等 待1.33秒才能看到页面上的第一幅图片。而如果我们把HTML中的javascript的位置放到稍后的位置,例如,改成这样:

<HTML>
<HEAD>
<Title>Test javascript download page</Title>
</HEAD>
<BODY>
<img src="Sunset_small.JPG">
<img src="Blue_hills_small.JPG">
<Script language="Javascript" src="jsdownload_j1.js"></Script>
<Script language="Javascript" src="jsdownload_j2.js"></Script>
This is a simple page to test javascript download.</br>
<input type="button" value="Click Me" name="testButton" onclick=OnB1Click()></input>
</BODY>
</HTML>

则得到的element下载图如下:

虽然总的下载时间比上一次稍长,但在0.72秒的时候,第一幅图片就已经下载完成,此时用户会看到页面的主要部分,因此对用户来说,页面变“快”了。

这是一个典型的利用浏览器下载Script时候的非并行特性优化页面性能的方法。接下来,我们讨论下为什么浏览器在下载Script的时候会采用非并行的 方式。其实原因也不复杂:
在我们的HTML文件中,有两个Script,一个是jsdownload_j1.js,另一个是jsdownload_j2.js文 件,如果允许浏览器并行下载这两个script,则可能发生jsdownload_j2.js文件先于jsdownload_j1.js文件下载完成的情 况。这时如果页面上后续的一个javascript调用使用了jsdownload_j2.js文件中的函数,则此调用会立即发生(因为浏览器判断到 jsdownload_j2.js文件已经下载完成了),而如果此时jsdownload_j2.js文件中的该函数需要依赖于 jsdownload_j1.js中的另一个函数,由于此时jsdownload_j1.js文件还未下载完成,则此调用会产生一个javascript error。为了避免这样的情况,浏览器采用了严格按照HTML文件中定义的顺序下载Script,并严格按照非并行方式下载的策略。

最后一个需要讨论的问题,就是这种提升页面性能的方式有哪些需要注意的内容了。实际上,如同上面黑体字的讨论,如果不分青红皂白把Script文件全部放 在HTML的最后部分,也是会出问题的。例如,在我们的例子中,Button的Click事件需要调用js文件中的某个函数,如果Script都被放到 HTML文件的最后的话,button这个element会在script下载完成之前被render出来,如果此时用户点击了这个button,就一定 会出现一个Script error。关于这个问题,有两个解决方法:
1,将Script放在合适的,尽量靠近尾部的地方,由开发人员保证不会出现这样的问题;
2,为所有的js文件中需要被调用的函数,在HTML中实现一个空函数(放在靠前的位置),这样当页面需要的js文件没有download完成时,用户点 击按钮等操作之后出发一个空函数,避免了Script Error(当然,可能会confuse用户);而等js文件download完成后,这些function会被override,用户的操作能够得到正 确的解决。

转载:http://www.guanheshan.com/wordpress/category/software-testing/performance-testing/

时间: 2024-10-07 22:35:34

浏览器是如何处理页面元素的Download?的相关文章

JS获取网页窗口大小、浏览器窗口大小、页面元素位置

来自 阮一峰的网络日志>>http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html 一.两个概念 网页大小:一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口大小:浏览器窗口的大小,则是指在浏览器窗口中看到的那部分网页面积,又叫做viewport(视口). 很显然,如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条),那么网页的大

js获取页面元素距离浏览器工作区顶端的距离

先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)        document.documentElement.scrollTop //firefox (javascript)        document.documentElement.scrollLeft //firefox (javascript)        document.body.scro

获取页面元素距离浏览器工作区顶端的距离

先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)        document.documentElement.scrollTop //firefox (javascript)        document.documentElement.scrollLeft //firefox (javascript)        document.body.scro

js获取页面元素位置函数(跨浏览器)

function getElementPos(elementId) { var ua = navigator.userAgent.toLowerCase(); var isOpera = (ua.indexOf('opera') != -1); var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof var el = document.getElementById(elementId); if(el.par

JavaWeb学习总结第三篇--走进JSP页面元素

JavaWeb学习(三)—走进JSP页面元素 JSP:Java Server Pages,译为Java服务器页面.其脚本采用Java语言,继承了Java所有优点.JSP元素可以分为指令元素.脚本元素和动作元素三种类型.指令元素是针对JSP引擎设计的,它控制JSP引擎如何处理代码:脚本元素是嵌入到JSP页面的Java代码:而动作元素则负责连接所用到的组件.下面,我简单总结一下常用的指令元素和属性. 一:JSP指令元素 JSP指令元素主要用来和JSP引擎沟通,提供整个JSP网页相关的信息,并且用来设

h5之scrollIntoView控制页面元素滚动

如果滚动页面也是DOM没有解决的一个问题.为了解决这个问题,浏览器实现了一下方法,以方便开发人员如何更好的控制页面的滚动.在各种专有方法中,HTML5选择了scrollIntoView()作为标准方法.scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视窗中.如果给该方法传入true作为参数,或者不传入任何参数,那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平.如果传入false作为参数,调用元素会尽可能全部出现在视口中(可

HTML5 增强的页面元素

一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = document.getElementById("num1").valueAsNumber; 七.HTML5 增强的页面元素 1.figure.figcaption <figure> 标签规定独立的流内容(图像.图表.照片.代码等等).figure 元素的内容应该与主内容相关,但如果被删除,

activePDF Architect WBE 控件可动态产生自定义PDF文件,控制布局和页面元素

activePDF Architect WBE 控件提供了强健的API用于即时地构建完美的PDF报表.PDF表单等,可以添加文本.图像.表格.注释.表单字段等,并且可以完全控制格式和布局位置,直接从你应用程序产生高质量的PDF文档. 具体功能: 动态产生自定义PDF文件,控制布局和页面元素 从头开始构建PDF,使用强健的表格控件和其他工具创建专业的适合你商业标准的布局 整合交互式元素到PDF里,如超链接.表单字段.注释等 直接从应用程序或者数据库数据,快速且简便地创建大批量PDF文件 使用相似的

[转载]用Javascript获取页面元素的位置

原文地址:http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html 制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的全部面积,就是它的大小.通常情况下,网页的大小由内容和CSS样式表决定. 浏览器窗口的大小,则是指在浏览器窗口中看到的那