客户端优化
静态资源优化
-
使用构建工具对HTML,CSS,JS压缩，删除生产环境下的无用代码(比如注释，打印信息等)。
-
提取公共资源，减少代码体积。
-
外链CSS和JS文件，外链的文件可以放到CDN,服务器和浏览器会进行缓存。
-
使用雪碧图，减少http请求数。
-
使用字体图标iconfont:
-
图片使用webp格式
-
缓存(Service Worker)
网络请求优化:
-
使用get进行请求，get会缓存请求，比起post，只发送一个tcp包，效率更好。
-
合并请求数量，减少http请求次数，节省网络请求时间。
- 多次请求和关闭会造成服务了压力，浏览器对每次请求的数量都有限制，一般是每次只能3次左右，合并请求将加快速度。
- 抛开无用cookie，减少带宽占用，http协议每次发送请求都会自动带上该域名及父级域名下的cookie
浏览器缓存
强缓存，协商缓存(根据相应的header内容来决定的)
缓存参考文章
https://juejin.im/post/5b3c87386fb9a04f9a5cb037
页面渲染速度优化(用户体验优化)
- css放在顶部，优先渲染。
- js放在底部，避免堵塞,减少白屏时间和首页渲染时间。
- 减少DOM数量，减少重排重绘。
- Virtual Dom。
- 预加载和懒加载。
- 骨架屏。
避免JS堵塞
重排重绘
-
重排(reflow)：渲染层内的元素布局发生修改，都会导致页面重新排列，比如窗口的尺寸发生变化，删除或添加DOM元素，修改了影响元素盒子大小的css属性(width,height,padding)
-
重绘(repain):所以对元素的视觉表现属性的修改，都会引发重绘
避免重排重绘:
Virtual Dom
服务器优化
- 使用内容分发网络CDN 客户端可以通过最佳的网络链路加载静态资源。
- 开启Gzip压缩文件内容。
- 为文件头指定expires和cache-control。
- 对于静态内容，设置文件头过期事件,expires的值为永不过时(never expire)。
- 对于动态内容，使用恰当的cache-control文件头来帮助浏览器进行有条件的请求。
- 升级到HTTPS,才能开启http2和PWA功能。
Gzip压缩
CDN(内容分发网络)
HTTPS VS HTTP
HTTP2新特性
1.新的二进制格式
2.多路复用
3.header压缩
4.服务器推送 server push
代码优化
流程控制
- 避免使用for…in(它能枚举到原型，所以很慢)
- 使用Map表代替大量的if-else和switch会提升性能和代码可阅读和维护性。
-
函数的防抖节流
-
事件委托的优点
- hidden
效率优化
-
易拓展，易维护，易维护的代码(函数式编程)，快速定位Bug。
-
引入Webpack，Rollup，Parcel等自动化构建工具
线上环境优化
错误监控
自动化构建、持续集成
工具
网络传输性能检测工具 –page Speed(Chrome下载拓展插件Page Speed)它会对测试网站的性能瓶颈提出完整的建议，我们可以根据它的提示进行优化工作。