前端性能优化方案

减少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布局

前后端通信，尤其是实时通信{IM即时通信系统，例如：QQ和微信...}，可以使用scoket.io等最新的通信技术
采用骨架屏技术「前端骨架屏{升级版的loading，最开始只展示灰色的框框等，也不去加载资源，这样页面渲染出来速度会很快，减少白屏时间...} 和服务器骨架屏{SSR 首屏信息是服务器渲染的，其余屏幕的信息是客户端渲染的}」
音视频资源一定要延后加载，等到页面其它资源都渲染完了，播放音视频的时候再去加载「对于默认播放的效果，也要延后播放」; 也可以让音视频资源采用直播流的方式播放「直播流的后缀.m3u8」
图片懒加载，加快页面第一次渲染的速度，减少白屏等待时间

文章转载自：https://juejin.cn/post/7002603443361677343