chrome查看请求加载时间
1.打开chrome的开发者工具(或F12)
2.切换到network,然后点击请求进行查看
3.切换到Timing
什么是 Waiting (TTFB) 时间
TTFB 是 Time to First Byte 的缩写,指的是浏览器开始收到服务器响应数据的时间(后台处理时间+重定向时间),是反映服务端响应速度的重要指标。TTFB 时间经常超过了页面内容的下载时间,为用户带来不必要的等待时间。这个问题的主要原因是在服务器端。
TTFB 时间多长算长?
因为每个服务器的硬件和网络环境都不尽相同,每个服务器的 TTFB 时间也不相同。大多数服务器的 TTFB 时间都在 50 ms 以下,这个时间就是我们优化时候可以追求的时间。一般来说,TTFB 时间如果超过了 500 ms,用户在打开网页的时候就会感觉到明显的等待。我么可以把 500 ms 以上认为是 TTFB 时间过长。
TTFB 过长的原因
我们知道,对于动态网页来说,服务器收到用户打开一个页面的请求时,首先要从数据库中读取该页面需要的数据,然后把这些数据传入到模版中,模版渲染后,再返回给用户。由于查询数据和渲染模版需要需要一定的时间,在这个过程没有完成之前,浏览器就一致处于等待接收服务器响应的状态。有些服务的性能比较低,或者优化没做好,这个时间就会比较长。
当然,如果服务器到用户之间的网络不好,(比如,服务器在欧洲,用户在中国,用户打开网页的时候,请求需要跨越千山万水才能达到服务器),服务器接收到用户请求的时间过长,也是导致 TTFB 时间过长的原因。
有时候,页面在用户的浏览器中保存了过多的 Cookie,每次请求,这些 Cookie 都要发送到服务器,服务器都要处理这些 Cookie,这也是导致 TTFB 时间过长的原因之一。
Waiting (TTFB) 时间过长的解决办法
知道了原因,解决办法就显而易见了,那就是缩短服务器响应时间,最简单直接并且有效的办法就是使用缓存,把后台逻辑代码 和 MySQL 的执行时间最小化,一些缓存插件可以把 SQL 查询结果缓存起来,把几十次查询结果转换为几次;一些缓存插件可以直接把用户所请求的页面静态化,用户打开网页时,相当于直接从服务器上下载了静态页面。
如果是网络原因,换一个服务器是比较直接的解决办法。如果因为一些原因不能换服务器,可以使用一个 CDN,把页面同步到离用户比较近的 CDN 节点上,也是一个不错的解决办法。
如果是 Cookie 的原因,可以通过修改应用程序,删除一些不必要的 Cookie,或者精简 Cookie 内容,缩短 Cookie 的有效期等,都是解决办法。
其他指标解读:
Stalled(阻塞)
浏览器对同一个主机域名的并发连接数有限制,因此如果当前的连接数已经超过上限,那么其余请求就会被阻塞,等待新的可用连接;此外脚本也会阻塞其他组件的下载;
优化措施:
1、将资源合理分布到多台主机上,可以提高并发数,但是增加并行下载数量也会增大开销,这取决于带宽和CPU速度,过多的并行下载会降低性能;
2、脚本置于页面底部;
DNS Lookup(域名解析)
请求某域名下的资源,浏览器需要先通过DNS解析器得到该域名服务器的IP地址。在DNS查找完成之前,浏览器不能从主机名那里下载到任何东西。
优化措施:
1、利用DNS缓存(设置TTL时间);
2、利用Connection:keep-alive特性建立持久连接,可以在当前连接上进行多个请求,无需再进行域名解析;
Initial connection(初始化连接)
TCP建立连接的三次握手时间
SSL(包含于HTTPS连接中)
http是超文本传输协议,以明文方式发送内容,不提供任何方式的数据加密,如果被不法分子截取浏览器和服务器之间的传输报文,会获取其中的信息。
https 是安全套接字层超文本传输协议,就是在HTTP的基础上加入了SSL协议,SSL依靠证书来验证服务器的身份,并为浏览器和服务器之间的通信加密。
因此建立HTTPS连接的时间相当于三次握手的时间+SSL时间。
Request sent(发送请求)
发送HTTP请求的时间(从第一个bit到最后一个bit)
优化措施:
1、减少HTTP请求,可以使用CSS Sprites、内联图片、合并脚本和样式表等;
2、对不常变化的组件添加长久的Expires头(相当于设置久远的过期时间),在后续的页面浏览中可以避免不必要的HTTP请求;
Waiting(等待响应)
通常是耗费时间最长的。从发送请求到收到响应之间的空隙,会受到线路、服务器距离等因素的影响。
优化措施:
1、使用CDN,将用户的访问指向距离最近的工作正常的缓存服务器上,由缓存服务器直接响应用户请求,提高响应速度;
Content Download(下载)
下载HTTP响应的时间(包含头部和响应体)
优化措施:
1、通过条件Get请求,对比If-Modified-Since和Last-Modified时间,确定是否使用缓存中的组件,服务器会返回“304 Not Modified”状态码,减小响应的大小;
2、移除重复脚本,精简和压缩代码,如借助自动化构建工具grunt、gulp等;
3、压缩响应内容,服务器端启用gzip压缩,可以减少下载时间;
chrome查看请求加载时间相关推荐
- hiper工具查看页面加载时间
先需要下载 cnpm i hiper -g # 当我们省略协议头时,默认会在url前添加`https://`# 最简单的用法hiper baidu.com# 如何url中含有任何参数,请使用双引号括起 ...
- chrome 网页重新加载_在Chrome中为各个网页设置自定义重新加载时间
chrome 网页重新加载 Do you have a webpage that needs to be reloaded every so often or perhaps you have mul ...
- 内容分发网络 CDN 是如何提高网页加载时间的?
几乎 Internet 上的每个人都体验过内容分发网络 (CDN) 的好处.大多数科技公司,包括谷歌.苹果和微软等公司,都使用 CDN 来减少加载网页内容的延迟. CDN 通常会将服务器放置在不同网络 ...
- Chrome 调试动态加载的js
今天有个同事问到我用chrome调试动态加载js的问题,这个问题之前遇到过,只是时间有点长了,有些忘记.在这里做一下记录: 在要调试的源码的后面加上 //@ sourceURL= debug.js 注 ...
- QTP统计页面加载时间
QTP是一款功能自动化测试工具,而页面加载时间或响应速度应该是性能测试的事情,其实QTP也可以实现对页面加载时间的统计功能.因为QTP使用的是VBS脚本,VBS脚本的强大之处在于它可以调用任何wind ...
- 移动4G网络App页面加载时间过长
移动4G网络App页面加载时间过长 发现问题 2016年12月份开始,使用android客户端的部分用户反映在使用移动4G网络的情况下,App内的页面加载时间过长,几乎加载不出来,导致无法正常使用Ap ...
- unity优化冷启动时间/加载时间总结
本文一部分博主并未实践过,只是做一个总结,如有错误,请指正 目录 一.概念了解 二.优化目的 1.保证游戏流畅度的基础上DrawCall越小越好 2.Statistics统计面板参数 3.打包编译 三 ...
- vue项目优化 - 网站首屏加载时间
文章目录 1. 首先打包后看看加载时间 2. vendor 2.1. 路由懒加载 2.2. (@vue/cli < 3.0.0) map.gzip.console.log 2.3. (@vue/ ...
- 优化JS加载时间过长的一种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 去年公司在漳州的一个项目中,现场工程人员反映地图部分出图有点 ...
最新文章
- php model类,PHP培训之PHP Model类
- matlab字母随机排列,matlab_一组数据元素随机排列
- python中data.find_all爬取网站为空列表_Python网络爬虫之Scrapy 框架-分布式【第二十九节】...
- 喜报!在行签约神策数据
- flutter显示图标_Flutter使用Iconfont图标
- Java之控制反转和依赖注入
- 方式程0day MS17-010远程溢出漏洞测试
- tomcat6.0+mysql5.0+jdk5.0+myeclipse6.0打造JSP开发平台
- spring roo_使用Spring Roo进行快速云开发–第2部分:VMware Cloud Foundry
- 不得不说--自动化测试元素定位与用例设计
- Math Type World2016安装
- [转]Oracle销售人员普遍腐败?
- JS前端加密JAVA后端解密详解
- MySQL 新增、修改、删除 字段 sql语句
- python概率编程_TensorFlow新功能:TensorFlow Probability概率编程工具箱介绍
- 搭建邮件群发服务器费用,自建邮件群发服务器优缺点分析
- 深度学习之10分钟入门h5py
- TaintDroid剖析之DVM变量级污点跟踪(下篇)
- mysql扣减库存_扣库存之mysql方案讨论
- 9个好用的生命科学研究工具分享
热门文章
- 各串口设备节点/dev/tty* 的区别
- Group Lasso-Based Band Selection for Hyperspectral Image Classification
- RTOS 任务间互斥的问题
- redis命令之set和zset的操作
- 什么是UART中的FIFO ?
- G7波澜不惊,非美反弹缺乏力度
- 关于AMM解决滑点、无常损失问题的新认知 | TokenInsight
- [转]UML八大误解
- Windows 11 即将问世 | Windows 10 和 Windows 11 该如何抉择
- CODESYS (V3.5 SP12 Patch)程序开发前的配置及简单应用 第 1 篇(长沙赛搏机器智能MIC7001总线控制器+松下A6BE总线驱动器)