前端性能优化工具waterfall
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前端 ...
最新文章
- UA MATH571B 试验设计 QE练习题 不使用代码分析试验结果I
- win7下搭建GO开发环境 - eclipse 配置GO开发
- 【机器学习】--回归问题的数值优化
- ArcGIS实验教程——实验十七：缓冲区分析（Buffer Analysis）
- 华为机试HJ26：字符串排序
- Glib2基本api调用流程(十五)
- C++中如何使类不能继承
- 4.计蒜客ACM题库.A1947 An Olympian Math Problem
- web项目开发上传功能
- 饥荒独立服务器在线模式收不到,Windows 服务器搭建Don’t Starve Together饥荒独立服务器教程...
- IntelliJ IDEA - 自定义 TODO
- css3扇形及简单动画
- cve-2008-4609一把梭
- 网页未连接到互联网，代理服务器出现问题
- python期末大作业之实现多线程爬虫系统
- 使用 Web 高速缓存减少网络流量 / Reducing network traffic with Web caching
- 信息学奥赛一本通：1311：【例2.5】求逆序对
- Swift 与 Objective-C：您应该为下一个 iOS 移动应用选择哪个？
- 汽车发动机扭矩，转速，功率
- python 决策模型_【Spark MLlib速成宝典】模型篇05决策树【Decision Tree】（Python版）...