Hulk's Blog RSS Feed

No title

js 代码是怎么执行的（先编译，再执行）

JavaScript 代码执行过程中，需要先做变量提升，而之所以需要实现变量提升，是因为 JavaScript 代码在执行之前需要先编译。在编译阶段，变量和函数会被存放到变量环境中，变量的默认值会被设置为 undefined；
在代码执行阶段，JavaScript 引擎会从变量环境中去查找自定义的变量和函数。如果在编译阶段，存在两个相同的函数，那么最终存放在变量环境中的是最后定义的那个，这是因为后定义的会覆盖掉之前定义的。以上就是今天所讲的主要内容，

当然，学习这些内容并不是让你掌握一些 JavaScript 小技巧，其主要目的是让你清楚 JavaScript 的执行机制：先编译，再执行。

执行栈？

每调用一个函数，JavaScript 引擎会为其创建执行上下文，并把该执行上下文压入调用栈，然后 JavaScript 引擎开始执行函数代码。
如果在一个函数 A 中调用了另外一个函数 B，那么 JavaScript 引擎会为 B 函数创建执行上下文，并将 B 函数的执行上下文压入栈顶。
当前函数执行完毕后，JavaScript 引擎会将该函数的执行上下文弹出栈。
当分配的调用栈空间被占满时，会引发“堆栈溢出”问题。

(This is an article posted to my blog at huangbowen.cn/blog. You can read it online by clicking here.)

No title

垃圾回收

新生代（存放比较小，很快被回收）[副垃圾回收器]
- 经历两次新生代就放进老生区（对象晋升策略）
- Scavenge 算法来处理。是把新生代空间对半划分为两个区域，一半是对象区域，一半是空闲区域，回收时直接把对象区域可用的对象挪动到空闲区，原对象区域之间清空，循环往复
- 新加入的对象都会存放到对象区域，当对象区域快被写满时，就需要执行一次垃圾清理操作。
老生代
- 标记 - 清除 -整理
- 清除算法里的是一样的，但后续步骤不是直接对可回收对象进行清理，而是让所有存活的对象都向一端移动，然后直接清理掉端边界以外的内存
- 为了降低老生代的垃圾回收而造成的卡顿，V8 将标记过程分为一个个的子标记过程，同时让垃圾回收标记和 JavaScript 应用逻辑交替进行，直到标记阶段完成，我们把这个算法称为增量标记（Incremental Marking）算法。

(This is an article posted to my blog at huangbowen.cn/blog. You can read it online by clicking here.)

Why should we use pnpm?

Thu, 13 Jun 2024 00:00:00 GMT

npm 1/2 时代

http2针对头部字段，使用HPACK压缩算法，对请求头进行压缩。

磁盘空间占用：每个依赖都会安装自己的依赖，导致了大量的重复，特别是在多个包共享同一依赖的场景下
深层嵌套问题：这种嵌套结构在文件系统中造成了非常长的路径，然而大多数 Windows 工具、实用程序和 shell 最多只能处理长达 260 个字符的文件和文件夹路径。一旦超过，安装脚本就会开始出错，而且无法再使用常规方法删除 node_modules 文件夹
安装和更新缓慢：每次安装或更新依赖时，npm 需要处理和解析整个依赖树，过程非常缓慢。

npm3

过将依赖扁平化，尽可能地减少了重复的包版本，有效减少了项目的总体积，同时也避免了 npm 早期的深层嵌套问题。

yarn

性能提升：yarn 在发布之初就强调了性能优势，特别是在安装依赖时。它通过并行安装依赖和缓存已下载的包来加速这一过程，减少了安装时间。
更好的依赖管理：yarn 引入了 yarn.lock 文件，这个锁文件确保了依赖的一致性。无论是在哪个环境下运行yarn install，都能确保安装相同版本的依赖，解决了因版本不匹配导致的问题。
更好的安全性：yarn 通过检查安装的每个包的许可证，并提供了一种机制来限制或拒绝具有不安全许可证的包的安装，增强了项目的安全性。

！！幽灵依赖！！

其实扁平化的结构还是存在一些问题的，那就是幽灵依赖。我们假设 B 并没有在 package.json 中注册，但由于 A 依赖 B，B会被提取到 node_moduls 顶层，那么在项目中就可以直接引用 B，这就是幽灵依赖，当 A 出现一些变动时（升级、删除），会导致出现几个问题：

环境不一致：由于该模块未在 package.json 文件中声明，当在其他环境（如测试、生产环境或者其他人的开发环境）中部署应用时将无法知道需要包含那些模块。这将导致环境之间存在不一致，可能会导致在其他环境中运行时出现错误。
版本控制问题：由于未明确声明依赖，可能会出现不同环境中使用的模块版本不一致的问题。这可能导致某些功能在某些环境中无法正常工作，或者出现不可预见的行为。
代码可读性和可维护性降低：开发人员无法清楚地了解应用程序的依赖项，导致代码理解困难。

而 pnpm 就是为了解决这个问题而出现的。

pnpm

硬软链接概念

在了解 pnpm 具体机制之前，我们先了解一下硬链接和软链接（符号链接）的概念：

硬链接（Hard Link）

概念：硬链接是文件系统中的一个链接，它指向磁盘上的数据。当创建一个硬链接时，实际上是在创建一个和原始文件相同的入口点，但是不占用额外的磁盘空间。这个新的链接和原始文件共享相同的数据块，任何一个文件的修改都会反映在另一个上。特点：硬链接不能跨文件系统创建，也不能用于链接目录，但如果原始文件被删除，硬链接依然可以访问数据。使用场景：当你想要在不同位置访问同一个文件内容，而又不想占用额外磁盘空间时，可以使用硬链接。比如，在多个项目中共享相同的库文件，但不需要复制这个文件多份。

软链接（符号链接，Symbolic Link）

概念：软链接是一个特殊类型的文件，它包含了另一个文件的路径。类似于 Windows 系统中的快捷方式。与硬链接不同，软链接可以指向目录，也可以跨文件系统。特点：软链接指向文件或目录的路径，如果原始文件被删除，软链接就会失效，因为它的指向已经不存在了。使用场景：软链接适用于需要引用特定位置的文件

全局存储：pnpm 从 npm 注册表下载包并存储在全局存储目录中，例如 ~/.pnpm-store/v6/files/sha512/xx/xx/xxxx....，通过内容寻址来区分不同内容的文件路径
pnpm 从全局存储创建硬链接到项目的本地存储，例如 projectA/node_modules/.pnpm/lodash 和 projectB/node_modules/.pnpm/lodash。这样做的目的是节省磁盘空间和加快安装速度。
在项目的 node_modules 目录中，pnpm 创建符号链接指向本地存储中的硬链接，例如 projectA/node_modules/lodash -> projectA/.pnpm-store/lodash 和 projectB/node_modules/lodash -> projectB/.pnpm-store/lodash

QA

为什么不直接从全局存储使用软链接到项目？
- 一台机器上一个包在可以有不同的依赖集。在项目A foo@1.0.0中可以将依赖项解析为bar@1.0.0，但在项目B中，相同的依赖项foo可能解析为bar@1.1.0；因此，pnpm 硬链接foo@1.0.0到它的每个项目，以便为其创建不同的依赖项集。
- 硬链接无法跨文件系统，所以使用软链接来构建依赖树
第三方历史幽灵依赖问题
- 对直接依赖严格管理：对于项目的直接依赖，pnpm 保持严格的依赖隔离，确保项目只能访问到它在package.json 中声明的依赖。
- 对间接依赖妥协处理：考虑到一些第三方库可能依赖于未直接声明的包（幽灵依赖），pnpm 默认启用了 hoist 配置。这个配置会将一些间接依赖提升（hoist）到一个特殊的目录 node_modules/.pnpm/node_modules中。这样做的目的是在保持依赖隔离的同时，允许某些特殊情况下的间接依赖被访问。

(This is an article posted to my blog at huangbowen.cn/blog. You can read it online by clicking here.)

浏览器原理

Mon, 04 Mar 2024 00:00:00 GMT

浏览器架构

通过对浏览器多进程架构的学习，可以把网络流程、页面渲染过程、JavaScript执行流程以及Web安全理论这些知识点串起来组成一张网。

单进程浏览器

单进程架构浏览器的缺点
- 不稳定
  - 一个插件线程或者渲染线程出错了，会导致整个浏览器进程崩溃
- 不流畅
  - 所有页面的渲染模块、JavaScript 执行环境以及插件都是运行在同一个线程中的，这就意味着同一时刻只能有一个模块可以执行。
- 不安全
  - c++ 来写插件，可以直接获取到电脑上的资源，从而控制电脑，盗窃密码等

多进程浏览器时代

早期多进程架构，2008 年 Chrome 发布时的进程架构

Chrome 的页面是运行在单独的渲染进程中的，同时页面里的插件也是运行在单独的插件进程之中，而进程之间是通过 IPC 机制进行通信（如图中虚线部分）。

由于进程是相互隔离的，所以当一个页面或者插件崩溃时，影响到的仅仅是当前的页面进程或者插件进程，并不会影响到浏览器和其他页面，这就完美地解决了页面或者插件的崩溃会导致整个浏览器崩溃，也就是不稳定的问题。
同样，JavaScript 也是运行在渲染进程中的，所以即使 JavaScript 阻塞了渲染进程，影响到的也只是当前的渲染页面，而并不会影响浏览器和其他页面，因为其他页面的脚本是运行在它们自己的渲染进程中的。所以当我们再在 Chrome 中运行上面那个死循环的脚本时，没有响应的仅仅是当前的页面。
采用多进程架构的额外好处是可以使用安全沙箱，你可以把沙箱看成是操作系统给进程上了一把锁，沙箱里面的程序可以运行，但是不能在你的硬盘上写入任何数据，也不能在敏感位置读取任何数据，例如你的文档和桌面。Chrome 把插件进程和渲染进程锁在沙箱里面，这样即使在渲染进程或者插件进程里面执行了恶意程序，恶意程序也无法突破沙箱去获取系统权限。

目前多进程架构

浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。
渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。
- 注意: 同一站点会放进一个渲染进程里进行执行，A 页面的 JS 是可以直接在 B 页面里运行的，包括进行通信
GPU 进程。其实，Chrome 刚开始发布的时候是没有 GPU 进程的。而 GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。
网络进程。主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。
插件进程。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

不过凡事都有两面性，虽然多进程模型提升了浏览器的稳定性、流畅性和安全性，但同样不可避免地带来了一些问题：

更高的资源占用。因为每个进程都会包含公共基础结构的副本（如 JavaScript 运行环境），这就意味着浏览器会消耗更多的内存资源。
更复杂的体系架构。浏览器各模块之间耦合性高、扩展性差等问题，会导致现在的架构已经很难适应新的需求了。

面向服务架构

为了解决这些问题，在 2016 年，Chrome 官方团队使用“面向服务的架构”（Services Oriented Architecture，简称 SOA）的思想设计了新的 Chrome 架构。也就是说 Chrome 整体架构会朝向现代操作系统所采用的“面向服务的架构” 方向发展，原来的各种模块会被重构成独立的服务（Service），每个服务（Service）都可以在独立的进程中运行，访问服务（Service）必须使用定义好的接口，通过 IPC 来通信，从而构建一个更内聚、松耦合、易于维护和扩展的系统，更好实现 Chrome 简单、稳定、高速、安全的目标。如果你对面向服务的架构感兴趣，你可以去网上搜索下资料，这里就不过多介绍了。

浏览器缓存是怎样的？

(This is an article posted to my blog at huangbowen.cn/blog. You can read it online by clicking here.)

渲染流程

Mon, 04 Mar 2024 00:00:00 GMT

流水线可分为如下几个子阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。

(This is an article posted to my blog at huangbowen.cn/blog. You can read it online by clicking here.)

一文了解深拷贝

Thu, 21 Dec 2023 00:00:00 GMT

JS 数据类型

开头先来复习下 JS 都有哪些数据类型

Undefined、Boolean、String、Number、Null、Symbol、BigInt 8 个基本类型和 1 个 Object

注意: 函数也是具有额外可调用能力的对象

思路

实现深拷贝可以进行递归, 每一层都对数据类型做判断:

如果是基本类型, 直接复制
obj 进行重建

代码实现时注意:

代码层级过深时会爆栈(这里可以使用尾递归优化)
存在循环引用问题怎么处理
引用丢失(两个对象引用同一个内存)
set, map, weakset, weakmap 以及一些新语法

进阶: 不用递归如何使用循环来求解

代码实现

const objectTag = "[object Met]"
const arrayTag = "[object Met]"
const argsTag = "[object Arguments]"
const mapTag = "[object Map]"
const setTag = "[object Set]"

const boolTag = "[object Boolean]"
const stringTag = "[object String]"
const numberTag = "[object Number]"
const dateTag = "[object Date]"
const errorTag = "[object Error]"

const regTag = "[object RegExp]"
const FunTag = "[object Function]"

// 👇es 6 后无包装类型
// const symbolTag = "[object Symbol]"
// const bigintTag = "[object BigInt]"

// const nullTag = "[object Null]"
// const undefinedTag = "[object Undefined]"

const deepTag = [mapTag, setTag, objectTag, arrayTag, argsTag]

const forEach = (array, iteratee) => {
  let index = -1
  while (++index < array.length) {
    iteratee(array[index], index)
  }

  return array
}

const cloneFunction = func => {
  const bodyReg = /(?<={)(.|\n)+(?=})/m
  const paramReg = /(?<=\().+(?=\)\s+{)/

  const funcString = func.toString()

  if (func.prototype) {
    const param = paramReg.exec(funcString)
    const body = bodyReg.exec(funcString)
    if (!body) return null
    if (!param) return new Function(body[0])
    const args = param[0].split(",")
    return new Function(...args, body[0])
  } else {
    // 箭头函数没有 prototype
    return eval(funcString)
  }
}

const cloneOtherType = (target, type) => {
  const Ctor = target.constructor

  switch (type) {
    case boolTag:
    case stringTag:
    case numberTag:
    case dateTag:
    case errorTag:
      return new Ctor(target)
    case regTag:
      const re = /\w*$/
      const reg = new target.constructor(target.source, re.exec(target))
      reg.lastIndex = target.lastIndex
      return reg
    case FunTag:
      return cloneFunction(target)
    // Symbols 以及没有包装类型了, 面试的时候可以提一下可以用 Object.getOwnPropertySymbols() copy symbol
    default:
      return null
  }
}

const deepClone = (target, map = new WeakMap()) => {
  if (
    (typeof target !== "object" && typeof target !== "function") ||
    target === null
  )
    return source

  const type = Object.prototype.toString.call(target)
  let cloneTarget

  if (!deepTag.includes(type)) return cloneOtherType(target, type)
  const Ctor = target.constructor
  cloneTarget = new Ctor()

  // 处理循环引用
  if (map.has(target)) return map.get(target)
  map.set(target, cloneTarget)

  // 处理 set
  if (type === setTag) {
    target.forEach(value => {
      cloneTarget.add(deepClone(value))
    })
    return cloneTarget
  }

  // 处理 map
  if (type === mapTag) {
    target.forEach((value, key) => {
      cloneTarget.set(key, deepClone(value))
    })
    return cloneTarget
  }

  const keys = arrayTag ? undefined : Object.keys(target)

  forEach(keys || target, (value, key) => {
    if (keys) {
      key = value
    }
    cloneTarget[key] = deepClone(target[key], map)
  })

  return cloneTarget
}

延伸问题

如果使用 JSON.stringify(JSON.parse(xx)) 来进行深拷贝会有什么问题?
- 丢失循环引用信息
- 丢失正则和函数等特殊对象类型
- 丢失原型链等特殊值
- 丢失 undefined
proto 和 prototype 什么区别
- proto 指向构造函数的原型
- prototype 是仅在函数对象上存在的属性，用于定义通过构造函数创建的对象的原型链。
- 注意: for...in 还会枚举继承的属性，用这种遍历方法需要搭配 Object.hasOwnProperty()
类数组对象是什么
- JavaScript 类型化数组是一种类似数组的对象，并提供了一种用于在内存缓冲中访问原始二进制数据的机制。
包装类型和 x 是什么
- 引用类型和包装类型的主要区别就是对象的生存期，使用 new 操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中，而自基本类型则只存在于一行代码的执行瞬间，然后立即被销毁，这意味着我们不能在运行时为基本类型添加属性和方法。
- 围绕原始数据类型创建一个显式包装器对象从 ECMAScript 6 开始不再被支持, 所以诸如 Symbol BigInt 没有包装类型
  - 诸如 new String() 等因为历史的原因留了下来
  - 对于 Symbol 可以用 Object.getOwnPropertySymbols() copy
while、for...in、for 效率哪个高?
- while、for 要比其他循环要高，优势是不用执行回调函数等

(This is an article posted to my blog at huangbowen.cn/blog. You can read it online by clicking here.)

颜色透明度16进制对照表

Fri, 15 Oct 2021 00:00:00 GMT

颜色透明度16进制对照表

100% — FF 99% — FC 98% — FA 97% — F7 96% — F5 95% — F2 94% — F0 93% — ED 92% — EB 91% — E8 90% — E6 89% — E3 88% — E0 87% — DE 86% — DB 85% — D9 84% — D6 83% — D4 82% — D1 81% — CF 80% — CC 79% — C9 78% — C7 77% — C4 76% — C2 75% — BF 74% — BD 73% — BA 72% — B8 71% — B5 70% — B3 69% — B0 68% — AD 67% — AB 66% — A8 65% — A6 64% — A3 63% — A1 62% — 9E 61% — 9C 60% — 99 59% — 96 58% — 94 57% — 91 56% — 8F 55% — 8C 54% — 8A 53% — 87 52% — 85 51% — 82 50% — 80 49% — 7D 48% — 7A 47% — 78 46% — 75 45% — 73 44% — 70 43% — 6E 42% — 6B 41% — 69 40% — 66 39% — 63 38% — 61 37% — 5E 36% — 5C 35% — 59 34% — 57 33% — 54 32% — 52 31% — 4F 30% — 4D 29% — 4A 28% — 47 27% — 45 26% — 42 25% — 40 24% — 3D 23% — 3B 22% — 38 21% — 36 20% — 33 19% — 30 18% — 2E 17% — 2B 16% — 29 15% — 26 14% — 24 13% — 21 12% — 1F 11% — 1C 10% — 1A 9% — 17 8% — 14 7% — 12 6% — 0F 5% — 0D 4% — 0A 3% — 08 2% — 05 1% — 03 0% — 00

(This is an article posted to my blog at huangbowen.cn/blog. You can read it online by clicking here.)

经典题目：从输入URL到页面呈现发生了什么

Wed, 18 Aug 2021 00:00:00 GMT

chrome浏览器是多进程架构，最上层的是浏览器进程（标签页外面的一切都由浏览器进程处理），然后是实用程序进程、渲染进程、GPU进程、插件进程。

所以，当我们在地址栏输入aminer.cn

浏览器进程下面的UI线程去绘制浏览器的按钮和地址栏
UI线程会判断用户输入的是查询字符串还是URL
如果输入的是URL，UI线程会通知网络线程发起网络调用，获取网站内容（此时会先检查强缓存，如果命中直接返回网站内容）
网络线程进行DNS查询（如果之前解析过这个域名，则直接命中缓存）、建立TLS连接（对于HTTPS）（如果返回301此时网络线程会跟UI线程沟通，再对另一个URL发送请求）
通过三次握手建立 TCP 连接(即总共发送3个数据包确认已经建立连接)建立客户端和服务器之间的连接。然后进行数据包发送，接收方接收到数据包后必须要向发送方确认，否则会吃重复发送数据包，最后通过四次挥手断开链接
构建请求行、请求头和请求体，发送 HTTP 请求
收到响应数据，网络线程会检查接收到的前几个字节。响应的Content-Type头部应该包含数据类型，如果没有这个字段，则需要MIME类型嗅探
如果是一个zip文件或其他文件，那就意味着是一个下载请求，需要把数据传给下载管理器。
如果响应是HTML文件，要进行“安全浏览”检查，所有查检完毕，网络线程确认浏览器可以导航到用户请求的网站，于是会通知UI线程数据已经准备好了。UI线程会联系渲染器进程渲染网页。
提交导航。数据和渲染器进程都有了，就可以通过IPC从浏览器进程向渲染器进程提交导航。渲染器进程也会同时接收到不间断的HTML数据流。当浏览器进程收到渲染器进程的确认消息后，导航完成，文档加载阶段开始。
此时，地址栏会更新，安全指示图标和网站设置UI也会反映新页面的信息。当前标签页面的会话历史会更新，后退/前进按钮起作用。为便于标签页/会话在关闭标签页或窗口后恢复，会话历史会写入磁盘。
提交导航之后，渲染器进程将负责加载资源和渲染页面（具体细节后面介绍）。而在“完成”渲染后（在所有iframe中的onload事件触发且执行完成后），渲染器进程会通过IPC给浏览器进程发送一个消息。此时，UI线程停止标签页上的旋转图标。

渲染

构建DOM。渲染器进程收到导航的提交消息后，开始接收HTML，其主线程开始解析文本字符串（HTML），并将它转换为DOM（Document Object Model，文档对象模型）。
加载子资源。网站都会用到图片、CSS和JavaScript等外部资源。浏览器需要从缓存或网络加载这些文件。主线程可以在解析并构建DOM的过程中发现一个加载一个，但这样效率太低。为此，Chrome会在解析同时并发运行“预加载扫描器”，当发现HTML文档中有或时，预加载扫描器会将请求提交给浏览器进程中的网络线程。
JavaScript可能阻塞解析。如果HTML解析器碰到

Hulk's Blog RSS Feed

No title

js 代码是怎么执行的（先编译，再执行）

执行栈？

No title

垃圾回收

Why should we use pnpm?

npm 1/2 时代

npm3

yarn

！！幽灵依赖！！

pnpm

硬软链接概念

QA

浏览器原理

浏览器架构

单进程浏览器

多进程浏览器时代

目前多进程架构

面向服务架构

渲染流程

一文了解深拷贝

JS 数据类型

思路

代码实现

延伸问题

颜色透明度16进制对照表

颜色透明度16进制对照表

经典题目：从输入URL到页面呈现发生了什么

导航

渲染