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

Next.js 14 性能优化：从首屏加载到运行时优化的最佳实践

news 来源：原创 2025/5/19 5:13:26

在现代 Web 应用中，性能优化直接影响用户体验和业务转化。Next.js 14 提供了多种内置的性能优化特性，今天我们就来深入探讨如何充分利用这些特性，以及一些实用的优化技巧。

图片和字体优化

1. 图片优化

Next.js 的 Image 组件供了强大的图片优化功能：

// components/OptimizedImage.tsx
import Image from 'next/image';
import { useState } from 'react';interface OptimizedImageProps {src: string;alt: string;width: number;height: number;
}export function OptimizedImage({src,alt,width,height
}: OptimizedImageProps) {const [isLoading, setLoading] = useState(true);return (<div className="relative overflow-hidden"><Imagesrc={src}alt={alt}width={width}height={height}quality={75} // 默认图片质量placeholder="blur" // 使用模糊占位blurDataURL="data:image/jpeg;base64,..." // 生成的 base64 图片className={`duration-700 ease-in-out${isLoading ? 'scale-110 blur-2xl' : 'scale-100 blur-0'}`}onLoadingComplete={() => setLoading(false)}priority={false} // 是否优先加载/></div>);
}// 使用自定义图片加载器
const imageLoader = ({ src, width, quality }) => {return `https://your-cdn.com/${src}?w=${width}&q=${quality || 75}`;
};// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {images: {loader: 'custom',loaderFile: './lib/imageLoader.ts',deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],formats: ['image/webp'],},
};

2. 字体优化

Next.js 14 提供了内置的字体优化：

// app/fonts.ts
import { Inter, Roboto_Mono } from 'next/font/google';export const inter = Inter({subsets: ['latin'],display: 'swap',preload: true,fallback: ['system-ui', 'arial'],adjustFontFallback: true, // 自动调整回退字体
});export const roboto_mono = Roboto_Mono({subsets: ['latin'],display: 'swap',
});// app/layout.tsx
import { inter } from './fonts';export default function RootLayout({children,
}: {children: React.ReactNode;
}) {return (<html lang="en" className={inter.className}><body>{children}</body></html>);
}// 自定义字体加载
import localFont from 'next/font/local';const myFont = localFont({src: [{path: '../public/fonts/font-regular.woff2',weight: '400',style: 'normal',},{path: '../public/fonts/font-bold.woff2',weight: '700',style: 'normal',},],display: 'swap',preload: true,
});

动态导入和代码分割

1. 组件动态导入

// components/DynamicComponent.tsx
import dynamic from 'next/dynamic';
import { Suspense } from 'react';// 基础动态导入
const DynamicHeader = dynamic(() => import('./Header'), {loading: () => <p>Loading...</p>,ssr: true, // 是否服务端渲染
});// 带有自定义加载的动态导入
const DynamicChart = dynamic(() => import('./Chart').then(mod => mod.Chart),{loading: () => <ChartSkeleton />,ssr: false, // 禁用服务端渲染}
);// 使用 Suspense 包裹动态组件
export function DashboardPage() {return (<div><DynamicHeader /><Suspense fallback={<ChartSkeleton />}><DynamicChart /></Suspense></div>);
}

2. 路由分组和懒加载

// app/(marketing)/layout.tsx
import { Suspense } from 'react';// 营销相关页面的布局
export default function MarketingLayout({children
}: {children: React.ReactNode;
}) {return (<div className="marketing-layout"><Suspense fallback={<NavSkeleton />}><Navigation /></Suspense>{children}</div>);
}// app/(dashboard)/layout.tsx
// 仪表板相关页面的布局
export default function DashboardLayout({children
}: {children: React.ReactNode;
}) {return (<div className="dashboard-layout"><Suspense fallback={<SidebarSkeleton />}><Sidebar /></Suspense><main>{children}</main></div>);
}

缓存策略优化

1. 数据缓存

// lib/cache.ts
import { cache } from 'react';
import { Redis } from '@upstash/redis';const redis = new Redis({url: process.env.REDIS_URL,token: process.env.REDIS_TOKEN,
});// 使用 React 缓存
export const getCachedData = cache(async (key: string) => {// 首先尝试从 Redis 获取const cached = await redis.get(key);if (cached) return JSON.parse(cached);// 如果没有缓存，则获取新数据const data = await fetchData(key);// 存入 Redisawait redis.set(key, JSON.stringify(data), {ex: 3600 // 1小时过期});return data;
});// 使用示例
async function ProductPage({ id }: { id: string }) {const product = await getCachedData(`product:${id}`);return <ProductDetails product={product} />;
}

2. 静态生成优化

// app/products/[id]/page.tsx
import { generateMetadata } from 'next';// 生成静态路由
export async function generateStaticParams() {const products = await getTopProducts();return products.map((product) => ({id: product.id,}));
}// 静态元数据
export async function generateMetadata({ params }: {params: { id: string }
}): Promise<Metadata> {const product = await getProduct(params.id);return {title: product.name,description: product.description,openGraph: {images: [product.image],},};
}// 页面组件
export default async function ProductPage({params
}: {params: { id: string }
}) {const product = await getProduct(params.id);return (<div><h1>{product.name}</h1><ProductDetails product={product} /></div>);
}

首屏加载优化

1. 流式渲染

// app/page.tsx
import { Suspense } from 'react';
import { headers } from 'next/headers';async function SlowComponent() {const headersList = headers();const userAgent = headersList.get('user-agent');// 模拟慢速数据加载await new Promise(resolve => setTimeout(resolve, 2000));return (<div><p>User Agent: {userAgent}</p></div>);
}export default function HomePage() {return (<div><h1>即时加载的内容</h1><Suspense fallback={<LoadingSkeleton />}><SlowComponent /></Suspense><Suspense fallback={<CardsSkeleton />}><PopularProducts /></Suspense><Suspense fallback={<FeedSkeleton />}><RecentActivity /></Suspense></div>);
}

2. 预加载数据

// lib/prefetch.ts
export async function prefetchData() {// 预加载关键数据const promises = [prefetchNavigation(),prefetchUserData(),prefetchPopularProducts(),];await Promise.all(promises);
}// app/layout.tsx
export default async function RootLayout({children
}: {children: React.ReactNode
}) {// 在布局组件中预加载数据await prefetchData();return (<html><body>{children}</body></html>);
}

Core Web Vitals 优化

1. 性能监控

// lib/analytics.ts
export function reportWebVitals({id,name,label,value,
}: {id: string;name: string;label: string;value: number;
}) {// 发送性能指标到分析服务fetch('/api/analytics', {method: 'POST',body: JSON.stringify({id,name,label,value,// 添加其他上下文信息page: window.location.pathname,timestamp: Date.now(),}),});
}// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {experimental: {instrumentationHook: true,},
};// instrumentation.ts
export function register() {if (process.env.NEXT_RUNTIME === 'nodejs') {// 服务端监控require('./monitoring/server').setup();}
}

2. 性能优化实践

// components/OptimizedList.tsx
import { useVirtualizer } from '@tanstack/react-virtual';
import { useIntersectionObserver } from '@/hooks/useIntersectionObserver';// 虚拟列表优化
export function OptimizedList({ items }: { items: any[] }) {const parentRef = useRef<HTMLDivElement>(null);const virtualizer = useVirtualizer({count: items.length,getScrollElement: () => parentRef.current,estimateSize: () => 50,});return (<div ref={parentRef} className="h-[500px] overflow-auto"><divstyle={{height: `${virtualizer.getTotalSize()}px`,position: 'relative',}}>{virtualizer.getVirtualItems().map((virtualItem) => (<divkey={virtualItem.key}style={{position: 'absolute',top: 0,left: 0,width: '100%',height: `${virtualItem.size}px`,transform: `translateY(${virtualItem.start}px)`,}}><ListItem item={items[virtualItem.index]} /></div>))}</div></div>);
}// 图片懒加载优化
export function LazyImage({ src, alt }: { src: string; alt: string }) {const imgRef = useRef<HTMLImageElement>(null);const { isIntersecting } = useIntersectionObserver(imgRef);return (<imgref={imgRef}src={isIntersecting ? src : ''}alt={alt}loading="lazy"decoding="async"/>);
}

3. 构建优化

// next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({enabled: process.env.ANALYZE === 'true',
});/** @type {import('next').NextConfig} */
const nextConfig = {// 优化构建配置poweredByHeader: false,compress: true,productionBrowserSourceMaps: false,// 优化图片配置images: {minimumCacheTTL: 60,deviceSizes: [640, 750, 828, 1080, 1200, 1920],imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],},// 实验性功能experimental: {optimizeCss: true, // 启用 CSS 优化scrollRestoration: true, // 启用滚动位置恢复serverActions: true, // 启用服务端操作},// webpack 配置webpack: (config, { dev, isServer }) => {// 优化生产环境构建if (!dev && !isServer) {config.optimization.splitChunks = {chunks: 'all',minSize: 20000,maxSize: 244000,minChunks: 1,maxAsyncRequests: 30,maxInitialRequests: 30,cacheGroups: {defaultVendors: {test: /[\\/]node_modules[\\/]/,priority: -10,reuseExistingChunk: true,},default: {minChunks: 2,priority: -20,reuseExistingChunk: true,},},};}return config;},
};module.exports = withBundleAnalyzer(nextConfig);

写在最后

Next.js 14 提供了丰富的性能优化工具和特性。在实际应用中，需要注意以下几点：

合理使用图片和字体优化
实施有效的代码分割策略
优化数据缓存和预加载
监控和优化 Core Web Vitals
持续进行构建优化

在下一篇文章中，我们将深入探讨 Next.js 14 的部署与运维策略。如果你有任何问题或建议，欢迎在评论区讨论！

如果觉得这篇文章对你有帮助，别忘了点个赞 👍

Next.js 14 性能优化：从首屏加载到运行时优化的最佳实践

在现代 Web 应用中，性能优化直接影响用户体验和业务转化。Next.js 14 提供了多种内置的性能优化特性，今天我们就来深入探讨如何充分利用这些特性，以及一些实用的优化技巧。图片和字体优化 1. 图片优化 Next.js 的 Image 组件供了强大的图…...

编程日记 2025/5/19 5:13:26

T-SQL语言的软件开发工具

T-SQL：微软SQL Server的强大工具引言在现代软件开发中，数据的管理与操作是不可或缺的一部分，而T-SQL（Transact-SQL）作为微软SQL Server的重要组成部分，承担着数据查询、数据操作、数据插入和数据删除等…...

编程日记 2025/5/18 2:16:15

Ubuntu环境 nginx.conf详解（二）

1、nginx.conf 结构详解： http 块：用于配置 HTTP 服务器的相关设置，包括处理 HTTP 和 HTTPS。 stream 块：用于配置 TCP/UDP 代理服务器，适用于需要进行四层负载均衡的情况。 ... # 全局块 events {...} …...

编程日记 2025/5/19 5:04:53

【Linux】centos7安装php7.4

环境说明本文档在服务器不能连接互联网的情况下，进行安装php7.4及其扩展。操作系统：centos7.6 架构：X86_64 一、安装依赖（可选） 说明：服务器能联网就可以通过 yum install 命令下载对应php需要的依赖。…...

编程日记 2025/5/16 21:21:42

OpenHarmony-6.IPC/RPC组件

IPC/RPC组件机制 1.基本概念 IPC：设备内的进程间通信（Inter-Process Communication）。 RPC：设备间的进程间通信（Remote Procedure Call）。 IPC/RPC用于实现跨进程通信，不同的是前者使用Binder驱…...

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

自然语言处理与知识图谱的融合与应用

目录前言1. 知识图谱与自然语言处理的关系1.1 知识图谱的定义与特点1.2 自然语言处理的核心任务1.3 二者的互补性 2. NLP在知识图谱构建中的应用2.1 信息抽取2.1.1 实体识别2.1.2 关系抽取2.1.3 属性抽取 2.2 知识融合2.3 知识推理 3. NLP与知识图谱融合的实际应用3.1 智能问答…...

编程日记 2025/5/13 2:47:43

Pytorch | 利用VA-I-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击

Pytorch | 利用VA-I-FGSM针对CIFAR10上的ResNet分类器进行对抗攻击 CIFAR数据集VA-I-FGSM介绍相关定义算法流程 VAI-FGSM代码实现VAI-FGSM算法实现攻击效果代码汇总vaifgsm.pytrain.pyadvtest.py 之前已经针对CIFAR10训练了多种分类器： Pytorch | 从零构建AlexNet对…...

编程日记 2025/5/18 17:42:36

【Java基础面试题028】Java中的hashCode和equals方法，与==操作符有什么区别？

回答重点 hashcode、equals 和都是Java中用于比较对象的三种方式，但是它们的用途和实现还是有挺大区别的。 hashcode用于散列存储结构中确定对象的存储位置。可用于快速比较两个对象是否不同，因为如果它们的哈希码不同，那么它们肯定不相等…...

编程日记 2025/5/15 6:53:59

[ThinkPHP]5.0.23-Rce 1

[ThinkPHP]5.0.23-Rce 1 根据题目知道这是一个5.0.23的PHP RCE，话不多说直接上扫描器检测出Payload url地址： ?scaptcha&test-1 Post表单参数: _method__construct&filter[]phpinfo&methodget&server[REQUEST_METHOD]1HackBar构造p…...

编程日记 2025/5/19 4:47:22

ByConity BSP 解锁数据仓库新未来

文章目录前言BSP 模式简介基于 TPC-DS 的 ELT 活动测试环境登录 ECS数据查询配置执行 02.sqlsql解释：1. 第一步：创建 wscs 临时表2. 第二步：创建 wswscs 临时表3. 第三步：对比 2001 年和 2002 年的数据子查询 1：提取…...

编程日记 2025/5/11 9:54:04

应对 Google Play 政策违规：开发者账号被终止解除指南

目录解封指南申诉文案谷歌问题授权书 1、授权书标题及双方信息 2、游戏信息 3、授权内容 4、双方义务与责任 5、费用与支付 5、保密条款 6、争议解决 8、其他条款 9、签字盖章 10、日期相关推荐解封指南由于开发人员的疏忽，移除了读写权限的动态申请，使…...

编程日记 2025/5/19 4:49:17

【ES6复习笔记】Map（14）

概念 Map 是 JavaScript 中的一种数据结构，它允许你存储键值对，并且可以通过键来访问对应的值。在本教程中，我们将学习如何声明、添加、删除、获取和遍历 Map 集合。 ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。…...

编程日记 2025/5/17 6:56:37

重温设计模式--8、命令模式

文章目录命令模式的详细介绍C 代码示例C代码示例2 命令模式的详细介绍定义与概念命令模式属于行为型设计模式，它旨在将一个请求封装成一个对象，从而让你可以用不同的请求对客户端进行参数化，将请求的发送者和接收者解耦，并且能…...

编程日记 2025/5/13 3:34:36

人工智能ACA（七）——计算机视觉基础

一、自然语言处理基本介绍 1. 自然语言处理的定义 1-1 自然语言人类使用的在社会生活中自然形成的语言 1-2 自然语言处理目标是让计算机能够理解、解析、生成和处理人类的自然语言包含自然语言理解和自然语言生成两部分组成 2. 自然语言处理的发展趋势 3.自然语言处理…...

编程日记 2025/5/13 11:07:58

RCE常见姿势

文章目录常见漏洞执行函数：1.系统命令执行函数2.代码执行函数命令拼接符读取文件命令绕过：空格过滤绕过关键字绕过长度过滤绕过无参数命令执行绕过无字母数字绕过利用%0A截断利用回溯绕过利用create_function()代码注入无回显RCE1.反弹shell2.dnslog外…...

编程日记 2025/5/16 21:50:47

CSS系列（36）-- Containment详解

前端技术探索系列：CSS Containment详解 ⚡ 致读者：探索性能优化的艺术 👋 前端开发者们， 今天我们将深入探讨 CSS Containment，这个强大的性能优化特性。基础概念 🚀 包含类型 /* 布局包含 */ .layo…...

编程日记 2025/5/17 21:22:51

golang，多个proxy拉包的处理逻辑

在Go语言中，当你设置了多个代理（GOPROXY）时，Go工具链会按照你设置的顺序尝试每个代理。如果第一个代理失败，它会尝试下一个代理，直到成功获取到模块或者所有代理都尝试失败。最后，如果所有代理都…...

编程日记 2025/5/19 5:03:24

Vue使用Tinymce 编辑器

目录一、下载并重新组织tinymce结构二、使用三、遇到的坑一、下载并重新组织tinymce结构下载 npm install tinymce^7 or yarn add tinymce^7重构目录在node_moudles里找到tinymce文件夹，把里面文件拷贝一份放到public下，如下： -- pub…...

编程日记 2025/5/18 1:04:52

神经网络-AlexNet

AlexNet是在2012年的ImageNet竞赛后，整理发表的文章，也是对CNN网络的衍生。网络结构 AlexNet网络结构如下图所示，网络分为了上下两部分，对应两个不同的GPU训练，可以更好的利用GPU算力。只有在特殊的网络层后&#x…...

编程日记 2025/5/19 5:10:16

《人工智能：洞察材料微观与宏观性能关系的神奇之眼》

在材料科学的广袤天地里，一个前沿且充满魅力的课题正吸引着全球科研人员的目光——如何借助人工智能的强大力量，精准模拟材料微观结构与宏观性能之间那错综复杂的关系。这不仅是解开材料性能之谜的关键钥匙，更是推动从航空航天到电子芯片等众…...

编程日记 2025/5/19 4:49:17

count(1)、count(_)与count(列名)的区别？

大家好，我是锋哥。今天分享关于【count(1)、count(_)与count(列名)的区别？】面试题。希望对大家有帮助； count(1)、count(_)与count(列名)的区别？ 1000道互联网大厂Java工程师精选面试题-Java资源分享网在 SQL 中&#xff0c…...

编程日记 2025/5/13 10:02:29

Docker 镜像加速访问方案

在数字化时代，Docker以其轻量级和便捷性成为开发者和运维人员的首选容器技术。然而自2023年5月中旬起，Docker Hub 的访问速度较慢或不稳定，这对依赖Docker Hub拉取镜像的用户来说无疑是一个挑战。本文将提供 Docker Hub 访问的一系列替代方案…...

编程日记 2025/5/19 5:01:53

菜鸟带新鸟——基于EPlan2022的部件库制作（3D）

设备逻辑的概念： 可在布局空间中和其它对象上放置对象。可将其它对象放置在 3D 对象上。已放置的对象分到组件的逻辑结构中。将此属性的整体标识为设备逻辑。可使用不同的功能创建和编辑设备逻辑。设备的逻辑定义定义 / 旋转 / 移动 / 翻转：组…...

编程日记 2025/5/12 13:56:20

笔记工具--MD-Markdown的语法技巧

MD格式，全称为Markdown格式，是一种轻量级标记语言文件，主要用于创建格式化文本。以下是对MD格式的详细解释： 一、定义与特点定义：MD文件是一种纯文本格式的文件，使用简单的符号或语法来标记标题、列表、…...

编程日记 2025/5/17 7:57:08

【ES6复习笔记】生成器（11）

什么是生成器函数生成器函数是一种特殊的函数，它可以在执行过程中暂停并保存当前状态，然后在需要时恢复执行。生成器函数通过 yield 关键字来实现暂停和恢复执行的功能。生成器函数的基本用法定义生成器函数：使用 function* 关键字来定…...

编程日记 2025/5/17 19:07:19

【解决报错】AttributeError: ‘NoneType‘ object has no attribute ‘group‘

学习爬虫时，遇到如下报错： 报错原因： 正则表达式的 search 或 finditer 方法没有找到任何匹配项，可能是换行符处理不当等。解决方法如下： 在正则表达式末尾加上re.S即可，re.S是一个编译标志&#xff0c…...

编程日记 2025/4/2 22:37:11

UE5.3 C++ Ceiusm中的POI 制作3DUI 结合坐标转化

一.核心思路WidgetComponent CesiumGloberAnchor 二.先制作POI 创建C Actor来制作，APOI。直接上代码 #pragma once#include "CoreMinimal.h" #include "GameFramework/Actor.h" #include "CesiumGlobeAnchorComponent.h" #includ…...

编程日记 2025/5/19 5:08:33

机器学习系列（一）——K-近邻算法

1. 算法定义 KNN 算法属于基于实例的机器学习方法。在对未知数据进行分类或回归之前，我们不需要对数据进行显式的训练或建立复杂的模型。它的核心思想是：对一个新的样本点，寻找在特征空间上与其最相似的 K 个已知数据点，采取“投…...

编程日记 2025/5/17 1:15:00

Android unitTest 单元测试用例编写(初始)

文章目录了解测试相关库导入依赖库新建测试文件示例执行查看结果网页结果其他本片讲解的重点是unitTest，而不是androidTest哦了解测试相关库 androidx.compose.ui:ui-test-junit4: 用于Compose UI的JUnit 4测试库。它提供了测试Compose UI组件的工具和API。 and…...

编程日记 2025/5/19 4:57:56

uni-app 跨端开发精美开源UI框架推荐

🎀🎀🎀uni-app 跨端开发系列 🎀🎀🎀 一、uni-app 组成和跨端原理二、uni-app 各端差异注意事项三、uni-app 离线本地存储方案四、uni-app UI库、框架、组件选型指南五、uni-app 蓝牙开发六、uni-app …...

编程日记 2025/5/18 8:42:29

【微服务】微服务之Feign 与 Ribbon

文章目录强烈推荐引言优点Feign示例什么是Ribbon？Ribbon 的优点Netflix Feign 和 Ribbon整合Feign 与 Ribbon 的关系Feign 与 Ribbon 结合使用的示例配置文件（application.yml）说明： Feign 与 Ribbon 结合使用的应用场景1. 动态服…...

编程日记 2025/5/18 14:31:37

【C语言】成绩等级制

将成绩分为A、B、C、D、E等级。具体的等级划分如下： A：90分及以上B：80分到89分C：70分到79分D：60分到69分E：60分以下 #include <stdio.h> int main() {float score 0;printf("请输入学生成绩&a…...

编程日记 2025/5/19 5:10:16

Flutter 插件开发入门

1、初识 Flutter Plugin Flutter 的插件类似于我们在 Android 中说的第三方库，通过使用插件，可以借助插件中的代码实现一些额外功能。 Flutter 的插件以 package 的形式存在，使用 package 的目的是为了达到模块化，可以让代码被共…...

编程日记 2025/5/18 10:01:16

2024.12.25在腾讯云服务器上使用docker部署flask

2024.12.25在腾讯云服务器上使用docker部署flask 操作系统：Ubuntu 根据腾讯云的说明文档安装 Docker 并配置镜像加速源，注意需要安装腾讯云的加速源，使用官网的加速源连接极其不稳定，容易导致运行失败。使用哪个公司的云服务器就…...

编程日记 2025/5/18 0:00:13

2024 年12月英语六级CET6听力原文(Lecture部分)

2024 年12月英语六级CET6听力原文(Long Conersation和Passage) 1 牛津大学关于普遍道德准则的研究及相关观点与建议译文 2 食物颜色对味觉体验及大脑预期的影响译文 3 财务资源对意义与幸福之间关系的影响研究译文...

编程日记 2025/5/7 22:07:19

centos 释放系统预留内存并关闭Kdump服务

背景：Kdump是Linux系统的一种内核崩溃转储机制，它允许在系统发生内核崩溃（例如内核panic）时，捕获内存的转储信息，从而帮助事后分析故障原因。该过程需要一块预留内存（称为crashkernel内存&#…...

编程日记 2025/5/19 5:06:33

基于WEB的房屋出租管理系统设计

摘要随着城市化程度的推进，越来越多的人涌入城市，同时也带来的旺盛的租房需求，传统的房屋出租管理依赖人工记录的方式难以满足人们对房屋出租管理的需求。因此，本文根据房屋出租信息化的需求设计一款基于房屋出租的管理系统。…...

编程日记 2025/5/10 3:07:04

云边端架构的优势是什么？面临哪些挑战？

一、云边端架构的优势降低网络延迟：在传统集中式架构中，数据需传输到云计算中心处理，导致网络延迟较高。而云边端架构将计算和存储推向边缘设备，可在离用户更近的地方处理数据，大大降低了网络延迟，提升了用…...

编程日记 2025/5/19 5:11:56

clickhouse解决suspiciously many的异常

1. 问题背景 clickhouse安装在虚拟机上，持续写入日志时，突然关机，然后重启，会出现clickhouse可以正常启动，但是查询sql语句，提示suspiciously many异常，如图所示 2. 问题修复 touch /data/cl…...

编程日记 2025/5/16 9:57:56

爬虫 APP 逆向 ---＞ shopee(虾皮) 电商

shopee 泰国站点：https://shopee.co.th/ shopee 网页访问时，直接弹出使用 app 登录查看，那就登录 shopee 泰国站点 app。手机抓包：分类接口接口：https://mall.shopee.co.th/api/v4/pages/get_category_tree 请求参…...

编程日记 2025/5/13 23:35:08

用例图和活动图的区别与联系

在软件开发过程中，需求分析是至关重要的一步。为了更好地理解和描述系统的功能需求，开发人员通常会使用各种图形化工具。其中，用例图和活动图是两种非常常用的工具。虽然它们都用于描述系统的行为，但各自具有不同的特点和适用场景…...

编程日记 2025/5/14 22:27:03

接口请求中调试可以看到Origin，其具体的作用

接口请求中带 Origin 是浏览器在跨域请求时自动添加的一个 HTTP 请求头，用于标识请求的来源（源）。Origin 头的主要作用是支持跨域资源共享（CORS）和增强安全性。 Origin 的含义 Origin 包含发起请求的源信息&#xff0…...

编程日记 2025/5/17 13:00:01

知识图谱+大模型：打造全新智慧城市底层架构

在数字化时代，智慧城市的建设正迎来新一轮的变革。本文将探讨如何结合知识图谱和大模型技术，构建智慧城市的全新底层架构，以应对日益增长的数据量和复杂性，提升城市管理的智能化水平。知识图谱：智慧城市的知识库知识…...

编程日记 2025/5/19 4:38:50

Android基于Path的addRoundRect，Canvas剪切clipPath简洁的圆形图实现，Kotlin（2）

Android基于Path的addRoundRect，Canvas剪切clipPath简洁的圆形图实现，Kotlin（2） import android.content.Context import android.graphics.BitmapFactory import android.graphics.Canvas import android.graphics.Path import a…...

编程日记 2025/5/16 10:03:00