前端性能优化

1、页面加载（主要）

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

问题：当你打开一些网站时，你会发现，有的网站首页上的文字、图片出现很缓慢，而有的则很快，这个内容出现的过程就是加载

解决方案：特别关注白屏和首屏时间

  1. 什么时白屏时间？

    指的是从输入内容回车（包括刷新、跳转等方式）后到页面开始出现第一个字符的时间

    这个过程详细包括：

    1. DNS查询
    2. 建立TCP连接
    3. 发送首个http请求
    4. 返回html文档
    5. html文档解析完毕

    这个过程的标准时间是300ms

  2. 可能会导致白屏时间过长的因素？

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

  3. 首屏时间是怎么计算的？

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

    它是指从浏览器输入地址并回车后，到首屏内容渲染完毕的时间，这期间不需要滚动鼠标或者下拉刷新，否则无效

如果守屏时间长，白屏时间短，到底是哪里的问题？

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

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

具体实际问题：

1、团队对首屏时间的要求是1200ms，目前首屏时间长达2s精简了首屏内容，合并了请求资源，对图片尺寸也进行了压缩优化但最后的首屏时间还是没有降下来，这是为什么呢？

想要对Web前端进行性能优化，除了了解性能体系、关键性能指标之外，还需要了解页面加载全过程

对于客户端发起请求阶段：用户在浏览器输入URL经过　本地缓存　确认是否已经存在这个网站，如果没有，接着会由DNS查询从域名服务器获取到这个IP地址，接下来就是客户端通过TCP的三次握手和TLS协商向服务器发起HTTP请求建立连接的过程

那么这个本地缓存就会成为前端性能的瓶颈点之一

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

怎么实现本地缓存呢？

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

强缓存是指浏览器在加载资源时，根据请求头的expires和cache-control判断是否命中客户端缓存，如果命中就直接从缓存中读取资源，不会发请求打服务器

协商缓存是指浏览器会发送一个请求到服务器，通过last-modified和etag验证资源是否命中客户端缓存，如果命中服务器会将这个请求返回，但是不会返回这个资源的数据

DNS查询

DNS之所以会成为前端性能瓶颈点是因为每次进行一次DNS查询都要经历从手机到移动信号塔，再到认证DNS服务器的过程，这中间需要很长时间

节省时间的方法就是让DNS查询走缓存，幸好浏览器提供了DNS与获取的接口，我们可以在打开浏览器或者WebView的同时就进行配置，这样在进行请求时DNS域名解析会检查一下浏览器缓存，一旦缓存命中就不会到DNS域名服务器上去查询了

HTTP请求

在HTTP请求中最大的瓶颈点就来源于请求阻塞

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

那么浏览器同域名的连接数限制是多少呢？

一般是6个，如果当前请求数多于6个，只能6个并发，其余的需要等到最先返回的请求后，才能做下一次请求

这样做一些域名规划就很重要，我们可以先看看当前页面需要用到哪些域名最关键的首屏中需要用到哪些域名，规划一下这些域名的发送顺序

还有就是域名散列，通过不同的域名，增加请求并行连接数,常见做法就是将静态服务器地址例如pic.google.com,做成支持pic0-5的6个域名，每次请求时随机选一个域名地址进行请求因为有6个域名同时可用，最多可以并行36个连接

2、交互

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

问题：比如我们点击了一个“点赞”按钮立刻给出了点赞数加一的展示，这就是交互体验好，反之如果很长事件都没回应就是交互体验不好

解决方案：

3、视觉稳定性指标（CLS）

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

问题：例如你正要点击页面链接购买的时候，原来的文职插入了一条9.9元包邮的商品广告结果会怎样？你点成了那个广告商品

解决方案：