---
url: https://sugarat.top/weekly/2024-06-09.md
description: >-
  ① js 中的经典八股 ② merge-anything - 深度合并对象的库 ③ DOM 树深度对渲染性能的影响 ④ Node.js 15周年 ⑤
  页面元素测量工具 ⑥ Best Cookier - cookie管理插件 ⑦ ShotEasy - 在线的图片压缩 ⑧ 2024 应该了解的 Node.js
  特性 ⑨ CSS 长度单位介绍 - 非常全面的指南 ⑩ 仅使用CSS实现计时器
---

# 视野修炼第87期 | 端午安康

欢迎来到第 87 期的【视野修炼 - 技术周刊】，下面是本期的精选内容简介

\[\[toc]]

**​也推荐大家关注一下最后的推荐内容（周刊的主要内容来源渠道）**

下面开始本期内容的介绍**ღ( ´･ᴗ･\` )比心**。

## 🔥强烈推荐

### [1. js 中的经典八股](https://mp.weixin.qq.com/s/TsoJok363BjAJd4vaqeqrg)

```js
Number.parseInt(0.0000005) === 5 // true
Number.NaN === Number.NaN // false

(() => {
  try {
    return 1
  }
  finally {
    return 2
  }
})() === 2 // true

Math.max() < Math.min() // true
```

好奇结果为什么会是这样？可以看看这篇文章，很多经典的问题 👍🏻。

### [2. merge-anything](https://github.com/mesqueeb/merge-anything) - 深度合并对象的库

使用示例

```ts
import { merge } from 'merge-anything'

const starter = { name: 'Squirtle', types: { water: true } }
const newValues = { name: 'Wartortle', types: { fighting: true }, level: 16 }

const evolution = merge(starter, newValues, { is: 'cool' })
// returns {
//   name: 'Wartortle',
//   types: { water: true, fighting: true },
//   level: 16,
//   is: 'cool'
// }
```

完整的 TS 类型支持。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/6dc1113c81b03464f6d6322b4a3039b4)

```ts
import type { Merge } from 'merge-anything'

interface A1 { name: string }
interface A2 { types: { water: boolean } }
interface A3 { types: { fighting: boolean } }

type Result = Merge<A1, [A2, A3]>
```

作者还有很多其它好用的小工具项目。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/6f68ce498e1afacd8c50400ed40ee8af)

*收藏起来，一定有机会用得上这个。*

### [3. DOM 树深度对渲染性能的影响](https://frontendatscale.com/blog/how-deep-is-your-dom/)

作者在使用 lighthouse 分析网页性能时发现了这个警告。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/78bb709f2aacd03fa72a05e1c39e244f)

然后开始了影响的探究，下面是它的测试结论，[GitHub: 测试代码](https://github.com/Charca/dom-depth)。

*作者的测试机器 Mac M1，CPU速度降低4倍。*

![](https://cdn.upyun.sugarat.top/mdImg/sugar/8259428ea57ef2333f9c1d38a767899b)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/2b98664f675774a6e6763b0629b22c80)

下面时设置 CPU 降速的位置。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/022e872f57feb0600aaca986282da723)

有额外的样式场景下，DOM重新计算耗时有明显的页面卡顿。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/cc320411698b5ce33994df1d4796192f)

最后作者的大概的结论是：**避免有附加样式且过深的嵌套**。

## 🔧开源工具&技术资讯

### 4. Node.js 15周年

![](https://cdn.upyun.sugarat.top/mdImg/sugar/fe7843d512d2a2f1871c80f7cf4738d4)

*时间过得真快，印象中 14 周年才过没多久。*

![](https://cdn.upyun.sugarat.top/mdImg/sugar/4d45983d4933637c75e77911a3ea7a99)

### [5. 页面元素测量工具](https://chromewebstore.google.com/detail/screen-ruler-measure-the/jfbbgijjljfbolelfkopkhbfjajjampm)

一个 chrome 插件，可以测量 WEB 页面元素的尺寸信息。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/9932545cbbf960b026fd050cb4a52afc)

部分大公司是会有专门的UI走查工具给设计同学验收页面使用。

笔者很久之前也做过[类似的工具](https://github.com/ATQQ/ewuit)，效果差不多。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/57b555975b9d8f0558775b9bca2c147b)

### [6. Best Cookier](https://github.com/Dolov/chrome-best-cookier) - cookie管理插件

可以便捷的增、删、改、查，**非 http-only 的 cookie**，支持便捷的导入导出，变化监听。

![](https://cdn.upyun.sugarat.top/mdImg/sugar/0e6455ff0f664e70a5997bf507d3868b)

### [7. ShotEasy](https://shoteasy.fun/image-compressor) - 在线的图片压缩

![](https://cdn.upyun.sugarat.top/mdImg/sugar/bc056ec073d22de4eaebc3d0c21ee253)

没有细看效果，可以先收藏，有需要的时候拿出来用用。

## 📚 教程&文章

### [8. 2024 应该了解的 Node.js 特性](https://mp.weixin.qq.com/s/pFLBG0gIxFOu-OvWMXWqkA)

文章展示了 Node.js v21 已经开箱即用的一些新特性。

① 测试相关：内置 `assert`, `test`, `mock` 模块搭配使用，内置测试覆盖率。

```js
import assert from 'node:assert'
import fs from 'node:fs/promises'
import { describe, mock, test } from 'node:test'
import { loadEnv } from '../src/dotenv.js'

describe('dotenv test suite', () => {
  test('should load env file', async () => {
    const mockImplementation = async (path) => {
      return 'PORT=3000\n'
    }
    const mockedReadFile = mock.method(fs, 'readFile', mockImplementation)
    const env = await loadEnv('.env')
    assert.strictEqual(env.PORT, '3000')
  })
})
```

```json
{
  "scripts": {
    "test": "node --test ./tests",
    "test:coverage": "node --experimental-coverage --test ./tests"
  }
}
```

② node watch

```sh
node --watch app.js
```

可以平替 nodemon

③ 读取 `.env` 文件中的环境变量

```sh
node --env-file=./.env.default --env-file=./.env.development index.js
```

④ 定时器 Promise

```js
const {
  setTimeout,
} = require('node:timers/promises')

setTimeout(2000, 'Two seconds later...').then((res) => {
  console.log(res)
})

console.log('Taking a break...')
```

### [9. CSS 长度单位介绍](https://css-tricks.com/css-length-units/) - 非常全面的指南

![](https://cdn.upyun.sugarat.top/mdImg/sugar/4afeb14e321311183c78893146a467ee)

### [10. 仅使用CSS实现计时器](https://frontendmasters.com/blog/how-to-make-a-css-timer/)

![](https://cdn.upyun.sugarat.top/mdImg/sugar/0178c62bc3857e19e7558ca2eae251b0)

## 😛趣图

![](https://cdn.upyun.sugarat.top/mdImg/sugar/54f9799d174a2fe8062fe4a208da5049)

***

篇幅有限，如果你还没看够，可移步后面的推荐渠道，继续游览，历史周刊（<20）[移步博客](https://sugarat.top/weekly/index.html)

## ⭐️强力推荐关注

* [阮一峰: 科技爱好者周刊](https://www.ruanyifeng.com/blog/archives.html) - 记录每周值得分享的科技内容，周五发布
* [云谦：MDH 前端周刊](https://sorrycc.com/mdh/) - 前端资讯和分享
  s\* [前端RSS](https://fed.chanceyu.com/) - 根据 RSS 订阅源抓取最新前端技术文章
* [值得一读技术博客](https://daily-blog.chlinlearn.top/) - 每天进步一点点，每天分享有料的技术文章！
* [FRE123 技术周刊精选](https://www.fre123.com/weekly) - 前后端技术周刊精选推荐信息流