前端的面试笔记——HTMLJavaScript篇(二)前端页面性能检测
前端页面性能检测和判定是优化用户体验的核心环节,需要结合实验室数据(Lab Data)、现场数据(Field Data)和行业标准综合评估。以下是主流方法、工具及判定标准的详细解析:
一、性能检测的核心维度与指标
1. 加载性能
- 核心指标:
- LCP(最大内容绘制):衡量首屏主要内容的加载速度,理想值 ≤ 2.5 秒,需优化图片 / 视频、关键资源加载顺序。
- FCP(首次内容绘制):首次渲染像素的时间,理想值 ≤ 1 秒,关注 HTML 解析与首屏渲染效率。
- TTFB(首字节时间):服务器响应速度,理想值 ≤ 200ms,优化后端性能或 CDN 配置。
2. 交互性能
- 核心指标:
- FID(首次输入延迟):用户首次交互到响应的时间,理想值 ≤ 100ms,减少长任务(>50ms)和主线程阻塞。
- TTI(可交互时间):页面完全可交互的时间,通过
TTI
API 测量,优化 JavaScript 执行效率。
3. 视觉稳定性
- 核心指标:
- CLS(累积布局偏移):元素意外移动的程度,理想值 ≤ 0.1,避免动态内容导致的重排(如图片 / 广告未预留空间)。
4. 其他关键指标
- FMP(首次有意义绘制):用户感知到页面 “可用” 的时间,适合 SPA 应用评估。
- TBT(总阻塞时间):FCP 到 TTI 之间的主线程阻塞时间总和,反映交互准备度。
- Bundle Size:JS/CSS 包体积,过大易导致加载和解析延迟,建议单页 JS ≤ 150KB(压缩后)。
二、性能检测工具与使用场景
1. 浏览器内置工具(实验室数据)
Chrome DevTools
- 适用场景: 开发阶段实时调试,深度分析性能瓶颈。
- 核心功能:
- Performance 面板:录制页面加载过程,分析 LCP、FID、长任务、资源瀑布图。
- Lighthouse:一键生成性能审计报告,提供优化建议(如图片压缩、移除阻塞脚本)。
- Coverage:检测未使用的 JS/CSS 代码,辅助代码拆分。
- 操作技巧: 模拟移动端设备、限速网络(如 Slow 3G),复现真实用户环境。
Firefox DevTools
- 特色功能:
- Performance Monitor:实时监控 CPU / 内存 / 网络占用,适合定位内存泄漏。
- Netmonitor:可视化网络请求依赖关系,识别资源加载阻塞链。
2. 在线性能分析工具
Google PageSpeed Insights
- 优势: 整合 Lighthouse 实验室数据与 CrUX(Chrome 用户体验报告)现场数据,提供移动端 / 桌面端双版本评分。
- 输出内容:
- 性能评分(1-100),红色项为严重问题(如 LCP 超时、未压缩图片)。
- 优化清单:按优先级排列,如 “延迟非关键 JavaScript”“使用 WebP 格式图片”。
WebPageTest
- 专业级功能:
- 多地区节点测试(如纽约、东京),模拟真实地理位置延迟。
- 视频录制与性能指标时间轴对比,直观展示渲染卡顿。
- 支持自定义 HTTP 头、缓存策略,深度测试 CDN 或认证场景。
GTmetrix
- 综合分析: 结合 Lighthouse 和 WebPageTest 数据,生成 “性能” 与 “结构” 双评分,提供 Waterfall 图和 YSlow 规则检查(如缓存策略、域名收敛)。
3. 真实用户监测(RUM)工具(现场数据)
Google Analytics 4 (GA4)
- 集成指标: 自动收集 FCP、LCP、CLS 等 Core Web Vitals 数据,按国家 / 设备 / 浏览器维度细分。
- 使用场景: 监控生产环境性能波动,定位特定用户群体的体验问题。
New Relic / Datadog
- 高级功能:
- 自定义性能指标(如 TTI、用户自定义交互延迟)。
- 异常检测与警报:当 LCP 第 75 百分位超过阈值时触发通知。
Web Vitals 库(JavaScript SDK)
- **轻量级方案:**通过
web-vitals
npm 包手动上报 LCP/FID/CLS 数据到自有监控平台,适合隐私要求高的场景。
4. 自动化性能测试工具
Pa11y/Dalmatiner
- 自动化审计: 集成 Lighthouse/axe 等工具到 CI/CD 流程,每次代码提交时自动检测性能与 accessibility 问题。
- 配置示例:
# GitHub Actions 配置 name: Run Lighthouse audit uses: foo-software/lighthouse-check-action@v3 with: urls: "https://example.com" threshold: 70 # 性能评分低于70时失败
Calibre
- 可视化对比: 录制不同版本页面的性能视频,逐帧对比渲染差异,适合 SPA 或动画优化。
三、性能判定标准与优化策略
1. 行业标准与评分阈值
指标 | 良好(绿色) | 需要改进(黄色) | 较差(红色) |
---|---|---|---|
LCP | ≤ 2.5 秒 | 2.5-4 秒 | > 4 秒 |
FID | ≤ 100ms | 100-300ms | > 300ms |
CLS | ≤ 0.1 | 0.1-0.25 | > 0.25 |
Lighthouse 性能评分 | ≥ 90 | 50-90 | < 50 |
2. 优化优先级策略
- 紧急修复(红色项):
- 阻塞渲染的资源(如未标记
async
/defer
的 JS)。 - 未优化的图片(格式非 WebP/AVIF、未设置宽高导致 CLS)。
- 阻塞渲染的资源(如未标记
- 中等优先级(黄色项):
- 长任务(通过 DevTools 火焰图定位耗时函数,拆分为微任务或使用 Web Workers)。
- 过大的 JS bundle(启用 Tree Shaking、Code Splitting)。
- 长期优化(绿色项维护):
- 预加载关键路由资源(SPA 场景)。
- 采用 HTTP/3 或 QUIC 协议减少延迟。
3. 性能预算设置
- 定义规则: 例如 “单页 JS 体积增量 ≤ 5KB / 版本”“LCP 第 75 百分位 ≤ 3 秒”。
- 工具落地: 使用
bundlesize
监控包体积变化,结合 RUM 工具设置警报阈值。
四、性能检测的最佳实践
- 分阶段测试:
- 开发阶段: 侧重实验室数据(DevTools/Lighthouse),快速定位代码级问题。
- 预发布阶段: 通过 WebPageTest 模拟多地区用户环境,验证 CDN 和缓存策略。
- 生产阶段: 依赖 RUM 工具监控真实用户体验,重点关注长尾用户(如低端设备、弱网地区)。
- 对比分析:
- A/B 测试不同优化方案的性能差异(如服务端渲染 vs 客户端渲染的 LCP 对比)。
- 跟踪历史数据,分析性能趋势与代码变更的关联(如某次上线后 FID 突增)。
- 用户 - centric 优化:
- 优先优化首屏可见区域内容,非关键资源采用懒加载(如
Intersection Observer
)。 - 针对高流量页面(如落地页、结算页)进行专项性能审计。
- 优先优化首屏可见区域内容,非关键资源采用懒加载(如
五、工具选型参考表
实时调试 | 推荐工具 | 核心优势 |
---|---|---|
实时调试 | Chrome DevTools | 深度分析主线程、资源依赖 |
多地区性能测试 | WebPageTest | 真实节点模拟、视频对比 |
生产环境监控 | GA4 + Web Vitals SDK | 免费、集成用户行为数据 |
自动化 CI/CD 检测 | Pa11y + Lighthouse-check-action | 代码提交时自动阻断性能退化 |
性能对比与可视化 | Calibre | 视频逐帧对比、SPA 动画优化 |
通过组合使用上述工具,结合数据驱动和用户体验导向的优化策略,可系统性提升前端页面性能,并确保优化效果符合行业标准与业务目标。
相关文章:
前端的面试笔记——HTMLJavaScript篇(二)前端页面性能检测
前端页面性能检测和判定是优化用户体验的核心环节,需要结合实验室数据(Lab Data)、现场数据(Field Data)和行业标准综合评估。以下是主流方法、工具及判定标准的详细解析: 一、性能检测的核心维度与指标 …...
FD+Mysql的Insert时的字段赋值乱码问题
方法一 FDQuery4.SQL.Text : INSERT INTO 信息表 (中心, 分组) values(:中心,:分组); FDQuery4.Params[0].DataType : ftWideString; //必须加这个数据类型的定义,否则会有乱码 FDQuery4.Params[1].DataType : ftWideString; //ftstring就不行,必须是…...
论坛系统(中-2)
软件开发 实现业务功能 个人中心 页面结构介绍 个人中心的页面结构分为三部分 1> 导航栏 2> 正文部分 3> 页脚部分 index.html 的页面结构 1> 导航栏 2> 正文部分 3> 页脚部分 获取用户信息 实现逻辑 ⽤⼾提交请求,服务器根据是否传⼊I…...
火山 RTC 引擎9 ----集成 appkey
一、集成 appkey 1、网易RTC 初始化过程 1)、添加头文件 实现互动直播 - 互动直播 2.0网易云信互动直播产品的基本功能包括音视频通话和连麦直播,当您成功初始化 SDK 之后,您可以简单体验本产品的基本业务流程,例如主播加入房间…...
Protobuf协议生成和使用
知识点一 利用protoc.exe编译器生成脚本文件 //1.打开cmd窗口 //2.进入protoc.exe所在文件夹(也可以直接将exe文件拖入cmd窗口中) //3.输入转换指令 //protoc.exe -I配置路径 --csharp_out输出路径 配置文件名 //注意&…...
2025年—ComfyUI_关于ComfyUI的零碎小知识
之前有个朋友问我要了一个软件安装包,我分享了网盘链接,过了会儿朋友说解压后点击安装一直提示失败,还发给我报错信息,我从没遇到过,也不知做何解,于是要了截图,看着不对劲,问其在哪…...
用 SamGeo 库实现遥感影像自动分割:从本地 TIFF 到 SHP/GeoJSON 的一站式处理(Python 脚本实现)
背景:地理空间数据处理的智能化转型与 SAM 模型的革新应用 在遥感测绘、城市规划、环境监测等领域,地理空间影像数据的自动化处理一直是提升效率的核心需求。传统的影像分割方法依赖人工标注或复杂的参数调优,难以应对海量卫星 / 无人机影像的快速分析;而栅格数据(如 Geo…...
Excel导入校验
校验监听器 /*** Excel 校验监听器* param <T>*/ public class AnalysisValidReadListener<T> extends AnalysisEventListener<T> {private static final Logger logger LoggerFactory.getLogger(AnalysisValidReadListener.class);private static final i…...
【批量图片查找】在电脑上如何根据文件名清单一次性查找多张图片并复制到指定文件夹,基于Python的解决方案
一、应用场景 这个工具适用于以下场景: 设计师需要从大量素材中筛选特定图片复制并保存摄影师需要根据文件名批量整理照片查找筛选复制电商运营人员需要从产品库中提取特定商品图片复制到指定文件夹数据分析师需要批量收集特定图片复制保存用于处理任何需要从大量图…...
湖北理元理律师事务所观察:债务服务中的“倾听者价值”
在债务纠纷解决过程中,法律专业能力与心理支持同样重要。调研显示,72%的债务人在咨询初期存在“隐瞒真实负债”“抗拒沟通”等行为,直接影响方案有效性。湖北理元理律师事务所通过服务模式创新,尝试破解这一难题。 建立信任的三大…...
GPT-4.1特点?如何使用GPT-4.1模型,GPT-4.1编码和图像理解能力实例展示
几天前,OpenAI在 API 中推出了三个新模型:GPT-4.1、GPT-4.1 mini 和 GPT-4.1 nano。这些模型的性能全面超越 GPT-4o 和 GPT-4o mini(感觉这个GPT-4.1就是GPT-4o的升级迭代版本),主要在编码和指令跟踪方面均有显著提升。还拥有更大的上下文窗口…...
网络工程师案例分析
✅ Huawei Super VLAN 通信规则总结 🌐 基本结构 Super VLAN:逻辑 VLAN,承载三层网关(VLANIF 接口)。 Sub VLAN:实际的用户 VLAN,不配置 IP,仅做二层转发。 🔒 通信规…...
tcp/ip协议
OSI参考模型 应用层:OSI最高层。确定进程之间通信性质 协议:http:80,https:443,ftp:21,telnet:23,ssh:22,smtp:25,pop3 表示层:处理流经结点的数据编码的表示方式问题,以保证一个系统应用层发出的消息可被另一系统的应用层读出,数据压缩和加…...
小红书的视频怎么保存没有水印(方法分享)
你是不是也经常在小红书上刷到超赞的旅行vlog、美妆教程或美食探店视频,想保存下来慢慢看,却发现下载后总有烦人的水印?别急!今天教你一招,3秒轻松保存无水印高清视频,简单又实用! 为什么需要无…...
RK3568解码1080P视频时遇到系统崩溃内核挂掉的解决方案
接上篇rk3568。 实际使用 rock_mpp库硬解码时,会遇到解码1080P视频整个系统卡死,内核崩溃的问题。 以下是内核崩溃的日志,下面这句是典型的内核某块驱动挂掉的信息。 [ 292.469580] Unable to handle kernel NULL pointer dereference at…...
C++ —— Lambda 表达式
🎁个人主页:工藤新一 🔍系列专栏:C面向对象(类和对象篇) 🌟心中的天空之城,终会照亮我前方的路 🎉欢迎大家点赞👍评论📝收藏⭐文章 文章目录 L…...
Keepalived相关配置和高可用
目录 一. Keepalived的工作原理 二. 实现单独的心跳网卡 三. keepalive一些优化 3.1 主从之间加密验证 3.2 修改心跳线发送时间 四. 添加独立日志 五. 抢占模式,非抢占模式,延迟抢占模式 六. 单播地址和多播地址 1. 单播地址(Unicast…...
gtest 库的安装和使用
目录 介绍 安装 使用 介绍 官方文档:GoogleTest 入门 |GoogleTest 谷歌测试 gtest 库是谷歌开源的 C测试单元框架,方便我们测试程序的正确性。 安装 sudo apt-get install libgtest-dev 使用 GTest 中的断言的宏可以分为两类: • ASS…...
Python训练营打卡——DAY30(2025.5.19)
目录 模块和库的导入 一、导入官方库 1. 标准导入:导入整个库 2. 从库中导入特定项 3. 非标准导入:导入整个库 二、模块、包的定义 三、使用案例 场景1: main.py 和 circle.py 都在同一目录 场景2: main.py 和 circle.py 都在根目录的子目录 mo…...
Django框架的前端部分使用Ajax请求一
Ajax请求 目录 1.ajax请求使用 2.增加任务列表功能(只有查看和新增) 3.代码展示集合 这篇文章, 要开始讲关于ajax请求的内容了。这个和以前文章中写道的Vue框架里面的axios请求, 很相似。后端代码, 会有一些细节点, 跟前几节文章写的有些区别。 一、ajax请求使用 我们先…...
w~自动驾驶~合集3
我自己的原文哦~ https://blog.51cto.com/whaosoft/13269720 #FastOcc 推理更快、部署友好Occ算法来啦! 在自动驾驶系统当中,感知任务是整个自驾系统中至关重要的组成部分。感知任务的主要目标是使自动驾驶车辆能够理解和感知周围的环境元素&…...
LeetCode 39. 组合总和 LeetCode 40.组合总和II LeetCode 131.分割回文串
LeetCode 39. 组合总和 需要注意的是题目已经明确了数组内的元素不重复(重复的话需要执行去重操作),且元素都为正整数(如果存在0,则会出现死循环)。 思路1:暴力解法 对最后结果进行去重 每一…...
C++(2)关键字+数据类型 +数据类型输入
(1)如下关键字是 不能用于定义变量名和常量名的 !。 如int int 这样就会报错 所以注意即可 。 (2)标识符命名规则 (即变量和常量的命名规则) 最主要注意 第一个 字符必须是字母或是下划线 —…...
第二道re
题目来源:天狩CTF竞赛平台 Lihuas for 题目提示说是for循环,不管了干吧 先看加没加壳,没有,直接无脑IDAF5 代码功能概述 程序会要求用户输入一个 flag,然后将输入的每个字符与索引值进行异或运算,并将结…...
【C语言内存函数】--memcpy和memmove的使用和模拟实现,memset函数的使用,memcmp函数的使用
目录 一.memcpy的使用和模拟实现 1.1--memcpy的使用演示 1.2--memcpy的模拟实现 二.memmove的使用和模拟实现 2.1--memmove的使用演示 2.2--memmove的模拟实现 三.memset函数的使用 3.1--memset的使用演示 3.2--总结 四.memcmp函数的使用 4.1--memcmp的使用演示 4.2…...
java集合详细讲解
Java 8 集合框架详解 Java集合框架是Java中最重要、最常用的API之一,Java 8对其进行了多项增强。下面我将全面讲解Java 8中的集合框架。 一、集合框架概述 Java集合框架主要分为两大类: Collection - 单列集合 List:有序可重复Set…...
UniApp 实现的文件预览与查看功能#三方框架 #Uniapp
UniApp 实现的文件预览与查看功能 前言 在开发移动应用时,文件预览功能是一个非常常见的需求。无论是查看PDF文档、图片还是Office文件,都需要一个稳定且易用的预览解决方案。本文将详细介绍如何在UniApp中实现各类文件的预览功能,并分享一…...
用户行为日志分析的常用架构
## 1. 经典Lambda架构 Lambda架构是一种流行的大数据处理架构,特别适合用户行为日志分析场景。 ### 1.1 架构组成 Lambda架构包含三层: - **批处理层(Batch Layer)**: 存储全量数据并进行离线批处理 - **实时处理层(Speed Layer)**: 处理最新数据&…...
【VBA/word】批量替换字体大小
将5号或6号字体改为10.5号字体(循环10次) AI复制的文案问题调整 Sub Change5or6ptTo16pt_10Loops()Dim rng As RangeDim doc As DocumentDim found As BooleanDim i As IntegerDim totalChanges As LongDim targetSizes As VariantDim size As VariantSe…...
C++类与对象--3 C++对象模型和this指针
3.1 类成员分开存储 成员变量和成员函数在内存中是分开存储的只有非静态成员变量是存储在对象上的 C为空对象分配1字节的空间非空对象的大小为其内部非成员变量大小总和 静态成员不占对象空间不同对象的成员函数共享一个函数实例,不占对象空间(通过th…...
DV SSL证书管理主要有哪些功能?
在互联网信息传输高速发展的今天,用户对网站安全性的要求越来越高。SSL证书已成为网站“身份认证数据加密”的标配。其中,DV SSL证书由于其签发快速、价格低廉、使用广泛,成为大量中小型网站、个人博客、电商平台的首选。然而,选择…...
el-tree结合el-tree-transfer实现穿梭框里展示树形数据
参考文章:我把他的弹框单拉出来一个独立文件作为组件方便使用,遇到一些问题记录一下。 testComponet.vue <template><div class"per_container"><div class"per_con_left"><div class"per_con_title&q…...
浅谈GC机制-三色标记和混合写屏障
标记清除法 stw(stop the world):暂停所有goroutine,扫描出可达与不可达对象,进行回收 三色标记法 不暂停,并发扫描,从根节点出发,扫描过对象的为黑,下一个可达对象为…...
Python训练营打卡 Day30
模块和库的导入 知识点回顾: 导入官方库的三种手段 直接导入整个库:使用 import library_name 语法。 导入库中的特定模块或函数:使用 from library_name import module_name 或 from library_name import function_name。 导入库并起别名&…...
深入探讨死区生成:原理、实现与应用
在电力电子、信号处理等众多领域中,“死区生成”是一个十分关键的概念,它能有效避免器件误动作、减少干扰,保障系统稳定运行。今天就通过问答的形式,和大家深入聊聊死区生成相关知识。 什么是死区生成? 死区生成是指…...
OpenCV 环境搭建与概述
// //OpenCV-4.11.0 C VS2019 // 一、OpenCV学习路线 1、入门: OpenCV图像读写、视频读写、基本像素处理、基本卷积处理、基本C开发知识。 2、初级: OpenCV自定义卷积操作、图像梯度、边缘提取、二值分析、视频分析、形态学处理、几何变换与透视变换。 3、中级: 角点查找、BL…...
c/c++的opencv均值函数
C/C 中的均值函数:从基础到应用 📊 在 C/C 编程中,计算一组数值的**均值(平均值)**是一项非常基础且常见的操作。无论是数据分析、信号处理、图像处理还是机器学习,均值函数都扮演着重要的角色。本文将详细…...
go 数据类型转换
graph TDA[整型<br>int, int8, int16, int32, int64] -->|类型转换| B[浮点型<br>float32, float64]B -->|类型转换| AA -->|类型转换| C[布尔型<br>bool]C -->|类型转换| AB -->|类型转换| D[复数型<br>complex64, complex128]D -->…...
Go内存管理
内存管理 文章目录 内存管理何为内存?内存为什么需要管理?内存管理的方式操作系统存储模型操作系统是怎么管理内存的?虚拟内存与物理内存认识虚拟内存分页管理 Golang 内存模型TCMalloc核心概念go内存管理核心概念GO内存分配GO 内存逃逸机制一…...
解决软件连接RabbitMQ突发System.IO.IOException: 无法从传输连接中读取数据: 远程主机强迫关闭了一个现有的连接异常
一、问题描述 系统再运行时,突然出现 System.Exception: [RabbitMQ.Send Error] RabbitMQ.Client.Exceptions.AlreadyClosedException: Already closed: The AMQP operation was interrupted: AMQP close-reason, initiated by Library, code541, text“Unexpected…...
基于局部显著位置感知的异常掩码合成方法在CT图像肺部疾病异常检测与病变定位中的应用|文献速递-深度学习医疗AI最新文献
Title 题目 Local salient location-aware anomaly mask synthesis for pulmonary disease anomaly detection and lesion localization in CT images 基于局部显著位置感知的异常掩码合成方法在CT图像肺部疾病异常检测与病变定位中的应用 01 文献速递介绍 肺部疾病是全球发…...
【cursor疑惑】cursor续杯后使用agent对话时,提示“需要pro或商业订阅的用户才能使用“
背景 cursor的pro会员体验过期了,想再次体验deepseek、Claude等agent对话提示:“免费版本不可以使用agent对话功能(英文忘记截图了,大意是这样)”。 处理方法 Step-1:再次续杯cursor的pro会员14天体验 详情,见:【c…...
2022年下半年信息系统项目管理师——综合知识真题及答案(3)
2022年下半年信息系统项目管理师 ——综合知识真题及答案(3) 零、时光宝盒 (https://blog.csdn.net/weixin_69553582 逆境清醒) 此文是我2025-05-19回复头条上某作者文章时的评论记录,原作者的文章是写那些被有组织…...
华为云Flexus+DeepSeek征文|基于华为云Flexus云服务的云服务器单机部署Dify-LLM应用开发平台
目录 一、前言 二、华为云Flexus云服务优势 三、华为云Flexus一键部署Dify 3.1 选择模板 3.2 参数配置 3.3 资源栈设置 3.4 配置确认 3.5 创建执行计划 3.6 部署 四、Dify-LLM应用开发平台初体验 4.1 访问Dify-LLM应用开发平台 4.2 设置管理员账户 4.3 登录Dify-LLM应用开发平台…...
NC105NC106美光固态颗粒NC108NC109
NC105NC106美光固态颗粒NC108NC109 美光固态颗粒技术矩阵深度解析:NC105/NC106/NC108/NC109的性能博弈与市场卡位 一、技术基因图谱:解密NC系列颗粒的底层架构 1. TLC与QLC的技术路线分野 美光NC系列颗粒呈现出清晰的技术分层:NC105/NC10…...
洛谷U536262 井底之“鸡” 附视频讲解
题目截图 题目背景 2024年山东财经大学新生赛的时候,xz_chicken厌倦了在鸡舍的生活,于是决定把他的主人ZQH写成QH鸡,然而除了在第一题中已经出现了ZQH所在队伍征途再起的合影,同时xz_chicken还露出其他马脚,比如说答案…...
特征筛选方法总结(面试准备15)
非模型方法 一.FILTER过滤法: 1.缺失值比例(80%以上缺失则删除)/方差 注意: 连续变量只删方差为0的,因为变量取值范围会影响方差大小。 离散类的看各类取值占比,如果是三分类变量可以视作连续变量。 函数:V…...
深入解析分布式数据库TiDB:原理、优化与架构实践
前言 在云计算与大数据时代,传统单机数据库面临三大挑战:海量数据存储、高并发访问和实时分析需求。MySQL 分库分表方案复杂、NoSQL 缺乏 ACID 支持、MPP 数仓难以处理 OLTP… 在这样的背景下,TiDB 应运而生。作为一款开源的分布式 NewSQL 数…...
YouTube视频字幕转成文章算重复内容吗?
很多创作者误以为「自己说的话不算抄袭」,却不知道YouTube自动生成的字幕早已被搜索引擎存档。 去年就有案例:某美食博主将教程视频字幕转为图文,结果原创度检测仅42%,导致页面权重暴跌。 本文揭秘5个实操技巧:从删除…...
codeup添加流水线docker自动化部署
在项目根目录下增加Dockerfile文件 # 使用基础镜像 FROM maven:3.8.4-openjdk-17-slim AS build # 设置工作目录 WORKDIR /app # 复制项目源代码 COPY . . # 构建项目 RUN mvn clean package -DskipTests # 验证JAR包是否生成 RUN ls -l target/your-project.jar # 使用合适的…...