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

小结：网页性能优化

news 来源：原创 2025/6/21 0:17:15

网页性能优化是提升用户体验、减少加载时间和提高资源利用率的关键。以下是针对网页生命周期和事件处理的性能优化技巧，结合代码示例，重点覆盖加载、渲染、事件处理和资源管理等方面。

1. 优化加载阶段

减少关键资源请求：

合并CSS/JS文件，减少HTTP请求。

使用defer或async加载非关键脚本：
html

<script defer src="script.js"></script> <!-- 延迟加载，DOM解析后执行 -->
<script async src="analytics.js"></script> <!-- 异步加载，不阻塞解析 -->

启用资源预加载：

使用优先加载关键资源：
html

<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="main.js" as="script">

压缩和优化资源：
- 使用工具（如terser**、cssnano）压缩JS/CSS。**
- 优化图片：使用WebP格式、压缩工具（如ImageOptim**）或CDN自动优化。**
  html
```
<img src="image.webp" alt="example" loading="lazy">
```

2. 优化DOM解析和渲染

减少DOM操作：

批量更新DOM，避免频繁重排（reflow）和重绘（repaint）：
javascript

// 低效：多次操作DOM
for (let i = 0; i < items.length; i++) {document.getElementById('list').innerHTML += `<li>${items[i]}</li>`;
}// 高效：一次性操作
const fragment = document.createDocumentFragment();
items.forEach(item => {const li = document.createElement('li');li.textContent = item;fragment.appendChild(li);
});
document.getElementById('list').appendChild(fragment);

使用CSS替代JS动画：

CSS动画通常由GPU加速，比JS动画更高效：
css

.fade-in {animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }
}

延迟非关键渲染：

使用requestIdleCallback处理低优先级任务：
javascript

requestIdleCallback(() => {console.log('执行低优先级任务，如加载跟踪脚本');// 加载非关键分析脚本
}, { timeout: 2000 });

3. 优化事件处理

事件委托：

为父元素绑定事件，减少监听器数量：
javascript

document.getElementById('list').addEventListener('click', (e) => {if (e.target.tagName === 'LI') {console.log('点击了列表项：', e.target.textContent);}
});

防抖和节流：

限制高频事件（如scroll**、resize）的触发频率：**
javascript

// 节流：每200ms最多触发一次
function throttle(fn, delay) {let last = 0;return (...args) => {const now = Date.now();if (now - last >= delay) {fn(...args);last = now;}};
}window.addEventListener('scroll', throttle(() => {console.log('滚动事件触发');
}, 200));// 防抖：停止操作后200ms触发
function debounce(fn, delay) {let timer;return (...args) => {clearTimeout(timer);timer = setTimeout(() => fn(...args), delay);};
}window.addEventListener('resize', debounce(() => {console.log('窗口大小调整完成');
}, 200));

移除无用监听器：

动态元素卸载时清理事件，防止内存泄漏：
javascript

const button = document.getElementById('myButton');
const handler = () => console.log('点击');
button.addEventListener('click', handler);
// 移除
button.removeEventListener('click', handler);

4. 优化资源管理和网络

懒加载：

使用loading="lazy"延迟加载图片和iframe：
html

<img src="below-fold.jpg" loading="lazy" alt="lazy image">

动态加载JS模块：
javascript

import('module.js').then(module => {module.init();
});

缓存策略：

使用Service Worker缓存静态资源：
javascript

// service-worker.js
self.addEventListener('install', (event) => {event.waitUntil(caches.open('my-cache').then((cache) => {return cache.addAll(['/index.html', '/styles.css', '/script.js']);}));
});self.addEventListener('fetch', (event) => {event.respondWith(caches.match(event.request).then((response) => {return response || fetch(event.request);}));
});

设置HTTP缓存头（如Cache-Control**）：**
nginx

# Nginx 配置示例
location ~* \.(jpg|png|css|js)$ {expires 1y;add_header Cache-Control "public";
}

使用CDN：

加速静态资源分发，减少延迟：
html

<script src="https://cdn.example.com/jquery.min.js"></script>

5. 优化页面可见性和交互

暂停隐藏页面任务：

使用visibilitychange暂停资源密集型任务：
javascript

document.addEventListener('visibilitychange', () => {if (document.visibilityState === 'hidden') {clearInterval(pollingTimer); // 停止轮询} else {pollingTimer = setInterval(fetchData, 5000); // 恢复轮询}
});

优先处理用户交互：

使用requestAnimationFrame优化动画和交互：
javascript

function animate() {// 更新动画requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

6. 性能监控和调试

使用Performance API：

测量关键时间点：
javascript

window.addEventListener('load', () => {const { domContentLoadedEventEnd, loadEventEnd } = performance.timing;console.log('DOM加载时间：', domContentLoadedEventEnd - navigationStart);console.log('页面总加载时间：', loadEventEnd - navigationStart);
});

Lighthouse分析：
- 使用Chrome DevTools的Lighthouse工具检查性能，获取优化建议。

错误监控：

捕获并记录运行时错误：
javascript

window.addEventListener('error', (e) => {fetch('/log-error', {method: 'POST',body: JSON.stringify({ message: e.message, file: e.filename }),});
}, true);

7. 其他实用技巧

Tree Shaking：使用Webpack/Rollup移除未使用的代码。

代码分割：按路由或功能模块分割JS，减少初始加载量：
javascript

// Webpack 动态导入
import(/* webpackChunkName: "module" */ './module.js').then(module => {module.default();
});

避免阻塞主线程：

将耗时任务移到Web Worker：
javascript

// main.js
const worker = new Worker('worker.js');
worker.postMessage({ task: 'heavyComputation' });
worker.onmessage = (e) => console.log('结果：', e.data);// worker.js
self.onmessage = (e) => {const result = heavyComputation(e.data);self.postMessage(result);
};

优化字体加载：

使用font-display: swap避免FOUT（无样式文本闪烁）：
css

@font-face {font-family: 'MyFont';src: url('myfont.woff2') format('woff2');font-display: swap;
}

注意事项

测试环境：在不同设备和网络条件下（3G、4G）测试性能。
渐进增强：确保核心功能在无JS或低性能设备上可用。
用户体验：优化性能时避免牺牲可访问性（如ARIA支持）。
工具支持：使用Vite、esbuild等现代构建工具加速开发和打包。

小结：网页性能优化

网页性能优化是提升用户体验、减少加载时间和提高资源利用率的关键。以下是针对网页生命周期和事件处理的性能优化技巧，结合代码示例，重点覆盖加载、渲染、事件处理和资源管理等方面。 1. 优化加载阶段减少关键资源请求： 合并CSS/JS文件&a…...

编程日记 2025/6/21 0:17:15

2025年PMP 学习十五第10章项目资源管理

2025年PMP 学习十五第10章项目资源管理序号过程过程组1规划沟通管理规划2管理沟通执行3监控沟通监控项目沟通管理包括为确保项目的信息及时且恰当地规划、收集、生成、发布、存储、检索、管理、控制、监警和最终处理所需的过程； 项目经理绝大多数时间都用于与…...

编程日记 2025/5/28 16:21:25

速通RocketMQ配置

配置RocketMQ又出问题了，赶紧记录一波这个是我的RocketMQ配置文件通过网盘分享的文件： 链接: https://pan.baidu.com/s/1UUYeDvKZFNsKPFXTcalu3A?pwd8888 提取码: 8888 –来自百度网盘超级会员v9的分享里面有这三个东西里面还有一些broker和names…...

编程日记 2025/5/20 17:56:08

宇宙中是否存在量子现象?

一、宇宙中的量子现象好的，请提供具体的搜索词或意图，以便进行检索和生成简洁的回答。好的，请提供具体的搜索词或意图，以便进行检索和生成简洁的回答。量子涨落与宇宙结构早期宇宙的量子涨落（微观尺度的不确定性…...

编程日记 2025/5/29 18:26:21

背包问题详解

一、问题引入：什么是背包问题？ 背包问题是经典的动态规划问题，描述如下： 有一个容量为 m 的背包有 n 个物品，每个物品有体积 v 和价值 w 目标：选择物品装入背包，使总价值最大且总体积不超过…...

编程日记 2025/5/27 6:49:33

oracle linux 95 升级openssh 10 和openssl 3.5 过程记录

1. 安装操作系统，注意如果可以选择，选择安装开发工具，主要是后续需要编译安装，需要gcc 编译工具。 2. 安装操作系统后，检查zlib 、zlib-dev是否安装，如果没有，可以使用安装镜像做本地源安装&a…...

编程日记 2025/5/20 8:16:04

一、tomcal的lib放入文件 tomcat-websocket.jar websocket-api.jar 二、代码示例 package com.test.ws;import com.test.core.json.Jmode;import javax.websocket.*; import javax.websocket.server.ServerEndpoint; import java.util.concurrent.CopyOnWriteArraySet; imp…...

编程日记 2025/5/31 10:01:38

[思维模式-41]：在确定性与不确定性的交响中：人类参与系统的韧性密码。

前言： “任何信息系统，无论怎么复杂，哪怕是几万人同时开发的系统，如无线通信网络，通过标准、设计、算法、完毕的测试、过程的管控等，都是可预测和确定性的。一个系统，一旦叠加了人的元素和因素…...

编程日记 2025/5/28 18:05:35

维智定位 Android 定位 SDK

概述维智 Android 定位 SDK是为 Android 移动端应用提供的一套简单易用的定位服务接口，为广大开发者提供融合定位服务。通过使用维智定位SDK，开发者可以轻松为应用程序实现极速、智能、精准、高效的定位功能。重要：为了进一步加强对最终用…...

编程日记 2025/5/30 12:30:37

Vue3：脚手架

工程环境配置 1.安装nodejs 这里我已经安装过了，只需要打开链接Node.js — Run JavaScript Everywhere直接下载nodejs，安装直接一直下一步下一步安装完成之后我们来使用电脑的命令行窗口检查一下版本查看npm源这里npm源的地址是淘宝的源&#xff0…...

编程日记 2025/5/23 19:07:48

Android native崩溃问题分析

最近在做NDK项目的时候，出现了启动应用就崩溃了，崩溃日志如下： 10:41:04.743 A Build fingerprint: samsung/g0qzcx/g0q:13/TP1A.220624.014/S9060ZCU4CWH1:user/release-keys 10:41:04.743 A Revision: 12 10:41:04.743 A ABI: arm64…...

编程日记 2025/6/3 0:32:48

Playwright vs Selenium：2025 年 Web 自动化终极对比指南

1. 引言 Web 自动化领域正在迅速发展，在 2025 年，Playwright 与 Selenium 之间的选择已成为开发团队面临的重要决策。Selenium 作为行业标准已有十多年，而 Playwright 作为现代替代方案，以卓越的性能和现代化特性迅速崛起。本指…...

编程日记 2025/6/20 10:40:11

数据结构（3）线性表-链表-单链表

我们学习过顺序表时，一旦对头部或中间的数据进行处理，由于物理结构的连续性，为了不覆盖，都得移，就导致时间复杂度为O（n），还有一个潜在的问题就是扩容，假如我们扩容前是10…...

编程日记 2025/5/29 13:37:59

Python 中的 typing.ClassVar 详解

一、ClassVar 的定义和基本用途 ClassVar 是 typing 模块中提供的一种特殊类型，用于在类型注解中标记类变量（静态变量）。根据官方文档，使用 ClassVar[…] 注释的属性表示该属性只在类层面使用，不应在实例上赋值例如&…...

编程日记 2025/5/29 20:14:35

主流数据库运维故障排查卡片式速查表与视觉图谱

主流数据库运维故障排查卡片式速查表与视觉图谱本文件将主文档内容转化为模块化卡片结构，并补充数据库结构图、排查路径图、锁机制对比等视觉图谱，以便在演示、教学或现场排障中快速引用。 📌 故障卡片速查：连接失败数据库检查…...

编程日记 2025/5/30 2:19:18

Unity：延迟执行函数：Invoke()

目录 Unity 中的 Invoke() 方法详解什么是 Invoke()？ 基本使用方法使用要点延伸功能 ❗️Invoke 的局限与注意事项在Unity中，延迟执行函数是游戏逻辑中常见的需求，比如： 延迟切换场景延迟播放音效或动画给玩家时间…...

编程日记 2025/5/29 21:12:45

医学影像系统性能优化与调试技术：深度剖析与实践指南

🧑 博主简介：CSDN博客专家、CSDN平台优质创作者，高级开发工程师，数学专业，10年以上C/C, C#, Java等多种编程语言开发经验，拥有高级工程师证书；擅长C/C、C#等开发语言，熟悉Java常用开…...

编程日记 2025/5/26 10:00:38

【HTML5学习笔记1】html标签（上）

web标准（重点） w3c 构成：结构、表现、行为，结构样式行为相分离结构：网页元素整理分类 html 表现：外观css 行为：交互 javascript html标签 1.html语法规范 1） 所有标签都在…...

编程日记 2025/5/29 16:59:24

SearchIndexablesProvider

实现的 provider 根据索引添加文档可知，该 provider 需要继承自 frameworks/base/core/java/android/provider/SearchIndexablesProvider.java 类，并且添加权限 android.permission.READ_SEARCH_INDEXABLES。过滤 Settings 代码，可以轻易找到…...

编程日记 2025/5/26 10:42:29

《k-means 散点图可视化》实验报告

一，实验目的本次实验旨在通过Python编程实现k - means算法的散点图可视化。学习者将编写代码，深入理解聚类分析基本原理与k - means算法实现流程，掌握数据聚类及可视化方法，以直观展示聚类结果。二，实验原理 k-mea…...

编程日记 2025/5/29 15:24:09

数学复习笔记 12

前言现在做一下例题和练习题。矩阵的秩和线性相关。另外还要复盘前面高数的部分的内容。奥，之前矩阵的例题和练习题，也没有做完，行列式的例题和练习题也没有做完。累加起来了。以后还是得学一个知识点就做一个部分的内容，日拱一…...

编程日记 2025/5/24 16:28:43

Web-CSS入门

WEB前端，三部分：HTML部分、CSS部分、Javascript部分。 1.HTML部分：主要负责网页的结构层 2.CSS部分：主要负责网页的样式层 3.JS部分：主要负责网页的行为层 **基本概念** 层叠样式表，Cascading Style Sh…...

编程日记 2025/5/28 15:17:16

Qt/C++编写音视频实时通话程序/画中画/设备热插拔/支持本地摄像头和桌面

一、前言近期有客户提需求，需要在嵌入式板子上和电脑之间音视频通话，要求用Qt开发，可以用第三方的编解码组件，能少用就尽量少用，以便后期移植起来方便。如果换成5年前的知识储备，估计会采用纯网络通信收发…...

编程日记 2025/5/29 20:12:00

Ubuntu快速安装Python3.11及多版本管理

之前文章和大家分享过，将会出一篇专栏（从电脑装ubuntu系统，到安装ubuntu的常用基础软件：jdk、python、node、nginx、maven、supervisor、minio、docker、git、mysql、redis、postgresql、mq、ollama等），目前…...

编程日记 2025/6/1 8:10:21

Qt功能区：Ribbon使用

Ribbon使用 1. Ribbon功能区介绍1.1 样式 2. 基本功能区设置2.1 安装动态库（推荐）2.2 在MainWindow中使用Ribbon2.3 在QWidget中使用SARibbonBar2.4 创建Category和Pannel2.5 ContextCategory 上下文标签创建 2.6 ApplicationButton2.7 QuickAccessBar和…...

编程日记 2025/5/29 14:43:34

【学习心得】Jupyter 如何在conda的base环境中其他虚拟环境内核

如果你在conda的base环境运行了jupyter lab打开了一个ipynb文本，此时选择的内核是base虚拟环境的Python内核，如果我想切换成其他conda虚拟环境来运行这个文件该怎么办？下面我们试着还原一下问题，并且解决问题。【注】这个问题出…...

编程日记 2025/5/26 10:43:16

在微创手术中使用Kinova轻型机械臂进行多视图图像采集和3D重建

在微创手术中，Kinova轻型机械臂通过其灵活的运动控制和高精度的操作能力，支持多视图图像采集和3D重建。这种技术通过机械臂搭载的光学系统实现精准的多角度扫描，为医疗团队提供清晰且详细的解剖结构模型。其核心在于结合先进的传感器配置与重…...

编程日记 2025/5/29 22:50:00

[Java][Leetcode middle] 238. 除自身以外数组的乘积

第一个想法是： 想求出所有元素乘积，然后除以i对应的元素本书；这个想法是完全错误的： nums[I] 可能有0题目要求了不能用除法第二个想法是： 其实写之前就知道会超时，但是我什么都做不到啊！ 双…...

编程日记 2025/5/27 7:02:18

【leetcode】144. 二叉树的前序遍历

给你二叉树的根节点 root ，返回它节点值的前序遍历。示例 1： 输入：root [1,null,2,3] 输出：[1,2,3] 解释： 示例 2： 输入：root [1,2,3,4,5,null,8,null,null,6,7,9] 输出&#xff1a…...

编程日记 2025/5/29 11:33:21

SpringBoot常用注解详解

文章目录 1. 前言2. 核心注解2.1 SpringBootApplication2.2 Configuration2.3 EnableAutoConfiguration2.4 ComponentScan2.5 Bean2.6 Autowired2.7 Qualifier2.8 Primary2.9 Value2.10 PropertySource2.11 ConfigurationProperties2.12 Profile 3. Web开发相关注解3.1 Control…...

编程日记 2025/5/26 11:36:08

中文分词与数据可视化02

jieba 库简介 jieba（结巴分词）是一个高效的中文分词工具，广泛用于中文自然语言处理（NLP）任务。它支持以下功能： 分词：将句子切分为独立的词语。自定义词典：添加专业词汇或新词&am…...

编程日记 2025/5/27 15:22:02

SSH主机密钥验证失败：全面解决方案与技术手册

一、问题本质与安全机制解析 SSH(Secure Shell)的主机密钥验证是安全通信的核心机制，当出现"Host key verification failed"错误时，表明客户端检测到服务器身份异常。这种设计可有效防范中间人攻击(Man-in-the-Middle)，其工作原理…...

编程日记 2025/5/29 0:42:28

buuctf Crypto-鸡藕椒盐味1

1.题目： 公司食堂最新出了一种小吃，叫鸡藕椒盐味汉堡，售价八块钱，为了促销，上面有一个验证码，输入后可以再换取一个汉堡。但是问题是每个验证码几乎都有错误,而且打印的时候倒了一下。小明买到了一个汉堡&a…...

编程日记 2025/5/29 10:20:52

真题卷001——算法备赛

蓝桥杯2024年C/CB组国赛卷 1.合法密码问题描述小蓝正在开发自己的OJ网站。他要求用户的密码必须符合一下条件： 长度大于等于8小于等于16必须包含至少一个数字字符和至少一个符号字符请计算一下字符串，有多少个子串可以当作合法密码。字符串为&am…...

编程日记 2025/5/27 8:22:44

基于MCP的桥梁设计规范智能解析与校审系统构建实践

引言在腾讯云开发者社区中，有多种MCP工具可以用于本系统的开发和优化中，以下是一些潜在的应用场景： ‌PDF解析工具‌：如pdfplumber等，可以用于规范文件的预处理，提取文本和图像信息。‌自然语言处理工具…...

编程日记 2025/5/22 2:16:27

matlab与python问题解析

Python requests乱码的五种解决办法 Python requests乱码的五种解决办法_requests.get乱码-CSDN博客 requests库post请求参数data、json和files的使用 requests库post请求参数data、json和files的使用_requests post data-CSDN博客如何在浏览器中查看POST请求提交的数据内…...

编程日记 2025/5/29 16:59:09

【分布式锁通关指南 10】源码剖析redisson之MultiLock的实现

引言本期我们将把目光聚焦在 Redisson 中另一个颇具代表性的分布式锁实现——MultiLock。它的核心思想是：一次性对多个独立的 RLock 进行加锁或解锁操作，只有当多个锁都成功加锁时才算真正完成锁的获取，一旦有任何一个失败，整体操…...

编程日记 2025/5/29 13:11:49

MySQL 8.0 OCP 1Z0-908 131-140题

Q131.You have upgraded the MySQL binaries from 5.7.28 to 8.0.18 by using an in-place upgrade. Examine the message sequence generated during the first start of MySQL 8.0.18: 。。。[System]。。。/usx/sbin/mysqld (mysqld 8.0.18-commercial) starting as process…...

编程日记 2025/5/29 13:38:04

实战解析MCP-使用本地的Qwen-2.5模型-AI协议的未来？

文章目录目录文章目录前言一、MCP是什么？ 1.1MCP定义 1.2工作原理二、为什么要MCP？ 2.1 打破碎片化的困局 2.2 实时双向通信，提升交互效率 2.3 提高安全性与数据隐私保护三、MCP 与 LangChain 的区别 3.1 目标定位不同 3.…...

编程日记 2025/5/29 12:00:03

从零开始学习three.js（20）：three.js实现天气与时间动态效果（白天，黑夜，下雨，下雪）

基于Three.js的天气与时间动态效果实现本文将通过代码解析，介绍如何使用Three.js实现动态天气（下雨、下雪）和时间（白天、黑夜）切换效果。完整代码基于一个交互式天气模拟项目，支持粒子密度、速度和环境亮…...

编程日记 2025/5/17 5:58:50

sqli-labs靶场23-28a关（过滤）

目录 less23（--过滤） less24（二次注入） less25（or过滤） less25a（or过滤） less26（--和空格过滤报错） less26a（--空格过滤盲注） …...

编程日记 2025/5/22 0:30:54

Sigmoid与Softmax：从二分类到多分类的深度解析

Sigmoid与Softmax：从二分类到多分类的深度解析联系函数性质：二者都是非线性函数，也都是指数归一化函数，可将输入值映射为0到1之间的实数，都能把输出转化成概率分布的形式，在神经网络中常作为激活函数使用。Softmax是Sigmoid的推广：从功能角度看，Softmax函数可视为…...

编程日记 2025/5/29 16:52:55

uni-app x正式支持鸿蒙原生应用开发

DCloud发布的HBuilderX 4.64正式版，支持编译uni-app x项目到鸿蒙平台，实现跨平台开发鸿蒙原生应用。至此，uni-app x 已经完成Android、iOS、鸿蒙、Web、微信小程序等主流平台全覆盖。 uni-app x，是下一代 uni-app，是一…...

编程日记 2025/5/28 22:40:30

【软件推荐——pdf2docx】

pdf2docx Open source Python library for converting PDF to DOCX. https://github.com/ArtifexSoftware/pdf2docx Install pip install pdf2docx使用 from pdf2docx import Converterpdf_file D:\my\c4611_sample_explain.pdf docx_file D:\my\c4611_sample_explain.d…...

编程日记 2025/5/27 0:13:48

相关文章：