You are here
css与javascript文件的载入顺序
通常优秀的网页，都是把css与JS文件独立的，以保持文档结构清晰。这时候载入css与JS文件的顺序，就值得思考一下了。
让我们从实际情况出发，分析一下。
首先，网页对CSS的依赖非常大，如果html载入了而CSS没载入，那网站就会面目全非，所以，CSS必须在html之前载入。
html的结构都是在body中，所以css想在他前面的话，就必须在head中载入——这也是所有人都毫不怀疑的。
那么javascript文件呢？该什么时候载入？
我们先想想JS可能会做些什么。
网页中的JS一般用来制作特效，或者动态载入数据，但不论他做什么，最终都会操作DOM元素（即html标签），以便把他的工作成果展示出来。
如果JS执行的时候，html结构没加载出来，那么JS就会因为找不到要操作的元素而报错。
所以，理论上讲，JS应该在html之后加载。
但Javascript是一门很灵活的语言，他可以先载入，再执行，比如，先在head中载入，然后在body之后执行代码，或者在window.onload事件里执行。这样也不会报错。
所以很多人也会把JS放在head中载入。
这种方式一般不需要担心什么，但存在潜在隐患。
因为，大部分浏览器，在载入JS的时候，都不能同时载入其他元素。
这个同时载入是指，比如网页中有CSS与很多图片，这些图片都能同时载入，而css也能和图片一起载入，不会出现必须将一个载入完成才能继续载入下一个的情况。
但很遗憾，javascript就不是这样，在JS载入之时，其他的元素都必须等待。
为什么会这样？我们想想JS的意义，他会操作html和css，浏览器会等待他操作完成后，看看有没有变化再继续——虽然JS并不一定会在载入的时候就操作网页，但浏览器会假定他会。
那么两个JS文件是否可以同时载入呢？也不能，因为两个JS可能互相关联而又冲突，可能A.js需要B.js执行了，才能执行自己，否则就报错。
浏览器对JS文件的处理，可以说很不灵活，而且不人性化，所以一些现代浏览器已经尝试同步载入JS与其他文件了，比如chrome。但其他浏览器可没有这么智能。
可以说浏览器对外来的javascript文件，存在着一种“未知恐惧”。因为JS本来就是未知的，变数太多。
特别是有些人比如我，喜欢在JS里面搞些奇奇怪怪的东西，什么闭包啊，循环引用啊，有的可能出错，有的可能拖慢浏览器执行效率。
当JS载入缓慢时，他后面的元素就会等待。
所以，你知道了吧，最好把JS放在html后面载入，这样，即使JS最终没载入起，也不会影响网页的外观。
当然，现在的web技术日新月异，JS已经发展到用来异步载入网页结构的程度了，此时的JS就必须在html之前载入，但这种情况很少，像淘宝这样流量巨大无比的网站才常用。
最后提醒一句：如果你决定把CSS与JS都放在头部，请确保JS是在CSS的后面。
本文链接: css与javascript文件的载入顺序.转载请保留.