400-123-4567

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

web前端性能优化，老生常谈的话题，也是每个企业每个项目最为关心的问题。为了使用户体验达到极致，我们不得不为每一个细节深思琢磨，尽可能达到我们想要的方案。

面试中我们也常常被问到性能优化的问题，如果胡乱穿插一些优化方案，面试官会感觉没有条理性，我们也回答的没有拿捏感，所有我们更应该有思路、有条理的叙述出一个前端性能优化相对完整的流程

这便文章我将以几个大方向总结性能优化
思路也是从来讲解

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

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

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

• 
  主要为设置缓存策略：强缓存和协商缓存(编写中)

• 
  增强用户体验

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

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

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

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

• 
  单线程js可能会阻滞文档加载

• 
  一些通用的小图标，如箭头，叉，可以使用字体图标，减少请求，渲染更快

• 
  一些带有企业特色的小图标，如淘宝购物车，笑脸娃娃，可以使用精灵图，让一张图上带有多个小图，然后使用css背景定位来显示出合适的位子，能大大减少请求

• 
  为了首屏渲染更快，图片可设置一张加载图代替，当页面在可视区域内时在替换为正真的图片
  如果有首屏很大的高清图，可先渲染清晰度低的缩略图，在首页基本构建完成下一次事件循环再去替换为高清图

• 
  可以在window.onload之后请求一些其他地方需要的图片资源
  比如我们有一个活动页使用了高清图，我们可以在它的入口前的首页就加载它，当我们进去页面时，浏览器就会从缓存里读取这张图片

• 
  PNG 格式是WEB 图像中最通用的格式，它是一种无损压缩格式

• 
  可以使用webpack url-loader处理

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

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

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

• 
  如for循环优化，减少length读取次数

• 
  dom：document.createDocumentFragment()

• 
  减少if else，提前return if不满足的逻辑

• 
  数组、对象、字符串等，直接声明比new 更快

• 
  web worker是运行在后台的js，独立于其他脚本，不会影响页面你的性能。并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
• 
  阻止了onload，使用户感觉加载很慢的感觉
  与父页面共享浏览器连接池，与父页面并行占用http最大连接数，所以资源加载更慢
  不利于seo
  兼容性不太好，如小程序里面嵌入h5，h5又使用了ifarme

总体大概分为以上这几类的优化方案， 共20多个小点
如果您有更好更多的前端性能优化方式，欢迎补充！！
后续有其他的优化方案，我会继续补充此文！！欢迎收藏！