前端性能优化指南[6]–Web 性能标准

时间:2022-01-10 来源:未知网络 作者:996建站网

阅读提示:本篇文章比较长,但对建立完善的前端性能体系很重要,建议耐心看完。

目录

  • 前言
  • 什么是 Web 性能?
  • 为什么要关注 Web 性能?
  • Web 性能优化历史
  • W3C 与 Web 性能工作组
  • Web 性能标准
  • Web 性能指标
  • 页面呈现过程之加载篇
  • 优化策略
  • 优化实践
  • 性能测试工具
  • 性能不退化机制
  • 探索

很多人关注的、包括网上发布的一些文章大多都是关于性能优化手段,也有关于性能指标的以及如何做性能监控的,这些很多都基于 Web 性能标准以及浏览器对 Web 性能标准的实现。

如果我们全面的了解了 Web 性能标准,就能知道性能指标是如何定义的、性能指标的计算方式以及有哪些浏览器支持的优化策略。基于这些了解,我们才能说如何去排查性能问题、如何去优化性能以及如何去采集这些性能数据来做性能监控。

从 Web 性能工作组的主页可以看到全部的性能标准,我们也可以在 ALL STANDARDS AND DRAFTS 搜索到这些标准。

本篇文章将与大家一起,系统的学习这些 Web 性能标准。我将 Web 性能标准大体分为两类:性能度量相关和优化策略相关。在介绍每种标准时,我将按这样的顺序介绍:

  • 标准的用处
  • 标准的版本
  • 标准包含的内容
  • 与其他标准的关系

性能度量

我们关注的页面的性能主要包括页面呈现时间以及交互操作的流畅度。当页面呈现时间越短、交互越流畅时,我们认为页面性能越好。

用户可以在感官上判断性能的好坏,但是作为开发者,我们需要把性能量化,用性能指标来度量性能的好坏。现在主流浏览器已经支持通过特定的 API 来获取页面的性能数据。

在 HTML 规范中定义了 Window 对象,我们可以通过 window 来获取一个 Window 对象, 在 window 上挂载了很多我们熟悉的 API, 例如:

  • window.document
  • window.history
  • window.localStorage
  • window.location
  • window.navigator
  • window.postMessage

这些 API 都由不同的 W3C 标准定义,而 Web 性能标准则是在 window 上添加了 performance 属性,通过 window.performance 返回一个 Performance 对象。

前端性能优化指南[6]–Web 性能标准插图

对象中包含了很多用于衡量性能的属性和方法,而这些属性和方法由多种 Web 性能标准定义。下面来一一介绍这些与性能度量相关的规范。

High Resolution Time

该规范定义了一个 JavaScript 接口,该接口以毫秒级的分辨率提供当前时间,并且不受系统时钟偏差或调整的影响。

此标准有两个版本 Level 1 和 Level 2,Level 2 已经是正式发布的标准,所以 Level 1 已经过时了,官方不建议再使用,我们只需要知道 Level 2 定义了哪些规范就好。

  • High Resolution Time Level 1 (已过时)
  • High Resolution Time Level 2 (REC)✔︎

Level 2 包含了这些内容:

  • 1、定义了测量性能数据的初始时间(Time Origin)

我们获取到的性能数据都是时间戳,需要一个初始时间来计算时间差,即某一阶段的耗时。

  • 2、定义了高精度时间戳 DOMHighResTimeStamp

用于存储以毫秒为单位的时间值,Web 性能规范定义的 API 获取到的时间都为高精度的时间戳。

  • 3、定义了 Performance 对象,以及 Performance 对象的几个属性和方法。
    • now()
    • timeOrigin
    • toJSON()

所有的性能数据都是通过 window.performance 返回的 Performance 对象获得的,下面的 Time 相关的性能标准所定义的属性和方法都是在 window.performance 和 Performance 对象中。

Performance 对象最初是在 Navigation Timing Level 1 中定义的

好了,了解了规范定义的内容,大家也清楚了为什么此规范名为 High Resolution Time 了吧?因为该规范的主要内容是与高精度时间相关的。

Performance Timeline

此标准对上述的 HR-TIME-2 规范中定义的 Performance 对象进行了扩展,提供了基于特定筛选条件(Name、EntryType)检索性能度量的接口,通过这些接口我们可以获得多种维度(页面、资源等)的性能度量时间线。

此标准目前有两个版本 Level 1 和 Level 2。Level 1 目前是 REC 状态,Level 2 规范还在草案阶段,当 Level 2 规范正式发布时, Level 1 也将被废弃。

  • Performance Timeline (REC)
  • Performance Timeline Level 2 (WD) ✔︎

Level 2 规范包含了这些内容:

  • 1、给 Performance 对象添加了三个方法:
    • getEntries()
    • getEntriesByType()
    • getEntriesByName()

我们可以在浏览器控制台输入这段代码,看看 Entry 是什么。

window.performance.getEntries();

前端性能优化指南[6]–Web 性能标准插图1

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序