当前位置: 首页 > news >正文

Next.js优化教程:优化字体加载

更多有关Next.js教程,请查阅:

【目录】Next.js 独立开发系列教程-CSDN博客


目录

更多有关Next.js教程,请查阅:

前言

1. 字体加载的常见问题

1.1 什么是 FOIT 和 FOUT?

1.2 字体优化的核心目标

2. Next.js 字体优化的工具与功能

2.1 内置 Google 字体优化

2.2 本地字体加载

3. 字体加载优化的高级技术

3.1 字体预加载

3.2 字体子集化

4. 不同场景的字体优化策略

4.1 针对移动设备的优化

4.2 多语言支持

5. 性能监控与优化效果验证

5.1 使用 Lighthouse 分析字体性能

5.2 实时监控字体加载

6. 结论

更多有关Next.js教程,请查阅:


前言

在现代Web开发中,字体优化是提升页面性能和用户体验的重要环节。未经优化的字体加载可能导致以下问题:

  • 页面阻塞:字体加载延迟会导致文本不可见(FOIT)或样式突变(FOUT)。
  • 性能瓶颈:未压缩的字体文件增加页面的初始加载时间。
  • 跨设备不兼容:选择不当的字体格式可能导致显示问题。

Next.js 提供了一套内置工具和最佳实践,帮助开发者轻松优化字体加载。本教程将详细讲解如何通过优化字体来提升 Next.js 应用的性能和体验。


1. 字体加载的常见问题

1.1 什么是 FOIT 和 FOUT?

  • FOIT(Flash of Invisible Text):页面加载时,字体未加载完成,文本内容完全不可见。
  • FOUT(Flash of Unstyled Text):字体加载过程中,页面显示默认字体,加载完成后突然切换到自定义字体,导致视觉突变。

两者都会影响用户的感知加载速度和整体体验。


1.2 字体优化的核心目标

优化字体加载的核心目标包括:

  1. 减少字体文件的大小:选择精简的字体文件或子集化字体。
  2. 提升加载速度:通过懒加载、预加载等技术加速字体呈现。
  3. 提高兼容性:支持多种设备和浏览器。

2. Next.js 字体优化的工具与功能

Next.js 提供了多种工具来优化字体加载:

2.1 内置 Google 字体优化

Next.js 支持通过 next/font/google 直接加载 Google 字体,无需额外的外部请求。

示例代码:

import { Roboto } from 'next/font/google';const roboto = Roboto({subsets: ['latin'], // 仅加载拉丁字符weight: ['400', '700'], // 加载特定字重
});export default function Home() {return (<div className={roboto.className}><h1>优化字体加载的示例</h1><p>这是使用 Google 字体优化后的文本。</p></div>);
}

代码解析:

  • subsets:通过加载特定字符集减少字体大小。
  • weight:仅加载所需字重,避免浪费资源。
  • className:自动生成 CSS 类来应用字体样式。

2.2 本地字体加载

Next.js 提供 next/font/local,用于加载本地字体文件。这种方式适用于自定义或非公共字体资源。

示例代码:

import localFont from 'next/font/local';const myFont = localFont({src: [{path: './fonts/MyFont-Regular.woff2',weight: '400',style: 'normal',},{path: './fonts/MyFont-Bold.woff2',weight: '700',style: 'bold',},],
});export default function Home() {return (<div className={myFont.className}><h1>本地字体加载示例</h1><p>这是使用本地字体优化后的文本。</p></div>);
}

代码解析:

  • path:指定字体文件路径。
  • weightstyle:定义字体的权重和样式,用于多种场景下的统一管理。

3. 字体加载优化的高级技术

3.1 字体预加载

Next.js 支持通过 link 标签预加载字体,以减少首次加载时间。

示例代码:

import Head from 'next/head';export default function Home() {return (<><Head><linkrel="preload"href="/fonts/MyFont-Regular.woff2"as="font"type="font/woff2"crossOrigin="anonymous"/></Head><div><h1>预加载字体示例</h1><p>预加载字体可以显著提升首屏加载速度。</p></div></>);
}

注意:

  • 使用预加载时,请确保字体文件在应用的关键路径中使用。
  • 预加载字体文件的格式应为高效且广泛支持的 woff2

3.2 字体子集化

子集化(Subsetting)指仅加载页面所需的字符,从而大幅减少字体文件大小。

实现方法:

  1. 使用字体子集化工具(如 Glyphhanger)生成仅包含所需字符的字体文件。
  2. 将生成的字体文件作为本地字体加载。

3.3 延迟加载非关键字体

对于非关键的次要字体,可以延迟加载,以避免阻塞页面渲染。

示例代码:

import dynamic from 'next/dynamic';const NonCriticalFont = dynamic(() =>import('next/font/google').then((mod) =>mod.Roboto({subsets: ['latin'],weight: '300',}))
);export default function Home() {return (<div><h1>延迟加载字体示例</h1><p className={NonCriticalFont.className}>这是次要字体加载后的文本。</p></div>);
}

4. 不同场景的字体优化策略

4.1 针对移动设备的优化

  • 加载小尺寸字体文件,如子集化后的 woff2 格式。
  • 通过响应式设计控制字体大小和样式。

4.2 多语言支持

为支持多语言,需加载多字符集字体(如 latin-extcyrillic)。使用条件加载策略,根据用户语言动态加载所需字体。

示例代码:

import { useEffect, useState } from 'react';
import { Roboto } from 'next/font/google';const robotoLatin = Roboto({ subsets: ['latin'] });
const robotoCyrillic = Roboto({ subsets: ['cyrillic'] });export default function Home() {const [locale, setLocale] = useState('en');useEffect(() => {// 模拟根据用户语言设置字体setLocale(navigator.language.startsWith('ru') ? 'ru' : 'en');}, []);return (<div className={locale === 'ru' ? robotoCyrillic.className : robotoLatin.className}><h1>多语言字体优化</h1><p>根据用户语言加载不同的字体。</p></div>);
}

5. 性能监控与优化效果验证

5.1 使用 Lighthouse 分析字体性能

Lighthouse 可帮助检查字体加载是否影响页面性能,重点关注以下指标:

  • TTI(Time to Interactive):交互时间。
  • CLS(Cumulative Layout Shift):布局稳定性。
  • 字体加载时间:检查字体阻塞时间。

5.2 实时监控字体加载

借助工具如 WebPageTest 或浏览器的性能面板,监控字体加载的耗时与影响。


6. 结论

通过内置的字体加载工具、灵活的优化策略和高效的性能监控,Next.js 为开发者提供了强大的字体优化能力。无论是初学者还是资深开发者,结合本文中的实践与技巧,均可在项目中实现快速、安全且兼容的字体加载优化。

希望这篇教程能够为你带来启发,让你的 Next.js 应用更进一步!

更多有关Next.js教程,请查阅:

【目录】Next.js 独立开发系列教程-CSDN博客

相关文章:

Next.js优化教程:优化字体加载

更多有关Next.js教程&#xff0c;请查阅&#xff1a; 【目录】Next.js 独立开发系列教程-CSDN博客 目录 更多有关Next.js教程&#xff0c;请查阅&#xff1a; 前言 1. 字体加载的常见问题 1.1 什么是 FOIT 和 FOUT&#xff1f; 1.2 字体优化的核心目标 2. Next.js 字体优…...

功能篇:springboot中全局异常

在Java应用程序中实现全局异常处理是确保应用健壮性和用户体验良好性的重要一步。通过全局异常处理&#xff0c;你可以集中管理所有未捕获的异常&#xff0c;并以统一的方式响应它们。对于Web应用程序&#xff08;如使用Spring框架的应用&#xff09;&#xff0c;通常会创建一个…...

【go 】 select case 的用法

文章目录 1. 基本使用&#xff1a;监听多个通道&#xff0c;会阻塞2.带默认分支&#xff1a;非阻塞操作3. 永远监听多个通道4. 超时机制5. 关闭通道的处理6. context的关闭判断 相关文章&#xff1a; 【go】select 语句case的随机性 【go】 select case 超时机制(time.After)示…...

出海服务器可以用国内云防护吗

随着企业国际化进程的加速&#xff0c;越来越多的企业选择将业务部署到海外服务器上&#xff0c;以便更贴近国际市场。然而&#xff0c;海外服务器也面临着来自全球各地的安全威胁和网络攻击。当出海服务器遭受攻击时&#xff0c;是否可以借助国内的云服务器来进行有效的防护呢…...

前端权限控制

前端权限控制 一、路由权限&#xff08;控制页面访问&#xff09; vue // router.js const routes [{path: /dashboard,name: Dashboard,component: () > import(/views/Dashboard.vue),meta: { requiresAuth: true, roles: [admin, manager] }},{path: /user,name: Use…...

计算机组成原理(二):指令跳转

指令跳转&#xff08;Instruction Jump&#xff09;是计算机程序控制流的重要组成部分&#xff0c;通过改变程序的执行顺序实现循环、条件分支和函数调用等功能。 基本概念 跳转指令主要用来修改**程序计数器&#xff08;Program Counter, PC&#xff09;**的值&#xff0c;使…...

LoViT: 用于手术阶段识别的长视频Transformer|文献速递-生成式模型与transformer在医学影像中的应用

Title 题目 LoViT: Long Video Transformer for surgical phase recognition LoViT: 用于手术阶段识别的长视频Transformer 01 文献速递介绍 快速发展的手术数据科学&#xff08;SDS&#xff09;领域旨在通过先进利用手术室&#xff08;OR&#xff09;内医疗设备采集的数据…...

【传感器技术】第4章 力敏传感器,弹性敏感元件的基本特性,应变式压力传感器,电阻应变片的温度补偿,压阻式压力传感器,压电式压力传感器

关注作者了解更多 我的其他CSDN专栏 过程控制系统 工程测试技术 虚拟仪器技术 可编程控制器 工业现场总线 数字图像处理 智能控制 传感器技术 嵌入式系统 复变函数与积分变换 单片机原理 线性代数 大学物理 热工与工程流体力学 数字信号处理 光电融合集成电路…...

linux之vim

一、模式转换命令 vim主要有三种模式&#xff1a;命令模式&#xff08;Normal Mode&#xff09;、输入模式&#xff08;Insert Mode&#xff09;和底线命令模式&#xff08;Command-Line Mode&#xff09;。 从命令模式切换到输入模式&#xff1a;i&#xff1a;在当前光标所在…...

【LeetCode】每日一题 2024_12_9 判断国际象棋棋盘中一个格子的颜色(找规律)

前言 每天和你一起刷 LeetCode 每日一题~ LeetCode 启动&#xff01; 题目&#xff1a;判断国际象棋棋盘中一个格子的颜色 最近力扣一直在出棋盘类的题目&#xff0c;这个月已经出了 9 天了&#xff0c;我倒要看看他是不是真能出一个月 代码与解题思路 先读题&#xff1a;题…...

HCL虚拟环境搭建并且支持ssh远程访问

1.连接设备 新建设备和host主机&#xff0c;连线&#xff0c;host主机选择本地网卡&#xff08;不选host-only网卡&#xff09; 2.启动设备&#xff0c;打开终端&#xff0c;按ctrlc 3.执行命令 <H3C>system-view [H3C]int g0/0 [H3C-GigabitEthernet0/0]ip address …...

批量验证指定漏洞思路和流程

免责申明 本文仅是用于学习研究POC的地址收集与漏洞验证原理,请勿用在非法途径上,若将其用于非法目的,所造成的一切后果由您自行承担,产生的一切风险和后果与笔者无关;本文开始前请认真详细学习《‌中华人民共和国网络安全法》【学法时习之丨网络安全在身边一图了解网络安…...

首次打开韦东山提供的Ubuntu-18.04镜像后,该做哪些事?

目录 01-测试有无网络02-配置最基本的嵌入式开发环境(安装tftp-nfs等)03-缩短关机强制结束进行时间04-关闭软件的自动更新05-未完待续... 01-测试有无网络 ping www.baidu.com 02-配置最基本的嵌入式开发环境(安装tftp-nfs等) 需要安装 tftp&#xff0c;nfs&#xff0c;vim …...

怎么才能让图片不能转发截图保存

发私密图片给好友又担心被截图保存甚至转发给第三人&#xff1f;有没有办法让发出去的图片不能转发、截图、保存&#xff1f;当然有&#xff01;今天教你一招&#xff0c;并且对方打开不需要下载任何软件&#xff0c;发出去对方点开就能看。 操作步骤 如何发送这样限制截图的图…...

设计模式-装饰器模式(结构型)与责任链模式(行为型)对比,以及链式设计

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1.装饰器模式1.1概念1.2作用1.3应用场景1.4特点1.5类与对象关系1.6实现 2责任链模式2.1概念2.2作用2.3应用场景2.4特点2.5类与对象关系2.6实现 3.对比总结 前言…...

outlook软件配置邮箱提示“到邮件服务器的加密连接不可用”

outlook软件配置邮箱提示“到邮件服务器的加密连接不可用” 问题描述&#xff1a; outlook软件里邮箱提示“已断开”或配置邮箱时提示“到邮件服务器的加密连接不可用”。 解决方案&#xff1a; 一、更改注册表&#xff08;可先导出备份&#xff09; winr&#xff0c;输入re…...

通过QT实现进度条随着读取文件增加

mythread循环给主线程发送信号实现主线程循环的功能 widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QFile> #include <QFileDialog> #include <QTextStream> #include <QByteArray> #include "mythread.h"…...

构建高效可靠的分布式推理系统:深入解析控制器与模型服务的协同工作

在现代互联网应用中,随着用户需求的增长和技术的进步,单一服务器已经难以满足大规模并发请求的需求。为了提升系统的性能和可靠性,开发者们越来越多地采用分布式架构。本文将结合具体的代码示例,深入浅出地探讨如何构建一个高效的分布式推理系统,并详细解析其中的关键组件…...

洛谷B2082

数字统计 - 洛谷 数字统计 题目描述 请统计某个给定范围 [L,R] 的所有整数中&#xff0c;数字 2 出现的次数。 比如给定范围 [2,22]&#xff0c;数字2 在数 2 中出现了 1 次&#xff0c;在数 12 中出现 1 次&#xff0c;在数 20中出现 1次&#xff0c;在数 21 中出现 1 次&…...

HTML5系列(14)-- 链接与资源关系指南

前端技术探索系列&#xff1a;HTML5 链接与资源关系指南 &#x1f517; 致读者&#xff1a;探索资源加载的艺术 &#x1f44b; 前端开发者们&#xff0c; 今天我们将深入探讨 HTML5 的链接与资源关系管理&#xff0c;学习如何优化网站的资源加载策略&#xff0c;提升用户体验…...

ubuntu系统每天凌晨定时上传redis 备份数据到阿里云OSS上

1.压缩备份脚本 1.1 代码如下#!/bin/bash# redis_backup_compress.sh # 设置变量 BACKUP_DIR"/data/redis/backup" REDIS_DIR"/var/lib/redis" DATE$(date %Y%m%d_%H%M%S) BACKUP_FILE"redis_backup_${DATE}.rdb" COMPRESSED_FILE"redis_b…...

uniapp结合movable-area与movable-view实现拖拽功能

前言 因为公司业务开发需要拖拽功能。 ps&#xff1a;该功能只能针对高度一致的&#xff0c;如果高度不一致需要另外二开 演示 开始 <template><view style"height: 100%;"><movable-area :style"{width: 100%, height: allHeight px}"…...

JavaScript 单例模式的创建与应用

JavaScript 单例模式的创建与应用 单例模式&#xff08;Singleton Pattern&#xff09;是一种设计模式&#xff0c;旨在确保一个类只有一个实例&#xff0c;并提供全局访问点。在 JavaScript 中&#xff0c;单例模式可以帮助我们避免多次创建同一个对象&#xff0c;节省资源&a…...

【HarmonyOS】 鸿蒙保存图片或视频到相册

【HarmonyOS】 鸿蒙保存图片或视频到相册 前言 鸿蒙中保存图片或者视频&#xff0c;或者其他媒体文件到设备的媒体库&#xff0c;可以是相册&#xff0c;也可以是文件管理等。共有两种方式&#xff1a; 需要应用申请受限权限&#xff0c;获取文件读写的权限&#xff08;调用…...

windows下nacos启动报错:java.lang.unsatisfiedLinkError: C:\USers\乱码AppData\xxx.dll

问题 看了许多别的帖子&#xff0c;大家都是因为缺少dll包&#xff0c;下载安装 Microsoft Visual C 2015 Redistributable 就可以。但我试过了不行。思来想去&#xff0c;之前正常的时候用的JDK版本是17&#xff0c;后面别的项目用1.8给切换回来了。然后尝试配置环境变量将JD…...

梳理你的思路(从OOP到架构设计)_基本OOP知识01

目录 1、“-Oriented” 的涵意 2、 ” -Oriented”、” -Based”、” -Driven”、” -Centered” 它们之间区别 3、 从对象(Object) 谈起 4、类的用途&#xff1a; 叙述软件对象 Android从程序员到架构师之路&#xff1a;梳理你的思路(从OOP到架构设计) 1、“-Oriented” …...

【C++图论 BFS算法】2467. 树上最大得分和路径|2053

本文涉及知识点 C图论 CBFS算法 LeetCode2467. 树上最大得分和路径 一个 n 个节点的无向树&#xff0c;节点编号为 0 到 n - 1 &#xff0c;树的根结点是 0 号节点。给你一个长度为 n - 1 的二维整数数组 edges &#xff0c;其中 edges[i] [ai, bi] &#xff0c;表示节点 a…...

Java的Mvc整合Swagger的knife4框架

Swagger的介绍 Swagger 是一个规范和完整的框架&#xff0c;用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。使用Swagger&#xff0c;就是把相关的信息存储在它定义的描述文件里面&#xff08;yml或json格式&#xff09;&#xff0c;再通过维护这个描述 文件可以去更…...

AI项目二十六:YOLOV11简单部署测试

若该文为原创文章&#xff0c;转载请注明原文出处。 一、YOLOv11介绍 继YOLOv 8、YOLOv 9和YOLOv10之后&#xff0c;发布的YOLOV11引入了几个突破性的增强功能&#xff0c;为目标检测和计算机视觉设定了新的基准。 增强的特征提取&#xff1a;YOLOv11使用改进的主干和颈部架构…...

19. Three.js案例-创建一个带有纹理映射的旋转平面

19. Three.js案例-创建一个带有纹理映射的旋转平面 实现效果 知识点 WebGLRenderer (WebGL渲染器) WebGLRenderer 是 Three.js 中用于渲染场景的主要类。它利用 WebGL 技术在浏览器中绘制 3D 图形。 构造器 new THREE.WebGLRenderer(parameters)参数类型描述parametersobj…...

【Makefile】编译日志之输出重定向符号 >

用法1 make all >& compilelog.txt make all > compilelog.txt这两个编译命令在功能上有一些细微的区别&#xff0c;主要在于标准输出和标准错误的处理方式。 make all >& compilelog.txt 这个命令会将标准输出&#xff08;stdout&#xff09;和标准错误&a…...

TDengine 新功能 复合主键

1. 简介 从 TDengine 3.3.0.0 版本之后&#xff0c;新增了复合主键的功能。 TDengine 原来的时间列是不允许有重复时间戳的&#xff0c;有了复合主键功能后&#xff0c;时间列即允许有重复&#xff0c;重复后的时间戳按紧跟其后第二列主键列的值来确定唯一性。 此功能的常用…...

【OpenHarmony】初识设备间互联互通的统一基础:分布式软总线

分布式软总线 前言软总线软总线代码目录软总线传输模块概述传输模块主要对外接口和使用方式 前言 很久没有写出一篇能够分享出来的学习心得了&#xff0c;零零散散地写了好多&#xff0c;总是不太满意。今年8月份开始正式投入精力去学习open harmony&#xff0c;记得第一次接触…...

yocto加软件包install 动态链接库报错

加入bb文件,编译通过 在install时报错 报错 ERROR: demo-1.0-r0 do_package_qa: QA Issue: -dev package agent-dev contains non-symlink .so ‘/usr/lib64/libdemo.so’ 解决 在bb文件install前加2行 SOLIBS ".so" FILES_SOLIBSDEV ""do_install …...

《数据结构》(408代码题)

2009 单链表&#xff08;双指针&#xff09; 分析&#xff1a;首先呢&#xff0c;给我们的数据结构是一个带有表头结点的单链表&#xff0c;也不允许我们改变链表的结构。链表的长度不是直接给出的啊&#xff0c;所以这个倒数也很棘手。那我们该如何解决这个“k”呢&#xff0c…...

哈希表的完善及unordered_map/unordered_set封装

1.哈希表的完善 1.1 优化&#xff1a;哈希函数 在实际使用中&#xff0c;往往需要以字符串作为存储依据(键值)&#xff0c;比如姓名与快递信息、商品名称与价格、中文单词与英文释义等。 而在上一篇文章中&#xff0c;我们实现的哈希表只考虑了整型的存储情况&#xff0c;即直…...

“物联·数据·产融·场景”聚力垂直数智场景下的新质生产力破局

人工智能、物联网&#xff08;简称AIOT&#xff09;正在深刻改变世界的经济格局&#xff0c;对各行各业产生深厚的影响。12月6日&#xff0c;由深圳市物联网协会、华夏银行深圳分行、深圳市区块链技术应用协会、深圳市康复辅助器具智能技术应用协会联合主办的第五届AIOT生态大会…...

API接口的性能测试与优化策略

在现代软件开发中&#xff0c;API&#xff08;应用程序编程接口&#xff09;扮演着至关重要的角色&#xff0c;它们作为不同服务之间的桥梁&#xff0c;确保数据的顺畅流通与交互。然而&#xff0c;随着用户需求的不断增长和系统复杂性的提升&#xff0c;API接口的性能问题日益…...

【Vue】Part4 接口调用

接口调用方式 原生ajax基于jQuery的ajaxfetchaxios 异步 JavaScript的执行环境是「单线程」所谓单线程&#xff0c;是指JS引擎中负责解释和执行JavaScript代码的线程只有一个&#xff0c;也就是一次只能完成一项任务&#xff0c;这个任务执行完后才能执行下一个&#xff0c;…...

管理系统前端框架开发案例学习

一、 需求分析 本案例的主要目标是开发一个智能学习辅助系统的前端界面&#xff0c;涵盖以下功能模块&#xff1a; 首页&#xff1a;显示系统的总体概览和关键功能介绍。 班级学员管理&#xff1a;实现班级管理和学员管理。 系统信息管理&#xff1a;管理部门和员工信息。 …...

协程设计原理与实现

协程设计原理与汇编实现 同步与异步 对于任何一个事情&#xff0c;都可以划分为不同的步骤。所谓同步&#xff0c;就先做第一个事情&#xff0c;按照这件事的步骤完成这件事之后&#xff0c;再去做第二件事。再去做第三件事&#xff0c;以此类推。 异步就是&#xff0c;可以…...

c++广播通讯的实现

概念大家都很清楚&#xff0c;不赘述。 广播必然用UDP这套东西。 setsockopt() 函数及其在广播中的应用&#xff1a; 在 C 网络编程中&#xff0c;setsockopt() 函数用于设置套接字选项&#xff0c;这些选项可以控制套接字的各种行为。对于广播通信&#xff0c;我们特别关心…...

Leetcode 3377. Digit Operations to Make Two Integers Equal

Leetcode 3377. Digit Operations to Make Two Integers Equal 1. 解题思路2. 代码实现 题目链接&#xff1a;3377. Digit Operations to Make Two Integers Equal 1. 解题思路 这一题的核心思路属于路径遍历问题&#xff0c;我们使用一个堆排来控制最优路径的选择。 我们首…...

高项 - 项目管理原则与项目绩效域

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 博文更新参考时间点&#xff1a;2024-12 高项 - 章节与知识点汇总&#xff1a;点击跳转 文章目录 高项 - 项目管理原则与项目绩效域项目管理12条原则原则1&#xff1a;成为勤勉、尊重和关心他人的管家 (p202)原则…...

【开源】A065—基于SpringBoot的库存管理系统的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看项目链接获取⬇️&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600个选题ex…...

LeetCode—189. 轮转数组(中等)

题目描述&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例1&#xff1a; 输入: nums [1,2,3,4,5,6,7], k 3输出:[5,6,7,1,2,3,4] 解释: 向右轮转 1 步:[7,1,2,3,4,5,6] 向右轮转 2 步:[6,7,1,2,3,4,5] 向…...

fastadmin框架同时使用 阿里云oss和阿里云点播

背景 项目的实际需求中既要用到阿里云oss产品又用到阿里云点播系统&#xff0c;实现完美的统一。设置两个地址downUrl&#xff0c;thirdCode。分别代表阿里云oss上传路径和阿里云点播系统vId。 实现 默认框架你已经集成好阿里云oss集成工作&#xff0c;前端html页面实现 <…...

MySQL-DML之数据表操作

文章目录 一. 插入表记录1. 向表中插入部分字段2. 向表中插入所有字段,字段的顺序为创建表时的顺序3. 一次添加多条数据信息 二. 更新表记录1. 更新所有记录的指定字段 更新符号条件记录的指定字段2. 更新符号条件记录的指定字段 三. 删除表记录1. 按条件删除记录2. 清空记录 四…...

Android 逆向/反编译/Hook修改应用行为 基础实现

前言&#xff1a;本文通过一个简单的情景案例实现安卓逆向的基本操作 一、情景描述 本文通过一个简单的情景案例来实现安卓逆向的基本操作。在这个案例中所使用的项目程序是我自己的Demo程序&#xff0c;不会造成任何的财产侵害&#xff0c;本文仅作为日常记录及案例分享。实…...

【前端】理解 JavaScript 对象属性访问的复杂性

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端 文章目录 &#x1f4af;前言&#x1f4af;理论基础&#xff1a;JavaScript 对象属性的访问模式1. 点符号访问&#xff08;Dot Notation&#xff09;2. 方括号访问&#xff08;Bracket Notation&#xff09;点符号…...