前端性能优化

前端性能优化

大类

先从大类开始说起

1. 减少HTTP请求的次数和传输报文的大小

雪碧图；

1. 各种缓存和长连接机制；

2. 代码层面；

具体的

减少HTTP请求的次数和传输报文的大小

图片方面：

+雪碧图；

+使用字体图标或者svg；

+使用base64；

+图片懒加载技术；

刚开始是不加载的，当这块区域显示在用户视窗中才去加载

音视频取消预加载；

传输尽可能基于json，因为xml比json文件要大；或者说基于二进制编码和文件流的格式；

对于公共背景图，使用公共样式；

重点和核心：

文件的合并和压缩：

包含css/js压缩、雪碧图

延迟加载：

图片延迟加载、音视频取消预加载

用新的文件格式代替传统的文件格式：

字体图标、文件流、base64

缓存和服务器

强缓存和协商缓存，最典型的；

dns-prefetch，dns预获取；

财大气粗的方式，建立cdn，加服务器；

建立tcp的长连接，connection:keep-alive；

使用http2版本：建立多条tcp通道=>管道化链接；

分域开发：

重点和核心：

网络缓存和本地缓存：

协商缓存、强缓存、dns预获取和长链接、http协议等

加服务器的方式

代码层面的性能优化

事件委托：只绑一个方法

js方面：

减少闭包的使用，因为闭包是不销毁的栈内存；

减少dom操作，尽量使用数据驱动视图，MVVM的方式；

多使用事件委托，事件只需要绑定一次；

多使用异步避免主线程的阻塞；

防抖节流；

避免使用iframe；

手动回收堆栈内存赋值为null；

老生常谈的：

低耦合高内聚，使用封装的思想，api的封装、组件的封装插件的封装；

减少死循环和双重循环；

css方面：

主要是动画方面，能使用css的就不使用js，多使用requestAnimationFrame来代替setTimout，多使用transform，因为transform会加速gpu减少回流（把动画加在脱离文档流的元素上）；

减少css选择器的层级；

重点和核心：

比较散的，记常用的

减少dom操作、低耦合高内聚、动画这块、闭包、事件委托、同步异步、防抖和节流

还有webpack性能优化、安全优化