流水账

study
major
发布日期:   2025-10-21
更新日期:   2025-10-31
文章字数:   2.4k
阅读次数:  

附录

I’m dumb, I’m stupid, I’ll never be satisfied. This “done-lists” are built for proving my studying process, maybe can make me focus more on process, not the result? Just update it and prove that I’m alive.

25-10-20

专场：浏览器的运行原理 一篇搞懂浏览器的工作原理（万字详解）
回填：(25/10/29 浏览器工作原理（各线程介绍）这篇好像也不错？但对渲染进程外的进程涉及较少)

浏览器里，除渲染进程外，其它进程下有哪些线程？

😁 深入 JS(六): 一文让你完全理解浏览器进程与线程里，如此拆解“浏览器的进程与线程”

浏览器架构
├── 浏览器主进程（UI 进程）
│   ├── UI线程
│   ├── IO线程
│   └── 浏览器事件处理线程
├── 渲染进程（每个页面一个）
│   ├── 主线程（JS 执行 / DOM 操作）
│   ├── 样式计算线程
│   ├── 合成线程
│   ├── 光栅线程（Raster）
│   └── Web Worker / Service Worker线程
├── 网络进程
│   ├── 网络线程
│   └── 缓存管理线程
├── GPU 进程
│   ├── GPU 执行线程
│   └── 合成线程（与渲染协同）

Browser 进程中的线程：
UI 线程：该线程是程序运行的主线程，是程序的入口点，用来处理用户交互，如监听用户输入、前进后退等。同时，会分发
　　　　 IO 线程：处理 Browser 进程与其他进程进行进程间通信，下载 Renderer 进程所需的资源文件等
　　　　 File 线程：读取磁盘文件、下载文件到磁盘等
　　　　数据库线程：进行一些数据库操作，如保存 Cookie 到数据库
　　　　历史记录线程
　　　　 http 服务代理线程
　　　　……

了解下 prettier，看看能不能帮我自动格式化 markdown 文件。 VSCode 中 Prettier 工作原理与使用指南

VSCode 中使用 Prettier 时，由 VSCode 触发格式化命令(Shift+Alt+F)，Prettier(VsCode 插件层)决定用哪个 Prettier 实例，确定加载哪个配置文件，PrettierCLI(JS 核心库)格式化 AST 并输出格式后的结果。

Prettier 对于 markdown 只有以下两个专用选项，用于控制段落折行和空白处理： ​​proseWrap​ 用于控制 Markdown 正文段落的折行策略，可选值 ​​always​​、​​never​​、​​preserve​​，默认为 preserve(原始换行) ；​htmlWhitespaceSensitivity​​ 用于控制 HTML 标签内空白字符的敏感度（影响 Markdown 中内嵌 HTML 的空白处理），可选值 ​​css​​、​​strict​​、​​ignore​​，默认值 ​​css。​

下面列以下常用 Prettier 配置项及其作用：

选项 含义 你当前的值 可选值与要点
proseWrap 控制 Markdown 正文段落的折行策略 “preserve” “always”（总是折行以适配 printWidth）、”never”（从不折行）、”preserve”（尽量保留原文换行）
printWidth 每行最大宽度，超出会尝试换行 100 数值，常用 80/100
tabWidth 缩进单位宽度 2 数值，常见 2/4
useTabs 是否用制表符缩进 false true/false（false 即用空格缩进）
semi 语句末尾是否加分号 false true/false
singleQuote 字符串是否使用单引号 true true/false（JS/TS/JSX 等生效）
trailingComma 多行结构是否加尾随逗号 “none” “none”、”es5”（ES5 有效位置）、”all”（尽可能加，含函数参数）
arrowParens 箭头函数参数括号策略 “avoid” “always” / “avoid”（单参可省括号）
bracketSpacing 对象字面量括号内是否加空格 true true（{ foo: bar }）、false（{foo: bar}）

25-10-21

JS 红宝书：Symbol

JS 引擎与 Node 引擎
深入剖析 JavaScript 引擎的工作原理
JS v8 引擎与 Node.js

25-10-22

  1. VUE3 的响应式原理
    25-10-22-VUE 的响应式原理

  2. 避免痴呆的算法练习

25-10-23

  1. JS 红宝书：内存管理——基本引用类型
  2. 算法训练——避免痴呆

25-10-25

淘天笔试，JS 基础题还有待提高，这是前端自学的劣势。这点半年的长线内，读 JS 红宝书+Vue 源码，不断提升就好。现在相对国庆前，水平估计涨了 1.3 倍吧。
笔试栽在卡时间和空间复杂度的题了。
第一道的代码逻辑是：“初始数组->更新索引 i 处的值 | 指定 K 值，返回数组中能整除 K 的值的数量”。这类估计就是取余优化的专项题。
第二道题，一维动态规划，把int 换成 long long，过了全部用例。（前面有次面试除了 LeetCode 股票系列题，考的是中等题的贪心，我默认这类题都是困难难度的一维/多维动态规划，遂挂）
第三道的代码逻辑是：“109量级的‘爬楼梯’”。现在看来可以模拟“页表”的思路，做桶排序？在不超内存的情况下，大概能创建 106量级的整形数组。时间复杂度可以让它为 109+103n 吧。

人无远虑，必有近忧。其实现在的核心任务还是提升自身的技术水平，首先是 JS 基础，其次是 Vue 框架，可以了解一下前言内容，扩宽知识面。
其实我觉得可以考虑前端技术差不多了，就去学学 java，打打全栈的底子。职业发展可能就是互联网大厂的前端精通或中小厂的全栈。

Vite 构建原理

  • 在开发调试阶段：利用浏览器的 ESM（就是让浏览器的 JS 引擎自己通过 ESModule 的 import export 语法去分析代码依赖关系，进而链接、执行代码）。
    在调试阶段，服务器和浏览器建立 websocket 链接，通过 HMR(Hot Module Replacement，可以粗暴理解为热更新)技术在源码更新时通知浏览器，结合模块依赖图确定代码的更新范围，让浏览器重新请求更新的代码（对原来的已经运行代码呢？对于业务代码，请求头Cache-Contorl 设为 no-cache，即使用协商缓存；对于与构建的依赖模块，变动频率低，在首次启动 时由 esbuild 进行预构建(将 commonJS 模块语法转为 ESModule 语法，将多文件代码合并为单文件)，这类资源的Cache-Control设为 max-age=31536000, immutable即不可变）。相比 webpack 节省了开发阶段的“打包等待”时间。
  • 在生产构建阶段：使用 rollup ，利用其 ESM tree shaking 能力在打包时“删除”无用的代码块。除此之外，Vite 生产构建还会做：
    1. 代码压缩（Terser 压缩 JS、CSSNano 压缩 CSS）；
    2. 静态资源处理（如图片、字体的 base64 内联、哈希命名）；
    3. 代码分割（Code Splitting）：按路由、组件拆分代码，实现按需加载；
    4. 生成 sourcemap（可选），便于线上调试。

25-10-26

JS 红宝书的基本引用类型——集合引用类型

【vue 源码 04】深入学习 vue 源码实现——v-model 指令的底层实现

25-10-27 整理一下近期的学习内容&历史项目经历

整理一下：
VUE 与微小的区别

（Vite 构建原理加段“新增属性”的源码处理逻辑）

我追求可叠加的进步，经常进行总结、复盘，以文档的形式进行输出，并对一些如环境配置等一次性但耗时的操作写 stepbystep 的配置文档，帮助自己与他人在后续工作中提升效率。
在工作中，我书写了“环境配置文档”与业务逻辑的总结文档。

项目与实习经历方面，我基于自己组织活动与实践所学内容的需求，我基于 VUE3+python 的前后端架构，开发并部署了一个在线问答游戏，包含账号登录、在线通信的功能。在这个暑假在美团实习，主要接触团购的前端业务，其中参与度最大的是“微信小程序的优化项目”，在 13pd 的需求里负责 UI 优化以及模板重构的任务，并进行了性能优化（优化埋点监听逻辑，显著降低监听器的数量。长列表的子项目看见埋点监听，原来是在各个商卡组件内设定监听器，我将其改为了由长列表容器统一监听；其它的就是节省堆头看见埋点的监听器；）。实习过程中锻炼出了扎实的业务能力。在此之后我也对微小的 skyline 框架、以及浏览器引擎、 VUE3 的原理进行补充学习，磨练技术水平。

25-10-28

红宝书 Promise
Promise 原来有这么多细节，先前就只知道三种状态+PromiseAPI，笔试要求手写 Promise.all()就有点抓瞎。
这里记录一个我目前对.then的理解：

Q:.then 相当于给 promise 注册一个事件触发函数，若 Promise 已经 resolved 或 rejected，就触发.then 的回调函数。我的理解正确吗？
A: 核心逻辑是对的：.then() 本质上是为 Promise 注册状态变更的回调函数，当 Promise 处于已决议（resolved）或已拒绝（rejected）状态时，会立即触发对应的回调（如果回调存在）……

可以复盘做下没 All Kill 的笔试题：
https://www.nowcoder.com/discuss/812771442856091648
它质量还是高的，能提供稀缺的资源。
不过我现在对算法题是这个态度：有的企业的笔试要求较高，但我想勉强合格就行，深钻的意愿不高。

考虑一下手写几个经典的原型方法

25-10-29

SSE，部署下自己的项目

25-10-30

JS 红宝书迭代器和 class
练习手写 Promise.all、Array.flat、Promise.retry

文章作者: Qijia Huang
文章链接: https://mys109hqj.github.io/2025/10/21/25-10-%E6%B5%81%E6%B0%B4%E8%B4%A6/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Qijia Huang !
study
  目录