[TOC]

前言

性能优化一直是比较重要的点，说句实话，目前我所接触到的项目上，并没有优化性能方面的需求，只要能正常运行，加载速度过快即可，所以并没有太多的项目实战，只能通过学习巨佬们的文章，对性能优化有一个大概的概念，了解~~

作为一个程序员，必须要以优质代码为榜，对自己的代码有一定的要求~~

本文主要是参考 网易大佬的文章

九大策略

九大策略中可以分成两个层面来介绍， 分别是 网络层面(4个) 和 构建策略(5个)

网络层面

在网络方面上，无疑是如何让资源 体积更小，加载更快 而付出努力

构建策略（基于构建工具 Webpack/Rollup/Parcel/Esbuild/Vite/Gulp)

该策略主要围绕 webpack 做相关处理，也是最普遍的处理，有关webpack 的性能优化，可以说是从 时间层面 和 体积层面 入手 （webpack5 的兼容性还不是很好，建议使用 webpack4）

  • 减少打包时间：缩减范围 、缓存副本、定向搜索、提前构建、并行构建 、可视结构
  • 减少打包体积：分割代码 、摇树优化、动态垫片、按需加载、作用提升 、压缩资源

图像策略（基于图像类型 JPG/PNG/SVG/WebP/Base64)

该策略主要围绕 图像类型 做相关处理，同事成本较低的性能优化策略。 主要有以下两点

  • 图像选型：了解所有图像类型的特点及其何种应用场景最合适
  • 图像压缩：在部署到生产环境前使用工具或脚本对其压缩处理

分发策略（基于内容分发网络 CDN）

该策略主要围绕 内容分发网络 做相关处理，同时也是接入成本较高的优化策略，需要足够的资金支持

虽然接入成不较高，但大部分企业会购买一些 CDN 服务器，应该遵循以下两点

  • 所有静态资源走CDN：开发阶段确定那些文件属于静态资源
  • 把静态资源与主页面置于不同的域名下：避免请求带上 Cookie

缓存策略（基于浏览器缓存 强缓存/协商缓存）

该策略主要围绕 浏览器缓存 做相关处理，同时接入成本最低的优化性能策略

需要遵循五点

  • 考虑拒绝一切缓存策略: Cache-Control:no-store
  • 考虑资源是否每次向服务器请求：Cache-Control:no-cache
  • 考虑资源是否被代理服务器缓存: Cache-Control:public/private
  • 考虑资源过期时间：Expires:t/Cache-Control:max-age=t,s-maxage-t
  • 考虑协商缓存：Last-Modified/Etag

渲染层面

在渲染方面上，是如何让代码 解析更好执行更快 而努力

CSS策略（基于CSS规则）

  • 避免出现超过三层的 嵌套规则
  • 避免为 ID选择器 添加多余选择器
  • 避免使用 标签选择器 代替 类选择器
  • 避免使用 通配选择器, 只对目标节点声明规则
  • 避免重复匹配重复定义，关注 可继承属性

DOM策略（基于DOM操作）

  • 缓存 DOM计算属性
  • 避免过多 DOM操作
  • 使用 DOM Fragment 缓存批量化 DOM操作

阻塞策略（基于脚本加载）

  • 脚本与 DOM/其他脚本 的依赖关系很强： 对