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

前端面试宝典---性能优化

news 来源：原创 2025/7/14 22:08:52

一、加载优化

1. 第三方模块放在CDN

例如 leaflet通过cdn引入，这样就不会占用打包体积了

2. prefetch 预加载

例如，之后马上有个场景需要一个图片，我们就可以通过link 的 prefetch 对资源进行预先加载
再例如，我们公司是无网络开发，之前依赖中并没有leaflet库，从外边导入又很麻烦，所以就引入了个leaflet.js，这个就可以用prefetch来进行预加载引入

<link rel="prefetch" href="./115506855.jpg">

3. Promise.race去对比哪个ip响应最快，从而去加载该地方资源

由于公司内网开发，总共就两台服务器，所以可以通过Promise.race去判断哪个服务器响应快，从而去该服务器拿第三方资源

二、缓存

开启强缓存（Cache-Control、Expires）或者协商缓存（ETag 、Last-Modified）

三、图片优化

1. 小图可以使用雪碧图减少网络请求，或者使用iconfont，或者使用base64内联

2. webp格式替代其他图片格式

3. 图片懒加载

IntersectionObserver是浏览器原生提供的构造函数，通过给每个图片绑定观察者，判断是否图片出现在了视口区域。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片懒加载</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet"><style>/* 为图片容器添加样式 */.image-container {margin: 20px;width: 300px;height: 300px;overflow: hidden;border: 1px solid #ccc;display: flex;align-items: center;justify-content: center;}/* 图片样式 */.lazy-image {max-width: 100%;max-height: 100%;}</style>
</head><body class="bg-gray-100 p-4"><h1 class="text-2xl font-bold mb-4">图片懒加载示例</h1><!-- 多个图片容器 --><div class="image-container"><img class="lazy-image" data-src="https://picsum.photos/300/300?random=1" alt="Lazy Loaded Image"></div><div class="image-container"><img class="lazy-image" data-src="https://picsum.photos/300/300?random=2" alt="Lazy Loaded Image"></div><div class="image-container"><img class="lazy-image" data-src="https://picsum.photos/300/300?random=3" alt="Lazy Loaded Image"></div><div class="image-container"><img class="lazy-image" data-src="https://picsum.photos/300/300?random=4" alt="Lazy Loaded Image"></div><div class="image-container"><img class="lazy-image" data-src="https://picsum.photos/300/300?random=5" alt="Lazy Loaded Image"></div><script>// 获取所有需要懒加载的图片const lazyImages = document.querySelectorAll('.lazy-image');// 创建 IntersectionObserver 实例const observer = new IntersectionObserver((entries, observer) => {entries.forEach(entry => {if (entry.isIntersecting) {// 当图片进入视口时const img = entry.target;img.src = img.dataset.src;// 停止观察该图片observer.unobserve(img);}});});// 对每个懒加载图片添加观察lazyImages.forEach(image => {observer.observe(image);});</script>
</body></html>

4. 使用img的srcset，根据不同分辨率显示不同尺寸的照片，减少带宽

四、 CSS优化

1. css写在头部

五、JS优化

1. js写在body下面

2. js用defer放在头部，提前加载时间，又不阻碍dom解析

在这里插入图片描述

六、渲染优化

1. 尽量减少，重绘和重排

2. 用变量缓存dom样式，减少频繁读取

读取dom样式也会触发重绘重排

3. 使用DocumentFragment对dom元素进行操作的缓存，最后统一将元素插入页面

4. 对于动画元素可以单开一个图层

重绘是以图层为单位的，如果图层中某个元素需要重绘，那么整个图层都需要重绘。所以为了提高性
能，我们应该让那些"变化的元素"单独作为一个图层。可以使用will-change:tranform; 这个css属性单独开个图层。

5. 可以用通过ransform: translateZ(0);或者will-change:tranform; 欺骗浏览器开启硬件加速

6. 使用requestAnimationFrame代替setTimeout来实现动画，requestAnimationFrame与浏览器的刷新率同步，可以避免不必要的计算

七、打包优化

1. 开启Cache-loader 实现打包缓存，对于之前读过文件进行缓存，而不需要再去读系统文件

2. thread-loader开启多进程打包，提升打包速度

3. 在生产环境下把source-map关闭

八、VUE优化

1. 路由懒加载

2. keep-alive 缓存组件

3. v-for的key值使用唯一id

4. 对于vue2中不需要的响应式数据，通过Object.freeze冻结，不让vue递归绑定响应式数据

5. v-if 和 v-for不要同时使用

九、用户体验

1. 可以通过A/B试验，对比不同优化方案的实际效果，基于数据决策最佳实践

前端面试宝典---性能优化

一、加载优化 1. 第三方模块放在CDN 例如 leaflet通过cdn引入，这样就不会占用打包体积了 2. prefetch 预加载例如，之后马上有个场景需要一个图片，我们就可以通过link 的 prefetch 对资源进行预先加载再例如，我们公司是无网络开…...

编程日记 2025/7/14 22:08:52

【Springboot进阶】springboot+mybatis+jsqlparser实现数据权限控制

文章目录 SpringBoot JSqlParser MyBatis 数据权限实现方案一、环境准备1. 添加依赖二、用户上下文管理1. 用户上下文持有类三、数据权限拦截器实现1. MyBatis拦截器核心类四、Spring Security集成1. 用户信息注入五、配置项示例application.yml 六、使用示例1. 业务查询…...

编程日记 2025/7/14 16:38:06

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】2.3 窗口函数与高级聚合（ROW_NUMBER()/RANK()/SUM() OVER()）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 PostgreSQL窗口函数与高级聚合：从排序到动态分析的全场景应用1. 窗口函数核心概念解析1.1 窗口函数语法结构1.2 核心组成要素2. 排名窗口函数深度解析2.1 ROW_NUMBER()：唯一顺序排名示例演示2.2 `RANK…...

编程日记 2025/7/14 21:22:54

python全自动爬取m3u8网页视频（各类网站都通用）

当前人工智能，大语言模型的火热，使得python这门编程语言的使用越来越广泛。最近也开始学习了python，发现它在自动化方面的确有得天独厚的优势。python的简单易用，丰富的开源库，完善的生态，使得它有可能成为…...

编程日记 2025/6/29 7:53:05

目录 1. Lars-reportV0.1 report模块介绍 2.Lars-reporterV0.1 reporter项目目录构建 3.Lars-ReporterV0.1 数据表和proto协议环境搭建 4.Lars-ReporterV0.1上报请求业务处理 5.Lars-ReporterV0.1上报请求模块的测试 6.Lars-ReporterV0.2开辟存储线程池-网络存储分离 1. L…...

编程日记 2025/7/14 21:06:06

今天python练习题

目录一、每日一言二、练习题三、效果展示四、下次题目五、总结一、每日一言不要害怕失败，失败可能成为我们前进的动力！ 二、练习题有列表lst [[1,2,3],[4,5,6],[7,8,9]],取出其中的元素1/5/9组成新的列表 # 有列表lst [[1,2,3],[4,5,6],[…...

编程日记 2025/7/14 21:38:37

【leetcode100】最长递增子序列

1、题目描述给你一个整数数组 nums ，找到其中最长严格递增子序列的长度。子序列是由数组派生而来的序列，删除（或不删除）数组中的元素而不改变其余元素的顺序。例如，[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序列。 …...

编程日记 2025/7/14 21:06:05

R绘图|3分钟复现瑞士“苏黎世大学”Nature全球地图——基于R包ggplot2+sf等

一、引言本文我们复现苏黎世大学团队Franois Keck等在Nature最新文章“The global human impact on biodiversity”中的全球地图。之前的图纸是在平面坐标系里面进行绘制，本次我们在罗宾逊投影中进行绘制。整体代码逻辑非常简单，就是采样点坐标系的转换…...

编程日记 2025/7/14 21:30:02

百度系列产品学习

1.react-bmapgl封装逻辑 Map 分析react-bmapgl库中Map组件的封装流程，并以mermaid图展示。首先分析Map组件的核心实现，包括生命周期方法和子组件渲染逻辑。然后研究WrapperHOC和Component基类的封装模式，理解事件绑定和属性处理的通用逻辑。…...

编程日记 2025/7/14 21:41:42

高等数学第三章---微分中值定理与导数的应用（3.4~3.5）

3.4 函数的单调性与曲线的凹凸性一、函数的单调性 1. 函数单调性定义回顾设函数 f ( x ) f(x) f(x) 的定义域为 D D D，区间 I ⊆ D I \subseteq D I⊆D。如果对任意 x 1 , x 2 ∈ I x_1, x_2 \in I x1,x2∈I，当 x 1 < x 2 x_1 < x…...

编程日记 2025/7/14 21:33:05

idea结合CopilotChat进行样式调整实践

一、前言： 本文主要分享在前端开发中借助AI能力调整样式，提高开发效率对应视频【idea结合CopilotChat进行样式调整实践-哔哩哔哩】二、实践： 2-1、现状确认： 表格上方新增了button、swtich、select组件，需要调整…...

编程日记 2025/7/14 21:12:29

668SJBH报刊发行系统

1 前言随着我国信息产业的迅猛发展，手工管理方式已不适应社务管理的要求，报社的日常管理正面临着信息化的挑战，采用计算机管理以提高服务质量和管理水平势在必行。发行管理是社务管理的一个重要组成部分，是报社和客户联系的纽带…...

编程日记 2025/7/14 21:40:00

格式化字符串漏洞

原理在c中，printf函数在打印输出变量时通常不是直接输出，而是用一个占位符如%s printf("the number is %d\n",a);//通常用 printf(a);//而不是直接输出虽然直接输出也没有太大的问题，但如果用格式化输出，没有给后面…...

编程日记 2025/7/14 21:27:25

如何查看电脑IP地址和归属地：全面指南

在数字化时代，了解自己电脑的IP地址和归属地信息变得越来越重要。无论是进行网络故障排查、远程办公设置，还是出于网络安全考虑，掌握这些基本信息都很有必要。本文将详细介绍如何查看电脑的公网IP、内网IP以及归属地信息，并提供常…...

编程日记 2025/7/14 21:14:20

深入解析 MQTT 协议：物联网通信的基石

在当今物联网蓬勃发展的时代，设备之间高效、可靠的通信变得至关重要。MQTT（Message Queuing Telemetry Transport）协议，作为一种轻量级的消息传输协议，正逐渐成为物联网通信的基石，广泛应用于各种场景中。 …...

编程日记 2025/7/14 21:56:34

48变现干货：分销裂变方式提高销量

产品运营活动中，我们可以根据对产品属性和特性，进行选择特定的方法，分销便是一种低成本各方获利的行为之一，但并不一定100%适用所有产品。分销及裂变的概念 “分销”是指通过用户、达人、KOL等非官方渠道，参与产品的推广与销售，并获得相应收益的机制。它是一种以奖励为…...

编程日记 2025/7/14 21:30:46

AI入门：Prompt提示词写法

提示词（Prompt）是人与AI沟通的桥梁，它不是冰冷的代码指令，而是一场充满智慧与温度的对话。掌握精妙的提示词撰写技巧，能让AI更精准地理解需求，高效输出理想结果。其核心就在于——将AI视作身边真实的朋友、…...

编程日记 2025/7/14 21:20:05

MySQL复合查询全解析：从基础到多表关联与高级技巧

前言： 本文主要讲解了在MySQL中的复合查询，下面是关于本文章所需要数据的建表语句创建表的语句： DROP database IF EXISTS scott; CREATE database IF NOT EXISTS scott DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;USE scott;D…...

编程日记 2025/6/29 6:54:36

移动 Trae 目录到 E 盘 - 解决 C 盘空间不足问题

移动 Trae 目录到 E 盘 - 解决 C 盘空间不足问题 1️⃣ 准备工作2️⃣ 移动原始文件夹3️⃣ 创建符号链接4️⃣ 清理原始文件夹5️⃣ 验证操作📝 注意事项🔄 常见问题排查1️⃣ 准备工作关闭 Trae 程序：确保所有 Trae 相关进程已完全退出（包括后台服务）。创建目标文件夹…...

编程日记 2025/7/14 21:21:16

【AI论文】COMPACT：从原子级到复杂级的组合式视觉能力调优

摘要：多模态大语言模型（MLLM）擅长简单的视觉语言任务，但在面对需要多种能力的复杂任务时却很吃力，例如同时识别物体、计算数量和理解它们的空间关系。这可能部分是由于视觉指令调整（VIT）这一ML…...

编程日记 2025/7/14 21:08:07

【leetcode】队列 + 宽搜，树形结构层序遍历的基础与变化

前言 🌟🌟本期讲解关于力扣的几篇题解的详细介绍~~~ 🌈感兴趣的小伙伴看一看小编主页：GGBondlctrl-CSDN博客 🔥 你的点赞就是小编不断更新的最大动力 🎆那么废话不…...

编程日记 2025/7/14 21:18:10

Spring AI聊天模型API：轻松构建智能聊天交互

Spring AI聊天模型API：轻松构建智能聊天交互前言在当今数字化时代，智能聊天功能已成为众多应用程序提升用户体验、增强交互性的关键要素。Spring AI的聊天模型API为开发者提供了一条便捷通道，能够将强大的AI驱动的聊天完成功能无缝集成到…...

编程日记 2025/7/14 21:16:17

力扣-链表-2 两数相加

思路两个指针同时遍历，维护一个进位值，同时还要维护第一个链表的前序，如果第二个链表比第一个长的时候，利用这个前序指针把第二个链表多余的内容，添加到第一个链表的末尾代码 class Solution {public ListNode ad…...

编程日记 2025/7/14 21:29:12

leetcode 59. 螺旋矩阵 II

题目描述代码： class Solution { public:vector<vector<int>> generateMatrix(int n) {vector<vector<int>> res(n,vector<int>(n,0));int num 1;int len n;int start 0;while(len > 0){int row start;int column start;if…...

编程日记 2025/7/14 21:04:18

【操作系统】深入理解内存管理：从虚拟内存到OOM Killer

引言在现代计算机系统中，内存管理是操作系统最核心的功能之一。本文将围绕内存管理的几个关键概念展开讨论，包括虚拟内存机制、内存分配原理、OOM Killer的工作机制以及不同系统架构下的内存限制。虚拟内存：突破物理限制的关键技术虚拟…...

编程日记 2025/7/14 21:55:50

《政治最后的日子》章节

政治与中世纪教会的类比性衰落作者提出现代民族国家正重复中世纪教会的衰落轨迹： 两者均曾作为社会组织核心存在约5个世纪晚期都成为生产力阻碍（中世纪教会税收负担/现代国家官僚低效） 末期均出现管理者普遍腐败与公众蔑视（…...

编程日记 2025/7/14 22:02:37

Rust Trait 学习

概述特征（trait）是rust中的概念，类似于其他语言中的接口（interface）。特征定义了一个可以被共享的行为，只要实现了特征，你就能使用该行为。如果不同的类型具有相同的行为，那么我们…...

编程日记 2025/7/14 21:12:28

基于开源链动2+1模式AI智能名片S2B2C商城小程序的爆品力构建研究

摘要：在兴趣电商生态中，爆品力已成为品牌实现指数级增长的核心竞争力。本文以开源链动21模式AI智能名片S2B2C商城小程序为技术载体，结合抖音平台的内容传播特性，提出“需求挖掘-技术赋能-内容转化”三位一体的爆品力构建模型。通过…...

编程日记 2025/7/14 21:20:06

【SimSession 】2：PacedReceiver:支持与 PacedVideoSender 本地联调

单独的基于libuv的发送能力，如何进一步在SimSession内集成使用？打算进行本地模拟俩线程，发送和接收，进行测试：单独的发送测试【SimSession】1：将视频发送逻辑与 libuv 事件循环集成是一个典型的并发设计问题分析后，D:\XTRANS\thunderbolt\ayame\zhb-bifrost\player-…...

编程日记 2025/7/14 22:02:35

5 什么情况下需要微调

这个问题其实很重要，因为现代大模型训练出来已经非常强大，可能真的不需要微调。我们可以通过 RAG 或提示词工程来实现目标。需要微调的场景与替代方案分析微调(Fine-tuning)确实不是所有场景都必需的，特别是考虑到现代大型语言模型(LLM…...

编程日记 2025/7/14 21:04:18

Docker 渡渡鸟镜像同步站使用教程

Docker 渡渡鸟镜像同步站使用教程 🚀 介绍 Docker.aityp.com（渡渡鸟镜像同步站）是一个专注于为国内开发者提供 Docker 镜像加速和同步服务的平台。它通过同步官方镜像源（如 Docker Hub、GCR、GHCR 等），为…...

编程日记 2025/7/14 21:43:59

位图的实现和拓展

一：位图的介绍 ①：需要位图的场景给40亿个不重复的无符号整数，没排过序。给一个无符号整数，如何快速判断一个数是否在这40亿个数中？ 要判断一个数是否在某一堆数中，我们可能会想到如下方法： A…...

编程日记 2025/7/14 21:50:21

字符串问题c++

题目描述小 Z 有一个字符串 s，他对这个字符串会进行如下两个操作： 1 p c 把字符串的第 p 个字符改成 c2 l r 把 s 的第 l 个字符到第 r 个字符按顺序输出。这里『第 i 个字符』的下标计数从 1 开始，例如，a 是字符串 abc 的第…...

编程日记 2025/7/14 21:29:11

Redis事务

Redis中的事务是指提供一种将多个命令打包到一起，一次性按照顺序执行的机制。Redis在执行事务期间，不会接收处理其他操作命令。 Redis事务有以下局限性无回滚机制：如果某个命令执行失败，不会影响其他命令的执行，因此…...

编程日记 2025/7/4 1:52:00

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】3.3 异常值识别（Z-score法/IQR法/业务规则法）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 PostgreSQL数据分析实战：数据质量分析之异常值识别（Z-score法 / IQR法 / 业务规则法）3.3 异常值识别3.3.1 Z-score法3.3.2 IQR法3.3.3 业…...

编程日记 2025/7/9 1:00:54

MCP底层协议完整通信过程

2025 年是智能体的元年，也注定是智能体集中爆发的一年！两个互联领域的重大挑战：第一、 Agent 与 Tools （工具）的交互 Agent 需要调用外部工具和 API...

编程日记 2025/6/28 20:05:00

C语言指针(5)

目录 1.冒泡排序 2.二级指针 3.指针数组 4.指针数组模拟二级数组 1.冒泡排序 1.1 基本概念冒泡排序（Bubble Sort） 是一种简单的排序算法，它重复地遍历要排序的数列，一次比较两个元素，如果它们的顺序错误就把它…...

编程日记 2025/7/8 20:14:34

MYSQL-联合查询

经过上节课，我们学会了如何设计表以及了解到各种范式，这节课就请大家和小L一起来学习设计表之后如何使用 1.为什么要使用联合查询在数据设计时由于范式的要求，数据被拆分到多个表中，那么要查询⼀个条数据的完整信息&#xff0c…...

编程日记 2025/6/29 7:50:10

一篇撸清 Http,SSE 与 WebSocket

HTTP,SSE 和WebSocket都是网络传输的协议，本篇快速介绍三者的概念和比较。 SSE（Server-Sent Events）是什么？ SSE（Server-Sent Events），服务器发送事件，是一种基于 HTTP 的轻量级协议，允许服务器主动向客户端（如浏览器）推送实时数据。它设计用于单向通信（服务器到…...

编程日记 2025/6/28 20:04:58

系统架构设计师：设计模式——行为设计模式

一、行为设计模式行为模式涉及算法和对象间职责的分配。行为模式不仅描述对象或类的模式，还描述它们之间的通信模式。这些模式刻画了在运行时难以跟踪的、复杂的控制流。它们将用户的注意力从控制流转移到对象间的联系方式上来。行为类模式使用继承机制在类间分…...

编程日记 2025/7/12 8:06:30

OpenCV入门指南：从环境搭建到第一个图像处理程序

引言你是否想让计算机"看懂"世界？OpenCV（Open Source Computer Vision Library）正是打开计算机视觉大门的钥匙。本文将带你从零开始搭建开发环境，理解图像处理核心概念，并完成第一个OpenCV程序。无论你是想…...

编程日记 2025/6/29 5:11:52

基于STM32的温湿度光照强度仿真设计(Proteus仿真+程序设计+设计报告+讲解视频）

这里写目录标题 **1.****主要功能****2.仿真设计****3.程序设计****4.设计报告****5.下载链接** 基于STM32的温湿度光照强度仿真设计(Proteus仿真程序设计设计报告讲解视频） 仿真图Proteus 8.9 程序编译器：keil 5 编程语言：C语言设计编号…...

编程日记 2025/6/29 5:19:34

4个纯CSS自定义的简单而优雅的滚动条样式

今天发现 uni-app 项目的滚动条不显示，查了下原来是设置了 ::-webkit-scrollbar {display: none; } 那么怎么用 css 设置滚动条样式呢？ 定义滚动条整体样式‌ ::-webkit-scrollbar 定义滚动条滑块样式 ::-webkit-scrollbar-thumb 定义滚动条轨道样式‌…...

编程日记 2025/6/29 5:41:49

修复笔记：SkyReels-V2项目中的 from_config 警告

#工作记录 Windows避坑部署SkyworkAI/SkyReels-V2昆仑万维电影生成模型_skyreels-v2本地部署-CSDN博客一、项目背景项目名称：SkyReels-V2 项目简介：由昆仑万维开源的全球首个无限时长电影生成模型，支持文本到视频、图像到视频等多种生成方…...

编程日记 2025/6/29 8:01:46

[硬件电路-11]：模拟电路常见元器件 - 什么是阻抗、什么是输入阻抗、什么是输出阻抗？阻抗、输入阻抗与输出阻抗的全面解析

1. 阻抗（Impedance） 定义：阻抗是电路或元件对交流信号（AC）流动的阻碍能力，用符号Z表示，单位为欧姆（Ω）。它综合了电阻（R）、电感（L&am…...

编程日记 2025/6/29 7:16:15

MCP协议与Dify集成教程

一、MCP协议概述 MCP（Model Control Protocol）是一种新兴的开放协议，为大型语言模型（LLM）与外部应用之间构建了双向通信通道。它就像是AI的"USB-C"接口，帮助模型发现、理解并安全调用各种外部工…...

编程日记 2025/7/3 16:01:30

flink常用算子整理

文章目录前言1.重新分配(即打散)2.合并流的算子3.算子链操作4.侧边输出(目前只有一种)5.键控进行分区6.输出算子7.其他基础操作算子8.其他常用的算子9.Flink窗口等情况10.窗口举例前言提示：以下是本篇文章正文内容，下面案例可供参考 1.重新分配(即打散) 2.合并流的算子 3…...

编程日记 2025/7/10 22:28:28

【SimSession】1：将视频发送逻辑与 libuv 事件循环集成是一个典型的并发设计问题

之前对SimSession的信令进行测试，echo可以与relay联通，现在单独提取已经集成了webrtc的发送模块及libuv框架与SimSession和echo集成：采集、编码和发送之前在pacedsender内部实现的现在从pacedsender中去掉采集、编码，放在session中运行。而pacedsender仅暴露发送部分：…...

编程日记 2025/6/29 8:21:02

Circular Plot系列(五): circle plot展示单细胞互作

这是我们circle系列的最后一节，我想常见的弦图是绕不开的，所以最后从前面介绍的circle plot思路，做一遍弦图。其实前面的内容如果消化了，plot互作弦图也就不成什么问题了。效果如下： #cellchat提取互作结果&#xff…...

编程日记 2025/6/29 8:12:59

LLama-v2 权重下载

地址：llama模型官方github仓库：llama仓库注意点网络代理位置：美国下面的国家选择 United States 克隆仓库后运行bash download.sh输入邮箱收到的URL选择要下载的权重等待下载完成即可有问题留言！！&#xff01…...

编程日记 2025/6/29 8:11:52