在《良好的JavaScript编程习惯》系列教程的第三讲,我们将分析JS文件放在网页的什么位置更为合适。一般来说,做前端开发有个最简单的原则:CSS放在页头,JavaScript放在页尾。那么究竟为什么这么放呢,这就是我们今天研究的主题——JavaScript文件应该放在网页的什么位置?
JS文件应该放在网页的什么位置
为了能够更好的说明问题,我们写一段不符合基本原则的代码:

<script type="text/javascript">
	window.onload = function(){
		//非常多的一段JS代码
		......
		...
		.
	}
</script>
<div id="demo">
	<h1>Hello,Welcome to ITLee博客</h1>
	<!-- 这里是一大段html代码 -->
	......
	...
	.
</div>
<style type="text/css">
	/* 这里是CSS样式表 */
	...
	..
	.
</style>

      在上面这段代码中,我们看到不同的代码的排放顺序是:先JavaScript,然后html,最后CSS。那么这样的排列顺序有什么弊端呢?试想一下,浏览器加载网页,加载到JavaScript时,脚本非常多,加载脚本要花很长一段时间,而这段时间中,因为还没有加载html代码,所以目前的网页显示为完全的空白,JS脚本阻塞了html的加载。等JavaScript脚本终于加载完了,加载到html,但这时却会发现这些网页元素,没有任何样式,因为这时的CSS还没有开始加载,直到非常多的html加载完毕才能开始加载样式,那么在这段时间中,用户看到的网页从一篇空白到一个完全没有样式的网页,这种用户体验当然不是我们想要的。
      所以一个好的习惯就是先加载CSS,这样可以避免html出现无样式状态;将JavaScript放在最后,可以让网页尽快的呈现给用户,减少浏览者的等待时间。避免因为JS脚本阻塞网页的呈现。所以最完美的代码顺序应该是这样的:

<style type="text/css">
	/* 这里是CSS样式表 */
	...
	..
	.
</style>
<div id="demo">
	<h1>Hello,Welcome to ITLee博客</h1>
	<!-- 这里是一大段html代码 -->
	......
	...
	.
</div>
<script type="text/javascript">
	window.onload = function(){
		//非常多的一段JS代码
		......
		...
		.
	}
</script>

      这样的顺序就符合了我们文章开头讲到的原则:CSS文件放在页头,JavaScript文件放在页尾。今天所讲的内容虽少,却是我们项目开发过程中所要注意的最基本的原则。大家可以参考《如何避免JavaScript代码冲突》和《给JavaScript程序一个统一的入口》对JS编码习惯有更深刻的理解。
文章中如有哪些地方写的有误,欢迎各位留言纠错,共同交流!

如非特殊说明,文章均为ITLee原创,转载请注明!
原文地址:http://www.lihuai.net/qianduan/js/352.html/

【技术交流,欢迎大家拍砖】

  1. 全新优惠码 说道:

    写得不错,以后学着这么做了

  2. 别先生EHS 说道:

    1、基本按照这个原则来的,js手工hook到底部
    2、主题很简洁,不错。

  3. 小Y先生 说道:

    技术技术啊 这都是知识···

  4. 电脑爱好者 说道:

    中间扔了几个 剩下的都仍最后了…