性能优化理解
作者：互联网
列出，常规性能优化方法有哪些？
前端性能优化主要分为两类：
- 加载时优化
- 运行时优化
网络中常见的性能优化方案（可参考雅虎前端性能优化的35条军规）：
1.尽量减少http请求
如何：a).雪碧（精灵）图
b).合并css与js文件
c).懒加载
d).防抖与节流
e).合理设置缓存
2.使用HTTP2
HTTP2 相比 HTTP1.1 有如下几个优点：
a).解析速度快：服务器解析 HTTP1.1 的请求时，必须不断地读入字节，直到遇到分隔符 CRLF 为止。而解析 HTTP2 的请求就不用这么麻烦，因为 HTTP2 是基于帧的协议，每个帧都有表示帧长度的字段。
b).多路复用：HTTP1.1 如果要同时发起多个请求，就得建立多个 TCP 连接，因为一个 TCP 连接同时只能处理一个 HTTP1.1 的请求。在 HTTP2 上，多个请求可以共用一个 TCP 连接，这称为多路复用。同一个请求和响应用一个流来表示，并有唯一的流 ID 来标识。 多个请求和响应在 TCP连接中可以乱序发送，到达目的地后再通过流 ID 重新组建。
c).首部压缩：多个请求中，有很多数据都是重复的。如果可以把相同的首部存储起来，仅发送它们之间不同的部分，就可以节省不少的流量，加快请求的时间。
d).服务器推送：HTTP2 新增的一个强大的新功能，就是服务器可以对一个客户端请求发送多个响应。换句话说，除了对最初请求的响应外，服务器还可以额外向客户端推送资源，而无需客户端明确地请求。例如当浏览器请求一个网站时，除了返回 HTML 页面外，服务器还可以根据HTML页面中的资源的 URL，来提前推送资源。
3.静态资源使用CND：内容分发网络（CDN）是一组分布在多个不同地理位置的 Web 服务器。我们都知道，当服务器离用户越远时，延迟越高。CDN 就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。
4.将 CSS 放在文件头部，JavaScript 文件放在底部
原因：a).CSS 执行会阻塞渲染，阻止 JS 执行
b).JS 加载和执行会阻塞 HTML 解析，阻止 CSSOM 构建
5.使用服务端渲染
6.压缩文件
7.善用缓存
等等.....................................................
实际项目中优化的方案有以下几点：
1.删除无用依赖：有一些功能重复的依赖，我们是全量加载的，影响开发效率和运行性能。如underscore和lodash。PUPPETEER这样的工具，我们根本没有使用，每次发布都要安装，非常耗时。
2.存储统一：localstorage sessionstorage同样值却不同key。
如何：a).查询统计 梳理出 所有关联项目使用到的 storage。
b).合并相同值或包含关系的 存储。
c).使用 公共存储处理工具 统一修改管理。
d).一定程度混淆存储键名。
3.Antd 全局样式，避免冲突
4.组件调用使用方式，太繁琐，需要提升效率
如何：a).列表分页，搜索
b).request封装
c).Model太多
5.内存泄露（这一块感觉可以细化为另一个文档，概念，泄露原因，检测方法，解决方法等）
6.React路由懒加载，Model必须显式引用
7.静态资源响应头，去掉无用信息：
8.减少图片缩放
9.JS和CSS资源优化，样式污染排查和隔离处理
如何：a).精简css，js，去除重复多余部分
b).合并css与js文件
c).不要再用 !important
d).样式重绘（文件命名）
10.文档压缩
11.按需加载（js,css,echarts等）
12.重构路由，减少初始化加载文件大小
13.字段接口缓存
14.接口合并 ，聚合接口：同一个页面中的并发请求，在服务端聚合。异步请求，也尝试在服务端处理聚合。可以极大地减少请求次数。
15.子应用JS加载卸载，样式加载卸载完善
16.缓存资源：合理配置Nginx，将HTML以外的静态资源设置为允许缓存。用户再次打开时，大部分时间用来加载静态资源，如果能缓存，就不需要再次加载了。
17.剥离调试信息
18.虚拟列表，滚动加载等
标签：缓存,请求,性能,理解,HTTP2,服务器,优化,加载 来源： https://blog.csdn.net/ujjhuhu/article/details/121719874