html 页面中JS与CSS，图片的加载顺序

这两天，我花了点时间看看JS，CSS，Img在html中是怎么加载的，我的总结如下：

1， 老的浏览器（IE7，Firefox2）加载的机制很简答，就是一个一个加载，比如有5个外部文件，分别为：test1.js, test2.js, style.css, iframe.html, img.png

其加载顺序为：test1.js, test2.js, style.css, iframe.html, img.png.JS 文件加载完后还需要执行一篇，其他类型的文件方能加载。style.css, iframe.html, img.png是同时加载的。加载效果如图：

该方法的缺点就是，不同类型的资源文件不能同时加载，影响网页加载效率。

2，新版浏览做了一些改进，不同的JS文件及样式文件可以同时加载，但图片文件等会block掉。

其加载流程如图：

所以，在很多JS的书籍中，都建议我们将JS文件放到最后加载，这样不会影响页面的呈现效果。

以上所写，都是关于JS存储到外部文件的情形，JS直接写到页面中的效果与外部文件类似。

解决JS阻止其他文件加载的问题，为了提升网页加载速度，可以做一下优化：

JS文件动态加载，意思是什么时候用再去加载这个JS文件。动态加载的方法有：

1，通过Ajax加载JS，并调用Eval来实现。

2，通过创建JS的SCIPRT节点，并设置SRC资源来源来实现。

3，将JS wrap到一个iframe中，并加载Iframe。

4，用document.write直接写JS代码。

以上方法，加载JS时，要注意ＪＳ文件间的依赖性。

谢谢

转载于:https://blog.51cto.com/peterding/1262786