好记性不如烂笔头

懒加载定义 懒加载（延迟加载）：仅在需要资源时才加载的策略 原理：用户滚动页面时，判断元素是否处于可视区域，而可视区域外的元素资源（如图片）不会加载。 场景： 图片懒加载 ...

前端手写原理： 手写myInstanceOf方法 typeof promise.all 防抖 节流算法...

什么是中间件？ 在HTTP请求和响应通过应用程序时拦截和操作它们。 中间件的应用场景 1.身份验证：通过中间件实现用户身份验证，例如使用JWT验证令牌 2.日志记录：中间件...

暗黑模式 使用next-themes库 如何使用 1.安装 2.新增/components/ThemeProvider/index.tsx文件 /app/layout.ts...

支持国际化的语言库有哪些？ next-i18next：基于i18next和react-i18next。提供翻译内容管理、组件和钩子，支持服务端渲染和静态生成 next-in...

Next.js中的不同缓存机制 Next.js 采用了一种多层次的缓存策略，以应对不同场景下的性能优化需求。从高层次来看，这些机制主要包括 请求记忆化 (Request M...

1:flex布局 水平三等份（width:calc(calc(100% / 3) -10px)） 2:grid布局：通过grid-template-columns和grid...

并发概念 并发模式是一种全新渲染模式，允许React同时处理多个渲染任务，可以根据任务的优先级进行调度。并发模式下，React可以暂停、继续或放弃渲染任务，确保高优先级的任...

单帧渲染性能优化 背景 表格中选中某一行时出现卡顿现象。（使用antd组件时，若表格中有长文字截断省略，hover显示tooltip，hover显示复制按钮，需要用到Cop...

安装bun 查找版本 卸载bun,学习中，探索试验状态a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a...

创建项目 npm create vite@latest 可以选择Javascript/Typescript Typescript +SWC SWC（Speedy Web C...

Zustand源码结构： 核心概念解析 create方法解析 create 方法位于 src/react.ts 文件中，而它依赖的核心功能主要在 src/vanilla.t...

clsx定义 clsx是一个轻量级的实用库，用于管理CSS类的应用。 clsx使用示例： 字符串-简单拼接 对象-条件类名 数组 字符串模板替换 Next.js中使用cls...

SEO策略 1、自动处理元数据(Meta Data) 元数据，如<title>和<meta>标签，Next.js通过next/head组件，自动为每个页面添加元数据，并且允...

Next.js的缓存机制概览 扩展的 fetch API：Next.js 扩展了标准的 Web fetch API，允许通过参数控制缓存行为 unstable_cache ...

一、客户端组件 在 Next.js 中，客户端组件（Client Components）是为处理动态交互和运行时 JavaScript 提供的组件类型，与服务端组件（Ser...

getStaticProps(静态页面生成SSG)：构建的时候生成页面 getStaticPaths(静态页面生成SSG)：根据构建内容生成动态路由 getServerSi...

指标优化有哪些 指标的标准 FCP---2S内 LCP---2.5S内 （代表页面的速度指标） FID---100ms内 （代表页面的交互体验指标） CLS---0.1 （...

一：React核心概念 React的特点 声明式编程、组件化、虚拟DOM、单向数据流、支持服务端渲染 JSX本质 JSX是语法糖，通过Babel编译为React.creat...

ReactDOM.createRoot(root).render()做了什么？？ 调用了createRoot方法,在这个方法中做了些判定:是否是合法的容器,对不合法的容器做...