复制代码
<!doctype html>
<html>
<head>
<title>测试页面</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="example.aspx?sleep=3" />
<div>
Hi, there!</div> <script type="text/javascript">
document.write("<script src='other.aspx?sleep=5'></scr" + "ipt>");
</script>
<div>
Hi, again!</div>
<img src="images/marx.jpg" alt="Marx" />
<img src="images/engels.jpg" alt="Engels" />
<img src="images/Lenin.jpg" alt="Lenin" />
<script src="last.aspx" type="text/javascript"></script>
</body>
</html>
经过测试,发现在火狐和Opera中,结果和测试一的一样,而在Chrome中稍微有些不同,在测试一中,图片要等到head中样式文件加载完之后才会下载,但是测试二中会和样式文件并行下载,如下图:

总结:
预加载确实是存在的,但是在Opera中没有发现;Chrome的图片可以和body中的样式文件并行下载,但是不能和head中样式文件并行下载。脚本的执行要在它前面的样式文件加载完之后。Chrome和Opera中,未加载完的资源会阻塞它后面元素的渲染,而火狐不会。测试结果可能和浏览器版本有关。
看完这些,大家是不是觉得有些乱了,我想尽可能的表达明白,但是限于我水平有限,只能做到这了,不妥之处希望大家指出,大家也可以亲自做一下试验看看。
(完)^_^









