前端页面优化做的工作

news2024/11/17 7:38:43

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.coloradmin.cn/o/1376468.html

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

相关文章

JavaScript系列——Promise

文章目录 概要Promise三种状态状态改变Promise链式调用Promise处理并发promise.all()promise.allSettled()Promise.any()promise.race() 小结 概要 Promise中文翻译过来就是承诺、预示、有可能的意思。 在JavaScript里面,Promise 是一个对象…

九州金榜|为什么本科生“回炉”读职校?

近年来,“本科学历+技能证书”成为不少大学毕业生求职时的配置,本科毕业生“回炉”职业院校学习技能的现象引发社会关注。 为什么会引发这种现象发生呢?现在学校教育学的是理论知识,而“回炉”确实学习的实操&#xff…

Mac robotframework+pycharm运行suite报错情况:ImportError: No module named request

报错实例: 当前Preferences–>Tool–>External Tools Suite配置,显示使用的python为2.7版本,robotframework安装在当前版本的python中: 但是我pycharm现在的环境配置的python为3.11,当前使用的RF与当前使用的py…

钥匙翻转了一个面,该怎么识别匹配?

工业自动化中,我们经常遇到这样的问题,两面一样,上料时,翻转了,没人知道,该怎么匹配到?让机器人能抓取上? 两面相似,翻转了,该怎么识别匹配,来料…

GPT Store开业大吉:一场AI技术与创新的盛宴

就在1.11 日,ChatGPT 正式上线 GPT Store ! OpenAI CEO 山姆奥特曼第一时间确认了这个消息: 自从GPTs的概念提出以来,短短两个月内,全球用户已经创造了超过300万个GPTs。 点击 GPT Store 或者进入ChatGpt页面&am…

Arrow:在项目中进行时间处理的强大工具

目录 一、Arrow简介 二、安装与配置 三、基础功能与使用 1. 日期和时间格式转换 2. 时区处理 3. 时间序列分析 四、进阶应用与案例分析 五、性能与优化 六、最佳实践与经验分享 七、总结与展望 在处理日期和时间时,我们经常需要一个精确、可靠的库来帮助我…

vue前端开发自学练习,Props数据传递-类型校验,默认值的设置!

vue前端开发自学练习,Props数据传递-类型校验,默认值的设置! 实际上,vue开发框架的时候,充分考虑到了前端开发人员可能会遇到的各种各样的情况,比如大家经常遇到的,数据类型的校验,再比如,默认…

多端多用户万能DIY商城系统源码:自营+多商户入驻商城系统 独立部署 带完整的安装代码包以及搭建教程

电子商务行业日新月异,许多企业希望能够通过线上商城拓展业务。但是,传统商城系统往往无法满足多样化、个性化的需求,而且开发周期长、成本高。罗峰就来给大家分享一款多端多用户万能DIY商城系统源码,搭建简单。 以下是部分代码示…

TypeScript进阶(四)声明文件

✨ 专栏介绍 TypeScript是一种由微软开发的开源编程语言,它是JavaScript的超集,意味着任何有效的JavaScript代码都是有效的TypeScript代码。TypeScript通过添加静态类型和其他特性来增强JavaScript,使其更适合大型项目和团队开发。 在TypeS…

2024最新适用于 Windows 、Mac 的最佳屏幕录制软件

屏幕录制软件可以帮助我们录制 PC 和MacBook的实时屏幕视频。如果您想为 优酷录制视频,或者您正在为您的公司制作基于视频的项目,并且需要捕获屏幕的实时视频录制,那么我们在此列出了 一 款适合您的 Windows 、Mac的 2024 年最佳屏幕录制软件…

Redis相关报错信息:Could not connect to Redis at 127.0.0.1:6379: 由于目标计算机积极拒绝,无法连接。

报错信息: Could not connect to Redis at 127.0.0.1:6379: 由于目标计算机积极拒绝,无法连接。 报错原因: 访问不到Redis服务 解决方案: 将Redis服务打开! 使用cmd命令行打开本机服务管理: services…

Python算法例35 丑数Ⅰ

1. 问题描述 丑数的定义是,只包含质因子2、3、5的正整数,例如6、8就是丑数,但14不是丑数,因为它包含了质因子7,本例将检测一个整数是不是丑数。 2. 问题示例 给出num8,返回True;给出num14&am…

thinkphp美容SPA管理系统源码带文字安装教程

thinkphp美容SPA管理系统源码带文字安装教程 运行环境 服务器宝塔面板 PHP 7.0 Mysql 5.5及以上版本 Linux Centos7以上 基于thinkphp3.23B-JUI1.2开发,权限运用了Auth类认证,权限可以细分到每个功能, 增删改查功能一应俱全,整合了…

PostgreSQL 配置文件、数据储存目录

文章目录 查询配置文件所在位置查询数据储存目录PostgreSQL的数据目录 查询配置文件所在位置 show config_file; -- 查询配置文件所在位置查询数据储存目录 show data_directory; -- 查询数据储存目录PostgreSQL的数据目录 在PostgreSQL的数据目录(C:\Program…

el-tree多个树进行节点同步联动(完整版)

2024.1.11今天我学习了如何对多个el-tree树进行相同节点的联动效果,如图: 这边有两棵树,我们发现第一个树和第二个树之间会有重复的指标,当我们选中第一个树的指标,我们希望第二个树如果也有重复的指标也能进行勾选上&…

什么是冒泡排序?如何实现?

一、是什么 冒泡排序(Bubble Sort),是一种计算机科学领域的较简单的排序算法 冒泡排序的思想就是在每次遍历一遍未排序的数列之后,将一个数据元素浮上去(也就是排好了一个数据) 如同碳酸饮料中二氧化碳的…

微信小程序的支付流程

面试官:说说微信小程序的支付流程? 一、前言 微信小程序为电商类小程序,提供了非常完善、优秀、安全的支付功能 在小程序内可调用微信的API完成支付功能,方便、快捷 场景如下图所示: 用户通过分享或扫描二维码进入商…

A股风格因子看板 (2024.01第6期)

该因子看板跟踪A股风格因子,该因子主要解释沪深两市的市场收益、刻画市场风格趋势的系列风格因子,用以分析市场风格切换、组合风格景 露等。 今日为该因子跟踪第6期,指数组合数据截止日2023-12-31,要点如下 近1年A股风格因子收益走…

NODE笔记 1 http模块

简单的http模块使用 文章目录 前言 node 提供了 http 模块,首先需要简单的介绍http http协议(超文本传输协议),在web和网络领域都十分重要。在客户-服务通讯的请求响应中,报文大都是基于http。 可以先新建一个简单的…