性能优化理解

列出,常规性能优化方法有哪些?

前端性能优化主要分为两类:

  • 加载时优化
  • 运行时优化

网络中常见的性能优化方案(可参考雅虎前端性能优化的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.虚拟列表,滚动加载等
上一篇:python httpx支持访问http2


下一篇:netty系列之:netty实现http2中的流控制