虽然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的可能。
所以，极致的体验，可以选择一。
二也是一个可以接受的选择。。。毕竟，代码拆分的工作量更大一些，不是么？