1. 背景

当页面出现性能问题，如加载慢、页面卡顿等现象时，大多是用户主观上的感受。而要真正客观的去评测性能和定位问题原因，通常需要专业的前端同学通过 DevTools 中的 Performance 等工具来查看（如图 1 所示），这无疑增加了客观看问题的成本。

图 1

当然，目前也是有一些不错的工具来评测分析页面，但这些工具都存在一些问题。下面主要说一下 PageSpeed Insights、Lighthouse 。

1.1. PageSpeed Insights（Lighthouse）

PageSpeed Insights 和 Lighthouse 两个比较类似，就一起讲了。
这两个工具是比较强大的，对页面的分析也比较到位，但存在以下问题：

被动型。需要用户去主动执行工具才能看到分析结果。
无法保留现场。使用工具都需要重载页面才能对页面进行评测，所以当页面有一些偶发性的问题时，现场丢失，增加排错成本。
工具都是 online 版本的。内网产品无法进行评测。
插件版需要在 Devtools 中使用。增加使用成本。

所以能不能有一个工具，可以主动性的去获取页面信息，并用几乎为 0 的成本，可以让用户看到客观的页面性能指标及完备的现场数据，可以用来追溯问题及提供解决方案。

2. 解决问题

经过讨论，分了 5 个维度来判断页面的性能，如下：

页面加载时间：暂时定位为 load 的时间。
加载资源数量：在 load 过程中加载的所有资源信息。
大资源数量：超过 1MB 的资源。
慢资源数量：超过 500ms 的资源。
平均帧率：加载过程中的帧率。

通过这几个指标，大致可以说明页面的性能和问题出现的原因。

3. 实现

目前先使用 Chrome 插件的方式进行了实现，使用 Chrome 插件主要有如下优势：

ContentScript 内容注入。可以在不改造网站的情况下，对分析脚本进行注入。也可实现一些动态通知等效果。
Action Badge醒目提醒。可以通过将性能指标写在 Badge 中实现醒目的提醒效果。
Popup 详细信息。可以将详细的分析报告放在 Popup 中，方便用户查看详情。
Option 指标配置。可以将需要的指标及指标的阈值进行自定义配置。
代码复用性。插件中的采集、分析代码完全可以被复用。

3.1. 实现流程

实现流程主要为：收集数据 ➔ 分析数据 ➔ 生成报告。插件流程如下图 2 所示：

图 2

4. 插件

PageStatus
应用商店：插件地址

页面加载完成后，插件会自动将页面的加载时间显示在浏览器的工具条中，背景色根据加载时间的快慢使用“红”“黄”“绿”来标注，实时反映页面健康状况，如图 3 所示：

图 3

4.1. 功能

下面对详细的功能进行介绍。

4.1.1. 页面加载时间

页面加载时间表示的是页面触发 load 的时间，会同步到浏览器的工具条中，点击插件图标会显示更详细的页面加载信息，如图 4 所示：

图 4

4.1.2. 加载资源数量

页面加载过程中，所有资源的请求都会在这一项中体现出来。这里会按照请求的时间次序进行排列，超过 1S 的资源进行加红标注，直接从缓存读取的会用浅颜色和删除线标注，如图 5 所示：

图 5

4.1.3. 大资源数量

页面加载过程中，默认超过 1MB 的资源会被定义为大资源。如图 6 所示：

图 6

4.1.4. 慢资源数量

页面加载过程中，默认超过 500ms 的资源会被定义为慢资源。如图 7 所示：

图 7

4.1.5. 平均帧率

会计算页面加载过过程中的平均帧率，如图 8 所示：

图 8

4.1.6. 页面消息通知

默认开启，对超标的项目进行页面内通知的功能，如图 9 所示：

图 9

4.1.7. 配置

插件中所有参数都是可以进行配置的，可以点击扩展图标右下角的小齿轮按钮进入配置页面，也可以在扩展图标右键选择选项进入，如图 10 所示：

图 10

Github Repo

主动型页面性能利器：Page Status相关推荐

快速提升页面性能的必备利器
从 PC 互联网到移动互联网,越来越多的人在互联网上追剧,看资讯,刷视频,玩游戏等等,与之对应的就是各类互联网应用的用户体验要求越来越高. 其中典型的一个例子就是互联网的 "8秒原则&quo ...
link标签的几个用法，帮助提高页面性能
写在前面本文首发于公众号:符合预期的CoyPan HTML 中****元素规定了外部资源与当前文档的关系.最常见的用法,是用来链接一个外部的样式表,比如: <link href="m ...
[WebKit]浏览器的加载与页面性能优化
非常棒.非常系统的一份资料,值得阅读! 原文来自百度泛用户体验. 作者:nwind 本文将探讨浏览器渲染的loading过程,主要有2个目的: 了解浏览器在loading过程中的实现细节,具体都做了什 ...
干货 | 数据思维在携程商旅页面性能优化中的一次实践
作者简介 Graviton,携程研发总监,专注数据思维驱动团队效能与技术发展. 本文旨在通过一个实际的例子,说明如何通过数据思维来解决研发工作中的一些棘手问题.通过此文,希望能够清楚地阐述我对下面几个 ...
Web前端教程分享：页面性能优化办法有哪些？
引子互联网有一项著名的8秒原则.用户在访问Web网页时,如果时间超过8秒就会感到不耐烦,如果加载需要太长时间,他们就会放弃访问.大部分用户希望网页能在2秒之内就完成加载.事实上,加载时间每多1秒,你 ...
页面性能检测插件（Chrome）
今天尝试装了一下YSlow插件,尝试了几次没有成功,偶然间发现Chrome里面有一个功能类似的整合插件 All-In-One PageSpeed Test Test your page perform ...
页面性能优化办法有哪些？ 1
引子互联网有一项著名的8秒原则.用户在访问Web网页时,如果时间超过8秒就会感到不耐烦,如果加载需要太长时间,他们就会放弃访问.大部分用户希望网页能在2秒之内就完成加载.事实上,加载时间每多1秒,你 ...
转:浏览器加载页面的过程与页面性能优化
本文是转帖,原文:http://www.baiduux.com/blog/2011/02/15/browser-loading/ 发布日期:2011年2月15日作者:nwind 类别:HTML/CS ...
页面性能优化的五种办法
前言大部分用户希望网页能在 2 秒之内就完成加载.事实上,加载时间每多 1 秒,你就会流失 7% 的用户.如果加载需要太长时间,他们就会放弃访问. 以下是我总结性能优化常见的办法: 一.资源压缩与合 ...

主动型页面性能利器：Page Status