凎，原来前端web性能优化这么简单！（定位篇）

ppzhang
131 阅读5分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

龙猫艺.jfif

作为一名优秀的前端程序员，相信大家一定被问过性能优化相关的问题，今天皮皮章带你三下五除二，一步一步剖析前端web性能优化，看完这篇文章你就会惊呼，原来性能优化这么简单！

观前提示： 性能优化是一个大而广的话题，涉及到的方面很多，本文只总结了常见的几种定位方式以及性能优化方式，足以应对大多数优化场景。编者水平有限，有技术性错误烦请指出。

目录

如果不想看太多太长，先把结论记住，三步走：

1. 使用各种web网页性能测试工具定位需要优化的大致方向

2. 根据web网页生命周期来判断需要优化的具体模块

3. 通过性能优化规则制定对应优化方案

接下来让我们逐步探索。

定位性能优化

1. 使用专业工具对网页进行打分

Lighthouse（灯塔）

如果要说一款最著名的网页打分工具，那就不得不提大名鼎鼎的灯塔Lighthouse了，它由谷歌开发并开源，只需简单点击几下，就可免费生成专属你的网页“体检”报告。可能唯一的缺点就是不支持中文吧。（edge里也只是机翻）

使用

灯塔有三种使用方式：Chrome插件式、命令行式、Chrome-DevTools式

三种方式基本都是等价的，因为前两种方式都需要安装，这里只介绍最后一种。

DevTools自带Lighthouse

在使用Chrome或者Edge浏览器时DevTools都会集成Lighthouse功能,并且Edge浏览器的DevTools是中文版的。（用Edge的理由+1）

  • 在当前网页窗口按下F12或CTRL+SHFT+i 弹出DevTools
  • 在nav导航栏中选择Lighthouse（有可能被折叠，需要点击>>展开）

image.png

  • 右侧可以选择测试的类别和模拟测试的设备，这里我们需要的是测试的是桌面端性能，所以勾选这两个框

  • 左上角可以选择是否清除缓存和模拟限制，为了得到最接近用户首次访问的数据，推荐勾选

  • 因为Lighthouse生成的报告可能较长，推荐大家将DevTools设置成独立窗口，如下

image.png

  • 点击生成报告，然后活动活动颈椎，站起来弯弯腰，预防职业病（一般不超过五分钟）
  • 查看生成好的报告

image.png

  • 关于性能指标我们可以先忽略，引入性能指标会导致整体篇幅过长，大家只需要知道它是给网页打分的标椎即可（有兴趣的同学可以深入了解，对进一步探索性能优化是很有帮助的）
  • 分数并不是绝对的，有时候可能受各种因素影响，所以推荐大家多测几次可以让分数更准确

重点来了

Lighthouse不仅会给出分数还会给出优化建议，我们可以根据这些优化建议去定位我们web存在的问题。

image.png

以上就是Lighthouse的基本使用方式，很简单对吧。

WebPageTest - 在线测试工具

地址：WebPageTest - Website Performance and Optimization Test

灯塔是基于本地浏览器进行的测试，有时候并不能得到我们想要测试的数据，如不同地区国家的访问，不同运营商服务器节点的访问，这个时候就可以使用WebPageTest。它使用和灯塔一样简单，并且它是在线测试工具，不需占用你的电脑性能（灯塔会占用电脑性能），下面让我们来看它的使用方法。

image.png

  1. 输入需要测试的网址URL
  2. 选择测试规则
  3. 选择不同地区的服务器节点（可测试CDN）
  4. 选择桌面端或者移动端，以及不同的浏览器和不同网络
  5. 高级配置可以选择种类更多的网络、分辨率、测试次数、具体节点位置等信息
  6. 点击Start Test

与灯塔相同，它的基本测试也是免费的，但是可能因为测试的人比较多，整体耗时可能会比较长，可以点完了挂在那边，不时回来看一下。

具体测试报告与灯塔类似，这里忽略了。

2. 使用原生Chrome自带工具

看完了以上打分工具后我们来了解Chrome原生自带工具，其实浏览器自带工具也是功能非常强大的。

1. 浏览器任务管理器

  • 呼出工具 SHIFT+ESC

image.png

  • 查看所有网页的内存占用、cpu占用率、网络以及进程ID

通过这些参数，可以非常直观地判断当前网页的性能状况，以及不同网页之间的对比。

2. NetWork 网络分析

也是在DevTools里的NetWork功能。

image.png

  • 左上角选择是否保留日志和禁用缓存，推荐勾选禁用缓存
  • 刷新页面，即可查看页面加载时请求的所有网络资源
  • 时间栏查看资源加载的耗时情况
  • 大小栏查看加载资源的大小（如果被缓存就不会请求资源，大小就为0）
  • 最右侧时间线可以查看资源加载的顺序、资源是并行，在队列中加载的，所以会有排队时间
  • 时间线绿色块越长，说明加载时间越长
  • 可以选择不同的网络环境

image.png

3. Performance面板

DevTools里的Performance（性能）功能，使用方法：

  • 勾选屏幕截图、内存、网页指标

image.png

  • 点击录制（可以不用等待读条完成，等待十秒以上就可点击停止）
  • 得到结果（屏幕截图、帧率、布局切换等）

4. FPS计数器

  • 在DevTools下 CTLR+SHIFT+P,再输入FPS

image.png

可以实时地显示当前页面的帧数，对于有动画效果的页面十分有用。

肝不动了，暂时先介绍这么多，后续再接着补充。

avatar
文章
阅读
粉丝