前端性能优化的瓶颈点

性能优化体系及关键指标设定。

指标：

有两个标准：

1. 可衡量，就是可以通过代码来度量

2. 关注以用户为中心的关键结果和真实体验

加载与交互：

加载就是进入页面时，页面内容的加载过程。

交互就是用户点击网站或App的某个功能页面给出的回应

视觉稳定性指标

就是布局偏移量，它是指页面从一帧切换到另外一帧时，事件中不稳定元素的偏移情况

在性能优化关键指标方面目前业界主要集中在加载方面，特别是白屏时间和首屏时间

白屏时间：

指的是从输入内容回车后到页面开始出现第一个字符的时间

标准时间为300ms

导致时间长的原因有：

DNS查询时间长，建立TCP请求连接太慢，或者是服务器处理请求速度太慢，客户端下载、解析、渲染时间过长，没有做Gzip压缩，缺乏本地离线化处理，等等

首屏时间=白屏时间+渲染时间

首屏时间可以拆分为白屏时间、数据接口响应时间、图片加载资源等

白屏时间数据接口响应时间可以直接从后端服务中获取不需要前端再重复计算

可以做的操作有：

1. 减少首屏资源体积（打包工具的压缩，异步加载，更新为体积更小的新版本，编写代码尽量减少体积，去除大的base64体积）

2. 首屏数据尽量并行看，如果可行可以让小数据接口合并到其他接口

3. 页面包含大量dom可以分批随滚动渲染

4. 骨架屏，loading，先让屏幕不白，减少用户焦虑

从URL输入到页面加载整个过程

假设一个人正在上网，当浏览器输入URL并回车后为了把URL解析为IP地址，浏览器会向DNS服务器发起DNS查询，获取IP地址，在建立连接后，浏览器就可以发送HTTP请求，而服务端接收到后，对请求进行响应，浏览器从响应结果中拿到数据，并进行解析和渲染，最后在用户面前出现一个网页。

客户端发起请求阶段

该阶段是指用户在浏览器输入URL经过本地缓存确认是否已仅存在这个网站

如果没有，接着会由DNS查询从域名服务器获取这个IP地址，接下来就是客户端通过TCP的三次握手和TLS协商向服务器发起HTTP请求建立连接的过程

本地缓存：

本地缓存可以让静态资源加载更快，当客户端发起一个请求时，静态资源可以直接从客户端中获取，不需要在向服务器请求

实现本地缓存：

一般包括强缓存和协商缓存两种形式

强缓存是指浏览器在加载资源时，根据响应头expires和cache-control判断是否命中客户端缓存

协商缓存是指浏览器会先发送一个请求到服务器,通过last-modufied和etag验证资源是否命中客户端缓存

DNS查询：

每进行一次DNS查询都要经历从客户端到移动信号塔，再到DNS服务器的过程

要节省时间的话让DNS查询走缓存，浏览器提供了DNS预获取的接口，可以再打开浏览器的同时就进行配置

HTTP请求：

最大瓶颈点来自于请求阻塞

请求阻塞就是浏览器为保证访问速度会默认对同一域名下的资源保持一定的连接数，请求过就会进行阻塞

浏览器同一域名的链接数为6个，只能六个并发

服务端数据处理请求阶段

数据缓存：

借助Service Worker的数据接口缓存

Service Worker 是浏览器的一个高级属性，本质上是一个请求代理层，它存在的目的是拦截和处理网络数据请求

借助本地存储的缓存接口

在一些对数据时效性要求不高的页面第一次请求到数据后，程序将数据存储到本地存储下一次请求的时候，先去缓存里面取数据，如果没有则向服务器发送请求

CDN

基本思路是通过在网络各处放置节点服务器构造一个智能虚拟网络，将用户的请求导向离用户最近的服务节点上

页面重定向

重定向是指网站资源迁移到其他位置后用户访问站点时程序自动将用户请求从一个页面转移到另一个页面的过程

重定向分为三类：

服务端发挥的302重定向

META标签实现的重定向

前端JS通过window.location实现的重定向

客户端页面渲染阶段

构建DOM树的瓶颈点：

当HTML标签不满足WEB于一还是，浏览器就需要更多时间去解析DOM标签的含义

DOM节点的数量越多构建DOM树的时间就会变长，进而延长解析时间，拖慢页面展示速度

什么情况下会造成操作卡顿和渲染慢

1. 一次性操作大量dom

2. 进行了复杂度很高的运算