jquery ready 与资源加载顺序

虽然jquery已经失去了统治前端开发的地位,但是依然有其适用性。
很久以前就知道,js文件要放在页面的底部加载。
一则,让css尽快加载,把完整的页面呈现给用户。
二则,有时候js需要操作DOM,需要DOM已经渲染才能操作。

一般来说,jquery的ready事件可以使得ready内部的代码逻辑在DOM载入之后再执行,所以js就算写在头部也是可以的。
今天就遇到了这个问题。

移动端的页面,需要做页面适配,使用rem布局。
需要根据不同尺寸的屏幕修改html根元素的font-size。
在页面的头部载入了一个通用的js文件a。
因为有一个广告栏每个页面都有引入,所以也把广告栏相关的js写入了通用a.js。
广告栏中有对页面元素的高度取值,这段代码写在

$(document).ready(function(){
    //...
    notice()
});

之前为了保证页面渲染的效果,a.js在style.css之前载入。
现在出现了一个bug。
notice()中取到的值不在预期之内。
对bug的定位发现,是因为css还没有渲染结束notice就已经执行。
也就是说,jquery的ready方法,不会等待css的渲染。
如果css文件比较小,渲染的很快,也许不会造成影响。
但是偏偏我的css文件比较大,其中有不少base64转换过的图片资源,所以渲染时间稍长。
结果就是notice取值的时候,没有取到准确的值。

解决办法有两个。
一、把需要对元素进行高度取值的notice另写一个js,放到底部。而对根元素进行font-size操作的的代码依然在头部引入。
二、把整个a.js都放在底部引入。

一个是可以比较合适的拆分代码,但是增加一个http请求。
另一个是可以不做太大改动就能解决问题,而且不会增加http请求,但是如果网速比较慢,页面渲染会变形。

当然,现在的网络情况下,增加一个http请求不会消耗多少时间,是非常合适的选择。
但是,现在的网络情况下,网速也不会太差,不存在页面渲染完之后很长时间内加载不到js的可能。
所以,极致的体验,可以选择一。
二也是一个可以接受的选择。。。毕竟,代码拆分的工作量更大一些,不是么?

相关推荐