前端性能优化

性能优化是为了提高网页的加载速度,给用户带来更好的体验和用户满意度,同时还能减少服务器的压力,一下几个因素

1,提高用户体验

2,增加页面访问量

3,提高搜索引擎排名

4,减少服务器压力

5,节约成本

6,提高用户留存率

性能优化方式有哪些

HTML&CSS

减少DOM数量,减轻浏览器渲染计算负担。

使用异步和延迟加载js文件,避免js文件阻塞页面渲染

压缩HTML、CSS代码体积,删除不要的代码,合并CSS文件,减少HTTP请求次数和请求大小。

减少CSS选择器的复杂程度,复杂度与阿高浏览器解析时间越长。

避免使用CSS表达式在javascript代码中

使用css渲染合成层如transform、opacity、will-change等,提高页面相应速度减少卡顿现象。

动画使用CSS3过渡,减少动画复杂度,还可以使用硬件加速。

减少DOM操作数量

避免使用with语句、eval函数,避免引擎难以优化。

尽量使用原生方法,执行效率高。

将js文件放到文件页面底部,避免阻塞页面渲染

使用事件委托,减少事件绑定次数。

合理使用缓存,避免重复请求数据。

Vue

合理使用watch和computed,数据变化就会执行,避免使用太多,减少不必要的开销

合理使用组件,提高代码可维护性的同事也会降低代码组件的耦合性

使用路由懒加载,在需要的时候才会进行加载,避免一次性加载太多路由,导致页面阻塞

使用Vuex缓存数据

合理使用mixins,抽离公共代码封装成模块,避免重复代码。

合理使用v-if 、v-show

v-for 不要和v-if一起使用,v-for的优先级会比v-if高

v-for中不要用index做key,要保证key的唯一性

使用异步组件,避免一次性加载太多组件

避免使用v-html,存在安全问风险和性能问题,可以使用v-text

使用keep-alive缓存组件,避免组件重复加载

Webpack优化

代码切割,使用code splitting将代码进行分割,避免将所有代码打包到一个文件,减少响应体积。

按需加载代码,在使用使用的时候加载代码。

压缩代码体积,可以减小代码体积

优化静态资源,使用字体图标、雪碧图、webp格式的图片、svg图标等

使用Tree Shaking 删除未被引用的代码

开启gzip压缩

静态资源使用CDN加载,减少服务器压力

网络优化

使用HTTP/2

减少、合并HTTP请求,通过合并CSS、JS文件、精灵图等方式减少请求数量。

压缩文件, 开启nginx,Gzip对静态资源压缩

使用HTTP缓存,如强缓存、协商缓存

使用CDN,将网站资源分布到各地服务器上,减少访问延迟

相关推荐
X_StarX17 分钟前
web程序设计期末复习-填空题
前端·学习·html·web·大学生·期末考
几何心凉20 分钟前
4 年融资 1 亿美金,ProtonBase 背后的技术雄心 |专访小质科技 CEO 王绍翾
前端
得物技术22 分钟前
得物研发自测 & 前端自动化测试体系建设
前端·测试
异常君29 分钟前
FST 在 Elasticsearch 中的核心应用与性能优化实践
java·elasticsearch·性能优化
是忽然之间38 分钟前
vue对接帆软bi
前端
海底火旺40 分钟前
从零实现语音合成:基于火山引擎TTS的前端实践
前端·人工智能·react.js
jackeyfive40 分钟前
最快速搭建博客并部署到 GitHub Pages
前端·github
前端付豪42 分钟前
汇丰实时风控数据流揭秘:Kafka + Flink + CEP 规则引擎全链路实战
前端·后端·架构
Sibyllala1 小时前
UE5.4——使用UltraDynamicSky实现天气切换和时间变化
前端
溪饱鱼1 小时前
第七章: SEO与渲染方式 三
前端·seo