https://silencewood.cn 李顺的个人博客。写技术笔记、生活碎片，和一些还没想清楚的问题——没有算法，没有广告，只有一个安静的阅读角落。 zh-CN Fri, 16 Oct 2026 00:00:00 GMT https://silencewood.cn/posts/2026-1016-ls-design https://silencewood.cn/posts/2026-1016-ls-design Fri, 16 Oct 2026 00:00:00 GMT JavaScript 组件库 封装自己的组件库 https://silencewood.cn/posts/blog-migration https://silencewood.cn/posts/blog-migration Sat, 12 Sep 2026 00:00:00 GMT 随笔 写作 独立站点 长期主义 备份 迁移那天我导出了 128 篇文章，也第一次认真读了那份服务条款。这篇记录从「寄人篱下」到「自己盖房子」的全过程，以及我为什么觉得这件事值得。 https://silencewood.cn/posts/react-server-components https://silencewood.cn/posts/react-server-components Sun, 06 Sep 2026 00:00:00 GMT 技术 React TypeScript 前端架构 RSC 常被当成「服务端渲染的升级版」，其实它解决的是另一个问题——组件对数据的依赖如何不打进客户端体积。 https://silencewood.cn/posts/url-to-page https://silencewood.cn/posts/url-to-page Wed, 23 Jul 2025 00:00:00 GMT JavaScript 浏览器 网络 URI：统一资源标识符，URL和URN算是其子集 https://silencewood.cn/posts/browser-rendering https://silencewood.cn/posts/browser-rendering Wed, 23 Jul 2025 00:00:00 GMT JavaScript 浏览器 渲染原理 CRP关键渲染路径(https://developer.mozilla.org/zh-CN/docs/Web/Performance/Criticalrenderingpath) https://silencewood.cn/posts/vue3-reactivity https://silencewood.cn/posts/vue3-reactivity Tue, 11 Jun 2024 00:00:00 GMT Vue Vue3 响应式 Coposition API 对Tree-shaking 更加友好，代码也更容易压缩。 https://silencewood.cn/posts/vue3-dev-setup https://silencewood.cn/posts/vue3-dev-setup Tue, 11 Jun 2024 00:00:00 GMT Vue Vue3 Vue3 中使用 pnpm workspace 来实现 monorepo (pnpm(https://pnpm.io/zh/)是快速、节省磁盘空间的包管理工具。主要采用符号链接的方… https://silencewood.cn/posts/vue3-architecture https://silencewood.cn/posts/vue3-architecture Tue, 11 Jun 2024 00:00:00 GMT Vue Vue3 源码 Monorepo 是管理项目代码的一个方式，指在一个项目仓库(repo)中管理多个模块/包(package)。 Vue3 源码采用 monorepo 方式进行管理，将模块拆分到 p… https://silencewood.cn/posts/js-method-override https://silencewood.cn/posts/js-method-override Fri, 24 May 2024 00:00:00 GMT JavaScript JavaScript 构造函数上是否有Symbol.hasInstanceSymbol.hasInstance用于判断某对象是否为某构造器的实例。因此你可以用它自定义 instanceof 操作符在某个… https://silencewood.cn/posts/js-functions https://silencewood.cn/posts/js-functions Fri, 24 May 2024 00:00:00 GMT JavaScript JavaScript 函数执行过程(https://www.yuque.com/silencewood/xdkhfx/ko82eh?singleDoc#) https://silencewood.cn/posts/js-event-loop https://silencewood.cn/posts/js-event-loop Fri, 24 May 2024 00:00:00 GMT JavaScript JavaScript 事件循环 W3C事件循环(https://html.spec.whatwg.org/multipage/webappapis.html#event-loops) https://html.s… https://silencewood.cn/posts/js-data-types https://silencewood.cn/posts/js-data-types Fri, 24 May 2024 00:00:00 GMT JavaScript JavaScript 数据类型(https://www.yuque.com/silencewood/xdkhfx/dvcf35?singleDoc#) https://silencewood.cn/posts/vite-usage https://silencewood.cn/posts/vite-usage Tue, 16 Aug 2022 00:00:00 GMT 工程化 Vite 遍历文件夹 使用 <a glob</a 进行遍历 定义 less 全局变量 借助css.preprocessorOptions来完成 https://silencewood.cn/posts/react-ref https://silencewood.cn/posts/react-ref Tue, 16 Aug 2022 00:00:00 GMT React React Ref Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素 为 DOM/类组件 添加 可以使用 ref 去存储 DO https://silencewood.cn/posts/react-lifecycle https://silencewood.cn/posts/react-lifecycle Tue, 16 Aug 2022 00:00:00 GMT React React 生命周期 基础生命周期 src/index.js lib/react dom.js 需要注意的是调用componentDidMount的时机是在createDOM之后,因 https://silencewood.cn/posts/react-jsx https://silencewood.cn/posts/react-jsx Tue, 16 Aug 2022 00:00:00 GMT React React React.createElement 的返回结果然后交由 ReactDOM 去处理 https://silencewood.cn/posts/react-events https://silencewood.cn/posts/react-events Tue, 16 Aug 2022 00:00:00 GMT React React 事件 State的更新会被合并 当你调用 setState() 的时候，React 会把你提供的对象合并到当前的 state State的更新可能是异步的 出于性能考 https://silencewood.cn/posts/react-dom-diff https://silencewood.cn/posts/react-dom-diff Tue, 16 Aug 2022 00:00:00 GMT React React Dom Diff 只对同级节点进行对比，如果 DOM 节点跨层级移动，则 React 不会复用 不同类型的元素会产出不同的结构 ，会销毁老结构，创建新结构 可以通过 key 标识 https://silencewood.cn/posts/react-components https://silencewood.cn/posts/react-components Tue, 16 Aug 2022 00:00:00 GMT React React 组件 当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）转换为单个对象传递给组件，这个对象被称之为 props https://silencewood.cn/posts/rollup-usage https://silencewood.cn/posts/rollup-usage Tue, 12 Jul 2022 00:00:00 GMT 工程化 Rollup rollup js是下一代 JS 模块打包器 背景 webpack 打包非常繁琐，打包体积比较大 rollup 主要是用来打包 JS 库 vue/react/a https://silencewood.cn/posts/rollup-source-analysis https://silencewood.cn/posts/rollup-source-analysis Tue, 12 Jul 2022 00:00:00 GMT 工程化 Rollup 源码 前置知识 初始化项目 magic string <a href="https://www.npmjs.com/package/magic string" tar https://silencewood.cn/posts/rollup-plugins https://silencewood.cn/posts/rollup-plugins Tue, 12 Jul 2022 00:00:00 GMT 工程化 Rollup 插件 Rollup是一个JavaScript模块打包器，可以将小块代码编译成大块复杂的代码，例如library或应用程序 debug.js rollup.config https://silencewood.cn/posts/webpack-split-chunks https://silencewood.cn/posts/webpack-split-chunks Wed, 06 Jul 2022 00:00:00 GMT 工程化 Webpack SplitChunks module2/module3 同理 https://silencewood.cn/posts/webpack-plugins https://silencewood.cn/posts/webpack-plugins Wed, 06 Jul 2022 00:00:00 GMT 工程化 Webpack Plugin Webpack 是基于插件的工作流程。Plugin(https://webpack.js.org/concepts/plugins/) https://silencewood.cn/posts/webpack-optimization https://silencewood.cn/posts/webpack-optimization Wed, 06 Jul 2022 00:00:00 GMT 工程化 Webpack 优化 指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配 https://silencewood.cn/posts/webpack-tapable https://silencewood.cn/posts/webpack-tapable Fri, 01 Jul 2022 00:00:00 GMT 工程化 Webpack Tapable Hook 类型可以分为同步Sync和异步Async,异步又分为并行和串行 https://silencewood.cn/posts/webpack-loaders https://silencewood.cn/posts/webpack-loaders Wed, 29 Jun 2022 00:00:00 GMT 工程化 Webpack Loader pitch 与 loader 本身方法的执行顺序图 https://silencewood.cn/posts/webpack-build-flow https://silencewood.cn/posts/webpack-build-flow Tue, 28 Jun 2022 00:00:00 GMT 工程化 Webpack 在项目目录下执行下面的命令 https://silencewood.cn/posts/webpack-ast https://silencewood.cn/posts/webpack-ast Mon, 20 Jun 2022 00:00:00 GMT 工程化 Webpack AST 这些工具的原理都是通过 JavaScript Parser 把代码转换为一颗抽象语法树，这棵树定义了代码的结构，通过操作这颗树可以精准定位到声明语句、赋值语句、运算语句等，实现对… https://silencewood.cn/posts/webpack-bundle https://silencewood.cn/posts/webpack-bundle Thu, 16 Jun 2022 00:00:00 GMT 工程化 Webpack 打包文件分析辅助 vscode 插件 rm js comment 前置知识 Symbol.toStringTag Symbol.toStringTag 是内置的 https://silencewood.cn/posts/webpack-basics https://silencewood.cn/posts/webpack-basics Tue, 14 Jun 2022 00:00:00 GMT 工程化 Webpack webpack.config.js https://silencewood.cn/posts/react-introduction https://silencewood.cn/posts/react-introduction Mon, 13 Jun 2022 00:00:00 GMT React React React 是一个用于构建用户界面的 JavaScript 库 核心专注于视图,目的实现组件化开发 具体用法参照 React 中文网 关于 React 版本上， https://silencewood.cn/posts/vite-source-analysis https://silencewood.cn/posts/vite-source-analysis Thu, 02 Jun 2022 00:00:00 GMT 工程化 Vite 源码 lib/server/middlewares/static.js https://silencewood.cn/posts/vite-core https://silencewood.cn/posts/vite-core Tue, 31 May 2022 00:00:00 GMT 工程化 Vite 安装依赖 Connect <a href="https://www.npmjs.com/package/connect" target=" blank" Con https://silencewood.cn/posts/vue3-features https://silencewood.cn/posts/vue3-features Mon, 30 May 2022 00:00:00 GMT Vue Vue3 Vue3更注重模块上的拆分，在2.0中无法单独使用部分模块。需要完整的引入Vue,Vue3中模块之间耦合度低，模块可以独立使用。 拆分模块 Vue2中很多方法挂 https://silencewood.cn/posts/esbuild https://silencewood.cn/posts/esbuild Mon, 30 May 2022 00:00:00 GMT 工程化 Vite ESBuild ESbuild 是一款基于 Golang 开发的打包工具，相比传统的 webpack、rollup 等主打性能优势，在构建速度上可以快 10~100 倍。 https://silencewood.cn/posts/algorithm-basics https://silencewood.cn/posts/algorithm-basics Mon, 30 May 2022 00:00:00 GMT 算法 算法 度量一个程序的执行时间通常有两种方法：