性能优化 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天

性能优化

首屏加载的意义不言而喻，毕竟第一印象最重要，直接影响用户体验和留存。当用户使用你的产品的时候，一上来半天刷不出首页，很多用户往往就直接给你Ctrl+F4了。

在了解怎么优化之前，我们需要知道首屏加载的几个重要时刻。

• 首次加载——FP
• 什么时候加载出页面——First Meaningful Paint
• 什么时候用户可以交互——Time To Interactive

浏览器：

• 减少HTTP请求 如Chrome浏览器最多同时允许对同一个域名Host建立6个TCP连接，不同的浏览器有所区别，减少http请求也就是减少我们html里css/js等资源的数量

• 使用HTTP2.0 需要配置一个支持h2的web服务器，并下载安装一张TLS证书，让浏览器与服务器通过h2链接 http2.0优势：

  0. 采用二进制格式传输数据, 1.1是文本格式
  1. 对消息头采用Hpack进行压缩传输，能够节省消息头占用的网络流量，1.1每次请求，都会携带大量冗余的头信息，浪费了很多宽带资源
  2. 异步连接多路复用
  3. Server Push，服务器端能够更快的把资源推送到客户端
  4. 保持与HTTP 1.1语义的向后兼容性也是该版本的一个关键

• 设置浏览器缓存策略 主要为设置缓存策略：强缓存和协商缓存

• 页面使用骨架屏，白屏时间做加载动画 增强用户体验

资源：

• 静态资源cdn 静态css/js/img等资源可以做cdn缓存，这样把资源同步到全国全球各地，用户就能更快访问到

• 静态资源单独域名

  0. 浏览器请求并发限制（同一域名（包括二级域名）在同一时间支持的并发请求数量的限制）
  1. cookie传输，单独域名，不会携带cookie
  2. 方便分流和缓存（动静分离，有利于静态资源做cdn缓存）

• gzip压缩 使资源体积更小 服务端配置，如nginx可配置支持gzip压缩资源传输的方式 如果浏览器支持gzip解析，服务器就会推送gzip的资源，在http的相应头里可以看到显示Content-Encoding:gzip

• 做服务端渲染（SSR） 现在主流框的react、vue导致的一个痛点，就是页面构建交给了客户端来渲染，构建的过程无疑是排在了请求到html/js资源后，也就是至少两次http请求后才开始构建，这无疑是导致白屏的关键点之一，所以做ssr页面的话，能够直接返回页面，减少了不少首屏渲染时间

• 将CSS放在文件头部，JavaScript文件放在底部 单线程js可能会阻滞文档加载

图片：

• 字体图标代替图片图标 一些通用的小图标，如箭头，叉，可以使用字体图标，减少请求，渲染更快
• 精灵图 一些带有企业特色的小图标，如淘宝购物车，笑脸娃娃，可以使用精灵图，让一张图上带有多个小图，然后使用css背景定位来显示出合适的位子，能大大减少请求
• 图片懒加载 为了首屏渲染更快，图片可设置一张加载图代替，当页面在可视区域内时在替换为正真的图片 如果有首屏很大的高清图，可先渲染清晰度低的缩略图，在首页基本构建完成下一次事件循环再去替换为高清图
• 图片预加载 可以在window.onload之后请求一些其他地方需要的图片资源 比如我们有一个活动页使用了高清图，我们可以在它的入口前的首页就加载它，当我们进去页面时，浏览器就会从缓存里读取这张图片
• 使用png格式的图片 PNG 格式是WEB 图像中最通用的格式，它是一种无损压缩格式
• 小于10k的图片可以打包为base64格式 可以使用webpack url-loader处理

代码：

• 慎用全局变量

  0. 全局变量定义在全局执行上下文，是所有作用域链的顶端。局部找不到就会一直往上找，影响性能
  1. 全局执行上下文一直存在于上下文执行栈，直到程序退出，不利于GC回收
  2. 命名污染

• 缓存全局变量 将使用中无法避免的全局变量缓存到局部

• 减少重绘回流 回流：当元素的规模尺寸，布局，隐藏等改变的时候，render dom需要重新构建，这就称为回流 重绘：元素只更新外观，风格，而不会影响布局的，叫重绘

• 节流、防抖

• 少用闭包、减少内存泄漏

• 减少数据读取次数