前端性能优化（一）性能优化的指标和工具

一.性能指标
- 1. F12 network进行调试，我们以淘宝为例
- 2. 此外还有一个瀑布流的概念 waterfall
- 3.蓝线和红线
- 4.保存当前网页指标，方便以后对比
- 5.查看动画帧数
- 6.异步请求的指标
二. RAIL测量模型
- 1.R\A\I\L含义
- 2.RAIL评估标准指标
三.性能测量工具
- 1.我们常用的 Chrome DevTools
- 2.webpagetest是什么怎么用怎么看
- 3.lighthouse的使用
四.性能测试API

一.性能指标

1. F12 network进行调试，我们以淘宝为例

可以查看具体的加载时间等信息

2. 此外还有一个瀑布流的概念 waterfall

按瀑布的形式，从上而下展示各个资源请求的顺序和消耗的时间
点击在瀑布上可以查看具体的内容

queueing请求排队的时间

DNS Lookup：DNS查找的过程时间

initial connection请求与服务器连接的时间（TCP）

SSL：https 证书验证的时间

request sent 发送请求的时间

waiting（TTFB）等待响应的时间 这个指标是最重要的，用户最直观的感受
影响因素：后台的处理能力、回路网络的情况，会不会有延迟

content download 下载资源的时间（不能过长）

3.蓝线和红线

蓝线：dom加载完成的时间
红线：所有资源加载完成的时间

4.保存当前网页指标，方便以后对比

5.查看动画帧数

F12 perform 里面
command+shift+P（mac指令）

找到 show frames per second（FPS）meter
点击

Frames 74% 这个指标越高越好一般要大于60fps

6.异步请求的指标

按理说异步请求在1s内返回，都是可以的，我们可以进行压缩处理，实在不行我们可以进行loading过渡

二. RAIL测量模型

1.R\A\I\L含义

R：response 响应
A：animation 动画
I：idle 空闲
L：load加载

2.RAIL评估标准指标

response响应：处理事件应在50ms以内完成

在用户输入到收到响应，我们要在100ms内完成，但是浏览器需要对事件进行处理（预留50ms）所以我们能处理事件的时候最多为50ms

animation动画：每10ms产生一帧

idle空闲：足够多，这样用户交互来的时候，我们有足够的时间进行处理

load加载：在5s内完成内容加载并可以交互

三.性能测量工具

1.我们常用的 Chrome DevTools

我们调到performance那一栏
会提示

第一个是记录你的操作的一些性能报告
第二个是发出请求到页面加载的性能报告

2.webpagetest是什么怎么用怎么看

webpagetest地址

text location 选择站点 browser浏览器

配置一些高级选项
connection连接方式
Number of Tests to Run 测试次数（最多测试9次）
First View 用户首次访问
Repeat View 用户再次访问
Capture Video 选中之后结果可以查看测试录像

最后 START TEST
等待一会出结果（我测试的是牛客网的官网0.0）

按照首次访问和再次访问分为两行
然后说明一下列属性：
①First Byte ：发出的第一个请求等到响应的时间，得到后台的处理能力和网络的回路情况牛客网的测试结果还是不错哒

②Start Render：首屏开始渲染的时间，用户体验的第一步
③First Contentful Paint 经过多长时间绘制了第一个有意义的图像
④speed index：首页展现平均值，正常小于4

接下来我们看具体指标

最左边 First View 3.8s 代表首次访问3.8s
点击瀑布图有更详细的内容

我们观察一下这部分

会发现图片基本都是并行加载的，这地方消耗的时间，又最大值绝定（比如图中的1948ms）

还会发现某些资源是高亮的

提醒你这个返回302重定向，可以对此优化，不用访问无效的地址，可以直接访问有效的重定向之后的地址。

3.lighthouse的使用

1.全局：npm install -g lighthouse
2.lighthouse 网站地址

3.会生成一个测试报告，代表运行成功
4.我们可以按照地址直接打开报告

performance 性能 SEO搜索引擎
我们主要研究performance

根据上图会发现，是个分屏有七个都是白的，说明渐进式加载做的不是很好

lighthouse最好的好处是会给你提出很多建议，和预计会减少的时间

比如说建议第一个，会告诉你移除未被使用的js，并给你指出具体的js是什么

还有就是建议第二个是减少渲染阻塞的资源
其他的先不说了，之后会提到

5.我们再说一个验证的小技巧：

我们经过报告发现图中的这个js，由于这个js在head标签中，阻塞了页面的呈现，我们可以手动取消，再次刷新页面，看看对页面的呈现有没有影响，操作如下：

①.command+shift+p，打开浏览器命令行
输入block，找到这个，回车

②.在新弹出的框内，让与log有关的js都不加载（先点击小加号）

③.刷新在newwork中，设置过滤log，然后发现，有关log的js都被过滤出来，确实被我们手动阻塞了

④.但是我们发现这并没有影响b站首页的呈现，在呈现这方面可以说没有必要提前加载，但是我们不太了解b站的业务，所以可能有其他的作用
但是在我们自己的网站，我们要衡量这个真的是业务必需的吗

6.其实在Chrome DevTools中已经给我们集成了lighthouse

四.性能测试API

1.例子：

2.其他相关的操作

前端性能优化（一）性能优化的指标和工具相关推荐

（二）性能优化的指标和工具 (告别前端小白，成为大神的必经之路)
性能优化的指标和工具为什么要进行前端性能优化寻找性能瓶颈移动端挑战多性能指标和优化目标[了解行业标准] 网络加载性能交互体验总结 RAIL测量模型[黄金指南] 什么是RAIL RAIL的目 ...
前端性能优化指标 + 检测工具
前端性能优化指标 + 检测工具文章目录前端性能优化指标 + 检测工具整体概览 FCP(First Contentful Paint) LCP(Largest Contentful Paint) ...
前端不哭！最新优化性能经验分享来啦 | 技术头条
作者 | Dimitris Kiriakakis 译者 | 风车云马编辑 | Jane 出品 | Python大本营(id:pythonnews) [导语]Angular.React.VueJS 是 ...
前端感官性能的衡量和优化实践
本文已发表在2017年8月<程序员>杂志. 我们为什么需要关注站点的性能,性能为什么如此重要呢?如今任何互联网产品首先重要的都是流量,流量最终会转换为商业价值.所以在互联网产品中,流量.转 ...
如何优化WebAPP性能：从五个层面上彻底优化前端项目性能
如何优化WebAPP性能:从五个层面上彻底优化前端项目性能资源层面上的优化该项措施可以帮助我们优化 FP.FCP.LCP 指标. 压缩文件.使用 Tree-shaking 删除无用代码服务端配置 ...
如何优化WebAPP性能：从四个层面上彻底优化前端项目性能
如何优化WebAPP性能:从四个层面上彻底优化前端项目性能资源层面上的优化该项措施可以帮助我们优化 FP.FCP.LCP 指标. 压缩文件.使用 Tree-shaking 删除无用代码服务端配置 ...
【前端性能】网站性能优化
网站性能优化 1.尽量减少HTTP请求次数终端用户响应的时间中,有80%用于下载各项内容,这部分时间包括下载页面中的图像.样式表.脚本.Flash等.通过减少页面中的元素可以减少HTTP请求的次数, ...
【java 性能优化实战】1 理论分析：性能优化，有哪些衡量指标、性能优化的技术手段
指标是我们衡量很多事物,以及做出行为决策的重要参考.例如在生活中,当你打算买汽车时,会关注很多指标,比如动力性.燃油经济性.制动性.操纵稳定性.平顺性.通过性.排放与噪声等,而这些指标也都有相关的测试 ...
前端动画优化及性能检测
前端动画优化及性能检测工具使用前端使用动画可以分为两类: css 动画 js 动画我们提倡能够使用 css 完成的动画尽量使用 css ( 即使用 animation 和 keyframes ). ...

前端性能优化（一）性能优化的指标和工具

前端性能优化（一）性能优化的指标和工具

一.性能指标

1. F12 network进行调试，我们以淘宝为例

2. 此外还有一个瀑布流的概念 waterfall

3.蓝线和红线

4.保存当前网页指标，方便以后对比

5.查看动画帧数

6.异步请求的指标

二. RAIL测量模型

1.R\A\I\L含义

2.RAIL评估标准指标

三.性能测量工具

1.我们常用的 Chrome DevTools

2.webpagetest是什么怎么用怎么看

3.lighthouse的使用

四.性能测试API

前端性能优化（一）性能优化的指标和工具相关推荐

最新文章

热门文章