引言

在现代前端开发中，合理使用 CDN 可以显著提升应用加载速度，但同时也带来了可用性挑战。本文将深入探讨如何实现稳健的 CDN 加载策略，包括开发与生产环境的不同处理方式，以及必不可少的 fallback 机制。

一、CDN 基础与价值

1.1 什么是 CDN？

内容分发网络（Content Delivery Network）通过全球分布的节点服务器，使用户可以从地理位置上最近的服务器获取资源。

1.2 CDN 的优势

• 更快的资源加载速度
• 减轻源服务器负担
• 提高资源可用性
• 更好的用户体验

useLayoutEffect 和 useEffect 都是 React 提供的 Hook，用于处理副作用，但它们在执行时机上有重要区别。

主要区别

前言

在前端开发中，我们经常遇到一些计算量大的任务：数据处理、图表预计算、循环遍历、密集数学运算等。如果不小心放在主线程中同步执行，很容易导致：

• 页面卡顿、掉帧；
• 动画不流畅；
• 用户点击无响应；
• “页面无响应”警告。

本文将总结常见导致渲染卡顿的原因，并提供几种主流的优化思路，帮助你轻松搞定性能瓶颈！

一、问题再现：百万次循环，页面瞬间卡死

1
2
3
4
5

let total = 0;
for (let i = 0; i < 1_000_000; i++) {
  total += i;
}
count.value = total;

为什么？

• 这段代码是同步执行的；
• JavaScript 单线程运行，会阻塞主线程；
• 在阻塞期间，浏览器无法渲染页面或响应用户操作；
• 用户体验极差，轻则掉帧，重则直接页面“假死”。

前言

有时候，开发者需要知道，用户正在离开页面。常用的方法是监听下面三个事件。

• pagehide
• beforeunload
• unload

但是，这些事件在手机上可能不会触发，页面就直接关闭了。因为手机系统可以将一个进程直接转入后台，然后杀死。

• 用户点击了一条系统通知，切换到另一个 App。
• 用户进入任务切换窗口，切换到另一个 App。
• 用户点击了 Home 按钮，切换回主屏幕。
• 操作系统自动切换到另一个 App（比如，收到一个电话）。

上面这些情况，都会导致手机将浏览器进程切换到后台，然后为了节省资源，可能就会杀死浏览器进程。

以前，页面被系统切换，以及系统清除浏览器进程，是无法监听到的。开发者想要指定，任何一种页面卸载情况下都会执行的代码，也是无法做到的。为了解决这个问题，就诞生了 Page Visibility API。不管手机或桌面电脑，所有情况下，这个 API 都会监听到页面的可见性发生变化。

这个新的 API 的意义在于，通过监听网页的可见性，可以预判网页的卸载，还可以用来节省资源，减缓电能的消耗。比如，一旦用户不看网页，下面这些网页行为都是可以暂停的。

• 对服务器的轮询
• 网页动画
• 正在播放的音频或视频

前言

服务器向客户端推送数据，有很多解决方案。除了“轮询” 和 WebSocket，HTML 5 还提供了 Server-Sent Events（以下简称 SSE）。

一般来说，HTTP 协议只能客户端向服务器发起请求，服务器不能主动向客户端推送。但是有一种特殊情况，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。

SSE 就是利用这种机制，使用流信息向浏览器推送信息。它基于 HTTP 协议，目前除了 IE/Edge，其他浏览器都支持。

与 WebSocket 的比较

SSE 与 WebSocket 作用相似，都是建立浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息。

总体来说，WebSocket 更强大和灵活。因为它是全双工通道，可以双向通信；SSE 是单向通道，只能服务器向浏览器发送，因为 streaming 本质上就是下载。如果浏览器向服务器发送信息，就变成了另一次 HTTP 请求。

但是，SSE 也有自己的优点。

• SSE 使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议。
• SSE 属于轻量级，使用简单；WebSocket 协议相对复杂。
• SSE 默认支持断线重连，WebSocket 需要自己实现断线重连。
• SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据。
• SSE 支持自定义发送的消息类型。

因此，两者各有特点，适合不同的场合。

前言

幽灵依赖指的是：一个包可以使用它的祖先依赖（祖先的 node_modules 里的包），即使它自己没有在 package.json 中声明该依赖。

这种情况通常发生在 npm 和 yarn 采用的Hoisting（依赖提升）策略下，导致某些包在 node_modules 目录中可访问，但其实不应该被访问。

⸻

1. 为什么会产生幽灵依赖？

在 npm 和 yarn 的默认 node_modules 结构中，依赖会被“提升”（hoist）到上级目录的 node_modules 中，以减少重复安装。例如：

示例

假设 package.json 这样定义：

1
2
3
4
5
6

{
  "dependencies": {
    "A": "^1.0.0",
    "B": "^1.0.0"
  }
}

​ • A 依赖于 lodash，但 B 并不依赖 lodash。
​ • 在 npm 或 yarn 的 hoisting 机制下，可能会将 lodash 提升到 node_modules/ 目录的根目录。

目录结构可能变成这样：

1
2
3
4
5
6

/node_modules
  /A
    /node_modules
      lodash/  (← 可能不会出现在这里)
  /B
  lodash/  (← 被提升到顶层)

问题：

B 本来没有依赖 lodash，但它仍然可以直接 require(‘lodash’)，因为 lodash 被提升到了顶层 node_modules/，而 Node.js 依赖解析规则会向上查找。

• 关闭Windows Search
  控制面板–管理工具–服务- Windows Search禁用。

• 禁用 Diagnostics Tracking Service和Connected User Experiences and Telemetry
  这个服务是用来服务跟踪诊断的，就是在咱们使用系统的时候不停地收集系统信息，是微软的一个搜集工具而已。在很多情况下，CPU的高占用率就是它搞的鬼。
  win+R 运行 services.msc 进入服务，禁用Diagnostics Tracking Service ，若找不到这个服务的话那就是禁用Diagnostic Policy Service，然后禁用Connected User Experiences and Telemetry 就好。

• 关闭允许后台运行的软件
  打开系统设置— 隐私 —后台应用 关闭不需要的应用即可 （大多数其实都没什么用可以直接关闭最上方按钮）

• 关闭更新来自多个位置
  打开系统设置—更新和安全—Windows更新—高级选项—选择如何提供更新，将“更新来自多个位置”关闭即可

• 关闭小娜
  使用组策略禁用Cortana
  　　1、使用 Windows + R 快捷键打开「运行」— 执行 gpedit.msc 打开组策略编辑器。
  　　2、导航到「计算机配置」—「管理模板」—「Windows 组件」—「搜索」。
  　　3、在右侧面板中找到「允许使用 Cortana」条目，将其设置为「已禁用」即可。

• 修改处理器个数

  \1. 同时按住Win+r打开运行框，输入msconfig指令，点击回车。

  \2. 点击引导，再点击高级选项。

  \3. 点击处理器个数下方的选项框，选择大的数字，再点击确定。

引言

服务器端渲染（Server-Side Rendering，简称 SSR）是指在服务器端生成 HTML 内容并发送到客户端的过程。与客户端渲染（Client-Side Rendering，简称 CSR）相比，SSR 可以提高首屏加载速度和 SEO 友好性。
如需更高级的集成框架可以使用nuxtjs

文件结构

1
2
3
4
5
6
7
8
9
10
11

my-ssr-app/
├── dist/                      # 构建输出目录
├── public/                    # 公共资源目录
│   └── index.html             # HTML 模板
├── src/                       # 源代码目录
│   ├── entry-client.js        # 客户端入口文件
│   ├── entry-server.js        # 服务器端入口文件
|   └── main.js
├── package.json               # 项目配置文件
├── server.js                  # Express 服务器配置
└── vue.config.js   					 # Webpack 服务器端配置

构造流程

1. 安装必要的依赖

SSR 需要一些额外的依赖包，如 @vue/server-renderer 和 express。在项目根目录下运行以下命令安装这些依赖：

1

npm install @vue/server-renderer express webpack-manifest-plugin webpack-node-externals --save-dev

相关版本：

1
2
3
4
5

"@vue/cli-service": "~5.0.0",
"express": "^4.21.2",
"@vue/server-renderer": "^3.5.13",
"webpack-manifest-plugin": "^5.0.0",
"webpack-node-externals": "^3.0.0"