首先看一张访问TT猫首页的截图:
测试环境为谷歌浏览器,暂且不讨论其它浏览器,截图下方我们可以观察到以下参数:
DOMContentLoaded:1.42s | Load:2.31s
以上参数是在CTRL+F5下测试的,也就是说不存在浏览器本地缓存一说,DOM渲染时间为1.42s,整个页面load时间为2.31s。
在互联网世界中有一个八秒原则就体现了这网站打开速度的重要性。网络用户在访问网站的时候,如果时间太长则会放弃对该网站的继续访问;反之,如果网站页面打开时间短,那么你的网站将会获得用户的喜欢。天猫打开的速度为1-2s左右,这样的速度都是被用户认可的理想速度;如果在3~5秒,那么这个时间就是不是太理想了;如果高于8秒那么用户就会直接关闭网页,不再访问。
部分同学可能会好奇,DOMContentLoaded和load到底有什么区别,首先我们先看下DOM文档加载的步骤
DOMContentLoaded是在DOM树构建完成之后触发的,而load是在页面加载完毕触发的,所有load的时间要比DOMContentLoaded的时间稍微长一些。
//DOMContentLoaded 事件,不需要等待图片等其他资源加载完成
$(document).ready(function() {
// ...代码...
});
//load-页面上所有的资源(图片,音频,视频等)被加载以后才会触发load事件
$(document).load(function() {
// ...代码...
});
所以一般情况下,我们初始化JS的时候没有特殊要求使用ready即可。
如果大家打开浏览器F12自己测试,截图中的前两个参数是一直在变化的,其实TT猫在后台自己默默的加载了许多资源文件,只是用户察觉不到罢了。