您的位置：首页 > 其它

提高浏览器加载页面效率的讨论

2011-01-01 19:58 218 查看

当页面内容很多时，主要是dom的节点很多时，浏览器打开网页的速度主要受dom节点的加载时间影响。我做了一个这样的实验：使用firefox和ie通过在线和离线两种方式打开一个网页(包含一个20000行*10列的表格)，验证打开网页的时间。使用firefox打开，server端用时在15s左右，浏览器打开需20s左右；使用ie打开，server端用时4s左右，浏览器打开需6s左右。
时间的计算方法：在server端，在php脚本的开始生成表格之前记录开始时间，在表格输出之后打印用时。浏览器端则在<body>后记录开始时间，在onload()中提示用时。但这样计算的浏览器打开页面的用时并不准确，自onload执行到浏览器将所有内容显示出来用时无法统计，不知道大家有什么好方法。
从结果上看，可能是浏览器没创建一个新的dom节点都要在dom树上游历。而且dom树越大越深，插入一个新节点的用时也越长。统计结果可以从下面看出。
加载10000*10的表格时，firefox每千行的加载时间约700ms，ie每千行的加载时间约170ms。
加载20000*10的表格时，firefox每千行的加载时间约1000ms，ie每千行的加载时间约170ms。
加载25000*10的表格时，firefox每千行的加载时间约1200ms，ie每千行的加载时间约190ms。

当输出一个结果复杂，内容繁多的报表时，ie浏览器会加载几分钟，并且加载过程中浏览器处于阻塞的状态。
尽管输出的内容一样多，但随页面布局的不同，会影响dom树的形状，这样也会造成浏览器加载时间的差异。比如输出一个很复杂且内容很多的报表，将所有的表格套在一个<div>下，速度就不如去掉<div>。表格套进表格里就不如将表格都并列开来。
此外要使节点尽可能少，比如100行的表格就要创建数百个节点，而将内容格式化后保存成字符串，在保存在<input type="hidden" value="内容">中，就可以只用一个节点保存100行的内容。
以上面的例子20000*10行的表格，将内容保存在200个<input type="hidden">元素中，firefox和ie的加载时间差不多是0.04s，在线打开也只需不到2s的时间。

本文转自www.35java.com

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航