这两天,我花了点时间看看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时,要注意JS文件间的依赖性。
谢谢