2020.10.23 星期五 21：12

Web 性能

Web 性能是客观的衡量标准，是用户对加载时间和运行时的直观体验。Web 性能指页面加载到可交互和可响应所消耗的时间，以及页面在交互时的流畅度——滚动是否顺滑？按钮能否点击？弹窗能否快速打开，动画是否平滑？Web 性能既包括客观的度量如加载时间，每秒帧数和到页面可交互的时间；也包括用户的对页面内容加载时间的主观感觉。

页面响应时间越长，越多的用户就会放弃该网站。重要的是，通过使体验尽可能早地变得可用和交互，同时异步地加载长尾体验部分，来最大程度地减少加载和响应时间，并添加其他功能以降低延迟。

有很多工具，API 和最佳实践帮助我们测量和改进网页性能。本章对此有所讲解。

关键性能指南

CSS and JavaScript animation performance

Browsers are able to optimize rendering flows. In summary, we should always try to create our animations using CSS transitions/animations where possible. If your animations are really complex, you may have to rely on JavaScript-based animations instead.

dns-prefetch

当浏览器从第三方服务跨域请求资源的时候，在浏览器发起请求之前，这个第三方的跨域域名需要被解析为一个IP地址，这个过程就是DNS解析，DNS缓存可以用来减少这个过程的耗时，DNS解析可能会增加请求的延迟，对于那些需要请求许多第三方的资源的网站而言，DNS解析的耗时延迟可能会大大降低网页加载性能。

优化启动性能

不论在什么平台上，尽可能快地启动总是一个好主意。因为这是个很宽泛的问题，在这里我们不会着重关注。相反我们会关注构建 Web 应用时更重要的一个问题：尽可能异步地启动。这意味着不要将你所有的启动代码在应用主线程中的唯一一个事件处理函数中运行。

关键渲染路径

关键渲染路径
关键渲染路径是指浏览器通过把 HTML、CSS 和 JavaScript 转化成屏幕上的像素的步骤顺序。优化关键渲染路径可以提高渲染性能。关键渲染路径包含了 Document Object Model (DOM)，CSS Object Model (CSSOM)，渲染树和布局。

渲染页面：浏览器的工作原理

渲染页面：浏览器的工作原理
了解如何提升性能和感知性能，有助于了解浏览器的工作原理。

初学者教程

Web 性能：概述
什么是 Web 性能?
用户如何看待性能？
Web 性能基础

HTML 性能特性
多媒体：图像与视频
CSS 性能特性
JavaScript 性能最佳实践
移动端性能

使用 Performance API

Performance API
该指南介绍了如何使用 High-Resolution Time 标准中定义的 Performance 接口。

Resource Timing API
资源加载和定时加载这些资源，包括管理资源缓冲区和处理CORS
性能时间线

Performance Timeline 标准定义了对 Performance 接口的扩展，以支持应用程序中的客户端延迟测量。这些接口一起可以用来帮助识别应用程序的性能瓶颈。

User Timing API
使用创建特定于应用程序的时间戳 user timing API’s “标记”和“度量”条目类型-它们是浏览器性能时间轴的一部分。

Frame Timing API
PerformanceFrameTiming 接口提供有关浏览器事件循环的帧计时数据。

Beacon API
使用 Beacon 接口调度发送给服务器的异步非阻塞请求。

Intersection Observer API
通过 Intersection Observer API 学习对元素可见性的监测，并在关注的元素变得可见时被异步通知。

其他文档

开发者工具中与性能相关的功能
本节提供有关如何使用和理解开发人员工具中的性能特性的信息，包括 Waterfall, Call Tree, 和 Flame Charts.

使用内置分析器进行分析
了解如何使用Firefox的内置分析器来分析应用程序性能。