西红柿爱番茄

Script DOM Element动态加载js可以使得js文件跟其他资源并行加载并异步执行，这是我们都知道的事实。但是有一点，或许有些人没有想到，js脚本在何时才会开始加载？

话说多了不足为信，看一个简单的测试：《测试js何时开始加载（用firebug查看HTTP瀑布图，或者HTTPWatch、Inspection等等均可）》，代码示例如下

[javascript]
var s = document.createElement("script");
s.setAttribute("src","test.js");

var l =document.createElement("link");
l.setAttribute("href","/wp-content/c/style.css");
l.setAttribute("rel","stylesheet");

var img = new Image();
img.setAttribute("src","/wp-content/uploads/2010/06/performance.png");
//document.body.appendChild(img);
document.body.appendChild(l);
document.body.insertBefore(s,document.body.lastChild);
[/javascript]

通过上面的测试发现：图片先加载，之后是js，最后是css文件。但是看上面的代码，图片并没有插入到文档中，但是它还是加载了；虽然js先于图片声明，但是却在图片之后加载；CSS虽然后于js声明，但是先于js加载。

这就有意思了，通过上面的测试说明：使用new Image声明的图片，在设置它的src属性之后就会开始加载；js和css文件在插入到文档之后才开始加载。通过这个特点，我们在性能优化方面就可以再总结几点想法了：

1. 通过使用Script DOM Element的方式加载js的时候，虽然说是可以同其他资源并行加载和异步执行，但是如果加载的js可以在页面加载完成之后才需要起作用的，可以在</body>前面来声明并插入到页面中，从而可以多让其他资源并行加载，而js最后加载并执行，加快页面的加载速度，这样的话将js插入到head和document.body都一样的效果。
2. 同样使用Link DOM Element的方式加载css文件的时候（如果一定要这样做的话），因为样式表关系到整个页面的布局和样式渲染，所以它需要尽早的被加载进来并开始渲染，以免造成页面内容显示的延迟和IE下“白屏”的问题。
3. 在优化图片加载的需求上，虽然图片加载是并行的，但是浏览器并行加载资源的数目是受到限制的，对于那些不是在浏览器第一屏（打开网页时在浏览器视窗内看到的内容）看到的图片、图片Tab组件、图片列表等等，可是使用上面的方式动态来插入，在页面其他重要的内容和资源都加载完毕的时候，其次的图片动态的插入，使得浏览器开始加载这些的图片。对于加快页面的显示速度，这也是不错的方式。