1 利用 waterfall 进行资源加载分析

1.1 waterfall 详解

waterfall 是 Network 中，对前端性能优化非常有用的功能

资源加载情况会通过很多颜色来展示：浅灰、深灰、绿、蓝、橙、紫、红

把鼠标放在颜色条上，就会有我们想知道的加载时间

Resource Scheduling	资源调度时间	Color
Queueing	查询中，排队中，出现下面情况时，浏览器会把当前请求放入队列中进行排队 1）有更高优先级的请求 2）和目标服务器已经建立了6个TCP连接（最多6个，适用于 HTTP/1.0 和 HTTP/1.1 ） 3）浏览器正在硬盘缓存上简单的分配空间	浅灰
Connection Start	连接开始	Color
Stalled	停滞，阻塞 1）请求会因为上面任一原因而阻塞	深灰
DNS Lookup	代理转发，浏览器正在解析IP地址 1）在浏览器和服务器进行通信之前，必须进过 DNS 查询，将域名转换成 IP 地址 2）在这个阶段，前端可以处理的东西很少，但是并非所有的请求都需要经过这一阶段	深灰
Initial connection	在浏览器发送请求之前, 必须建立TCP连接 1）这个过程仅仅发生在瀑布图中的开头几行, 否则这就是个性能问题	橙色
Request/Response	请求\响应	Color
Request sent	请求发送	深灰
Waiting(TTFB)	等待中 1）Time To First Byte 2）浏览器等待响应第一个字节到达的时间，包含来回的延迟时间和服务器准备响应的时间 3）通常用这个指标啦判断 Web 服务器是否性能不够，是否需要使用 CDN	绿色
Connect Download	内容下载 1）下载资源的时间，这段时间越长，说明资源越大	蓝色

紫线是开始通过 scripts 加载资源的一个临界线，紫线之前，都是通过 html 文件进行加载的资源，要么是 link 的 src，要么是script 的 src；而紫线之后，就成了通过执行 html 文件加载进来的 js script，进行加载资源的操作。

1.2 根据 waterfall 进行性能优化

减少所有资源的加载时间。即减小 waterfall 的宽度，宽度越窄，网站访问速度越快
减少请求数量。即降低 waterfall 的高度
优化资源请求速度。从图上看，即将绿色的 ”开始渲染“ 线向左移，这条线向左移动的越远越好

下载顺序优先级：Higthest -> High -> Medium -> Low

因为浏览器并发数 limit 是 6，如果两个 url 相同，就表示两个资源的下载共用的同一个 tcp 长连接。

具体针对性优化措施

阶段	原理	优化措施
Stalled	浏览器对同一个主机域名并发连接数有限制 (6)，若当前的连接数超过上限，那么其余请求就会被阻塞，等待新的可用连接，此外，脚本也会阻塞其他组价的下载	1）将资源合理分配到多台主机上，可用提高并发数，但是增加并行下载数量也会增大开销，这取决于带宽和 CPU 的速度，过多的并行下载会降低性能； 2）脚本置于页面底部；
DNS Lookup	请求某域名下的资源，浏览器需要先通过 DNS 解析器得到该域名服务器的 IP 地址，在 DNS 查找完成之前，浏览器不能从主机那里下载到任何资源	1）利用 DNS 缓存（设置TTL时间）； 2）利用Connection:keep-alive 特性建立持久连接，可以在当前连接上进行多个请求，无需再进行域名解析；
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压缩，可以减少下载时间；

前端性能优化工具waterfall相关推荐

前端性能优化工具 - Lighthouse
Lighthouse是一个Google开源的自动化工具,主要用于改进网络应用(移动端)的质量.目前测试项包括页面性能.PWA.可访问性(无障碍).最佳实践.SEO.Lighthouse会对各个测试项的 ...
超实用web前端开发工具推荐（web开发+前端性能优化+浏览器兼容性测试+……）
要说有哪些好用的前端开发软件和工具,我可有发言权哈~因为在学习的过程中积累了不少实用型前端开发工具.今天我就从浏览器兼容性测试工具.web开发工具.前端性能优化工具.大数据可视化工具这四个方向来和大家 ...
前端性能优化--测试工具
前端性能优化–测试工具文章目录前端性能优化--测试工具前言前端性能测试工具 1. `LightHouse` `LightHouse测试结果` Performance中各类别的含义: 2. Fr ...
前端性能优化（一）性能优化的指标和工具
前端性能优化(一)性能优化的指标和工具一.性能指标 1. F12 network进行调试,我们以淘宝为例 2. 此外还有一个瀑布流的概念 waterfall 3.蓝线和红线 4.保存当前网页指标,方 ...
【系列文章】前端性能优化指标解读及实用优化工具使用教程
文章目录写在前面前端性能优化的意义常见性能指标常见性能分析工具 Lighthouse 性能指标解读 ==FCP== First Contentful Paint : 第一个可见元素绘制展现的时 ...
前端性能优化指标 + 检测工具
前端性能优化指标 + 检测工具文章目录前端性能优化指标 + 检测工具整体概览 FCP(First Contentful Paint) LCP(Largest Contentful Paint) ...
性能测试之前端性能优化（前端基础知识，前端性能测试常用工具，前端性能优化常见方法）
目录 1. 前端基础知识 1.1 为什么要关注前端页面的性能,了解页面的加载,渲染方式和顺序? 1.2 一次页面请求会经历哪些步骤? 1.3 页面的展示过程 2. 前端性能测试的常用工具 2.1 Go ...
深度讲解：web前端性能优化
一.课程简介: 1.课程大纲涉及到的分类网络层面构建层面浏览器渲染层面服务端层面涉及到的功能点资源的合并与压缩图片编解码原理和类型选择浏览器渲染机制懒加载预加载浏览器存储缓存机 ...
前端性能优化——从 10 多秒到 1.05 秒
https://lishaoy.net 关于性能优化是个大的面,这篇文章主要涉及到前端的几个点,如前端性能优化的流程.常见技术手段.工具等. 提及前端性能优化 ,大家应该都会想到雅虎军 ...
前端性能优化最佳实践（转）
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...

前端性能优化工具waterfall

1 利用 waterfall 进行资源加载分析

1.1 waterfall 详解

Resource Scheduling

资源调度时间

Color

Connection Start

连接开始

Color

Request/Response

请求\响应

Color

1.2 根据 waterfall 进行性能优化

具体针对性优化措施

阶段

原理

优化措施

前端性能优化工具waterfall相关推荐

最新文章

热门文章