web 前端性能优化汇总

本文为CSDN博主「JesonAx」的原创文章
原文链接:https://blog.csdn.net/qq_34927733/article/details/103051612

一、 网络层面优化

减少http请求,合并资源(js、css、图片)
减少资源体积,压缩资源(js、css、图片)
大量数据加载或大量图片加载时使用懒加载或预加载优化
使用按需加载,加快首屏渲染速度
利用http缓存机制,对资源进行缓存
网站用到很多域名时,可使用DNS预解析,提前解析域名
使用CDN给网站静态资源加速

二、 js 层面优化

尽量减少DOM操作,DOM操作尽量做到批量更新,减少页面回流和重绘
避免内存泄漏,及时清理已经没用的定时器、挂载的事件和其他引用
合理使用事件委托,避免给大量子元素添加相同事件
使用变量缓存多次使用的资源,避免每次使用都去获取或计算
频繁执行的函数使用节流或防抖进行优化
有大量数据需运算时,开启Web Worker多线程进行计算可避免js主线程阻塞
js文件引入放置在HTML body尾部,因为js的加载、执行会阻塞页面渲染

三 、css 层面优化

避免使用通配符(*)
避免选择器层级太多,提高解析匹配速度
对于css中可继承的属性,如font-size,尽量使用继承,少一点设置
提取公用样式增强可复用性
css文件引入放置在HTML head头部,因为css的加载、解析并不会阻塞DOM解析,提前加载可以更快合成Render树
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值