css与javascript文件的载入顺序

本文属于高性能web前端优化系列

通常优秀的网页,都是把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的后面。

发表评论

电子邮件地址不会被公开。