文章列表

# 为什么需要 React Scheduler 调度 如果组件 Render 或者组件树节点非常多的情况下，一次 loop 处理所有节点会非常耗时，并且占用主线程导致页面无法交互 React Scheduler 可以结合 React Fiber 进行任务的调用，使得能够独立执行每个 VDOM 的更新，并且能够中断和恢复。 # React Scheduler 调度过程 在了解 MessageChannel 之前，我们先结合源码了解一下 React 调度过程 在源码中，schedulePerformWorkUntilDeadline 就是调度一个 messageChannel，在...

cookie 特性记录 # Domain 用于配置 cookie 作用的域（无视端口） Domain 属性规则： 只能将值设置为当前域名或者更高级别的域名 比如当前请求 https://auth.xxx.com 则 response 的 set-cookie 只能配置 auth.xxx.com 或者 xxx.com 的 Domain 不提供则默认为当前域 比如当前请求 https://auth.xxx.com 则 默认 cookie 为 auth.xxx.com # HttpOnly 禁止 JavaScript 通过 Document.cookie 进行访问 cookie。如果通过...

# 观察者模式实现 12345678910111213141516171819202122232425262728293031323334class Subject { constructor() { this.observers = []; } // 添加观察者 addObserver(observer) { this.observers.push(observer); } // 通知所有观察者 notifyObservers(message) {...

# 第一部分 # 浏览器架构（Chrome） 浏览器顶部是 浏览器进程，负责与应用程序不同部分的其他进程进行协调。 对于渲染进程，将创建多个进程并将其分配给每个选项卡。 进程 控制内容 浏览器进程 控制应用程序的 “chrome” 部分，包括地址栏、书签、返回和 前进按钮。还包括了不可见部分，例如网络请求和文件访问 渲染进程 控制选项卡网站显示的内容内容 插件进程 控制网站使用的插件，比如 Flash GPU 进程 与其他进程隔离处理 GPU 任务。它被分成不同的进程，因为 GPU 处理来自多个应用程序的请求并在同一中绘制它们。 #...

# 高级基础架构 主要组件 用户界面 浏览器引擎 渲染引擎 网络 界面后端 JavaScript 解释器 数据存储 多进程：每个标签页都是一个独立的进程，每个标签页一个渲染引擎实例 # 渲染引擎 渲染引擎默认可以渲染 HTML 和图片，也可以搭配插件渲染 PDF WebKit：Safari Blink（WebKit 另一个分支）：Chrome Gecko：Firefox # 主要流程 基本流程： 解析 HTML 文档构建 DOM tree 渲染 DOM tree 布局 Render tree 绘制 Render tree 引擎开始解析 HTML 文档，同时构建 DOM...

# 什么是 indexeddb indexeddb 是浏览器提供的一种本地存储机制，可以存储大量的支持结构化克隆算法的数据。 # 如何使用 indexeddb # 打开 indexeddb 123const request = indexedDB.open('todo_database');// with versionconst request = indexedDB.open('todo_database', 2); # 创建 / 删除 indexeddb...

# 安装 ollama 到 ollama 下载地址选择对应的操作系统版本进行安装 终端检查是否加载完成，如果有版本号输出，则表示安装成功 1ollama -v # 安装本地大语言模型 我这里使用的是 deepseek-r1 7b 的模型 1ollama run deepseek-r1 # 可视化 webui 下载 docker 桌面版本 打开 docker 应用 进入 open-webui 选择 If Ollama is on your computer, use this command 运行 1docker run -d -p 3000:8080...

背景：在使用 TypeScript 做前端（React）与后端（NestJS）开发时，如何让双方的接口类型保持同步，尽量减少手动维护、避免前后端接口不一致问题？ # 为什么需要 “前后端接口类型同步”？ 在传统的前后端分离开发中，接口文档往往依赖手工书写与维护，容易出现以下问题： 接口字段更新后忘记同步：后端新增或者修改字段，前端未能来得及同步修改，导致调用出错 类型不匹配：前端以为 age 是 number 类型，后端期望得到 string，则需要再进行二次处理 维护麻烦：接口一多，维护手动文档、手动在前后端各写同样的 dto，非常繁琐且易出错 # Monorepo + Shared...

# useTransition Transition 是 react18 引入的用于区分紧急更新和非紧急更新的 hook # 官方 demo useTransition 返回两个参数 isPending 用于标识是否处于等待，下文会结合源码解释 startTransition 接收一个回调，回调里面的更新会被标记为 Transition startTransitio 的回调中不会将 await 以后的 dispatch 标记为 Transition 优先级，需要手动再调用 startTransition 12345678910111213141516171819import...

对于前端 package 开发者，或多或少都会涉及到配置 pacakge.json 的属性 # main module types main 字段 ==> commonjs 模块的入口文件 module 字段 ==> esmodule 模块的入口文件 types 字段 ==> ts 类型声明 如果不配置 main 字段，则 commonjs 和 esmodule 入口为 main 字段 # files files 字段用于指定哪些文件 / 目录会被发布到 npm 123456{...