JavaScript性能优化全面指南

在Web开发快速发展的环境中,JavaScript仍然是核心技术,为动态和交互式Web应用提供动力。然而,随着应用程序复杂度和规模的增长,性能优化变得越来越关键。本报告深入探讨了JavaScript性能优化的实用策略和技术,确保应用程序能够流畅高效地运行。

JavaScript性能优化是增强用户体验、减少加载时间和提高响应能力的关键。优化需求源于几个因素,包括JavaScript文件的增加大小、频繁的DOM操作以及现代Web应用程序的复杂性。如在Golang Learning Network和CSDN Blogs中强调的那样,优化JavaScript涉及多方面的方法,包括代码执行、DOM操作、网络请求和内存管理。

优化JavaScript性能的关键策略包括利用现代JavaScript功能,如ES2025增强功能,这些功能提供了改进的语法和性能优势。工具如Chrome DevTools和Lighthouse是必不可少的,用于识别性能瓶颈并提供可操作的见解。这些工具帮助开发人员分析关键指标,如首次内容绘制(FCP)和时间到交互(TTI),指导他们做出知情优化决策。

另一个关键的性能优化方面是高效管理网络请求。技术如代码分割、延迟加载和使用内容交付网络(CDN)可以显著减少Web应用程序的初始加载时间。此外,如在JavaScript Chinese Network中讨论的那样,采用缓存策略可以进一步提高性能,通过最小化重复网络请求来减少性能。

DOM操作通常是性能问题的一个主要来源。通过减少这些操作的频率和复杂性,以及利用虚拟DOM技术,如React框架提供的虚拟DOM,可以减轻渲染性能的影响。此外,通过优化算法和数据结构,如Aliyun Developer Community建议的那样,可以导致更高效的代码执行。

总之,掌握JavaScript性能优化是一个持续的过程,需要对语言和可用工具有一个深入的理解。通过实施本报告中的策略,开发人员可以创建高性能的应用程序,提供出色的用户体验。随着我们进入2025年,跟上JavaScript优化领域的最新发展对于保持竞争性和高效Web应用程序至关重要。

目录

  • 优化JavaScript代码执行
    • 高效数据处理
      • 使用类型化数组
      • 利用不可变数据结构
    • 最小化执行开销
      • 代码压缩和优化
      • 避免不必要的计算
    • 利用现代JavaScript特性
      • 使用箭头函数
      • 使用Async/Await
    • 优化事件处理
      • 防抖和节流
      • 高效DOM操作
    • 高级执行技术
      • Web Workers并行执行
      • 即时编译
  • 提高DOM操作效率
    • 利用文档片段进行批量更新
    • 事件委托实现高效事件处理
    • 最小化布局抖动
    • 利用框架中的虚拟DOM
    • 优化CSS和JavaScript性能
    • 高效使用选择器
    • 事件处理器的防抖和节流
    • 避免回流和重绘
    • 总结
  • 使用性能分析工具
    • 使用Lighthouse进行性能审计
    • 使用Chrome开发者工具进行分析
    • 使用Webpack分析JavaScript包
    • 使用Vite进行快速开发和构建
    • 使用应用性能管理(APM)工具监控
    • 使用Next.js进行包分析
    • 总结

优化JavaScript代码执行

优化JavaScript代码执行是增强性能、减少加载时间和提高用户体验的关键。本报告深入探讨了优化JavaScript代码执行的高级技术和策略,重点是高效数据处理、最小化执行开销和利用现代JavaScript功能。

高效数据处理

高效数据处理是优化JavaScript执行的关键,特别是在处理大数据集或性能关键应用程序时,如游戏或实时数据处理。

使用类型化数组

Typed Arrays提供了一种访问原始二进制数据的方法,允许比传统JavaScript数组更高效的数据操作。它们在涉及大量数据或性能关键应用程序(如游戏或实时数据处理)时特别有用。Typed Arrays提供固定大小的二进制数据数组,可以显著减少内存使用并提高执行速度。

let buffer = new ArrayBuffer(16);
let int32View = new Int32Array(buffer);
int32View[0] = 42;
console.log(int32View[0]); // 输出: 42

Typed Arrays是ECMAScript 6规范的一部分,并且现代浏览器支持它们,使它们成为性能优化的实用选择(MDN Web Docs)。

利用不可变数据结构

Immutable数据结构可以通过减少应用程序中的不必要重新渲染和状态突变,提高性能,特别是使用像React这样的框架时。Immutable.js库提供了持久数据结构,帮助维护应用程序状态而无需直接突变,从而导致更可预测和高效的代码执行。

const { Map } = require('immutable');
let map1 = Map({ a: 1, b: 2, c: 3 });
let map2 = map1.set('b', 50);
console.log(map1.get('b')); // Output: 2
console.log(map2.get('b')); // Output: 50

Immutable数据结构在应用程序具有复杂状态管理时特别有益,因为它们防止意外的副作用并提高性能(Immutable.js Documentation)。

最小化执行开销

最小化执行开销涉及优化JavaScript代码解析、编译和执行的方式。

代码压缩和优化

Minification和压缩是减少JavaScript文件大小、导致更快下载和执行时间的关键技术。工具如Terser和UglifyJS可以删除空白、注释和冗余代码,而服务器端压缩技术如Gzip和Brotli进一步减少文件大小。

// 压缩前
function add(a, b) {return a + b;
}
console.log(add(5, 3));// 压缩后
function add(a,b){return a+b}console.log(add(5,3));

Minification和压缩是现代Web开发的标准实践,显著提高了加载时间和减少了带宽使用(Terser GitHub)。

避免不必要的计算

避免不必要的计算涉及优化算法和逻辑,以防止重复计算。技术如memoization可以缓存昂贵函数调用的结果,并在再次发生相同输入时返回缓存结果。

function memoize(fn) {const cache = {};return function(...args) {const key = JSON.stringify(args);if (!cache[key]) {cache[key] = fn(...args);}return cache[key];};
}const factorial = memoize(function(n) {return n <= 1 ? 1 : n * factorial(n - 1);
});
console.log(factorial(5)); // Output: 120

Memoization在涉及递归算法或重复计算的情况下特别有效(MDN Web Docs)。

利用现代JavaScript特性

现代JavaScript功能,如ECMAScript 6及更高版本中引入的功能,提供了几个性能优势和语法改进。

使用箭头函数

Arrow函数提供了一种简洁的函数编写方法,并自动绑定this值,减少传统函数表达式相关联的开销。它们在函数式编程模式和在mapfilterreduce等数组方法中特别有用。

const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(n => n * n);
console.log(squares); // Output: [1, 4, 9, 16, 25]

Arrow函数增强了代码可读性和可维护性,使其成为现代JavaScript开发的首选选择(MDN Web Docs)。

使用Async/Await

Async/await语法通过允许开发人员编写看起来和行为像同步代码的异步代码,简化了异步编程。此功能提高了代码可读性和减少了回调地狱,导致更可维护和高效的异步操作。

async function fetchData(url) {try {let response = await fetch(url);let data = await response.json();console.log(data);} catch (error) {console.error('Error fetching data:', error);}
}fetchData('https://api.example.com/data');

Async/await在现代JavaScript环境中得到支持,是处理异步操作的强大工具(MDN Web Docs)。

优化事件处理

高效的事件处理是维护响应用户界面和防止性能瓶颈的关键。

防抖和节流

Debouncing和throttling是用于限制函数执行速率的技巧,特别是在响应滚动或调整大小等事件时。Debouncing延迟函数执行,直到指定时间自上次事件发生以来,而throttling确保函数在指定时间间隔内最多执行一次。

function debounce(func, wait) {let timeout;return function(...args) {clearTimeout(timeout);timeout = setTimeout(() => func.apply(this, args), wait);};
}window.addEventListener('resize', debounce(() => {console.log('Window resized');
}, 200));

这些技术对于优化频繁事件触发应用程序的性能至关重要(Lodash Documentation)。

高效DOM操作

高效DOM操作涉及最小化直接与DOM交互,并使用技术如文档片段和虚拟DOM来批量更新。这减少了reflow和repaints的数量,提高了性能。

let fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {let div = document.createElement('div');div.textContent = `Item ${i}`;fragment.appendChild(div);
}
document.body.appendChild(fragment);

使用文档片段可以显著减少DOM操作的性能影响(MDN Web Docs)。

高级执行技术

高级执行技术涉及利用浏览器功能并优化JavaScript执行的更深层次。

Web Workers并行执行

Web Workers允许JavaScript代码在单独的线程上并行运行,使重计算可以卸载到主线程之外。这保持了UI响应并提高了整体应用程序性能。

// 主线程
const worker = new Worker('worker.js');
worker.postMessage('开始计算');// Worker线程 (worker.js)
self.onmessage = function() {let result = computeIntensiveTask();self.postMessage(result);
};

Web Workers在应用程序具有计算密集任务时特别有用(MDN Web Docs)。

即时编译

Just-In-Time(JIT)编译是JavaScript引擎用来优化代码执行的技术,通过在运行时将JavaScript编译为机器代码来提高执行速度。此过程通过减少解释代码的开销来提高性能。

现代JavaScript引擎如V8和SpiderMonkey使用JIT编译来提高性能,使其成为JavaScript优化中的关键方面(V8 Documentation)。

总之,优化JavaScript执行涉及高效数据处理、最小化执行开销、利用现代JavaScript功能、优化事件处理和采用高级执行技术。通过实施这些策略,开发人员可以显著提高Web应用程序的性能和响应能力。

提高DOM操作效率

利用文档片段进行批量更新

当处理多个DOM更新时,使用文档片段是一种非常有效的方法。文档片段作为轻量容器,允许开发人员对DOM进行多次更改,而无需为每次修改触发reflow和repaints。此方法特别适用于需要同时添加或修改多个元素的情况。

例如,而不是直接将元素附加到DOM,开发人员可以将这些元素附加到文档片段中。一旦所有更改完成,片段可以附加到DOM中,从而显著减少性能影响。此方法受MDN Web Docs支持。

事件委托实现高效事件处理

事件委托是一种模式,通过减少附加到DOM的事件监听器数量来提高性能。而不是为每个子元素附加事件监听器,而是附加一个监听器到公共祖先。此方法利用事件冒泡,其中事件从DOM树向上传播,允许父级处理触发事件。

此方法不仅最小化内存使用,还简化了事件管理。例如,如果父元素包含多个按钮,而不是为每个按钮添加点击事件监听器,而是添加一个监听器到父元素。此监听器可以使用事件对象确定哪个按钮被点击。此技术在LogRocket Blog中详细说明。

最小化布局抖动

Layout thrashing发生在JavaScript反复从和写入DOM时,导致浏览器过度计算样式和布局。这可能导致显著的性能问题,特别是在复杂应用程序中。

为了最小化布局抖动,必须分别批量读取和写入DOM。例如,如果需要读取像offsetWidth这样的属性,然后修改元素的样式,请先执行所有读取,将值存储在变量中,然后执行所有写入。这减少了reflow和repaints的数量,提高了性能。详细解释可以在WizdomTek的文章中找到。

利用框架中的虚拟DOM

现代JavaScript框架如React、Vue和Angular利用虚拟DOM来优化性能。虚拟DOM是真实DOM的抽象,允许框架高效确定需要更新UI的最小变化集。

当应用程序状态发生变化时,虚拟DOM首先更新。框架然后计算当前和以前状态之间的差异,并仅将必要更改应用于真实DOM。此方法显著减少了直接DOM操作的数量,导致性能提高。更多细节可以在Ifarra的博客中找到。

优化CSS和JavaScript性能

虽然本报告的重点是DOM操作,但优化CSS和JavaScript也可以影响DOM性能。例如,使用CSS类而不是内联样式可以减少样式重新计算的复杂性。类似地,最小化与DOM交互的复杂JavaScript操作可以防止不必要的reflow和repaints。

工具如Chrome DevTools可用于分析和分析应用程序性能,帮助识别与DOM操作和渲染相关的瓶颈。

高效使用选择器

在DOM中选择元素是JavaScript中的常见操作,但如果不高效进行,可能会导致成本。使用特定和高效的selector可以最小化搜索元素的时间。例如,使用ID或特定类名通常比使用复杂选择器或查询整个文档更快。

此外,将DOM引用缓存到变量中可以防止重复查询,进一步提高性能。此技术在FreeCodeCamp的文章中讨论。

事件处理器的防抖和节流

Debouncing和throttling是用于控制事件处理程序执行速率的技巧,特别是对于频繁触发的事件,如滚动或调整大小事件。

Debouncing确保函数仅在指定时间自上次事件发生以来执行,而throttling限制执行到指定时间帧一次。这些技术有助于防止由于过度事件处理导致的性能下降,对于维护响应用户界面至关重要。更多信息可以在Web Crafting Code的文章中找到。

避免回流和重绘

Reflow和repaints是成本操作,发生在DOM或其样式被修改时。为了最小化这些操作,必须将更改批量进行,并避免不必要的样式重新计算。

例如,如果需要多个样式更改,请一次应用所有更改,而不是单独应用。此外,使用像transformopacity这样的属性进行动画可以卸载工作到GPU,减少对主线程的影响。此方法在Chuck的学院中详细说明。

总结

增强DOM操作效率是优化JavaScript性能的关键方面。通过采用文档片段、事件委托和最小化布局抖动等技术,开发人员可以显著提高Web应用程序的响应能力和速度。利用现代框架和工具进一步帮助实现最佳性能,确保无缝用户体验。

使用性能分析工具

在JavaScript性能优化领域,利用性能分析工具对于识别瓶颈和增强应用程序效率至关重要。本节探讨了开发人员可以采用的各种工具和技术,以确保他们的JavaScript应用程序流畅高效地运行。

使用Lighthouse进行性能审计

Lighthouse是一个开源的自动化工具,提供有关Web页面性能、可访问性和最佳实践的见解。它集成到Chrome DevTools中,可以针对任何Web页面运行,无论是公共还是需要身份验证的页面。Lighthouse审计页面并生成报告,了解页面表现如何。从那里,开发人员可以使用失败的审计作为指示,了解他们可以做什么来改进他们的应用程序。

Lighthouse专注于关键性能指标,如最大内容绘制(LCP)、首次输入延迟(FID)和累积布局偏移(CLS),这些指标对于理解用户体验至关重要。通过分析这些指标,开发人员可以确定需要优化的区域,并实施更改以提高加载时间和交互性。有关使用Lighthouse的更多信息,可以访问官方Lighthouse文档。

使用Chrome开发者工具进行分析

Chrome DevTools是直接集成到Google Chrome浏览器中的Web开发人员工具套件。它允许开发人员检查和调试他们的代码,分析性能,并优化他们的应用程序。DevTools的性能面板特别有助于分析JavaScript执行和识别性能瓶颈。

开发人员可以记录性能配置文件以捕获页面活动的时间线,包括JavaScript执行、渲染和布局重新计算。此详细视图有助于识别长时间运行的任务、过度的DOM操作和其他可能影响性能的问题。有关使用Chrome DevTools进行性能分析的综合指南,请参考Chrome DevTools文档。

使用Webpack分析JavaScript包

Webpack是一个流行的模块捆绑器,用于JavaScript应用程序,帮助管理和优化资产。它允许开发人员将他们的JavaScript文件和其他资产(如图像和样式表)捆绑成单个或多个文件。Webpack的捆绑分析插件提供了每个模块在捆绑中的大小可视化表示,帮助开发人员识别大型依赖项并优化它们。

通过使用Webpack的代码分割和树摇功能,开发人员可以减少捆绑大小并提高加载时间。代码分割允许仅加载特定页面或组件所需的代码,而树摇动从最终捆绑中消除未使用代码。有关使用Webpack优化捆绑的更多详细信息,请访问Webpack文档。

使用Vite进行快速开发和构建

Vite是一个现代构建工具,提供快速开发体验和优化的生产构建。它利用开发中的本机ES模块,提供即时服务器启动和快速热模块替换。Vite的构建过程由Rollup提供支持,确保高效捆绑和优化生产。

Vite的性能分析功能允许开发人员分析构建输出并识别优化机会。通过使用Vite的内置性能分析工具,开发人员可以确保他们的应用程序既高效又高效。有关使用Vite进行性能优化的更多信息,请查看Vite文档。

使用应用性能管理(APM)工具监控

Application Performance Management(APM)工具对于监控JavaScript应用程序在实时中的性能至关重要。这些工具提供了有关应用程序行为、用户交互和潜在瓶颈的应用程序见解。流行的APM工具用于JavaScript包括New Relic、Dynatrace和Sentry。

APM工具提供了实时监控、错误跟踪和用户会话重放等功能,帮助开发人员了解他们的应用程序在生产环境中如何执行。通过将APM工具集成到他们的工作流程中,开发人员可以主动识别和解决性能问题,确保无缝用户体验。有关APM工具的更多信息,可以探索New Relic和Sentry。

使用Next.js进行包分析

Next.js是一个流行的React框架,提供服务器端渲染和静态站点生成的内置支持。它包括捆绑分析器,帮助开发人员了解他们的JavaScript捆绑大小并优化它们以提高性能。通过分析捆绑大小,开发人员可以识别大型依赖项并优化他们的导入以减少整体捆绑大小。

Next.js还支持动态导入,允许开发人员仅在需要时加载组件。此技术,称为代码分割,有助于提高初始加载时间和增强用户体验。有关使用Next.js进行捆绑分析的更多信息,请访问Next.js文档。

总结

利用性能分析工具对于优化JavaScript应用程序和确保它们提供流畅的用户体验至关重要。通过利用Lighthouse、Chrome DevTools、Webpack、Vite和APM解决方案,开发人员可以识别性能瓶颈、优化他们的代码并监控应用程序行为实时。这些工具提供了有价值的见解,帮助开发人员创建高效和响应应用程序,满足现代用户的高期望。

总结

JavaScript性能优化研究强调了采用多方面方法来增强代码执行、DOM操作和整体应用程序效率的重要性。关键策略包括通过Typed Arrays和Immutable数据结构进行高效数据处理,通过代码最小化和memoization进行最小化执行开销,以及利用现代JavaScript功能如Arrow Functions和Async/Await。这些方法共同有助于更快加载时间和改进用户在Web应用程序中的体验。

此外,优化DOM操作对于维护响应界面至关重要。采用文档片段、事件委托和最小化布局抖动等技术对于减少性能瓶颈至关重要。利用具有虚拟DOM的框架和利用性能分析工具如Lighthouse和Chrome DevTools允许开发人员有效识别和解决效率问题。利用Webpack和Vite进一步帮助优化捆绑大小和构建过程,确保应用程序既高效又可扩展。

这些发现的影响表明,开发人员应优先考虑性能优化的全面方法,将代码级改进和全面性能监控结合起来。随着Web应用程序的复杂性增加,采用这些技术和工具对于提供无缝用户体验至关重要。未来步骤涉及保持与不断发展的JavaScript标准同步,并不断完善优化实践以满足现代Web开发的需求。

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

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

相关文章

【C/C++算法】从浅到深学习--- 前缀和算法(图文兼备 + 源码详解)

绪论&#xff1a;冲击蓝桥杯一起加油&#xff01;&#xff01; 每日激励&#xff1a;“不设限和自我肯定的心态&#xff1a;I can do all things。 — Stephen Curry” 绪论​&#xff1a; 本章将使用八道题由浅到深的带你了解并基本掌握前缀和思想&#xff0c;以及前缀和的基…

脑电:时域分析(任务态)

时域分析&#xff1a;时间序列&#xff08;时域信号&#xff09; EEG和ERP都是时间序列 ERP&#xff1a;事件诱发的电位是随着时间变化 组水平&#xff1a;需要这一组的个体不能差异性太大。 提值的指标&#xff0c;选取平均幅值确定成分的显著情况 mean(EEG.data,3): 在第…

【C语言】自定义类型:结构体,联合,枚举(下)

前言&#xff1b;上一期我们侧重讲了一个非常重要的自定义类型结构体&#xff0c;这一期我们来说说另外两种自定义类型&#xff1a;联合&#xff0c;和枚举。 传送门&#xff1a;自定义类型&#xff1a;结构体&#xff0c;联合&#xff0c;枚举(上) 文章目录 一&#xff0c;联…

数组的介绍

1.数组的概念 数组是一组相同类型元素的集合&#xff0c;从这个描述中我们知道&#xff1a; 数组中存放1个或多个数据&#xff0c;但是数组的元素个数不为0。数组中存放的多个数据&#xff0c;类型是相同的。 数组分为一维数组和多维数组&#xff0c;多维数组一般比较多见的…

蓝桥杯 17110抓娃娃

问题描述 小明拿了 n 条线段练习抓娃娃。他将所有线段铺在数轴上&#xff0c;第 i 条线段的左端点在 li&#xff0c;右端点在 ri​。小明用 m 个区间去框这些线段&#xff0c;第 i个区间的范围是 [Li​, Ri​]。如果一个线段有 至少一半 的长度被包含在某个区间内&#xff0c;…

linux ptrace 图文详解(二) PTRACE_TRACEME 跟踪程序

目录 一、基础介绍 二、PTRACE_TRACE 实现原理 三、代码实现 四、总结 &#xff08;代码&#xff1a;linux 6.3.1&#xff0c;架构&#xff1a;arm64&#xff09; One look is worth a thousand words. —— Tess Flanders 一、基础介绍 GDB&#xff08;GNU Debugger&…

记录致远OA服务器硬盘升级过程

前言 日常使用中OA系统突然卡死&#xff0c;刷新访问进不去系统&#xff0c;ping服务器地址正常&#xff0c;立马登录服务器检查&#xff0c;一看磁盘爆了。 我大脑直接萎缩了&#xff0c;谁家OA系统配400G的空间啊&#xff0c;过我手的服务器没有50也是30台&#xff0c;还是…

电网电压暂态扰动机理与工业设备抗失压防护策略研究

什么是晃电&#xff1f; 国标GB/T 30137-2013 中定义:工频电压方均根值突然降至额定值的90%~10%&#xff0c;持续时间为10ms~1min后恢复正常的现象。Acrel8757V 晃电的原因 1.系统侧因素 短路故障&#xff1a;雷击、线路接地、设备误碰等导致电网短路&#xff0c;故障点电压…

Linux监控网络状态

一、基本介绍 1、基本语法 netstat [选项] 2、常用选项 选项 说明 -a 显示所有连接和监听的套接字&#xff08;包括TCP、UDP&#xff09;。 -t 显示 TCP 连接。 -u 显示 UDP 连接。 -l 显示正在监听的套接字&#xff08;server端&#xff09;。 -n 显示数字格式的…

UE5以插件的形式加载第三方库

之前在UE中加载第三方库的形式是以静态或者动态链接的形式加载但是不太容易复用。就想着能不能以插件的形式加载第三方库&#xff0c;这样直接把插件打包发行就可以复用了&#xff0c;之前也找过相应的教程但是很难找到比较简单易懂的教程&#xff0c;要么是比较复杂&#xff0…

Go执行当前package下的所有方法

需求&#xff1a;需要一个文件一个定时任务方法&#xff0c;当项目初始化完毕后&#xff0c;自动加载并执行这些定时任务方法 项目目录架构 main.go 初始化 package mainimport ("sql_demo/schedule" )func main() {/***** 其他初始化完毕后的操作**/// 定时任务sc…

AnyAnomaly: 基于大型视觉语言模型的零样本可定制视频异常检测

文章目录 速览摘要1. 引言2. 相关工作视频异常检测大型视觉语言模型&#xff08;LVLMs&#xff09; 3. 方法3.1. 总览3.2. 关键帧选择模块3.3. 上下文生成基于 WinCLIP 的注意力机制网格图像生成 3.4. 异常检测提示词设计异常评分 4. 实验4.1. 数据集4.2. 评估标准4.3. 结果4.4…

【AWS入门】2025 AWS亚马逊云科技账户注册指南

【AWS入门】2025 AWS亚马逊云科技账户注册指南 A Guide To Register a New account on AWS By JacksonML 0. AWS亚马逊云科技简介 Amazon Web Service(AWS) 即亚马逊云科技&#xff0c;其在全球Cloud Computing(云计算)市场占有最为重要的地位。 AWS连续13年被Gartner评为…

Spring 中 SmartInitializingSingleton 的作用和示例

一、 接口定义 SmartInitializingSingleton 是 Spring 框架提供的一个 单例 Bean 全局初始化回调接口&#xff0c;用于在 所有非延迟单例 Bean 初始化完成后 执行自定义逻辑。 核心方法&#xff1a; public interface SmartInitializingSingleton {void afterSingletonsInsta…

element tree树形结构默认展开全部

背景&#xff1a; el-tree树形结构&#xff0c;默认展开全部&#xff0c;使用属性default-expand-all【是否默认展开所有节点】&#xff1b;默认展开一级&#xff0c;设置default-expanded-keys【默认展开的节点的 key 的数组】属性值为数组。 因为我这里的数据第一级是四川【省…

大数据-spark3.5安装部署之local模式

spark&#xff0c;一个数据处理框架和计算引擎。 下载 local模式即本地模式&#xff0c;就是不需要任何其他节点资源就可以在本地执行spark代码的环境。用于练习演示。 上传解压 使用PortX将文件上传至/opt 进入/opt目录&#xff0c;创建目录module&#xff0c;解压文件至/o…

Discuz建站教程之论坛头部logo跳转链接怎么修改?

在修改头部logo跳转链接前&#xff0c;我们需要知道对应代码在哪个文件目录&#xff0c;进入宝塔或是服务器&#xff0c;找到文件&#xff1a;\template\default\common\header.htm&#xff0c;编辑器打开&#xff0c;搜索以下代码&#xff0c;大概在135行 <a href"{i…

【FreeRTOS】FreeRTOS操作系统在嵌入式单片机上裸机移植

目录 一 RTOS概述 二 FreeRTOS移植 三 FreeRTOS使用 四 附录 一 RTOS概述 先了解一些基础概念,以下内容摘自FreeRTOS官网(FreeRTOS™ - FreeRTOS™): 【1】RTOS基础知识 实时操作系统 (RTOS) 是一种体积小巧、确定性强的计算机操作系统。 RTOS 通常用于需要在严格时间限…

编译支持 RKmpp 和 RGA 的 ffmpeg 源码

一、前言 RK3588 支持VPU硬件解码&#xff0c;需要rkmpp进行调用&#xff1b;支持2D图像加速&#xff0c;需要 RGA 进行调用。 这两个库均能通过 ffmpeg-rockchip 进行间接调用&#xff0c;编译时需要开启对应的功能。 二、依赖安装 编译ffmpeg前需要编译 rkmpp 和 RGA&#xf…

深度学习基础:线性代数本质2——线性组合、张成的空间与基

目录 一、线性组合 1. 用一个有趣的角度看向量坐标 2. 如果我们选择不同的基向量会怎样&#xff1f; 3. 线性组合 4. 张成的空间 ① 二维向量的张成的空间 ② 三维向量的张成的空间​编辑 5.线性相关 6.线性无关 7. 基的定义 一、线性组合 1. 用一个有趣的角度看向量坐…