前端常见性能优化方案总结
指标：
* TTFP（Time To First Paint）：指的是从网页 HTTP 请求发出，到用户可以看到第一个有意义的内容渲染出来的时间差
* TTI（Time To Interactive）：指的是从网页 HTTP 请求发出，到用户可以对网页内容进行交互的时间
我的项目中的优化
- RN
* 场景转换时预加载
* 地图输出图片优化
* memo，SCU减少渲染次数优化
* sectionList代替scrollView渲染长列表
* 动画使用硬件加速，部分使用setNativeProps代替
- Nfes
* 服务端渲染
* react常用优化方式
性能优化原则
* 多使用内存、缓存或其他方法
* 减少CPU计算量、减少网络加载耗时
* （适用于所有编程的性能优化 —— 空间换时间）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
| 页面的加载过程主要分为【下载、解析、渲染】三个步骤，整体可以从两个角度来考虑：
1、划分子域
Chrome 浏览器只允许每个源拥有 6 个 TCP 连接，因此可以通过划分子域的方式，将多个资源分布在不同子域上用来减少请求队列的等待时间。
2、DNS 预解析
DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的IP，这个过程是并行的，不会阻塞页面渲染。
<link rel="dns-prefetch" href="https:
3、预加载
有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载。预加载其实是声明式的 fetch，强制浏览器请求资源，并且不会阻塞 onload 事件。预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好。
<link rel="preload" href="http:
4、CND 加速
webpack中output、url-loader中加publicPath属性
5、设置缓存
对于大部分的场景都可以使用强缓存配合协商缓存解决，但是在一些特殊的地方可能需要选择特殊的缓存策略
6、使用 HTTP / 2.0
引入了多路复用，能够让多个请求使用同一个 TCP 链接，极大的加快了网页的加载速度。并且还支持 Header 压缩，进一步的减少了请求的数据大小。
7、图片和文件压缩
1、标签位置
script 标签放在 body 标签底部，或者添加 defer 或者 async 属性。
CSS放在head
2、懒加载
3、预加载
4、减少回流与重绘：当 页面布局和几何属性改变时，就会触发【回流】。当 需要更新的只是元素的某些外观时，就会触发【重绘】。
5、编写高效率的 CSS
使用 CSS 预处理器时注意不要有过多的嵌套，嵌套层次过深会影响浏览器查找选择器的速度，且一定程度上会产生出很多冗余的字节
6、减少 DOM 元素数量、减少 DOM 的操作
减少 DOM 元素数量，合理利用 :after、:before 等伪类，避免页面过深的层级嵌套;
减少 DOM 操作次数(或集中操作)，如数据分页、首屏直出、按需加载等
7、函数节流
节流、防抖函数
8、事件代理
|
react优化
* 单个组件的优化
SCU、memo
* 减少函数bind this的次数，在constructor() 里做 this 绑定
在每次 render 过程中， 再调用bind都会新建一个新的函数，浪费资源.
* 基于路由的代码分割
使用React.lazy和React Router来配置基于路由的代码分割
* 渲染列表时加key
* 自定义事件、DOM事件及时销毁
* 合理使用异步组件
* 使用SSR
* 长列表使用虚拟列表
* 使用prop-types
webpack打包优化
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| 优化产出代码（产品性能）：1.体积更小 2.合理分包，不重复加载 3.速度更快、内存使用更小
* 小图片base64编码
* bundle加hash：根据文件内容算hash，利用缓存提升效率
* 懒加载：异步加载
* 提取公共代码：分包
* IgnorePlugin：减小bundle体积
* 使用CDN加速：output、url-loader中加publicPath属性
* mode:’production’
- 会自动开启压缩代码
- 自动删掉调试代码
- 启动Tree-Shaking：没有用到的函数会自动删掉
* Scope Hosting
- 多个函数合并成一个函数
- 代码体积更小
- 创建函数作用域更少
- 代码可读性更好
|
