前端性能优化2

ops/2025/2/2 7:55:24/

常见问题:
首屏速度,白屏时间等。操作速度以及渲染速度。

一打开网页时白屏,是因为还需要从服务器那边请求HTML、JS这些过来,加载下来后才有东西渲染
首屏速度参考两方面:白屏时间(资源加载时间、首屏js执行)、渲染页面(首屏数据请求、Dom渲染)
渲染页面是比较快的,所以大多数时间是花在了白屏时间上,而其中的资源加载时间是占比比较大的。
所以:
收效很大的操作
1,减少首屏资源体积(打包工具的压缩,异步加载,更新为体积更小的新版本,能不用第三方库就尽量不用第三方库,编写代码尽量减少体积,去除大的base64体积) 这一步能实现最大效果
收效不大或者特殊情况的优化操作:
1,首屏数据尽量并行,如果可行让小数据量接口合并到其他接口
2,页面包含大量dom可以分批随滚动渲染
骨架屏,loading,先让屏幕不白,减少用户焦虑

异步加载:得思考哪些适合做异步加载,哪些能做?
体积比较大、且不是马上需要用的功能适合。比如一个图片压缩的功能,因为使用了第三方库,导致体积比较大,并且它跟首屏渲染无关联,所以适合异步加载

更新为体积更小的新版本:这里就涉及到tree-shaking
例如引用了第三方库,里面有100个方法,但只用了20个,那么如果配合tree-shaking,那就可以只打包用到的20个方法,进而减少体积。把一些老版本的库替换成新版本的支持tree-shaking的可以有效减少体积,其实也就是按需引入的plus版按需引入:是指只加载和使用实际需要的代码,通常通过动态导入等方式实现。Tree-shaking:是一种在构建阶段通过静态分析移除未使用代码的技术,主要用于减小最终打包文件的体积。
假设你有一个库 math.js,其中包含多个数学函数:

// math.js
export function add(a, b) {return a + b;
}export function subtract(a, b) {return a - b;
}export function multiply(a, b) {return a * b;
}export function divide(a, b) {return a / b;
}

在你的主文件 main.js 中,你只使用了 add 函数:

import { add } from './math.js';console.log(add(2, 3)); // 输出 5

使用 Webpack 进行 Tree-shaking

  1. 使用 ES6 模块:确保你的项目使用 importexport 语法。

  2. 配置 Webpack:在 webpack.config.js 中启用 Tree-shaking。

    module.exports = {mode: 'production', // 生产模式会自动启用 Tree-shakingoptimization: {usedExports: true, // 启用 Tree-shaking},// 其他配置...
    };
  3. 构建项目:运行 Webpack 构建命令。

    npx webpack

    在生产模式下,Webpack 会自动进行 Tree-shaking,移除 subtractmultiplydivide 函数,因为它们在 main.js 中没有被使用。
     

首屏数据尽量并行:像一些请求,Promise.then(()=>{}).then(()=>{}),可能有些不是非得等上一个完成再进行下一个,如果这样等下来,时间就会拉长
页面包含大量dom可以分批随滚动渲染:如果一个页面上的dom元素特别多,那么就先渲染第一屏,或者最上面的一些元素。例如首页是760px,那就先渲染900px的内容,当滚到900px的时候再去加载后面的,和虚拟滚动、大数据量加载一个思想
骨架屏,loading,先让屏幕不白,减少用户焦虑:有时候实在是太大了,减不下来,那就采取这样的方案,让用户体验感好一点
还有一些小知识:
1,频繁切换的显隐的内容用v-show也就是display来控制隐藏,只有打开就一次性决定显示与否的用v-if不去创建
2,循环,动态切换内容加好key值
3,keep-alive缓存
4,区分请求粒度,减少请求范围,也能减少更新

function getData(){//列表接口,更新到dataaxios('/api1').then(()=>{}// 分类接口,有哪些类目axios('/api2').then(()=>{})
}
onMounted(()=>getData()})
function deelte(){getData();}// 以这个代码为例子,如果发生删除的时候,只需要更新api1,api2不需要更新,但是这样写,两个接口写在一块,那这样就有点请求多余了

数据缓存:
不变数据、定期时效的数据可以缓存在cookies或者localstorage中,比如token,用户名等
可以考虑做一个缓存队列,存于内存中(全局对象,vuex)这样能保证刷新就更新数据,也能一定程度上缓存数据


http://www.ppmy.cn/ops/131490.html

相关文章

K8S搭建

文章目录 K8S搭建1. 基础环境2. docker环境3. 安装k8s核心(都执行)4. 初始化master节点5. 初始化worker节点6.设置ipvs模式(可选)7. 让其他客户端也能操作集群(可选) K8S搭建 1. 基础环境 #关闭防火墙 sy…

人工智能--JupyterNoteBook 转换成 PDF

背景 我们希望将ipynb文件转换成pdf文件,需要如何处理? 10:24:52.677 [error] If you have not installed xelatex (TeX), you will need to do so before you can export to PDF. For further instructions, please see https://nbconvert.readthedoc…

Aurora 64b/66bIP核学习

本文作为在学习使用aurora IP核的道路上,找到的一些对该IP讲解比较详细的资料,记录下来,便于日后翻阅,温故知新。 Aurora IP的特点 Aurora 协议在 2002 年由 Xilinx 公司首次提出,是由Xilinx提供的一个开源、免费的链…

【ChatGPT】如何将ChatGPT的回答与外部数据进行结合

如何将ChatGPT的回答与外部数据进行结合 在撰写内容或进行分析时,将ChatGPT的回答与外部数据相结合,可以增加信息的深度和准确性。这种方法不仅提升了内容的权威性,还能为读者提供更为全面的视角。本文将探讨如何有效地结合ChatGPT的回答与外…

python识别ocr 图片和pdf文件

#识别图片 pip3 install paddleocr pip3 install paddlepaddle#识别pdf pip3 install PyMuPDF 重点:路径不能有中文,不然pdf文件访问不了 from paddleocr import PaddleOCR from rest_framework.response import Response from rest_framework.views import APIView# 识别单…

AUTOSAR解决方案 — INTEWORK-EAS-CP

随着汽车电子技术的发展,汽车电子领域的嵌入式软件规模越来越庞大,AUTOSAR的软件架构和方法论已被越来越多的OEM和供应商认可。在国外市场,越来越多的AUTOSAR车型上市,各大OEM也已对其供应商提出了明确的符合AUTOSAR的要求。在国内…

ceph灾备之cephfs snapshot mirror和rsync对比

背景 最近要做ceph集群之间的灾备功能,主要讨论文件存储,因为ceph集群容量越来越大,接入的业务也越来越多,一旦出现故障,恢复时间都是小时级(根据经验每年都会出现几次这种事故),对于核心业务无法接受&…

2024年11月软考考前注意事项

一、重要时间节点 准考证打印时间: 大部分省市的准考证打印时间从11月4日起开始,但上海、甘肃等地区则稍晚,从11月6日起开放打印。 请务必注意所在地区的具体打印时间,并尽早打印准考证,以免因错过时间而影响考试。…