Web前端开发--JavaScript文件位置的选择
2015-02-08 17:57
423 查看
下面是一段有JavaScript和CSS的网页
<script type="text/JavaScript"> window.onload=function(){ //非常多的代码 ....... } </script> <div id="test">xxxxx</div> <!-很多的代码--> ...... <style type="text/css"> #test{} </style>
在浏览器中显示这个网页,浏览器加载网页,加载到JavaScript时,脚本非常多,加载脚本话费时间很长,而这段时间里因为没有加载HTML代码所以网页显示为空白,脚本延缓了HTML的加载,等待一段时间JavaScript加载完毕时,加载HTML,但是发现这些网页元素没有样式,直到非常多的HTML加载完了,才开始加载CSS,此时网页才有了样式,这样的用户体验是非常糟糕的。
我们要养成一个好的习惯,将CSS放在页头,在加载了HTML元素之前先载入他们的样式,这样可以避免HTML出现无样式状态,将JavaScript放在页尾,先将网页呈现给用户,再来加载页面内的脚本,避免JavaScript阻塞网页的呈现,减少页面的空白时间,实现更好的用户体验。
<style type="text/css"> #test{} </style> <div id="test">xxxxx</div> <!-很多的代码--> ...... <script type="text/JavaScript"> window.onload=function(){ //非常多的代码 ....... } </script>
相关文章推荐
- Web前端开发规范:文件存放位置规范
- 网站开发WEB前端高性能优化之JavaScript优化细节
- web前端-关于javascript开发的重要知识点
- Javaweb开发的资源文件位置问题
- Javascript循环绑定事件 web前端开发博客:http://www.css88.com/
- Web前端开发最佳实践(11):使用更严格的JavaScript编码方式,提高代码质量
- Web前端开发回顾之javaScript(1)
- WEB前端开发技术:HTML、GSS、JAVASCRIPT pdf
- Web前端开发:为何选择MVVM而非MVC
- web开发中,前端javascript代码的组织结构
- 基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作
- web前端开发中常用的尺寸和位置
- JavaScript & jQuery交互式Web前端开发pdf
- Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
- 为什么要选择学习Web前端开发?无法反驳的4大理由!
- web前端开发培训和自学 哪种选择更适合你
- 五个你必须知道的javascript和web debug技术 2013年11月20日 在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。 Weinre移动调试 DOM 断点
- Android开发心得——网页通过webview调用Android的图片或文件选择
- 基于MVC4+EasyUI的Web开发框架经验总结(14)--自动生成图标样式文件和图标的选择操作
- web前端不可错过的开发工具–Adobe Brackets(开源、简洁强大的HTML、CSS和JavaScript集成开发环境)