如何优化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预解析,提高资源加载速度》
推荐文章:《探索HTTP传输中gzip压缩的秘密》
推荐文章:《如何使用Tree-shaking减少代码体积》
推荐文章:《如何让网站加载更快》
推荐文章:《DNS预解析 dns-prefetch 优化页面加载速度》
推荐文章:《做前端性能优化,你居然不知道什么是Preload、Prefetch、Preconnect、Prerendering?》
推荐文章:《Webpack实战:实现资源按需加载-资源异步加载》
推荐文章:《你不知道的 20+ Chrome Devtools 技巧!》
推荐文章:《Vue性能优化:图片与组件,如何实现按需加载?》
推荐文章:《CSS性能优化:你可以试一试内联CSS》
网络优化
该项措施可以帮助我们优化 FP、FCP、LCP 指标。
这块内容大多可以让后端或者运维帮你去配置,升级至最新的网络协议通常能让你网站加载的更快。
比如说使用 HTTP2.0 协议、TLS 1.3 协议或者直接拥抱 QUIC 协议~
推荐文章:《如何在Nginx配置HTTP2协议,大幅提高HTTP网络请求性能》
推荐文章:《TCP与UDP,彻底弄懂HTTP2协议与HTTP3协议》
推荐文章:《还没使用HTTP3?赶紧来补一补,学习一下如何在Nginx上配置HTTP3》
推荐文章:《从UDP/TCP到HTTP/HTTP2,弄清楚网络层面上应该了解的知识。》
优化耗时任务
该项措施可以帮助我们优化 TTI、FID、TBT 指标。
使用 Web Worker 将耗时任务丢到子线程中,这样能让主线程在不卡顿的情况下处理 JS 任务
调度任务 + 时间切片,这块技术在 React 16 中有使用到。简单来说就是给不同的任务分配优先级,然后将一段长任务切片,这样能尽量保证任务只在浏览器的空闲时间中执行而不卡顿主线程
推荐文章:《如何合理使用Web Worker执行耗时任务》
Dom渲染层面上的优化
不要动态插入内容
该项措施可以帮助我们优化 CLS 指标。
使用骨架屏给用户一个预期的内容框架,突兀的显示内容体验不会很好
图片切勿不设置长宽,而是使用占位图给用户一个图片位置的预期
不要在现有的内容中间插入内容,起码给出一个预留位置
使用React或者Vue,通过虚拟DOM来进行渲染层面的优化
代码层面上的优化
注意GC,防止内存泄露
- 防止内存泄露
- 了解V8引擎的垃圾回收机制,合理回收内存
推荐文章:《V8解析代码流程》
推荐文章:《V8探索之旅:深入了解垃圾回收机制》
推荐文章:《V8引擎的内存回收》
推荐文章:《浅谈V8引擎的垃圾回收机制》
推荐文章:《JS内存机制》
推荐文章:《JS 数据结构之旅 :通过JS实现栈、队列、二叉树、二分搜索树、AVL树、Trie树、并查集树、堆》
参考文章: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 一个系统或者网站在功能开发完成后一般最终都需要部署到服务器上运行,那么服务器的性能监控和分析就显 ...
- Android性能优化系列篇(五):弱网优化
六.弱网优化 1.Serializable原理 通常我们使用Java的序列化与反序列化时,只需要将类实现Serializable接口即可,剩下的事情就交给了jdk.今天我们就来探究一下,Java序列化 ...
- Java分布式二手房项目尚好房第五课 图片上传及前端房源展示
尚好房:图片上传 一.图片存储方案 1.介绍 在实际开发中,我们会有很多处理不同功能的服务器.例如: 应用服务器:负责部署我们的应用 数据库服务器:运行我们的数据库 文件服务器:负责存储用户上传文件的 ...
- 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 项目中仍然存 ...
最新文章
- 我生于1997,我骄傲了吗?
- python matplotlib模块画出的图像转换为.tiff格式
- 关于onclick操作,影响按钮submit提交
- windows批量修改文件、文件夹名工具:Bulk Rename Utility批量改名演示
- 二倍图三倍图什么意思_搞笑GIF图:搞笑GIF图:平安夜为什么见不到“圣诞老人”...
- html native code is rendered from xml configuration
- DataGridView DataSource 如何实现排序
- mysql 5.6.31 winx64_详解介绍MySQL5.6.31winx64.zip安装配置的图文教程
- apache ignite_Kubernetes集群上的Apache Ignite和Spring第3部分:测试应用程序
- 使用MyEclipse快速开发图形化界面
- php crypt mysql password_Linux_在Linux下生成crypt加密密码的方法,我们可以用mkpasswd命令:这个 - phpStudy...
- 民企信息化建设个人经历(一)
- 《软件过程管理》 第七章 软件过程的质量管理
- 联想电脑安装黑苹果全教程
- Perfmon监控Windows进程性能
- [翻译Joel On Software]Joel测试:12步写出更高质量代码/The Joel Test: 12 Steps to Better Code
- 算术编码原理及其python实现
- python代码画玫瑰花
- ngrok私有服务搭建(docker交叉编译)
- AI-七种动物识别规则库
热门文章
- DOS批处理中%cd%和%~dp0的区别
- Linux: 利用 Alpine 在命令行里访问 Gmail
- PHP5: mysqli 插入, 查询, 更新和删除 Insert Update Delete Using mysqli (CRUD)
- mysql 格式化日期 DATE_FORMAT,FROM_UNIXTIME,UNIX_TIME等
- 动态规划——搬寝室(hdu1421)
- How to Create Your Own CentOS Vagrant Box
- shell的read方法使用介绍
- LeetCode 646. Maximum Length of Pair Chain
- LeetCode 12. Integer to Roman
- LSP 里式替换原则 c# 1614092345