前端性能优化实现方式

前端性能优化实现方式

缩小项目体积

treeshaking消除冗余代码

(webpack配置文件module.exports配置optimization.minimize,package.json中配置"sideEffects": false,或者"sideEffects": [".css"," .less"])

使用插件压缩文件(compression-webpack-plugin、uglifyjs-webpack-plugin)

减少网络请求次数和体积

图片懒加载

路由懒加载link (resolve、require异步组件;es6import;Vite的rollupOptions配置)

使用http缓存link

(强制缓存Expires和Cache-Control、协商缓存Last-Modified和If-Modified-Since、ETag和If-None-Match)

nginx配置http缓存link

http压缩

(gzip br压缩算法,Accept-Encoding 请求标头 Content-Encoding 响应标头体现)

减少dom操作,最小化重绘和重排:documentFragment等
使用 Web Workers

对于一些计算密集型任务,可以使用 Web Workers 将任务分发到多个线程中,提高运算效率,避免页面卡顿

避免使用全局变量

相关推荐
yhole2 分钟前
Nginx解决前端跨域问题
运维·前端·nginx
我爱学习好爱好爱3 分钟前
Ansible 常用模块详解:hostname、selinux 、file实战
前端·chrome·ansible
爱丽_3 分钟前
AQS 的 `state`:volatile + CAS 如何撑起原子性与可见性
java·前端·算法
Zik----8 分钟前
Windows安装cuda
前端·ui·xhtml
王杨游戏养站系统8 分钟前
3分钟搭建1个游戏下载站网站教程!SEO站长养站系统!
开发语言·前端·游戏·游戏下载站养站系统·游戏养站系统
是上好佳佳佳呀8 分钟前
【前端(三)】CSS 属性梳理:从字体文本到背景表格
前端·css
gaolei_eit11 分钟前
Vue3信号(Signals)深度解析:重新思考响应式编程的未来
前端
小江的记录本14 分钟前
【端口号】计算机领域常见端口号汇总(完整版)
java·前端·windows·spring boot·后端·sql·spring
Reisentyan16 分钟前
网站开发遇到的一个坑点
前端
网络点点滴17 分钟前
customRef的强大之处
开发语言·前端·javascript