前端页面优化做的工作

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去看页面的性能评分,尽量把影响性能分数低的模块解决掉(本地和测网是有差别的,最好在测网去检测评分)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

合并 K 个升序链表[困难]

一、题目 给你一个链表数组,每个链表都已经按升序排列。请你将所有链表合并到一个升序链表中,返回合并后的链表。 示例 1: 输入:lists [[1,4,5],[1,3,4],[2,6]] 输出:[1,1,2,3,4,4,5,6] 解释:链表数组如…

Maven 依赖管理项目构建工具 教程

Maven依赖管理项目构建工具 此文档为 尚硅谷 B站maven视频学习文档,由官方文档搬运而来,仅用来当作学习笔记用途,侵删。 另:原maven教程短而精,值得推荐,下附教程链接。 atguigu 23年Maven教程 目录 文章目…

2024-01-11 部署Stable Diffusion遇挫记

点击 <C 语言编程核心突破> 快速C语言入门 部署Stable Diffusion遇挫记 前言一、一如既往的GitHub部署二、使用的感受总结 create by Stable Diffusion; prompt: fire water llama 前言 要解决问题: 由于近期的努力, 已经实现语音转文字模型, 通用chat迷你大模型的本地…

适配 IOS 安全区域

安全区域指的是一个可视窗口范围&#xff0c;处于安全区域的内容不受圆角&#xff08;corners&#xff09;、齐刘海&#xff08;sensor housing&#xff09;、小黑条&#xff08;Home Indicator&#xff09;影响。 造成这个问题的主要原因就是 iphoneX 之后在屏幕上出现了所谓…

Swoft - Bean

一、Bean 在 Swoft 中&#xff0c;一个 Bean 就是一个类的一个对象实例。 它(Bean)是通过容器来存放和管理整个生命周期的。 最直观的感受就是省去了频繁new的过程&#xff0c;节省了资源的开销。 二、Bean的使用 1、创建Bean 在【gateway/app/Http/Controller】下新建一个名为…

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导

鸿蒙HarmonyOS兼容JS的类Web开发-开发指导 文章目录 鸿蒙HarmonyOS兼容JS的类Web开发-开发指导常用组件开发指导list开发指导创建list组件添加滚动条添加侧边索引栏实现列表折叠和展开场景示例 dialog开发指导创建dialog组件设置弹窗响应场景示例 form开发指导创建form组件实现…

经管类CSSCI、北核期刊投稿指南数据(2023年更新)/经管类的期刊投稿指南

经管类CSSCI、北核期刊投稿指南&#xff08;2023年更新&#xff09; 1、内容包括&#xff1a;投稿指南-CSSCI版本、CSSCI扩展版本、北大核刊版本、建议期刊版本、所有期刊。 2、范围&#xff1a;CSSCI、CSSCI扩展、北大核刊 3、说明&#xff1a;包含经管类期刊的发表难度&am…

css3边框与圆角

css3边框与圆角 前言边框的三要素边框的三要素小属性 四个方向的边框四个方向边框的三要素小属性 去掉边框利用边框制作三角形圆角 border-radius单独设置四个圆角小属性百分比为单位 盒子阴影阴影延展内阴影多阴影 结语 前言 在网页设计中&#xff0c;边框与圆角不仅仅是简单…

FAST OS DOCKER 可视化Docker管理工具

介绍 FAST OS DOCKER 界面直观、简洁&#xff0c;非常适合新手使用&#xff0c;方便大家轻松上手 docker部署运行各类有趣的容器应用&#xff0c;同时 FAST OS DOCKER 为防止服务器负载过高&#xff0c;进行了底层性能优化&#xff1b;其以服务器安全为基础&#xff0c;对其进…

天津大数据分析培训班 常见的大数据培训课程

大数据现在属于热门职业技能之一&#xff0c;不管是大学毕业生&#xff0c;计算机和数据相关专业青年&#xff0c;已经工作一阵的开发人员&#xff0c;运营小白&#xff0c;还是其他想进入这个行当的&#xff0c;可能还没有编程基础的转行人&#xff0c;都想尝试大数据行业&…

联手英特尔,释放星飞分布式全闪存储潜能

近日&#xff0c;英特尔官网发布了与 XSKY 星辰天合联手打造的解决方案&#xff0c;即 XSKY 的新一代全闪分布式存储系统 XINFINI&#xff0c;该存储系统采用英特尔 QAT 加速数据压缩/解压缩&#xff0c;从而大幅度提升存储系统性能。 全闪存储系统面临的解压缩挑战 在存储系统…

【开源】基于JAVA+Vue+SpringBoot的大病保险管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统配置维护2.2 系统参保管理2.3 大病保险管理2.4 大病登记管理2.5 保险审核管理 三、系统详细设计3.1 系统整体配置功能设计3.2 大病人员模块设计3.3 大病保险模块设计3.4 大病登记模块设计3.5 保险审核模块设计 四、…

Java21 如何使用switch case

1. Java8 和 Java21 Java8 引入字符串和枚举 Java21 可以返回值, yield关键字, switch 表达式, 模式匹配, null值处理 2. 代码案例 1. Java8 public static void java8() {String day "tuesday";switch (day) {case "monday":System.out.println("w…

3.4 在开发中使用设计模式

现在&#xff0c;我们应该对设计模式的本质以及它们的组织方式有了初步的认识&#xff0c;并且能够理解ROPES过程在整体设计中的作用。通过之前章节对“体系结构”及其五个视图的探讨&#xff0c;我们打下了坚实的基础。初步了解了UML的基本构建模块后&#xff0c;我们现在可以…

Qt优秀开源项目之二十一:遇见QSkinny,一个轻量级Qt UI库

目录 一.QSkinny简介 二.工作原理 三.编译 一.QSkinny简介 QSkinny库基于Qt Graphic View和Qt/Quick中少量的核心类。它提供了一组轻量级控件&#xff0c;可以在C或QML中使用这些控件。QSkinny默认是启用硬件加速的&#xff0c;非常适合嵌入式设备&#xff0c;目前已经应用于…

修改SSH默认端口,使SSH连接更安全

以CentOS7.9为例&#xff1a; 1、修改配置文件 vi /etc/ssh/sshd_config 2、远程电脑可连接&#xff0c;暂时将SELinux关闭 # 查询状态 getenforce # 关闭 setenforce 0 # 开启 setenforce 1 3、SELinux设置&#xff08;如果启用&#xff09;&#xff0c;semanage管理工具安…

XCTF-Misc1 pcap1 misc2-1

pcap1 附件是一个xxxxx.pcap流量包 分析 1. 流量包筛选 统计协议分级&#xff0c;发现主要是TCP协议 查看TCP协议的流量包&#xff0c;筛选关键词tcp contains flag 跟踪TCP流&#xff0c;发现是python代码&#xff0c;将其导出 2. 导出的代码分析 导出的代码&#xff…

计算机图形学作业:Cohen-Sutherland和Liang-Barsky 裁剪算法

参考书籍和资料&#xff1a; Liang-Barsky参考下面视频14.2.1 [14.2.1]--讲解经典的梁友栋-巴斯基算法。_哔哩哔哩_bilibili Cohen-Sutherland参考孔令德的计算机图形学实验及课程设计&#xff08;第二版&#xff09;&#xff0c;实验五直线段的裁剪 题目如下&#xff1a; …

助力智能密集人群检测计数,基于YOLOv8全系列模型【n/s/m/l/x】开发构建通用场景下密集人群检测计数识别系统

在一些人流量比较大的场合&#xff0c;或者是一些特殊时刻、时段、节假日等特殊时期下&#xff0c;密切关注当前系统所承载的人流量是十分必要的&#xff0c;对于超出系统负荷容量的情况做到及时预警对于管理团队来说是保障人员安全的重要手段&#xff0c;本文的主要目的是想要…

springboot基于Web的社区医院管理服务系统源码和论文

在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括社区医院管理服务系统的网络应用&#xff0c;在外国线上管理系统已经是很普遍的方式&#xff0c;不过国内的管理系统可能还处于起步阶段。社区医院管理服务系统具有社区医院信…