如何优化WebAPP性能：从四个层面上彻底优化前端项目性能
如何优化WebAPP性能：从四个层面上彻底优化前端项目性能
资源层面上的优化
该项措施可以帮助我们优化 FP、FCP、LCP 指标。
压缩文件、使用 Tree-shaking 删除无用代码
服务端配置 Gzip 进一步再压缩文件体积
资源按需加载
通过 Chrome DevTools 分析首屏不需要使用的 CSS 文件，以此来精简 CSS
内联关键的 CSS 代码
使用 CDN 加载资源及
dns-prefetch预解析 DNS 的 IP 地址对资源使用
preconnect，以便预先进行 IP 解析、TCP 握手、TLS 握手缓存文件，对首屏数据做离线缓存
图片优化，包括：用 CSS 代替蹄片、裁剪适配屏幕的图片大小、小图使用 base64 或者 PNG 格式、支持 WebP 就尽量使用 WebP、渐进式加载图片
开启pwa，通过 service worker , 拦截http请求，进行资源的离线访问。
推荐文章：《HTML上通过meta标签，启用DNS预解析，提高资源加载速度》
网络优化
该项措施可以帮助我们优化 FP、FCP、LCP 指标。
这块内容大多可以让后端或者运维帮你去配置，升级至最新的网络协议通常能让你网站加载的更快。
比如说使用 HTTP2.0 协议、TLS 1.3 协议或者直接拥抱 QUIC 协议~
推荐文章：《如何在Nginx配置HTTP2协议，大幅提高HTTP网络请求性能》
推荐文章：《TCP与UDP，彻底弄懂HTTP2协议与HTTP3协议》
优化耗时任务
该项措施可以帮助我们优化 TTI、FID、TBT 指标。
使用 Web Worker 将耗时任务丢到子线程中，这样能让主线程在不卡顿的情况下处理 JS 任务
调度任务 + 时间切片，这块技术在 React 16 中有使用到。简单来说就是给不同的任务分配优先级，然后将一段长任务切片，这样能尽量保证任务只在浏览器的空闲时间中执行而不卡顿主线程
推荐文章：《如何合理使用Web Worker执行耗时任务》
Dom渲染层面上的优化
不要动态插入内容
该项措施可以帮助我们优化 CLS 指标。
使用骨架屏给用户一个预期的内容框架，突兀的显示内容体验不会很好
图片切勿不设置长宽，而是使用占位图给用户一个图片位置的预期
不要在现有的内容中间插入内容，起码给出一个预留位置
使用React或者Vue，通过虚拟DOM来进行渲染层面的优化
参考文章：https://juejin.im/post/5f0b056de51d45349917bf16
如何优化WebAPP性能：从四个层面上彻底优化前端项目性能相关推荐
- 如何优化WebAPP性能：从五个层面上彻底优化前端项目性能
如何优化WebAPP性能:从五个层面上彻底优化前端项目性能 资源层面上的优化 该项措施可以帮助我们优化 FP.FCP.LCP 指标. 压缩文件.使用 Tree-shaking 删除无用代码 服务端配置 ...
- 前端项目性能优化（全面解析）
前言 为什么要进行Web性能优化? 流量搜索转换率用户体验Amazon 发现每100ms延迟导致1%的销量损失 寻找性能瓶颈 了解性能指标 - 多快才算快 利用测量工具和APIs 优化问题,重新测量( ...
- 性能测试分析与性能调优诊断--史上最全的服务器性能分析监控调优篇
来源: https://www.cnblogs.com/laoqing/p/11629941.html 一个系统或者网站在功能开发完成后一般最终都需要部署到服务器上运行,那么服务器的性能监控和分析就显 ...
- 金三银四，简历上写CV开源项目，有用吗？
春招在即,常有粉丝留言问我:简历上写CV的开源项目有用吗? 答案很简单,没什么用. 以"实时目标检测"这一自动驾驶.机器人等行业的重要任务来举例,尽管你可以获得一些开源代码,但几乎 ...
- oracle性能优化求生指南_Vue项目性能优化--实践指南，网上最全最详细
点击上方 "程序员小乐"关注, 星标或置顶一起成长 第一时间与你相约 每日英文 Some happened could not forget, even forget also o ...
- Vue 项目性能优化方案
前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM:但 Vue 项目中仍然存 ...
- 【Vuejs】953- Vue 项目性能优化技巧分享
来自:知乎,作者:小可乐程序员 链接:https://zhuanlan.zhihu.com/p/83180326 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累 ...
- 前端Vue 项目性能优化
前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM:但 Vue 项目中仍然存 ...
- 小米折叠屏MIX FOLD办公性能再强化，掌上PC模式正式上线
对于正在享受小米折叠屏MIX FOLD超大屏手机的用户,又将迎来令人兴奋的体验升级.近日,小米集团副总裁常程在微博透露,小米折叠屏MIXFOLD已经推出固件升级,最新MIUI 12.0.10稳定版系统 ...
最新文章
- 剑指offer_第19题_顺时针打印矩阵_Python
- R语定义函数对宽分布(wide distribution )、有偏分布（skew distribution）的数据进行对数变换（符号对数变换函数、signed log transformation）
- appium学习【二】：用try捕获异常后，用例的执行结果为pass
- 前端小哥玩HTML复选框上瘾，能画logo做视频，还开源成JS库
- 技术硬核还不够？互联网企业出海指南来了！
- python 画三维函数图-如何用Matplotlib 画三维图的示例代码
- Hadoop运维记录系列(三)
- windows server操作系统一定要关闭开机磁盘自检
- vue - 插槽slot
- Soul网关发布2.1.X之后，它到底有多方便？
- EnjoyingSoft之Mule ESB开发教程第六篇：Data Transform - 数据转换
- java io之图片存取
- geant4运行例子_Geant4--一次编译，运行多个Run，极大提升模拟效率
- 一文讲透数据库，以后别说你不懂数据库
- ML 12 13 mixture of gaussions and EM
- go语言 html 5 gui,仅需简单 5 步，给你的 Golang 程序添加 GUI （使用 Electron ）
- [转载].net常用函数
- jBridge避开云服务器让AI算力落地的桥联框架技术
- 学习PLC不可错过的15个基础！
- 我在Facebook工作四年的总结与反思