一、HTTP层面网络层优化
- 减少HTTP请求次数
- 减少DNS解析次数，如果非要多次解析，使用 DNS Prefetch
- 静态资源文件一定要使用强缓存「Expires / Cache-Control」和 协商缓存「Last-Modified / ETag」
- 资源文件的压缩「可以基于webpack打包压缩，而且服务器端一定要开启GZIP压缩{这个可以把资源压缩60%左右}」
- 资源文件的合并「可以基于webpack打包合并，目的是减少页面中的HTTP请求次数」
- 客户端尽可能减少对cookie的存储，因为每一次向服务器发送请求，都会自动把cookie基于请求头传递给服务器，如果cookie设置过多，每一次和服务器通信都会变慢「使用localStorage代替cookie」
- 对于一些静态资源，可以使用CDN加速
- 基于Connection: keep-alive建立TCP的持久链接，实现通道复用
- 使用HTTP2.0进行数据传输
- 对于图片使用BASE64
- 使用CSS Sprit,把多张小图合并为一个大图，只请求一次资源，可以减少HTTP请求次数
- 客户端和服务器之间的数据通信，尽可能使用JSON格式
二、渲染页面的时候
- 坚决不用 @import 导入样式
- 尽量使用CSS3动画，如果非要使用JS实现动画，最好使用requestAnimationFrame
- 避免过深的DOM层级嵌套「加快DOM TREE的生成 && 有利于SEO优化」
- 避免CSS选择器前缀过长「加快CSS TREE的生成」
- 减少DOM的重排「读写分离、元素批量操作{使用文档碎片等方案}、修改样式使用transform、运动的元素放在单独的文档流中、 尽可能减少直接操作DOM，使用MVVM/MVC数据驱动框架...」
- link置于页面顶部，提前获取CSS资源；JS处于页面底部，因为它会阻碍GUI的渲染；或者JS导入采用async/defer；
- 页面样式较少的情况下，尽可能使用内嵌样式，减少HTTP请求，加快渲染「移动端首选方案」
- 使用字体图标或者SVG矢量图代替位图「位图：jpg/jpeg/png/gif...都是位图 字体图标或者矢量图除了一定程度上减少了HTTP请求、而且对于图片的渲染和自适应尺寸的调整都有很大帮助」
- 减少页面中iframe的使用
- 图片使用webp格式
- 基于IntersectionObserver代替传统的window.onscroll
- CSS中减少对filter的使用
- 避免使用TABLE布局
三、代码运行
- 尽可能使用事件委托「事件委托性能很高、减少很多内存的消耗、可以给动态渲染的元素做事件绑定...」
- 合理使用闭包「闭包会引发不释放的栈内存，过多使用内存消耗大，还可能导致内存泄漏或者栈溢出等」
- 减少对递归的使用「尤其是一定要避免死递归，这样会导致栈溢出」
- 对于页面交互操作，采用防抖和节流处理
- 页面中尽可能使用异步编程，对于数据的请求也尽可能分批请求处理「例如：点击加载更多、下拉刷新、上拉加载、分页...」
- JS代码中不要使用：with，减少对eval的使用
- 避免出现死循环，嵌套循环会导致算法的时间复杂度过高
- 低耦合高内聚
- 手动回收堆栈内存
四、额外方案
- 前后端通信，尤其是实时通信{IM即时通信系统，例如：QQ和微信...}，可以使用scoket.io等最新的通信技术
- 采用骨架屏技术「前端骨架屏{升级版的loading，最开始只展示灰色的框框等，也不去加载资源，这样页面渲染出来速度会很快，减少白屏时间...} 和 服务器骨架屏{SSR 首屏信息是服务器渲染的，其余屏幕的信息是客户端渲染的}」
- 音视频资源一定要延后加载，等到页面其它资源都渲染完了，播放音视频的时候再去加载「对于默认播放的效果，也要延后播放」; 也可以让音视频资源采用直播流的方式播放「直播流的后缀.m3u8」
- 图片懒加载，加快页面第一次渲染的速度，减少白屏等待时间
文章转载自：https://juejin.cn/post/7002603443361677343