前端性能优化大全

大纲，分为以下六个方面的优化：
1.资源方面优化：html，css，js
2.HTTP网络请求优化：减少http请求数，减少DNS查询，避免重定向，使用HTTP2
3.server服务端优化：使用CDN，负载均衡，开启GZip，缓存策略，node的性能优化
4.前端缓存优化：见上一篇《前端缓存知识点汇总》
5.前端工程化方面的优化：webpack优化，Vue的优化，增量更新
6.专题优化：首屏优化，网络不稳定时的优化

资源方面的优化

HTML的优化

1.SEO的优化：
（1）标签语义化
（2）合适的meta标签，比如keyword，description等
（3）图片加alt属性；
2.H5的manifest缓存机制

CSS的优化

1.css放顶部，可以防止FOUC–无样式内容的闪烁；
2.避免内联样式
注意：这一点并不绝对；比如现在MVVM框架主张css in js，谷歌的AMP要求css必须内联；
3.no表达式，
4.no image,字体图标等矢量图标代替图片，
5.属性值为0，把单位去掉，
6.不要滥用float，易造成重排；
7.预处理器（sass，less，stylus）和后处理器压缩处理（postcss）
8.使用可以触发GPU加速的属性：比如3D过渡，变形，透明度等属性

JS的优化

1.放html的底部
2.避免直接操作dom，可以使用MVVM框架的虚拟dom
3.一定要操作dom的话，尽量使用id选择器，减少遍历次数
4.避免批量绑定事件，使用事件代理
5.动画尽量交给css，万不得已才用js
6.使用gpu.js库触发GPU硬件加速；

HTTP网络请求的优化

减少http请求数

1.使用雪碧图合并小图片
2.no image，颜色单一的图案尽量用矢量的字体图标
3.webpack可以把小图片base64压缩到js中
4.合并css和js文件；

减少DNS查询

DNS查找流程：浏览器缓存，本机DNS缓存，本地DNS服务器
使用缓存加快DNS查找的速度；

尽量避免重定向

当页面发生了重定向，就会延迟整个HTML文档的传输。
在HTML文档到达之前，页面中不会呈现任何东西，也没有任何组件会被下载。
301：永久重定向； 302：临时重定向； 304：Not Modified没有修改；

使用HTTP2

1.双工通信，多路复用；配合数据流机制确定数据包属于哪个请求；
2.二进制传输，加快解析
3.头部压缩，节省带宽
4.服务器主动推送；

server服务端的优化

使用CDN

1.速度快，稳定性有保障；
2.请求CDN时不用把cookies带来带去；
3.给自己的资源服务器减轻负担，省空间省流量

负载均衡

Ngnix进行负载均衡配置

开启GZip压缩

注意要设置个压缩上限；比如32K，因为原文件100K左右已经很大了；

缓存策略

见我上一篇《前端缓存知识点汇总》
1.强制缓存expires和cache control，
2.协商缓存last-modified/if-modified-since， etag/if-none-match

node的性能优化

1.异常处理：
使用uncaughtException捕获异常并进行异常处理，不然node轻易挂掉；

2.压测：
（1）压测工具：Jmeter, wrk
（2）峰值QPS和机器计算：
QPS表示单个进程每秒请求服务器的成功次数，QPS = PV/秒数
峰值QPS,每天80%的访问集中在20%的时间里，峰值QPS = （总PV数80%）/（每天的秒数20%）
需要的机器数量 = 峰值QPS / 单台机器的QPS
比如：300W PV，每个机器的QPS是58，需要几台机器?
解：（3000000 X 0.8）/（24 X 3600 X 0.2） / 58 = 2.395 所以需要3台；

3.防止内存泄漏
（1）发生内存泄漏的原因：
大循环产生大对象，消费不及时导致；比如递归，可以优化成“尾递归”
滥用闭包； 及时清理不用的变量，置为null即可；
（2）process.memoryUsage
使用node进程模块的memoryUsage属性查看内存的使用情况
（3）检查内存泄漏的工具：memwatch + heapdump，
可以监听leak泄漏事件，memwatch检测内存泄漏，heapdump抓取内存实时情况；

4.调试node代码
（1）node-inspect + Chrome，官方的调试工具包
安装，执行命令，地址栏输入chrome://inspect 就可以调试node代码
（也可以远程调试手机端的node应用哦）
缺点：比较慢
（2）node-inspector + chrome，更好用的一个工具包
（3）VSCode，调试node的神器，简单方便

前端缓存的优化

见我之前写的《前端缓存知识点汇总》
1.浏览器缓存策略
2.前端存储方案
3.PWA实现缓存

前端工程化方面的优化

工具优化之webpack优化技巧

1.分离第三方库的依赖，引入DllPlugin，将不需要修改的第三方库和自己业务代码分开打包；
2.引入多进程编译的工具包，比如happypack；充分利用CPU多核特性；
3.提取公共依赖模块，commonChunkPlugin；版本4已经默认集成了；
4.提取公共样式，减小打包的体积，比如ExtracTextPlugin
5.资源压缩混淆，uglifyJS
6.Gzip压缩
7.按需加载，自身提供的require.ensure，各种框架也有自己的模块加载方案；
8.tree shaking去掉没用上的代码，版本3和4默认有了；

MVVM框架优化

vue优化，react优化，angular优化
这里暂时不展开了；之后再补充；

策略优化之增量更新策略

整体思路类似git
1.本地使用localstorage或者其他的存储方案，保存一份代码+时间戳；
2.向服务器请求时带上时间戳，服务器判断客户端版本，跟最新版本对比，返回一个diff信息；
3.客户端根据diff信息，增量更新代码，更新时间戳；
4.Diff信息格式可以如下：
[3,”-2”,”+abcd”,1]
整数表示无变化的字符数量，“-”开头的字符串代表被移除的字符数量，
“+”开头的字符串表示新加入的字符；
5.粒度更细的增量更新解决方案，可以看看腾讯的mt.js

其他专题优化

移动端首屏优化

两个方面，优化网络与优化渲染
优化网络可以提升几秒，而优化渲染，大部分是是毫秒级的，所以网络优化才是重点；

1.DNS预解析
配置meta和link标签，比如：

2.域名收敛
域名收敛，就是将静态资源放在一个域名下，减少DNS解析的开销时间；
注意：PC端提倡域名发散，是为了利用浏览器多线程并行下载能力；移动端为了提高性能使用域名收敛；
3.链路复用:keep-alive，或者使用http2
4.资源内联，减少请求，AMP和百度MIP都这么提倡的；
5.按需加载，异步加载：只加载首页需要的
6.异步渲染：需要交互才出现的资源使用异步渲染；
7.图片懒加载；
8.服务端渲染，node+swig进行SSR；前后端同构渲染；
9.使用缓存机制，见上面；H5的离线方案manifest或者PWA的缓存
10.html框架预加载，提取每个页面的公共部分，预加载
11.代理服务器，预请求数据。
12.给个良好的提示，菊花图
注：是不是感觉和上面的有重复的地方，正所谓知识都是相通的嘛，要活学活用；

用户网络不稳定的优化策略

1.图片的优化，根据不同网速，显示不同清晰度的图片
2.专门做一个简版的项目，给网速差的情况下使用
3.首屏加载优化：见上一点；

以上
欢迎补充~

欢迎随时交流~