企业网站建设管理制度,成都装修公司有哪些,企业公司建站平台,wordpress 建站插件1. 背景
当页面出现性能问题#xff0c;如加载慢、页面卡顿等现象时#xff0c;大多是用户主观上的感受。而要真正客观的去评测性能和定位问题原因#xff0c;通常需要专业的前端同学通过 DevTools 中的 Performance 等工具来查看#xff08;如图 1 所示#xff09;…1. 背景
当页面出现性能问题如加载慢、页面卡顿等现象时大多是用户主观上的感受。而要真正客观的去评测性能和定位问题原因通常需要专业的前端同学通过 DevTools 中的 Performance 等工具来查看如图 1 所示这无疑增加了客观看问题的成本。 图 1当然目前也是有一些不错的工具来评测分析页面但这些工具都存在一些问题。下面主要说一下 PageSpeed Insights、Lighthouse 。
1.1. PageSpeed InsightsLighthouse
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 所示 图 24. 插件 PageStatus 应用商店插件地址
页面加载完成后插件会自动将页面的加载时间显示在浏览器的工具条中背景色根据加载时间的快慢 使用“红”“黄”“绿”来标注实时反映页面健康状况如图 3 所示 图 34.1. 功能
下面对详细的功能进行介绍。
4.1.1. 页面加载时间
页面加载时间 表示的是页面触发 load 的时间会同步到浏览器的工具条中点击插件图标会显示更详细的页面加载信息如图 4 所示 图 44.1.2. 加载资源数量
页面加载过程中所有资源的请求都会在这一项中体现出来。这里会按照请求的时间次序进行排列超过 1S 的资源进行加红标注直接从缓存读取的会用浅颜色和删除线标注如图 5 所示 图 54.1.3. 大资源数量
页面加载过程中默认超过 1MB 的资源会被定义为大资源。如图 6 所示 图 64.1.4. 慢资源数量
页面加载过程中默认超过 500ms 的资源会被定义为慢资源。如图 7 所示 图 74.1.5. 平均帧率
会计算页面加载过过程中的平均帧率如图 8 所示 图 84.1.6. 页面消息通知
默认开启对超标的项目进行页面内通知的功能如图 9 所示 图 94.1.7. 配置
插件中所有参数都是可以进行配置的可以点击扩展图标右下角的小齿轮按钮进入配置页面也可以在扩展图标右键选择选项进入如图 10 所示
图 10Github Repo
