前端性能优化实现方式

前端性能优化实现方式

缩小项目体积

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 将任务分发到多个线程中,提高运算效率,避免页面卡顿

避免使用全局变量

相关推荐
openKaka_8 分钟前
从 performWorkOnRoot 到 workInProgress tree:React 真正开始 render 的地方
前端·javascript·react.js
360智汇云15 分钟前
OpenStack Nova 虚拟机网卡挂卸载性能优化实践
性能优化·openstack
invicinble21 分钟前
前端框架使用vue-cli( 第四层:业务源码层--登陆页相关)
前端·vue.js·前端框架
Rooting++21 分钟前
vue2强制刷新路由的办法
前端·javascript·vue.js
nunumaymax24 分钟前
【第四章-react ajax】
前端·react.js
前端若水25 分钟前
层叠层(@layer):彻底解决优先级战争,告别 !important
前端·css·css3
invicinble31 分钟前
前端框架使用vue-cli( 第二层:工程配置层--vue语法系列)
前端·vue.js·前端框架
爱滑雪的码农32 分钟前
React+three.js之场景(Scene),相机(Camera)
前端·javascript·react.js
UXbot33 分钟前
AI应用原型平台核心能力:界面自动生成、交互流程编辑、多格式代码导出详解
前端·低代码·交互·软件构建·原型模式·web app
call me by ur name36 分钟前
多模态大模型轻量化
前端·网络·人工智能