您的位置：首页 > Web前端 > HTML

HTML页面元素加载顺序研究报告

2012-06-14 13:40 351 查看
转自：详细见原文
HTML页面元素加载顺序研究报告（1）----简单Div罗列
一直没有意识到HTML页面的元素加载顺序有什么重要性，至多在操作DOM对象的时候注意把DOM对象写在脚本前面。
最近研究网站首页的优化，发现加载顺序确实有很多说道，对网页的加载速度，用户体验的好坏有较大的影响。索性做了几个测试页面，用HttpWatch和FireBug做了简单的研究。
页面加载，除了页面文件本身，其余加载的主要元素就是图片、Flash、Silverlight、多媒体、外嵌脚本和CSS以及iframe。其中图片无疑是最常见的元素。所以以下的测试研究基本都是以图片为主，其余的元素其实情况和图片也基本类似了。另外考虑Div是趋势和主流，所以大部分采用了Div布局，只在最后做对比分析的时候，使用了Table布局。
测试环境：IE7 ，Firefox，Windows2003。

1、首先是最简单的Div罗列：

代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>测试图片加载顺序</title>

</head>

<body>

<div id="div1"><img src="images/Div1.jpg" /></div>

<div id="div2"><img src="images/Div2.jpg" /></div>

<div id="div3"><img src="images/Div3.jpg" /></div>

<div id="div4"><img src="images/Div4.jpg" /></div>

<div id="div5"><img src="images/Div5.jpg" /></div>

<div id="div6"><img src="images/Div6.jpg" /></div>

<div id="div7"><img src="images/Div7.jpg" /></div>

<div id="div8"><img src="images/Div8.jpg" /></div>

<div id="div9"><img src="images/Div9.jpg" /></div>

<div id="div10"><img src="images/Div10.jpg" /></div>

<div id="div11"><img src="images/Div11.jpg" /></div>

<div id="div12"><img src="images/Div12.jpg" /></div>

</body>

</html>

在页面中放置了12个Div，每个Div中放置一个9k的图片，测试结果如下：
详细见 http://www.cnblogs.com/dkarthas/archive/2010/07/04/1770989.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航