前端页面优化做的工作

1.分析模块占用空间

new (require('webpack-bundle-analyzer').BundleAnalyzerPlugin)()

2.使用谷歌浏览器中的layers,看下有没有影响性能的模块,或者应该销毁没销毁的


3.由于我们页面中含有很大的序列帧动画,所以会导致页面性能低,卡顿等问题,CSS3 动画可以通过 GPU 加速来提高性能,但是在大规模元素上使用时会存在性能问题。Canvas 可以用于绘制复杂的图形,由于它的渲染机制和硬件加速,所以具备很好的性能。
使用canvas结合requestAnimationFrame解决动画的性能问题
4.压缩图片这个是必须的
5.图片预加载和静默加载,把必须首屏渲染的图片放在首页的loading里面去预加载。
其他的图片在进入页面后慢慢加载
5.我们用的技术栈是vue3,用了异步组件defineAsyncComponent去加载组件
6.非必要的不要直接用setup去检测数据
7.使用谷歌浏览器的lighthouse去看页面的性能评分,尽量把影响性能分数低的模块解决掉(本地和测网是有差别的,最好在测网去检测评分)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/613701.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

质量好洗地机有哪些?洗地机口碑榜

在很多人眼中,洗地机可能被简单地视为一种高价的拖把,但作为一个经验丰富的洗地机测评博主,我要强调洗地机在家务工作中的巨大价值。它不仅仅是一种清洁工具,更是集扫地、拖地、洗地以及擦干地板等多项功能于一身的强大设备。通过…

Transformer从菜鸟到新手(六)

引言 上篇文章介绍了如何在多GPU上分布式训练,本文介绍大模型常用的一种推理加速技术——KV缓存。 KV Cache KV缓存(KV Cache)是在大模型推理中常用的一种技巧。我们知道在推理阶段,Transformer也只能像RNN一样逐个进行预测,也称为自回归。…

Android studio 各本版下载

搜索Android studio下载时发现各种需要付费下载的链接,在此记录一下官方的下载地址。 Android Studio 下载文件归档 | Android 开发者 | Android Developers

关于报错 curl: (56) Recv failure: Connection reset by peer

curl ip没问题 curl localhost 则报错 curl: (56) Recv failure: Connection reset by peer 出现这个报错有很多原因, 其中之一就是terminal代理 而关闭代理应用之后, 其实由于配置的终端都是 export指定的代理 所以导致还是一直报错. 通过 curl -v 可以发现 指向了代理ip和…

深入浅出理解SPP、ASPP、DSPP、MDSPP空间金字塔池化系列结构(综合版)

一、参考资料 目标检测:SPP-net SPP原理及实现 金字塔池化系列的理解SPP、ASPP SPP,PPM、ASPP和FPN结构理解和总结 二、空间金字塔池化(SPP) 原始论文:[1] 1. 引言 传统的卷积神经网络中,池化层通常采用固定的池化层级和固定…

使用SpringCache操作Redis缓存数据

SpringCache概念 SpringCache是一个框架,实现了基于注解的缓存功能,只需要简单的加一个注解,就能实现缓存功能。 SpringCache提供了一层抽象,底层可以切换不同的缓存实现,例如: EHCacheCaffeineRedis 使…

2024 年 1 月安全更新修补了 58 个漏洞(Android )

谷歌发布了针对 Android 平台 58 个漏洞的补丁,并修复了 Pixel 设备中的 3 个安全漏洞,拉开了 2024 年的序幕。 Android 2024 年 1 月更新的第一部分以 2024 年 1 月 1 日安全补丁级别发布在设备上,解决了框架和系统组件中的 10 个安全漏洞&…

学习笔记17——通俗易懂的三次握手四次挥手

提供一种博主本人觉得很好理解的三次握手和四次挥手场景,帮助记忆 三次握手过程 初始状态:客户端处于closed状态,服务器处于listen监听转台客户端向服务器发送一个SYN连接请求,并告诉对方自己此时初始化序列号为x,发送…

TYPE-C接口取电芯片介绍和应用场景

随着科技的发展,USB PDTYPE-C已经成为越来越多设备的充电接口。而在这一领域中,LDR6328Q PD取电芯片作为设备端协议IC芯片,扮演着至关重要的角色。本文将详细介绍LDR6328Q PD取电芯片的工作原理、应用场景以及选型要点。 一、工作原理 LDR63…

【昕宝爸爸小模块】HashMap用在并发场景存在的问题

HashMap用在并发场景存在的问题 一、✅典型解析1.1 ✅JDK 1.8中1.2 ✅JDK 1.7中1.3 ✅如何避免这些问题 二、 ✅HashMap并发场景详解2.1 ✅扩容过程2.2 ✅ 并发现象 三、✅拓展知识仓3.1 ✅1.7为什么要将rehash的节点作为新链表的根节点3.2 ✅1.8是如何解决这个问题的3.3 ✅除了…

【SSO】统一授权中心v1.0.0版本正式上线(多租户)

目录 背景 体验 技术栈 菜单 示例 背景 为了方便权限管理、用户登录授权、应用授权等,特地开发了当前的统一授权中心。 体验 邮箱注册即可登录体验 后台系统:https://sso.behappyto.cn/#/switch 技术栈 vue3tsspringbootmybatismysql 菜单 …

SpringBoot用MultipartFile.transferTo传递相对路径的问题

问题描述: 打算给自己的项目添加一个上传文件保存功能,于是我使用MultipartFile.transferTo()来完成这个功能,由于我的项目要部署到服务器,所以我使用了相对路径把上传的文件保存到当前项目的工作目录下,但是报错了&am…

C++上位软件通过Snap7开源库访问西门子S7-200/LOGO PLC/合信M226ES PLC V存储区的方法

前言 在前面例程中谈到了C 通过Snap7开源库S7通信库跟西门子S7-1200PLC/S7-1500PLC以及合信CTMC M226ES PLC/CPU226 PLC通信的方式方法和应用例程。但是遗憾的是Snap7中根据官方资料显示只能访问PLC的 DB区、MB区、C区、T区 、I区、Q区,并没有提到有关如何访问S7-20…

jsx的语法规则?

JSX&#xff08;JavaScript XML&#xff09;是一种在 JavaScript 中编写类似 XML 的语法扩展&#xff0c;常用于 React 应用程序中描述用户界面。下面是 JSX 的一些基本语法规则&#xff1a; 嵌套规则&#xff1a;JSX 元素可以相互嵌套&#xff0c;并且需要使用闭合标签。 <…

Excel4:数据匹配与连接

数据&#xff1a;八月成交数据&八月获客数据 业务1 八月成交数据表格中有三个子表&#xff0c;需要后两个子表连接到第一个表中。 思路 首先需要对业务组名称进行分裂&#xff0c;同时需要用到一款函数可以自动识别并匹配数据&#xff0c;这个函数就是vlookup&#xff0c;也…

在学习爬虫前的准备

1. 写一个爬虫程序需要分几步 获取网页内容。 我们会通过代码给一个网站服务器发送请求&#xff0c;它会返回给我们网页上的内容。 在我们平时使用浏览器访问服务器内容是&#xff0c;本质上也是向服务器发送一个请求&#xff0c;然后服务器返回网页上的内容。只不过浏览器还会…

K8s Pod详解

1.Pod结构 每个Pod中都可以包含一个或者多个容器&#xff0c;这些容器可以分为两类&#xff1a; 用户程序所在的容器&#xff0c;数量可多可少 Pause容器&#xff0c;这是每个Pod都会有的一个根容器&#xff0c;它的作用有两个&#xff1a; 可以以它为依据&#xff0c;评估整个…

恒创科技:解决Windows服务器磁盘空间不足的问题

​  服务器硬盘的大小是决定空间是否充足的主要因素。但在日常使用中&#xff0c;服务器和网站备份会消耗大量存储空间&#xff0c;如果维护不当&#xff0c;最终将耗尽您的容量。同样&#xff0c;日志文件、临时文件和数据库可以在硬盘驱动器上或回收站中无休止地建立。当您…

手把手教你升级GPT-4,内附详细步骤

目录 1、先介绍一下 GPT 升级 2、第一种: 免费升级 支付宝购买礼品卡给美区 apple id 充值 3、第二种&#xff1a;5分钟快速升级 方法 平时我会在朋友圈分享一些利用 GPT-4 画的图片&#xff0c;比如下面这个扑克牌风格的"黑红小狗武士"。 用 GPT-4 做绘画仅仅是…

如何使用宝塔面板部署Inis博客并实现无公网ip环境远程访问

文章目录 前言1. Inis博客网站搭建1.1. Inis博客网站下载和安装1.2 Inis博客网站测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 3. 公网访问测试总…