HTML方面
对于SPA应用,可以使用预渲染或者服务端渲染,提高首屏加载速度;
引入css时采用link标签,并放入头部,使其与文档一起加载,减少页面卡顿时间;
script标签可以放到body最下边或者添加defer/async属性,因为script的加载会阻塞页面渲染;
尽量减少dom结构的重排和重绘;
使用懒加载,看不到的内容等需要时再进行加载。
CSS方面
能用css解决的问题不要用js解决,如动画、溢出省略号等;
使用css雪碧图,减少网络请求;
对不同分辨率的屏幕采用不同分辨率的图片,防止图片过大导致加载缓慢;
将合并样式分开来书写,效率更高,如margin: top 0 0 left;的效率没有margin-top: top; margin-left:left;高;
需要渲染动画时强制打开GPU加速:transform: translate3d(0, 0, 0);
抽离相同的样式,整合为class在页面中进行使用,提高css的可维护性;
避免使用通配符规则,如果*{},计算次数惊人,只对需要用到的元素进行选择;
减少优先级低的css选择器,如:尽量少的使用标签选择器(查询效率低),而使用class。
JS方面
使用事件委派,减少内存消耗;
使用节流和防抖函数避免函数的频繁调用;
写循环逻辑时尽量降低时间复杂度,尽量减少使用循环嵌套和递归;
尽量不要创建全局变量。
Vue方面
使用路由懒加载模式,异步加载路由;
使用keep-alive缓存路由,避免频繁切换导致性能消耗;
UI组件按需引入,避免全量引入;
v-for和v-if不要同时使用,因为v-for的优先级更高,会先循环,导致所有内容均会被渲染;
图片使用懒加载,指令:v-lazy;
在组件销毁时记得清空定时器的内容和解绑本组件内绑定过的事件,释放内存。
其他方面
使用打包工具对代码进行打包压缩,若想提高打包速度,可以使用happyPack插件;
服务端可以使用缓存技术,强缓存和协商缓存
CDN加速技术。