性能优化-核心指标-FCP的介绍与优化
FCP（首次内容绘制）优化 旨在缩短用户首次看到页面内容的时间，涉及关键渲染路径优化、减少阻塞资源、服务器响应加速、图片/字体优化、JavaScript 性能提升，并通过工具（如 Lighthouse 和 Web Vitals）持续监控。核心策略包括预加载关键资源、使用 CDN/SSR、代码拆分、懒加载非关键内容等，以提升网页加载速度和用户体验。
-
2025-04-15
性能优化
92
-
npm 是什么？新手必备的 npm 使用教程
npm（Node Package Manager）是 JavaScript 和 Node.js 的官方包管理工具，用于安装、管理和共享代码模块。本教程涵盖 npm 的核心用法，包括初始化项目、安装/卸载依赖、运行脚本、优化技巧（如切换镜像源），以及常见问题解决方案，适合新手快速上手 npm 开发。 -
零配置生成局域网主机固定域名
在公司小型局域网环境下，可能会有将一个主机作为服务器的需求。主机服务搭建完成之后，只能通过 ip + 端口 访问。ip 模式，存在 ip 变动以及难以记忆等问题。因此给主机分配一个固定域名将是必选之路。 本文将使用 **mDNS（Multicast DNS）** 模式，给局域网主机分配一个固定域名。无需搭建DNS服务器即可实现设备间通过域名（如 `mydevice.local`）互相访问。 -
优化 npm 安装速度的 6 个技巧
当项目依赖的包数量较多时，npm 需要下载和安装大量的文件，导致安装时间显著增加。尤其是对于大型项目，`node_modules` 目录可能包含成千上万个文件，安装过程耗时较长。npm 默认从官方源（`https://registry.npmjs.org`）下载依赖包，对于国内开发者来说，由于网络延迟或限制，下载速度可能非常慢，甚至失败。 本文将通过多个手段，帮助大家提升 npm 的下载速度。 -
如何利用 git 作为 npm 私有仓库
对于公司研发团队，业务中，经常会有搭建私有 npm 仓库的需求。但是对于小团队来说，搭建私有 npm 仓库难度较大，且维护成本高。相对的，如果使用原有的 git 作为 npm 仓库，则可以大大提高效率。即能节省搭建成本，后期的维护成本也能大大降低。 -
Rust 安装与配置指南
本博客旨在为 Rust 新手提供一份详细的安装与配置指南，帮助你从零开始快速搭建 Rust 开发环境。无论你是刚刚接触 Rust，还是已经对编程有一定经验，这篇文章都将为你提供清晰的步骤和实用的建议，让你在 Rust 的世界中顺利启航。 -
webpack 的 runtime 配置有什么用
在使用 webpack 配置时，经常会遇到一个 `optimization.runtimeChunk`配置，官方文档对于它也只是怎么配置，没有明确的解释用法。本文就一起探索一下 runtime 的作用，以及其优化作用。 -
如何让元素（DIV） 居中
长期以来，将元素置于其父元素的中央是一件非常棘手的事情。随着 CSS 的发展，我们获得了越来越多的工具来解决这个问题。如今，我们有了众多选择！ 我决定创建本教程来帮助您了解不同方法之间的权衡，并为您提供一系列可用的策略，以处理各种场景中的居中问题。 老实说，这比我最初想象的要有趣得多。即使你已经使用 CSS 一段时间了，我敢打赌你至少会学到 1 个新策略！ -
npm install 安装某个指定的版本
前端开发过程中，经常遇到 npm 版本不兼容的问题，需要安装指定版本的npm包，保证程序稳定运行 -
前端性能优化-网络篇
前面我们讲了性能优化的综述，这里，我们来讲一下性能优化的网络部分，从一个网络请求的过程开始，详细讲述，从请求流程和减少网络负载的各个方面的核心手段。希望大家对网络优化有一个更立体的认知。 -
前端性能优化-概述（图文详解）
前端性能优化作为前端开发中的一项系统化工程，不仅仅是提升页面加载速度或减少资源大小，它涵盖了从网络请求、资源加载、代码执行到页面渲染等多个环节的优化策略，是一个复杂且系统化的工程。然而，在实际开发过程中，许多开发者往往只关注某些局部的优化点，如压缩图片、减少HTTP请求等，而缺乏对性能优化全局的把握。这种碎片化的优化方式虽然能在一定程度上提升性能，但往往难以达到最佳效果，甚至可能引入新的性能瓶颈。 -
从零到一：用 Node.js 打造你的专属 CLI 工具
CLI（命令行工具）是开发者提升效率的利器，例如 `git`、`npm` 等工具都离不开 CLI。本文教你如何用 Node.js 快速构建一个功能丰富的 CLI 工具。 -
Lighthouse 性能分计算过程详解
chrome 开发者模式自带的 lighthouse 评价系统，可以根据实时测试的网站性能，给出一个综合评分。那么，这个评分是怎么计算的。本文通过阅读相关源码，揭示性能分计算全过程。 -
使用 NVM 管理 Node.js 和 npm 版本
在现代的前端和后端开发中，Node.js 和 npm 是不可或缺的工具。然而，随着项目的增多，不同项目可能需要不同版本的 Node.js 和 npm。手动切换版本不仅麻烦，还容易出错。这时，nvm 就派上了用场。本文将详细介绍如何使用 NVM 来管理 Node.js 和 npm 的版本，并附上一些插图帮助理解。 -
AST（抽象语法树）原理及应用
在编程世界中，源代码的解析和转换是一个非常重要的过程。无论是代码的语法检查、格式化，还是高级功能的实现（如代码压缩、语法转换），都离不开对代码结构的深入理解。而抽象语法树（AST）正是这一过程的核心工具。本文将带你深入探索AST的概念，并通过一个实际的例子——手写一个小型编译器，帮助你理解AST的工作原理及其在实际开发中的应用。 -
vue + vite 项目配置 monaco-editor
Monaco Editor 是 VS Code 的核心代码编辑器，功能强大且高度可定制。但是官方文档真的写的稀碎，很难找到有用信息。 本文根据自身实践（来回采坑），总结一下 vue + vite 项目下，如何裴配置 monaco-editor -
手把手教你搭建 Hexo 博客
Hexo 是一个基于 Node.js 的静态博客框架，以其快速、简洁和高效著称。它支持 Markdown 语法，拥有丰富的主题和插件，非常适合开发者快速搭建个人博客。本文将介绍如何从零开始搭建 Hexo 博客，及相关的配置。 -
如何安装 redis
在 Ubuntu 上安装 Redis 非常简单。以下是详细的安装步骤： 安装、启动、检查、开机自启动、设置密码，卸载等 -
E11000 duplicate key error collection 解决
最近在使用 moongose 的过程中遇到一个报错 E11000 duplicate key error collection: fe.appversions index: name\_1 dup key: { name: 经过查询之后，发现是我把name设置为索引了，不能有重复值 -
lenis 滚动到底部卡顿问题修复
**Lenis** 是一个轻量级的 JavaScript 平滑滚动库，由 **Studio Freight** 开发，旨在提供比浏览器原生滚动更流畅、更优雅的用户体验。它通过自定义滚动动画，提升页面滚动的视觉效果，同时提供灵活的 API 便于开发者实现自定义功能。 但是，最近在使用 **Lenis** 过程中发现，从上向下滚动到底部，很难往上滚，要滚好久才动，总感觉卡顿，像是个 bug。