前端性能优化-chrome中的Waterfall
发布日期:2021-05-28 16:41:40 浏览次数:11 分类:技术文章

本文共 1154 字,大约阅读时间需要 3 分钟。

浏览器根据HTML中外连资源出现的顺序,依次放入队列(队列),然后根据优先级确定向服务器获取资源的顺序。同优先级的资源根据HTML中出现的先后顺序来向服务器获取资源。

瀑布中各项内容的含义:

排队:  出现下面的情况时,浏览器会把当前请求放入队列中进行排队
有更高优先级的请求时
和目标服务器已经建立了6个TCP链接(最多6个,适用于HTTP / 1.0和HTTP / 1.1)     
浏览器正在硬盘缓存上简单的分配空间                 
停滞:  请求会因为上面的任一个原因而阻塞
DNS查询:浏览器正在解析IP地址,在浏览器和服务器进行通信之前,必须经过DNS查询,将域名转换成IP地址。在这个阶段,你可以处理的东西很少。但幸运的是,并非所有的请求都需要经过这一阶段
代理协商:浏览器正在与代理服务器协商请求
要求已发送:请求已发送
ServiceWorker准备:浏览器正在启动服务器
请求ServiceWorker:请求正在被发送到服务器
等待(TTFB):浏览器等待响应第一个字节到达的时间。包含来回的延迟时间和服务器准备响应的时间
内容下载:浏览器正在接收响应信息
接收推送:浏览器正在通过HTTP / 2服务器推送接收此响应的数据
阅读推。:浏览器正在读取以前接收到的本地数据
初始连接:在浏览器发送请求之前,必须建立TCP连接。这个过程仅仅发生在瀑布图中的开头几行,否则这就是个性能问题
SSL / TLS协商:如果你的页面是通过SSL / TLS这类安全协议加载资源,这段时间就是浏览器建立安全连接的过程。目前谷歌将HTTPS作为其搜索排名因素之一,SSL / TLS协商的使用变得越来越普遍了
时间到第一个字节(TTFB): TTFB是浏览器请求发送到服务器的时间+服务器处理请求时间+响应报文的第一字节到达浏览器的时间。我们用这个指标来判断你的网络服务器是否性能不够,或者说你是否需要使用CDN
下载:这是浏览器用来下载资源所用的时间。这段时间越长,说明资源越大。理想情况下,你可以通过控制资源的大小来控制这段时间的长度

瀑布中的颜色:

显然,瀑中有好几种颜色:浅灰,深灰,橙色,绿色,蓝色结合上面的解释,大概知道这些颜色代表的含义了:

  • 浅灰:查询中
  • 深灰:停滞,代理转发,请求发送
  • 橙色:初始连接
  • 绿色:等待中
  • 蓝色:内容下载

可以看出,就是将一次HTTP请求所花的时间做了拆解,从而有助于分析和定位问题所在。

那么该如何减少资源耗时或者提高网页打开速度呢?我想有以下几个方向可以考虑:

  1. 优化资源顺序,减少首屏打开时间。

  2. 合理收敛和发散网站的域名,域名太多导致更多的HTTP连接无法复用,域名太少导致超过浏览器限制并等待。

  3. 减少HTTP请求数,如合理利用客户端缓存,现在前端也有些工具可以合并JS/CSS资源等。

转载地址:https://blog.csdn.net/qq_32766999/article/details/117331839 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:ELK(一)ELK简介
下一篇:android录音MP3格式文件

发表评论

最新留言

留言是一种美德,欢迎回访!
[***.207.175.100]2024年02月08日 15时15分59秒