从资源请求数量+代码执行效率两个角度来考虑
DOM结构
样式表放在头部,防止白屏和闪屏
JS脚本放在底部或异步获取,防止阻塞资源加载
使用语义化标签,优化精简DOM结构
减少DOM操作频率
减少重绘与回流
JS脚本
优化脚本结构,移除重复的脚本
模块就近加载(CMD)
按需加载加载组件和路由
图片懒加载,列表分页
使用节流与防抖减少事件触发频率
尽量使用CSS动画代替js动画,开启硬件加速
资源打包上线
使用打包构建工具(webpack)清除注释,压缩页面资源,js、css、html、图片、字体等等
混淆js代码
分离非业务逻辑相关vendor依赖,使用长缓存缓存和CDN分发网络
服务器优化
减少Http请求,合并页面资源,js,css单一入口。js特殊可以分为两个文件,
一个业务逻辑,一个非业务逻辑
把小图标合成雪碧图,不太适用经常更新的移动端开发
把小的图片,字体等资源base64化
开启GZip压缩,减少资源传输大小
使用强缓存和协商缓存,减少资源重复请求https://jasonandjay.github.io/study/zh/standard/Cache.html
#Vue中可以优化的点
Vue中可以优化的点
Vue库dist里面的Runtime-only比Runtime+Compiler小30%
Vue的计算属性会根据依赖的data进行缓存
keep-alive可以缓存常用组件
Vuex中的getter也会根据依赖的state进行缓存
v-for中唯一key的使用
Vue全局错误处理errorHandle
Vue路由懒加载
Vue组件动态加载
#React中可以优化的点
在constructor改变this指向代替箭头函数和render内绑定this,
避免函数作为props带来不必要的rerender
shouldComponentUpdate,减少不不必要的rerender
PureComponent高性能组件只响应引用数据的深拷贝
使用唯一key优化list diff
合并setState操作,减少虚拟dom对比频率
React路由动态加载react-loadable