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

jquery ready 与资源加载顺序相关推荐

浏览器了解（五）资源加载顺序
资源加载顺序在加载web资源时,首先下载html文件,进行html解析,在遇到javascript或css标签时,启动相应的解析机处理. 当遇到外部资源时(如<script src='xxx' ...
前端静态资源加载顺序
一．js放在head中会立即执行,阻塞后续的资源下载与执行.因为js有可能会修改dom,如果不阻塞后续的资源下载,dom的操作顺序不可控. 正常的网页加载流程是这样的. 浏览器一边下载HTML网页,一 ...
queueing 优化_简单聊聊网页的资源加载优化
移动开发中很重要的一块是资源的加载优化.移动开发由于网速低带宽,高延迟,移动设备小内存,低处理器性能的原因,因此很多时候不得不通过优化前端页面的性能来满足用户对网页加载的预期. 前段时间做了相关方面的 ...
关于mui 加载顺序摘要 ( plusReady(),DOMContentLoaded、onload)
plus初始化原理及plus is not defined,mui is not defined 错误汇总 plusready plus is not defined 关于plus是哪里来的问题 pl ...
html资源加载前触发事件,jquery页面加载时触发ready()事件
ready()事件类似于onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行.此外,下列写法是相等的: $(doc ...
jquery源码 DOM加载
jQuery版本:2.0.3 DOM加载有关的扩展 isReady:DOM是否加载完(内部使用) readyWait:等待多少文件的计数器(内部使用) holdReady():推迟DOM触发 read ...
小程序页面onload()，onready()加载顺序
小程序 onLoad(Object query) 页面加载时触发.一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数. onShow() 页面显示/切入前台时触发. on ...
让我们再聊聊浏览器资源加载优化
几乎每一个前端程序员都知道应该把script标签放在页面底部.关于这个经典的论述可以追溯到Nicholas的 High Performance Javasript 这本书的第一章Loading and ...
【让我们再聊聊浏览器资源加载优化】
几乎每一个前端程序员都知道应该把script标签放在页面底部.关于这个经典的论述可以追溯到Nicholas的 High Performance Javasript 这本书的第一章Loading and ...

jquery ready 与资源加载顺序

jquery ready 与资源加载顺序相关推荐

最新文章

热门文章