jquery教程:jquery统计页面加载时间

jquery教程:jquery统计页面加载时间-第1张-菜鸟博客

我们在浏览网页的时候,经常看到别人的网页底部有个页面加载耗时xx秒

这里简单写个示例

<script type="text/javascript">
var times=function(){
var timing=performance.timing;
var loadTime=timing.loadEventEnd-timing.navigationStart;
if(loadTime<=0){
setTimeout(function(){times()},200);
return
}
var readyStart=timing.fetchStart-timing.navigationStart;
var redirectTime=timing.redirectEnd-timing.redirectStart;
var appcacheTime=timing.domainLookupStart-timing.fetchStart;
var unloadEventTime=timing.unloadEventEnd-timing.unloadEventStart;
var lookupDomainTime=timing.domainLookupEnd-timing.domainLookupStart;
var connectTime=timing.connectEnd-timing.connectStart;
var requestTime=timing.responseEnd-timing.requestStart;
var initDomTreeTime=timing.domInteractive-timing.responseEnd;
var domReadyTime=timing.domComplete-timing.domInteractive;
var loadEventTime=timing.loadEventEnd-timing.loadEventStart;
var allTimes=[{"描述":"准备新页面时间耗时","时间(ms)":readyStart},{"描述":"redirect 重定向耗时","时间(ms)":redirectTime},{"描述":"Appcache 耗时","时间(ms)":appcacheTime},{"描述":"unload 前文档耗时","时间(ms)":unloadEventTime},{"描述":"DNS 查询耗时","时间(ms)":lookupDomainTime},{"描述":"TCP连接耗时","时间(ms)":connectTime},{"描述":"request请求耗时","时间(ms)":requestTime},{"描述":"请求完毕至DOM加载","时间(ms)":initDomTreeTime},{"描述":"解释dom树耗时","时间(ms)":domReadyTime},{"描述":"load事件耗时","时间(ms)":loadEventTime},{"描述":"从开始至load总耗时","时间(ms)":loadTime}];
console.table(allTimes)};
window.onload=times;
</script>

jquery教程:jquery统计页面加载时间-第2张-菜鸟博客

当然了这些都可以通过F12看看network 查看timeline

当页面的加载时间超过10秒就会流失大量的用户,那么如何让页面加载时间更快呢?

1、优化图片,包含大量图片的页面加载速度非常缓慢,这会耗费很多带宽资源

2、尽量减少或避免使用页内iframe框架,因为在打开一个页面的同时,浏览器实际上在同时访问多个页面,所有的iframe加载完后,你才能看到一个完整页面

3、在html代码的底部加载javascript操作,而非放在头部加载,页面执行是从上而下执行的,如果某个js加载耗时太长,这会影响到整个页面

4、合并资源文件、压缩文件

5、尽量减少HTTP的请求次数

6、缓存技术。访问量大的页面(如首页)生成静态页,常用的且变更不频繁的模块使用局部缓存,减少数据库查询次数

7、延迟显示可见区域外的内容

8、延长执行非必要脚本

9、尽量使用图片代替flase

10、避免阻塞

11、Gzip压缩

12、DNS读取

... ...所以到底本篇主题是什么?凑字数?

猜你喜欢

发表评论