html 页面中JS与CSS,图片的加载顺序
2013-08-02 11:26
561 查看
这两天,我花了点时间看看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文件间的依赖性。
谢谢
本文出自 “IT博客” 博客,请务必保留此出处http://peterding.blog.51cto.com/3664295/1262786
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文件间的依赖性。
谢谢
本文出自 “IT博客” 博客,请务必保留此出处http://peterding.blog.51cto.com/3664295/1262786
相关文章推荐
- html、css、js文件加载顺序及执行情况
- 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
- html,css,js加载顺序
- 浏览器加载和渲染html的顺序(html/css/js)
- 关于js css html加载顺序整理
- html,css,js加载顺序
- 【原】HTML页面元素加载顺序研究报告(4)----用JavaScript插入图片
- html,css,js防止浏览器缓存,导致不加载新页面。
- 页面js和css加载顺序优化建议
- 关于html,css,js三者的加载顺序问题
- SpringMVC 通过Controller返回到jsp页面后,页面能显示,但js,css图片等加载不出来
- html,css,js加载顺序
- 浏览器加载和渲染html的顺序(html/css/js)
- 用CSS/JS技巧优化HTML页面加载速度
- 【原】HTML页面元素加载顺序研究报告(5)----Script标签在Firefox下对背景图片的影响
- 关于 基于maven创建的项目jsp页面无法加载css、js、图片的问题
- 关于加载html页面中js顺序问题
- html,css,js加载顺序
- 【Swift】HTML加载本地Css、JS、图片
- 用CSS/JS技巧优化HTML页面加载速度