使用 requestAnimationFrame 优化首页白屏问题
前言在前端开发中，白屏问题是影响用户体验的重要因素之一。特别是在首页加载大量内容时，用户可能会遇到长时间的白屏等待。本文将介绍如何使用 requestAnimationFrame 结合分帧渲染策略来优化首页白屏问题，提升用户访问体验。
什么是白屏问题？白屏问题是指用户访问网页时，在页面内容完全加载和渲染之前，浏览器显示空白页面的现象。这通常发生在：
页面需要渲染大量 DOM 节点
JavaScript 执行时间过长
CSS 样式计算复杂
网络请求阻塞页面渲染
白屏时间过长会严重影响用户体验，甚至导致用户流失。
requestAnimationFrame 简介requestAnimationFrame（简称 rAF）是浏览器提供的一个 API，用于在下次重绘之前执行动画或更新 DOM。它根据屏幕刷新率来执行回调函数，一般屏幕是 60Hz，也就是一秒执行 60 次回调函数。
与 setTimeout 的区别与 setTimeout 相比，requestAnimationFrame 有以下优势：
系统调度：由系统决定回调函数的执行时机，确保与屏幕刷新率同步
性能更好：不会在后台标签页中 ...
使用 defer 优化页面加载性能，告别白屏，实现秒加载！！！
前言在现代 Web 开发中，页面加载速度对用户体验至关重要。白屏时间过长是影响用户体验的重要因素之一。本文将介绍如何通过使用 defer 属性来优化页面加载性能，减少白屏时间，实现秒级加载效果。
什么是 defer 属性？defer 是 HTML 中 <script> 标签的一个布尔属性，它告诉浏览器在下载和执行脚本时不会阻塞 HTML 文档的解析。带有 defer 属性的脚本会在整个页面解析完成后，DOMContentLoaded 事件触发之前执行。
1<script src="script.js" defer></script>
defer 与其他脚本加载方式的对比1. 普通 script 标签1<script src="script.js"></script>
这种方式会阻塞 HTML 解析，直到脚本下载并执行完毕才会继续解析文档，容易造成白屏。
2. async 属性1<script src="script.js" async></scr ...
Vite 和 Webpack 对比：新一代构建工具为何更快？
核心区别：构建理念的根本不同最核心的区别可以概括为一句话：
Webpack：先打包，再启动开发服务器。
Vite：先启动开发服务器，再按需编译。
这个根本性的理念差异，导致了它们在开发体验上的巨大不同。下面我们通过一个流程图来直观感受：
flowchart TD
A[开发者执行启动命令] --> B{使用哪个工具?}
B -->|Webpack| C[开始打包]
C --> D[递归构建依赖图<br>包含所有模块]
D --> E[打包成 Bundle<br>内存/磁盘]
E --> F[启动 Dev Server]
F --> G[服务 Bundle 给浏览器]
G --> H[页面加载完成]
B -->|Vite| I[立即启动 Dev Server]
I --> J{浏览器请求页面}
J --> K[请求 HTML]
K --> L[返回 HTML]
L --> M[请求入口文件 ...
Vue3中异步组件的详细用法
前言在现代前端开发中，性能优化是一个非常重要的课题。随着应用规模的增长，打包后的文件体积也越来越大，这会导致首屏加载时间变长，影响用户体验。Vue 3 提供了异步组件（Async Components）的功能，允许我们将组件按需加载，从而优化应用的性能。本文将详细介绍 Vue 3 中异步组件的使用方法、各种使用场景以及它解决了什么问题。
什么是异步组件异步组件是一种在需要时才加载的组件。与同步组件不同，异步组件的代码不会在初始加载时被打包到主文件中，而是在组件被渲染时动态加载。这种方式特别适合用于大型应用或需要按需加载的场景。
在 Vue 3 中，我们使用 defineAsyncComponent 函数来定义异步组件。该函数接受一个返回 Promise 的工厂函数，Promise 解析后返回一个组件。
基本用法简单定义最基本的异步组件定义方式如下：
12345import { defineAsyncComponent } from "vue";const AsyncComponent = defineAsyncComponent(() => ...
JavaScript async/await 理解与应用
前言在上一篇文章中，我们详细介绍了 Promise 的原理和应用。Promise 的出现大大改善了 JavaScript 异步编程的体验，但仍然存在一些不足。ES2017 引入的 async/await 语法进一步简化了异步代码的编写，使异步代码看起来更像是同步代码。本文将深入探讨 async/await 的原理、与 Promise 的区别、使用场景以及它解决了哪些问题。
什么是 async/awaitasync/await 是 JavaScript 中处理异步操作的一种语法糖，建立在 Promise 的基础之上。它可以让异步代码看起来像同步代码，提高代码的可读性和可维护性。
async：用于声明一个函数是异步的，async 函数会返回一个 Promise 对象
await：用于等待一个 Promise 对象的解决，只能在 async 函数内部使用
async/await 的基本语法12345678910111213141516// 声明一个 async 函数async function fetchData() { ...
JavaScript Promise 理解与应用
什么是 PromisePromise 是 JavaScript 中处理异步操作的一种方式，它代表了一个异步操作的最终完成（或失败）及其结果值。Promise 可以让我们避免陷入回调地狱（Callback Hell），使异步代码更加清晰和易于管理。
Promise 对象有三种状态：
Pending（进行中）：初始状态，既没有被兑现，也没有被拒绝
Fulfilled（已成功）：操作成功完成
Rejected（已失败）：操作失败
Promise 的状态一旦改变，就不会再变，这保证了其结果的可靠性。
Promise 的基本语法1234567891011121314151617const promise = new Promise((resolve, reject) => { // 异步操作 if (/* 操作成功 */) { resolve(value); // 将Promise状态改为fulfilled } else { reject(error); // 将Promise状态改为rejected }} ...
JavaScript闭包深入理解
什么是闭包闭包（Closure）是 JavaScript 中一个重要的概念，它是指有权访问另一个函数作用域中变量的函数。更具体地说，闭包是由函数以及创建该函数时的词法环境组合而成的。
简单来说，当一个内部函数被外部引用，并且内部函数可以访问外部函数的变量时，就形成了闭包。
闭包的形成条件要形成闭包，需要满足以下几个条件：
函数嵌套（一个函数内部定义了另一个函数）
内部函数引用了外部函数的变量
外部函数被执行，并且内部函数被返回或传递给其他作用域
内部函数在外部作用域能够被访问
正例：典型的闭包应用示例 1：计数器123456789101112function createCounter() { let count = 0; return function () { count++; return count; };}const counter = createCounter();console.log(counter()); // 1console.log(counter()); // 2cons ...
Vue3 中 reactive 和 ref 的区别与原理详解
前言在 Vue3 中，响应式系统是其核心特性之一。Vue3 提供了两种创建响应式数据的主要方式：reactive 和 ref。虽然它们都能实现响应式，但在使用方式、适用场景和底层实现上存在显著差异。本文将深入探讨这两种 API 的区别与原理，帮助开发者更好地理解和使用它们。
如果你对 Vue3 的其他方面也感兴趣，可以看看我们之前的文章，比如 Vue2 VS Vue3 内容全部重构 从各个维度做对比。
什么是 reactive？reactive 是 Vue3 中用于创建响应式对象的 API。它基于 ES6 的 Proxy 实现，可以拦截对象的各种操作（如获取、设置、删除等）。
reactive 的特点
用于创建一个响应式的对象（包括数组和复杂数据结构）
基于 ES6 的 Proxy 实现
只能用于对象类型（Object、Array、Map、Set 等），不能用于基本类型
直接返回一个响应式对象，无需通过 .value 访问
1234567891011121314import { reactive } from "vue";const state ...
Vue2 VS Vue3
前言Vue.js 作为一款流行的前端框架，经历了从 Vue2 到 Vue3 的重大升级。Vue3 不仅仅是一个版本更新，更是一次全面的重构，带来了性能、开发体验和功能上的巨大提升。本文将从多个维度深入对比 Vue2 和 Vue3，帮助开发者更好地理解两者之间的差异和 Vue3 的优势。
1. 响应式原理对比Vue2 的响应式系统Vue2 使用 Object.defineProperty 来实现响应式数据绑定。这个 API 可以劫持对象属性的 getter 和 setter，从而在数据变化时通知视图更新。
123456789101112131415161718192021222324252627282930function defineReactive(obj, key, val) { // 递归处理嵌套对象 observe(val); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get() { ...
工程化之.nvmrc 文件使用详解
前言
当开发多个项目时，每个项目运行环境要求的 node 版本不一样，那么我们就需要给每个项目指定 node 版本，也就是通过终端执行 nvm install 和 nvm use 命令去安装并切换版本。
但是每次都要在终端手动执行命令就很麻烦，特别是项目越来越多的时候，容易忘记切换版本或切换错版本，会导致项目启动不了或运行中有一些错误。
这就需要一个管理 node 版本的方法，自动切换 node 版本，这时 .nvmrc 就该上场了
.nvmrc 是什么
.nvmrc 的作用：便于切换 node 版本，保证多人开发环境的一致性
.nvmrc 是一个文件，文件内容非常简单，只有一个 nvm 可识别的 node 版本文本内容，比如: v12.18.2，这个文件应该放在项目根目录下，并且不应被 git 忽略
创建 .nvmrc 文件
打开终端，进入项目根目录执行以下命令，使用 nvm 可识别的版本号格式即可：
以下命令会将字符串填入指向的文件中并创建，当文件存在时，则会对文件进行重写
echo "12.18.2" > .nvm ...
