![image.png](https://api.gaoredu.com/public/uploads/2025-09-27/image.png)

## 问题描述
首次初始化electron-vite项目，运行pnpm dev后出现了报错，一大堆，关键的就是提到了electron uninstall这个错误。


## 解决方法
如果是在node环境下，运行命令 node .\node_modules\electron\install.js 后，项目就可以正常启动了。


## 问题背景

最近在初始化一个新的 electron-vite 项目时，运行 `pnpm dev` 命令后遇到了一系列错误，其中最关键的报错信息提到了 **electron uninstall**。这个错误通常发生在首次创建或克隆 Electron 项目时，特别是在依赖安装完成后尝试启动开发环境的情况下。

## 错误现象

当你满怀期待地执行 `pnpm dev` 命令，准备开始 Electron 开发之旅时，却在控制台看到了类似以下的错误信息：

```
Error: Cannot find module 'electron'
// 或者
Error: Electron failed to install correctly
// 或者直接提到 electron uninstall 相关错误
```

这些错误通常伴随着一堆堆栈跟踪信息，让新手开发者感到困惑。

## 问题根源

这个问题的根本原因在于 Electron 的安装机制。Electron 包在安装过程中需要执行一个后安装脚本（post-install script）来下载实际的 Electron 二进制文件。有时候，由于网络问题、权限限制或安装过程被中断，这个步骤可能没有正确完成。

## 解决方案

### 方法一：手动运行安装脚本（推荐）

最简单的解决方法是手动运行 Electron 的安装脚本：

```bash
node ./node_modules/electron/install.js
```

这个命令会：
1. 检查当前平台（Windows、macOS 或 Linux）
2. 下载对应平台的 Electron 二进制文件
3. 将其安装到项目的 `node_modules` 目录中

### 方法二：重新安装依赖

如果上述方法不奏效，可以尝试删除 `node_modules` 文件夹并重新安装依赖：

```bash
# 删除 node_modules
rm -rf node_modules
# 或者 Windows 系统使用
rmdir /s node_modules

# 重新安装依赖
pnpm install
```

### 方法三：清除缓存并重新安装

有时候，缓存可能导致安装问题：

```bash
# 清除 npm/pnpm 缓存
pnpm store prune
# 或者
npm cache clean --force

# 然后重新安装依赖
pnpm install
```

### 方法四：检查网络和代理设置

如果你在公司网络或使用代理，可能需要检查网络设置：

```bash
# 设置 Electron 镜像（中国大陆用户）
npm config set electron_mirror https://npmmirror.com/mirrors/electron/

# 然后重新运行安装
node ./node_modules/electron/install.js
```

## 预防措施

为了避免将来再次遇到这个问题，可以考虑以下预防措施：

1. **使用可靠的网络环境**：在安装 Electron 项目时确保网络连接稳定

2. **设置环境变量**：对于经常需要安装 Electron 的环境，可以设置镜像源：
   ```bash
   # 在 .bashrc、.zshrc 或环境变量中设置
   export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
   ```

3. **使用 .npmrc 配置**：在项目根目录创建 `.npmrc` 文件：
   ```
   electron_mirror=https://npmmirror.com/mirrors/electron/
   ```

4. **考虑使用 yarn 或 pnpm**：这些包管理器有时能更好地处理依赖安装

## 深入理解

为什么需要这个额外的安装步骤？这是因为 Electron 实际上由两部分组成：
- 包含 JavaScript API 的 npm 包
- 平台特定的二进制可执行文件

当你安装 `electron` npm 包时，它只包含了 JavaScript 部分。实际的 Chromium + Node.js 运行时需要在安装后单独下载，这就是 `install.js` 脚本的作用。

## 总结

遇到 Electron uninstall 错误时不必惊慌，这通常只是 Electron 二进制文件没有正确下载导致的。通过运行 `node ./node_modules/electron/install.js` 命令，大多数情况下问题都能迎刃而解。如果问题依然存在，按照上述方法一步步排查，通常能找到解决方案。

希望这篇博客能帮助遇到类似问题的开发者顺利开始他们的 Electron 开发之旅！



首次初始化electron-vite项目，运行pnpm dev后出现了报错，一大堆，关键的就是提到了electron uninstall这个错误。

 初始化electron项目运行后报错 electron uninstall 解决方法

方法一：手动运行安装脚本（推荐）


> 本地构建一切正常，但一到 Vercel 就报错？这可能是 Git 大小写敏感性在作祟。本文将分享一个真实的故障排查案例，帮助你避免这个隐蔽的跨平台兼容性问题。

## 问题背景：诡异的构建失败

最近在部署一个 React 项目到 Vercel 时，遇到了一个令人困惑的问题：

```bash
# 本地构建（成功）
pnpm run build
# ✅ 一切正常

# Vercel 构建（失败）
22:32:28.979 src/api/Article.ts(27,43): error TS2307: 
Cannot find module './HttpClient' or its corresponding type declarations.
```

奇怪的是，相同的代码、相同的依赖、相同的构建命令，在本地能够完美构建，但在 Vercel 上却失败了。

## 问题根源：大小写敏感性的差异

经过排查，发现问题出在文件命名上：

- **实际文件名**: `httpClient.ts`（首字母小写）
- **导入语句**: `import HttpClient from './HttpClient';`（首字母大写）

这个差异在不同操作系统环境下表现不同：

### 操作系统差异

| 环境 | 大小写敏感性 | 行为 |
|------|-------------|------|
| Windows | 不敏感 | `./HttpClient` 和 `./httpClient` 都能找到文件 |
| macOS | 通常不敏感 | 同上 |
| Linux (Vercel) | 敏感 | 必须精确匹配 `./HttpClient` |

### Git 的配置陷阱

问题的深层原因在于 Git 的配置：

```bash
# 检查 Git 大小写配置
git config core.ignorecase
# 返回: true
```

当 `core.ignorecase=true` 时，Git 不会区分文件名的大小写，这就导致了：

1. 在 Windows/Mac 上开发时，一切正常
2. 文件被提交为 `httpClient.ts`（小写）
3. 但在 Linux 构建环境中，导入语句找不到对应的文件

## 解决方案：三步修复法

### 第一步：诊断问题

```bash
# 查看实际文件名
find . -name "*httpclient*" -type f
# 输出: ./src/api/httpClient.ts

# 查看 Git 记录的文件名
git ls-files | grep -i httpclient
# 输出: src/api/httpClient.ts
```

### 第二步：修复文件名

```bash
# 临时启用大小写敏感
git config core.ignorecase false

# 重命名文件（两步法避免冲突）
git mv src/api/httpClient.ts src/api/HttpClient.temp.ts
git mv src/api/HttpClient.temp.ts src/api/HttpClient.ts

# 提交修复
git commit -m "fix: correct HttpClient filename case sensitivity"
git push origin feat/reactpresss-config-v2
```

### 第三步：验证修复

```bash
# 在 GitHub 上确认文件名已更正
# 等待 Vercel 重新部署
# 构建应该成功通过
```

## 预防措施：建立防护网

### 1. 项目级配置

在项目中添加 `.gitconfig` 文件：

```ini
[core]
    ignorecase = false
```

### 2. ESLint 规则检查

配置 ESLint 检查文件名规范：

```javascript
// .eslintrc.js
module.exports = {
  rules: {
    'unicorn/filename-case': [
      'error',
      {
        cases: {
          camelCase: true,    // 工具函数：camelCase
          pascalCase: true    // 类/组件：PascalCase
        }
      }
    ]
  }
};
```

### 3. CI/CD 流水线检查

在 GitHub Actions 中添加检查：

```yaml
# .github/workflows/check-filenames.yml
name: Check Filename Case
on: [push, pull_request]

jobs:
  check-case:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Check filename consistency
        run: |
          for file in $(find src -name "*.ts" -o -name "*.tsx"); do
            filename=$(basename "$file" .ts | basename "$file" .tsx)
            if [[ $filename =~ [A-Z] ]]; then
              echo "✓ $filename uses PascalCase"
            else
              echo "⚠ $filename - consider using PascalCase for components/classes"
            fi
          done
```

### 4. 预提交钩子

使用 Husky 在提交前检查：

```bash
#!/bin/bash
# .husky/pre-commit
find src -name "*.ts" -o -name "*.tsx" | while read file; do
    base=$(basename "$file")
    if [[ $base =~ ^[a-z] ]] && [[ $base =~ \.(ts|tsx)$ ]]; then
        echo "警告: 建议类文件使用 PascalCase: $file"
    fi
done
```

## 深入理解：为什么会有这种差异？

### 历史原因

- **Windows**: 源于 DOS，设计初衷是用户友好，不区分大小写
- **Linux**: 源于 UNIX，强调精确和一致性，区分大小写
- **macOS**: 基于 UNIX，但默认文件系统 HFS+/APFS 通常不区分大小写

### Git 的设计选择

Git 为了跨平台兼容性，默认采用 `core.ignorecase=true`，这在实际开发中带来了便利，但也埋下了隐患。

## 最佳实践总结

1. **统一命名规范**
   - 类文件使用 PascalCase: `HttpClient.ts`
   - 工具函数使用 camelCase: `formatDate.ts`
   - 配置文件使用 kebab-case: `app-config.ts`

2. **团队协作约定**
   - 新成员入职时强调文件名规范
   - 代码审查时注意文件名大小写
   - 使用工具自动化检查

3. **跨平台开发策略**
   - 主要开发环境尽量与生产环境一致（推荐使用 Linux 容器）
   - 定期在 CI/CD 环境中测试构建
   - 建立快速反馈机制

## 结语

这个看似简单的"大小写"问题，实际上涉及操作系统设计、Git 工作原理、团队协作规范等多个层面。在跨平台开发日益普遍的今天，我们需要更加重视这类环境差异导致的问题。

**记住：在本地能运行只是第一步，在生产环境能运行才是真正的完成。**

希望通过这个案例，你能避免类似的陷阱，建立更健壮的开发工作流。如果你也遇到过类似的跨平台兼容性问题，欢迎在评论区分享你的经验和解决方案！

---

*本文基于真实故障排查经历撰写，项目已成功部署。特别感谢 Vercel 清晰的错误日志，让问题定位变得容易。*

本地构建一切正常，但一到 Vercel 就报错？这可能是 Git 大小写敏感性在作祟。本文将分享一个真实的故障排查案例，帮助你避免这个隐蔽的跨平台兼容性问题。

从 Vercel 构建失败谈 Git 大小写敏感性问题：一个容易被忽视的跨平台陷阱

问题根源：大小写敏感性的差异

深入理解：为什么会有这种差异？

## 问题概述
在使用 NestJS 构建安装向导服务时，开发人员经常会遇到一系列棘手问题，包括端口占用冲突、进程异常关闭、服务启动失败，以及安装成功后前端轮询无法正确检测服务状态等问题。这些问题不仅影响用户体验，还可能导致安装流程完全失败。

## 问题一：偶发进程关闭异常

### 根本原因分析
1. **竞争条件**：安装服务器关闭与主应用启动之间存在时间差，导致资源访问冲突
2. **状态管理缺失**：缺乏服务器状态跟踪机制，无法判断服务器是否已完全关闭
3. **异常处理不足**：关闭操作缺少超时控制和错误恢复机制
4. **资源未完全释放**：连接和套接字未正确清理，导致端口占用

### 核心解决方案代码

```typescript
// 服务器状态跟踪接口
interface ServerState {
  server: any;
  isClosing: boolean;
  isListening: boolean;
}

// 全局状态管理
const serverState: ServerState = {
  server: null,
  isClosing: false,
  isListening: false
};

// 安全关闭服务器函数
const safelyCloseServer = async (): Promise<void> => {
  if (!serverState.server || serverState.isClosing) {
    return;
  }
  
  serverState.isClosing = true;
  
  return new Promise((resolve) => {
    // 设置超时强制关闭
    const timeout = setTimeout(() => {
      if (serverState.server.closeAllConnections) {
        serverState.server.closeAllConnections();
      }
      serverState.server = null;
      serverState.isClosing = false;
      serverState.isListening = false;
      resolve();
    }, 3000);
    
    // 尝试正常关闭
    serverState.server.close((err: any) => {
      clearTimeout(timeout);
      if (err && err.code !== 'ERR_SERVER_NOT_RUNNING') {
        console.warn('Server close warning:', err.message);
      }
      serverState.server = null;
      serverState.isClosing = false;
      serverState.isListening = false;
      resolve();
    });
  });
};
```

## 问题二：服务启动后轮询异常

### 根本原因分析
1. **时机不同步**：前端轮询开始时，后端服务尚未完全初始化完成
2. **URL 不一致**：前端使用固定URL轮询，但后端服务可能使用不同端口
3. **缺少超时处理**：轮询请求可能无限期等待，导致浏览器阻塞
4. **错误处理不足**：网络错误或服务暂时不可用时缺乏重试机制

### 核心解决方案代码

```typescript
// 后端：安装完成后返回正确的服务器URL
app.post('/install', async (req, res) => {
  try {
    // ... 安装逻辑
    
    res.json({ 
      success: true, 
      message: 'Installation completed! Server will restart.',
      serverUrl: site.serverUrl || 'http://localhost:3002' // 返回实际使用的URL
    });
    
    // 确保响应已发送后再关闭服务器
    res.on('finish', async () => {
      await safelyCloseServer();
      await startMainApplication();
    });
  } catch (error: any) {
    res.status(400).json({ 
      success: false, 
      message: `Installation failed: ${error.message}` 
    });
  }
});
```

```javascript
// 前端：智能轮询机制
let redirectAttempts = 0;
const maxRedirectAttempts = 30;

function startServerStatusCheck() {
  const checkInterval = setInterval(() => {
    if (redirectAttempts >= maxRedirectAttempts) {
      clearInterval(checkInterval);
      showError('Server did not start in time');
      return;
    }
    
    // 使用HEAD请求和超时控制
    fetch(`${serverUrl}/api`, { 
      method: 'HEAD',
      signal: AbortSignal.timeout(3000)
    })
    .then(response => {
      if (response.ok) {
        clearInterval(checkInterval);
        window.location.href = `${serverUrl}/api`;
      } else {
        redirectAttempts++;
      }
    })
    .catch(() => {
      redirectAttempts++;
      updateStatusMessage(`Waiting for server... (${redirectAttempts}/${maxRedirectAttempts})`);
    });
  }, 2000);
}
```

## 问题三：端口占用与服务启动失败

### 根本原因分析
1. **端口竞争**：多个服务实例尝试绑定相同端口
2. **进程残留**：先前实例异常退出，端口未释放
3. **缺乏端口管理**：没有端口检测和自动回退机制

### 核心解决方案代码

```typescript
// 端口检测函数
const checkPort = (port: number): Promise<boolean> => {
  return new Promise((resolve) => {
    const server = net.createServer();
    server.once('error', () => resolve(false));
    server.once('listening', () => server.once('close', () => resolve(true)).close());
    server.listen(port);
  });
};

// 查找可用端口
const findAvailablePort = async (startPort: number): Promise<number> => {
  for (let port = startPort; port < startPort + 10; port++) {
    if (await checkPort(port)) {
      return port;
    }
  }
  throw new Error(`No available ports found in range ${startPort}-${startPort + 9}`);
};

// 等待端口释放
const waitForPort = async (port: number, timeout = 30000): Promise<boolean> => {
  const startTime = Date.now();
  
  while (Date.now() - startTime < timeout) {
    if (await checkPort(port)) {
      return true;
    }
    await new Promise(resolve => setTimeout(resolve, 500));
  }
  
  return false;
};
```

## 综合解决方案实施

### 1. 安装流程优化
```typescript
const main = async () => {
  try {
    setupSignalHandlers();
    
    const envPath = join(__dirname, '../.env');
    if (fs.existsSync(envPath)) {
      console.log('[ReactPress] Environment file exists, starting main application');
      await startMainApplication();
      return;
    }
    
    console.log('[ReactPress] Starting installation wizard');
    await runInstallationWizard();
    
  } catch (error) {
    console.error('[ReactPress] Fatal error:', error);
    await safelyCloseServer();
    process.exit(1);
  }
};
```

### 2. 主应用启动流程
```typescript
const startMainApplication = async (): Promise<void> => {
  try {
    // 确保安装服务器完全关闭
    await safelyCloseServer();
    
    // 延迟启动以确保端口释放
    await new Promise(resolve => setTimeout(resolve, 1000));
    
    // 动态导入以避免在安装阶段加载 NestJS
    const { bootstrap } = await import('./starter');
    await bootstrap();
  } catch (error) {
    console.error('Failed to start main application:', error);
    process.exit(1);
  }
};
```

## 总结

通过以上解决方案，我们成功解决了 NestJS 安装服务中的三个核心问题：

1. **进程关闭异常**：通过状态跟踪和安全关闭机制，确保服务器完全关闭后再启动新服务
2. **轮询异常**：通过智能轮询机制、超时控制和正确的URL管理，确保前端能正确检测服务状态
3. **端口占用**：通过端口检测、等待和自动查找机制，避免端口冲突

这些解决方案不仅提高了安装服务的稳定性和可靠性，还显著改善了用户体验，使安装过程更加顺畅和可预测。关键技术点包括状态管理、资源清理、超时控制和渐进式回退策略，这些原则同样适用于其他类似的服务器应用场景。

在使用 NestJS 构建安装向导服务时，开发人员经常会遇到一系列棘手问题，包括端口占用冲突、进程异常关闭、服务启动失败，以及安装成功后前端轮询无法正确检测服务状态等问题。这些问题不仅影响用户体验，还可能导致安装流程完全失败。

NestJS 安装服务稳定性问题分析与解决方案

问题三：端口占用与服务启动失败

# 事件循环

## 浏览器的进程模型

### 何为进程？

程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZV4E..png)


每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

### 何为线程？

有了进程后，就可以运行程序的代码了。

运行代码的「人」称之为「线程」。

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。

如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVBS..png)

### 浏览器有哪些进程和线程？

**浏览器是一个多进程多线程的应用程序**

浏览器内部工作极其复杂。

为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVJ6..png)

> 可以在浏览器的任务管理器中查看当前的所有进程

其中，最主要的进程有：

1. 浏览器进程

   主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

2. 网络进程

   负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

3. **渲染进程**（本节课重点讲解的进程）

   渲染进程启动后，会开启一个**渲染主线程**，主线程负责执行 HTML、CSS、JS 代码。

   默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同的标签页之间不相互影响。

   > 将来该默认模式可能会有所改变，有兴趣的同学可参见[chrome官方说明文档](https://chromium.googlesource.com/chromium/src/+/main/docs/process_model_and_site_isolation.md#Modes-and-Availability)

## 渲染主线程是如何工作的？

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

- 解析 HTML
- 解析 CSS
- 计算样式
- 布局
- 处理图层
- 每秒把页面画 60 次
- 执行全局 JS 代码
- 执行事件处理函数
- 执行计时器的回调函数
- ......

> 思考题：为什么渲染进程不适用多个线程来处理这些事情？

要处理这么多的任务，主线程遇到了一个前所未有的难题：如何调度任务？

比如：

- 我正在执行一个 JS 函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗？
- 我正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗？
- 浏览器进程通知我“用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪一个呢？
- ......

渲染主线程想出了一个绝妙的主意来处理这个问题：排队

![image-20220809223027806](http://mdrs.yuanjin.tech/img/202208092230847.png)

1. 在最开始的时候，渲染主线程会进入一个无限循环
2. 每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。
3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务

这样一来，就可以让每个任务有条不紊的、持续的进行下去了。

**整个过程，被称之为事件循环（消息循环）**

## 若干解释

### 何为异步？

代码在执行过程中，会遇到一些无法立即处理的任务，比如：

- 计时完成后需要执行的任务 —— `setTimeout`、`setInterval`
- 网络通信完成后需要执行的任务 -- `XHR`、`Fetch`
- 用户操作后需要执行的任务 -- `addEventListener`

如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于「阻塞」的状态，从而导致浏览器「卡死」

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZUX0..png)

**渲染主线程承担着极其重要的工作，无论如何都不能阻塞！**

因此，浏览器选择**异步**来解决这个问题

![图片](https://api.gaoredu.com/public/uploads/2025-01-06/QK3DAE07M1M3F07RUQZVQK..png)

使用异步的方式，**渲染主线程永不阻塞**

> 面试题：如何理解 JS 的异步？
>
> 
>
> 参考答案：
>
> JS是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。
>
> 而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。
>
> 如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。
>
> 所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。
>
> 在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

### JS为何会阻碍渲染？

先看代码

```html
<h1>Mr.Yuan is awesome!</h1>
<button>change</button>
<script>
  var h1 = document.querySelector('h1');
  var btn = document.querySelector('button');

  // 死循环指定的时间
  function delay(duration) {
    var start = Date.now();
    while (Date.now() - start < duration) {}
  }

  btn.onclick = function () {
    h1.textContent = '袁老师很帅！';
    delay(3000);
  };
</script>
```

点击按钮后，会发生什么呢？

<见具体演示>

### 任务有优先级吗？

任务没有优先级，在消息队列中先进先出

但**消息队列是有优先级的**

根据 W3C 的最新解释:

- 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。
  在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
- 浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行
  https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

> 随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法

在目前 chrome 的实现中，至少包含了下面的队列：

- 延时队列：用于存放计时器到达后的回调任务，优先级「中」
- 交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」
- 微队列：用户存放需要最快执行的任务，优先级「最高」

> 添加任务到微队列的主要方式主要是使用 Promise、MutationObserver
>
> 
>
> 例如：
>
> ```js
> // 立即把一个函数添加到微队列
> Promise.resolve().then(函数)
> ```

> 浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑

> 面试题：阐述一下 JS 的事件循环
>
> 
>
> 参考答案：
>
> 事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。
>
> 在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。
>
> 过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。
>
> 根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

> 面试题：JS 中的计时器能做到精确计时吗？为什么？
>
> 
>
> 参考答案：
>
> 不行，因为：
>
> 1. 计算机硬件没有原子钟，无法做到精确计时
> 2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差
> 3. 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差
> 4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差

深入剖析JavaScript的事件循环

# 参考资料

## 前端工具

- Git
  1. [入门篇](https://backlog.com/git-tutorial/cn/intro/intro1_1.html)
  2. [高级篇](https://backlog.com/git-tutorial/cn/stepup/stepup1_1.html)
  3. [索引篇](https://backlog.com/git-tutorial/cn/reference/)
  4. [原版](https://www.atlassian.com/git/tutorials/merging-vs-rebasing)
  5. [原版翻译](https://github.com/geeeeeeeeek/git-recipes/wiki/1.1-%E6%9E%9C%E5%A3%B3%E4%B8%AD%E7%9A%84-Git)
  6. [Git 的奇技淫巧](https://github.com/cucygh/git-tips)
- Webpack
  1. [文档](https://doc.webpack-china.org/concepts/)
  2. [插件](https://doc.webpack-china.org/plugins/)
- Gulp
  -  [文档](https://www.gulpjs.com.cn/)
- Grunt
  - [文档](http://www.gruntjs.net/)
- Rollup
  - [文档](http://www.rollupjs.com/)
- 代码质量
  1. [vue eslint](https://mysticatea.github.io/vue-eslint-demo/)
  2. [htmlhint](https://htmlhint.io/)
  3. [stylelint](https://stylelint.io/)
- http-server
  - [静态服务器](https://www.npmjs.com/package/http-server)
- ast
  - [业界 AST 库](https://github.com/cucygh/AST-)
- 自动化测试
  - [jest](https://jestjs.io/zh-Hans/)


## 前端框架

- Vue
  1. [基本教程](https://cn.vuejs.org/)
  2. [路由](https://router.vuejs.org/)
  3. [Vuex](https://vuex.vuejs.org/)
  4. [SSR](https://ssr.vuejs.org/)
  5. [Nuxt.js](https://zh.nuxtjs.org/)
  6. [Vue 源码分析·免费](http://hcysun.me/vue-design/)
- React
  1. [文档](https://doc.react-china.org/)
  2. [Redux 官方文档](http://cn.redux.js.org/)
  3. [Redux 中文社区](http://www.redux.org.cn/)
  4. [Next.js](https://zeit.co/blog/next4)
  5. [Next.js 中文文档](http://nextjs.frontendx.cn/docs)
  6. [Next.js 掘金博客](https://juejin.im/entry/59791d8f6fb9a03c391b557e)
- Angular
  - [官方文档](https://angular.cn/)
- Koa
  > Express 升级后的框架，抽象设计更彻底，强大、自由、灵活

  1. [文档](https://koa.bootcss.com/)
  2. [Koa2 进阶学习笔记](https://chenshenhai.github.io/koa2-note/)
  3. [基于 Koa2 搭建 Node.js 实战项目教程](https://github.com/ikcamp/koa2-tutorial)
- Express
  > Node.js 开发最容易上手的业务应用开发框架
  - [文档](http://expressjs.com/zh-cn/)

## 前端技术

- 内存泄漏
  1. [JavaScript 内存泄露和 CSS 优化](https://github.com/cucygh/js-leakage-patterns?organization=cucygh&organization=cucygh)
  2. [内存泄漏](https://developers.google.com/web/tools/chrome-devtools/memory-problems/?hl=zh-cn)
- MDN官方文档
  - [MDN官方文档](https://developer.mozilla.org/zh-CN/)

## CSS 教程

- Less
  - [文档](http://less.bootcss.com/)
- Sass
  - [文档](http://sass.bootcss.com/docs/sass-reference/)
- CSS3 布局
  - [学习布局](http://zh.learnlayout.com/)

## JavaScript 教程

- ES6
  1. [权威教程:ECMAScript 6](http://es6-features.org/#Constants)
  2. [入门教程](http://es6.ruanyifeng.com/)
- Node
  1. [官方网站](http://nodejs.cn/)
  2. [官方教程](http://nodejs.cn/api/)
- ES3
  - [入门教程](http://www.runoob.com/js/js-tutorial.html)
- ES5
  1. [ES5 新特性与 ES3 的对比](http://www.hahack.com/wiki/javascript-es5.html#es5-%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7)
  2. [ES5 新特性博客](http://pij.robinqu.me/JavaScript_Core/ECMAScript/es5.html)

## 服务端教程

- [Nginx 入门](http://cnt1992.xyz/2016/03/18/simple-intro-to-nginx/)
- [Nginx 入门与精通（高级）](http://tengine.taobao.org/book/#)
- [Nginx 配置大全](https://nginxconfig.io/)



【总结】参考资料

# 腾讯面经系列
1. js基本数据类型
2. js的作用域
3. 如何判断一个数组是数组
4. BOM 和 DOM的区别
5. 有一个 字符串里面有很多is 请写一个方法只保留一个is          
6. 问了sql注入和防御，我说我有点忘了，把话题转移到了xss
7. 问了node 问了如何用experess搭建服务器
8. js 的event-loop
9. 有3个-10--10之间的整数，写一个方法这三个数一共有多少可能想加等于10 
10. redux
11. react vue 的一些基础
12. 说一下思路，如何把一个图片的地址，传到服务器，并保存在服务器 
13. 用js中的正则表达式去掉两边的空格                           
14. 堆和栈的区别
15. 快排，怎么判断快排排好了
16. dom操作，怎么遍历所有dom节点，根div下有两div(A与B)，每个div下面又有两个span(A1,A2)与span(B1、B2)，怎么将spanA1与A2存在一个数组，B1与B2存在一个数组，树的遍历算法，这个题应该用深度优先还是广度优先，用什么数据结构。
17. tcp慢启动
18. tcp三次、四次握手
19. https握手，加密方式是对称还是非对称
20. 强缓存、弱缓存
21. 修改this的方法，apply和call区别
22. 对JS闭包的理解
23. 原型链
24. 事件冒泡与捕获
25. 原生ajax请求 带cookie
26. jsonp怎么反回后台数据
27. 跨域后台怎么设置
28. es6 class怎么用es5实现
29. 怎么实现动画，canvas动画与svg区别
30. css动画优化
31. promise原理怎么实现
32. `水平垂直居中`
33. 从浏览器输入URL会发生什么
34. 浏览器渲染 ，css、js会阻塞dom树加载吗
35. xss怎么防御
36. 前端怎么实现富文本编辑器
37. PWA（Progressive Web App）
38. Service Worker
39. 后台广播
40. http 长、短轮训
41. 前端缓存，很长的数据缓存怎么选择
42. 301与302区别，什么时候返回304
43. http1.1和http2.0的区别
44. CDN有没有了解
45. 怎样判断Object和Array，Object有父对象么
46. CSS positon的属性有常见三个值 absolute fixed relative 这三个值有什么区别 是怎么用的，这三个跟文档流的关系？
47. 两个单位em和rem，是怎么用的，有什么区别
48. js中的类数组
49. 能不能改写一个数组的push方法，不是重写，也不是新写，保持原来的逻辑之外，再添加一个consle.log（arguements）在控制台打印出来，比如pushA。在工作台把A打印出来，push什么就打印什么。原来的逻辑不能改？
50. 学习前端的方式有哪些？看哪些博客？看过哪些书？
51. JS如何改变函数上下文
52. bind/call/apply有什么区别？
53. bind调用时传入一个参数，此参数跟函数原有的参数什么关系？
54. CSS继承属性有哪些？列举3个
55. 块级元素有哪些？
56. CSS position有哪些取值？
57. 一个div,position设置为absolute,再用JS设置div.style.position=""，问这时div的表现？怎么去判断？
58. 如何检测浏览器所支持的最小字体大小？
59. 怎么做JS代码Error统计？
60. 一张高清图片，怎么保证其在不同移动端设备上的显示效果？
61. html中一进入就一直页面缓冲不出来组件怎么办
62. 怎么使用纯css实现一个三角形
63. html不同页面之间怎么共享数据
64. 垃圾回收机制是怎么样
65. 一个5升瓶子和一个6升瓶子怎么装3升水
66. 为什么js是单线程？怎么解决
67. 如何定义私有字段
68. git add commit 区别 commit到哪？
69. 用过webpack吗？怎么用的？css文件
70. HTTP 如何标记缓存
71. etag和exprises 哪个用得比较多 为什么
72. 35分时针分针夹角几度
73. 实现一个input输入框，实现在一个arr数组查询命中和自动补齐效果
74. 实现一个函数，完成超过范围的两个大整数相加功能
75. diff算法，树的深搜广搜
76. 缓存机制，如何缓存图片
77. 非递归便利二叉树
78. web性能优化
79. 浏览器连接限制，编码怎么解决，http2.0
80. 网络安全, xss, csrf
81. 有一个数组，对这个数组按顺序进行异步处理，一个处理完才开始下一个，然后问用foreach行不行。
82. 介绍发一个Ajax请求的链路全过程。IP地址怎样获取？
83. 如何让一个cookie同时用于a.qq.com和b.qq.com？
84. 有一个a.qq.com的图片发到百度贴吧上，会不会带上那个cookie？
85. 快排原理，时间空间复杂度，为什么空间复杂度是log2n？
86. Vue响应式原理。
87. 介绍项目，说其中的难点。
88. 介绍归并排序原理。
89. 说一下nodejs的原理（？？？不会，只说了事件驱动balabala）
90. https（又是https）
91.  从海量十亿个数选最大的一百个，你有什么方法？
92.  除了Vue还会什么？
93.  React-router和路由的实现的方式有哪些？
94.  移动端的适配问题？字体大小一致？
95.  移动端的30ms点击延迟问题?如何解决？
96.  node和ES6规范的差别？
97.  module.exports和exports 的区别，与CommonJS的联系？
98.  export 和 export default 的区别？
99.  Canvas的性能如何优化？
100. JS的原型是什么？
101. webpack的底层实现原理，懒加载的配置
102. CSS雪碧图和Base64编码的选择？Base64编码原理？
103. get请求的url地址如何通过post方式发送？
104. 浏览器的缓存策略？
105. 将一个div容器移动到另外一个div容器的过程？
106. 实现一个原生的ajax封装？
107. 浏览器路由的实现方式有哪些?
108. 输入URL到内容完全展示出来的过程？
109. HTTPS和HTTP的原理和区别？
110. Webpack和Gulp的区别
111. URL请求的过程
112. 首页渲染问题如何优化, 前端的性能优化方式有哪些？
113. 网站首页白屏错误如何排查？实时监控？
114. 如何解决JS的回调地狱问题?
115. CSS的margin重叠问题如何解决？
116. mvvm  mvc；
117. 单页应用 多页应用的优缺点；
118. 前后分离 不分离 哪一个更安全 区别  页面的响应是前端还是后端；
119. typeScript；
120. this指针；
121. 原型链；
122. https；
123. 维持登录状态；
124. es6常用；
125. ccs3用过什么；
126. 浏览器怎么适配；
127. 你封装过什么组件；
128. js怎么优化；
129. 工程化。webpack；
130. webpack工作原理；
131. 和同事关系不好，怎么办；
132. 一个5升  一个6升  空瓶子  怎么弄出来2l水；
133. 上海高铁到杭州 杭州飞机到老家 现在高铁晚点了  怎么办  （今天必须回家）；
134. react生命周期
135. url的整个过程，越多越好；
136. 跨域的方式，越多越好；
137. web优化的方式，越多越好；
138. react生命周期，和vue比较，要求多说；
139. rsa算法，esa算法；
140. linux查看进程的命令；
141. 一个很大的数据集包括192.168.0.1 -24/32/30 给一个ip地址怎么知道在不在这个数据集中；
142. 给一亿个长度不一样的字符串，怎么判断一个随机长度的字符串在不在这个里面（字典树）；
143. 给一堆整数，怎么判断这个整数在不在这一堆数里面（位图）；
144. 一个表有姓名年龄课程，sql数据库找每个人的最高成绩，课程名，姓名。
145. 说一下url；
146. xss怎么预防；
147. http说一下；
148. get post区别；
149. tcp三次握手和四次分手，都有什么标志；
150. pv uv是啥；
151. h5用过什么；
152. xml json区别；
153. web优化；
154. mysql引擎；
155. 浏览器引擎有什么；
156. 页面渲染的过程；
157. http劫持怎么预防；
158. ngnix反向代理服务器

1. js基本数据类型
2. js的作用域
3. 如何判断一个数组是数组
4. BOM 和 DOM的区别
…

【面经系列】腾讯面经

# EventLoop
## 1. EventLoop的执行流程图
```js
  ┌───────────────────────┐
┌─>│        timers         │<————— 执行 setTimeout()、setInterval() 的回调
│  └──────────┬────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
│  ┌──────────┴────────────┐
│  │     pending callbacks │<————— 执行由上一个 Tick 延迟下来的 I/O 回调（待完善，可忽略）
│  └──────────┬────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
│  ┌──────────┴────────────┐
│  │     idle, prepare     │<————— 内部调用（可忽略）
│  └──────────┬────────────┘     
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
|             |                   ┌───────────────┐
│  ┌──────────┴────────────┐      │   incoming:   │ - (执行几乎所有的回调，除了 close callbacks 以及 timers 调度的回调和 setImmediate() 调度的回调，在恰当的时机将会阻塞在此阶段)
│  │         poll          │<─────┤  connections, │ 
│  └──────────┬────────────┘      │   data, etc.  │ 
│             |                   |               | 
|             |                   └───────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
|  ┌──────────┴────────────┐      
│  │        check          │<————— setImmediate() 的回调将会在这个阶段执行
│  └──────────┬────────────┘
|             |<-- 执行所有 Next Tick Queue 以及 MicroTask Queue 的回调
│  ┌──────────┴────────────┐
└──┤    close callbacks    │<————— socket.on('close', ...)
```

1. setTimeout/setInterval 属于 timers 类型；
2. setImmediate 属于 check 类型；
3. socket 的 close 事件属于 close callbacks 类型；
4. 其他 MacroTask 都属于 poll 类型。
5. process.nextTick 本质上属于 MicroTask，但是它先于所有其他 MicroTask 执行；
6. 所有 MicroTask 的执行时机，是不同类型 MacroTask 切换的时候。
7. idle/prepare 仅供内部调用，我们可以忽略。
8. pending callbacks 不太常见，我们也可以忽略。

## 2. 执行机制
1. 先执行所有类型为 timers 的 MacroTask，然后执行所有的 MicroTask（注意 NextTick 要优先哦）；
2. 进入 poll 阶段，执行几乎所有 MacroTask，然后执行所有的 MicroTask；
3. 再执行所有类型为 check 的 MacroTask，然后执行所有的 MicroTask；
4. 再执行所有类型为 close callbacks 的 MacroTask，然后执行所有的 MicroTask；
5. 至此，完成一个 Tick，回到 timers 阶段；
……
如此反复，无穷无尽……
![执行机制](../../img/node-event-loop.png)

### 2.1 实例理解
```js
const macroTaskList = [
  ['task1'],
  ['task2', 'task3'],
  ['task4'],
]

for (let macroIndex = 0; macroIndex < macroTaskList.length; macroIndex++) {
  const microTaskList = macroTaskList[macroIndex]

  for (let microIndex = 0; microIndex < microTaskList.length; microIndex++) {
    const microTask = microTaskList[microIndex]

    // 添加一个微任务
    if (microIndex === 1) microTaskList.push('special micro task')

    // 执行任务
    console.log(microTask)
  }

  // 添加一个宏任务
  if (macroIndex === 2) macroTaskList.push(['special macro task'])
}


// 输出结果：
// > task1
// > task2
// > task3
// > special micro task
// > task4
// > special macro task
```
### 2.2 执行细节分析
#### 2.2.1 试分析下面程序的执行结果

```js
console.log(1)
setTimeout(function() {
    console.log(2)
})

Promise.resolve()
    .then(function() {
        console.log(3)
    })

console.log(4)
```

#### 2.2.2 执行流程分析

> stack(执行栈)、Micro(微任务)、Macro（宏任务）

1. 初始状态： stack:[], Micro: [], Macro: [script]。执行栈为空, 微任务为空, 宏任务队列中有一个整体的 script代码 

2. 主线程开始执行, 遇到console.log(1), 首先会打印 1 

3. 继续向下执行,遇到 setTimeout异步任务,就将其加入到Macro(宏任务)队列中。等待执行 

4. 继续向下执行, 遇到 Promise.resolve也是一个异步任务,单它是微任务,将其加入 Micro(微任务)队列中,等待着行 

5. 解析console.log(4), 并且打印4。 当主线程执行完打印的结果依次是 1 和 4。

6. 这时候主线程就会问 任务(异步)队列,有没有微任务要执行,将所有的 Micro(微任务)加入执行栈执行, 打印结果 3

7. 微任务执行完了, 就开始下一轮事件循环, 将第一个 Macro(宏任务)压入执行栈执行, 再次打印 2。 

![EventLoop](../../img/node-eventloop.png)


## 3. 谈一下宏任务与微任务的区别？（面试重点）
> [!NOTE]
> 面试常考点，关键在于理解EventLoop的机制，以及宏任务和微任务的底层原理。


### 3.1 宏任务
- **setTimeout**
- **setInterval**
- **setImmediate**
- **requestAnimationFrame**

常见的宏任务: setTimeout、setInterval、setImmediate、 script中整体的代码、 I/O操作、 UI渲染等。

### 3.2 微任务
- **process.nextTick**
- **MutationObserver**
- **Promise.then catch finally**

常见的微任务有: process.nextTick、Promise和 MutationObserver监听DOM的变化。



### 3.3 微任务和宏任务的区别
> [!NOTE]
> - 微任务进入主线程执行是一队一队的, 而宏任务进入主线程是一个一个的。
> - 微任务是在主线程空闲时批量执行, 宏任务是在事件循环下一轮的最开始执行

---
参考文章：
- https://www.jianshu.com/p/deedcbf68880

- https://www.cnblogs.com/qiqingfu/p/10664549.html

【NodeJS相关】EventLoop

2.2.1 试分析下面程序的执行结果

3. 谈一下宏任务与微任务的区别？（面试重点）

# NodeJS
## 1.	对Node的优点和缺点提出了自己的看法：
*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。
## 2.	需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
至少给出自己的思路（url-hash,可以使用已有的一些框架history.js等）
## 3.	Node.js的适用场景？
1)、实时应用：如在线聊天，实时通知推送等等（如socket.io）
2)、分布式应用：通过高效的并行I/O使用已有的数据
3)、工具类应用：海量的工具，小到前端压缩部署（如grunt），大到桌面图形界面应用程序
4)、游戏类应用：游戏领域对实时和并发有很高的要求（如网易的pomelo框架）
5)、利用稳定接口提升Web渲染能力
6)、前后端编程语言环境统一：前端开发人员可以非常快速地切入到服务器端的开发（如著名的纯Javascript全栈式MEAN架构）
## 4.	(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
Nodejs相关概念的理解程度
## 5.	解释一下 Backbone 的 MVC 实现方式？
流行的MVC架构模式
## 6.	什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
熟悉前后端通信相关知识


【前端面试题】NodeJS

1.   对Node的优点和缺点提出了自己的看法：

2.   需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？

4.   (如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

5.   解释一下 Backbone 的 MVC 实现方式？

6.   什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?

# 开发环境	
## 3.1 Git操作	
### 3.1.1 Git的基本命令有哪些
```js
git add .
git checkout xxx
git commit -m 'xxx'
git push origin master
git pull origin master
git branch
git checkout -b xxx / git checkout xxx(文件名)
git merge xxx
git diff
--------------git多人协作：
git branch                   查看当前分支
git checkout -v dev          创建新的分支
git checkout dev             切换当前分支
git push origin dev          提交代码到dev分支（修改bug…
git checkout matser          切换到已有的分支
git merge dev                合并dev分支到master分支
git push origin master       推送修改的内容到远程仓库

```	
### 3.1.2 git rebase和git merge的区别？
**git merge**：将两个分支，合并提交为一个新提交，并且新提交有2个parent。把公共分支和你当前的commit 合并在一起，形成一个新的 commit 提交

**git rebase**：会取消分支中的每个提交，并把他们临时存放，然后把当前分支更新到最新的origin分支，最后再吧所有提交应用到分支上。
### 3.1.3 git上线回滚的流程？
上线流程：
1. 将测试完成的代码提交到git版本库的master分支
2. 将当前服务器的代码全部打包并记录版本号，备份
3. 将master分支的代码提交覆盖到线上服务器，生效新的版本号
回滚流程：
1. 将当前服务器的代码打包并记录版本号，备份
2. 【将备份的上一个版本号解压，覆盖到线上服务器】，生成新的版本号

## 3.2 模块化	
### 3.2.1 谈一下你对JS模块化的理解	
### 3.2.2 AMD和CommonJS规范的区别和使用场景	
AMD规范：
1. require.js requirejs.org
2. 全局定义了define函数
3. 全局定义了require函数
4. 依赖JS会自动、异步加载
CommonJS规范：
1. 这是nodejs的模块化规范，现在被广泛应用于前端
2. 前端开发依赖的插件和库，都可以从npm中获取
3. 构建工具的高度自动化，使得使用npm的成本非常低
4. CommonJS不会异步加载JS，而是同步一次性加载进来
使用场景：
1. 需要异步加载JS，使用AMD
2. 使用了npm之后建议使用commonjs规范

## 3.3 构建工具	
### 3.3.1 Webpack的基本配置流程	
> [!NOTE]
> 主要是掌握Webpack的基本配置，包括文件的打包和压缩、CSS文件的处理和模块化、图片文件的处理以及一些开发环境的常用配置和性能优化知识点，理解打包的底层实现原理。
> - 具体配置可参考：https://www.jianshu.com/p/11e8f9668c0e

### 3.3.2 Gulp的基本配置流程，与webpack的区别？
> [!NOTE]
> 需要掌握基本的配置流程和打包过程，底层实现原理。

```js
const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require("browser-sync").create(), //自动刷新
    reload = browserSync.reload;
const filter = require('gulp-filter');
// gulp-filter 包， 以确保只有 *.css 文件响应 .reload - 这样一来，
// 您还是会得到CSS注入，而不是整个页面重载。
const useref = require('gulp-useref'); //合并JS
const uglify = require('gulp-uglify'); //js压缩
const minifyCSS = require('gulp-minify-css'); //压缩css

var gulpIf = require('gulp-if');

var del = require('del');

var runSequence = require('run-sequence');//组织任务执行顺序,未使用

var rename = require('gulp-rename');//重命名

var watch=require('gulp-watch');//监视

var minifyHtml = require("gulp-minify-html");//压缩html

var babel = require("gulp-babel");
// npm install --save-dev gulp-babel@7 babel-core babel-preset-env

var jshint = require("gulp-jshint");//js检查
var imagemin = require('gulp-imagemin');//压缩图片文件
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
var connect=require('gulp-connect');//引入gulp-connect模块 浏览器刷新
var cache = require('gulp-cache');//压缩图片可能会占用较长时间，使用 gulp-cache 插件可以减少重复压缩。
var RevAll = require("gulp-rev-all");//md5后缀
 
gulp.task('html',function(){//编译html
    return gulp.src('app/*.html')
    .pipe(gulp.dest('app/dist'))
    .pipe(connect.reload());
})

gulp.task('css',function(){//编译scss
    return gulp.src('app/scss/**/*.scss')
    .pipe(sass())//编译scss
    // .pipe(gulp.dest('app/css')) //当前对应css文件
    .pipe(gulp.dest('app/dist/css')) //当前对应css文件
    .pipe(connect.reload());//更新
})
 
gulp.task('js',function(){//编译ES6并且压缩
    return gulp.src('app/js/**/*.js')
    .pipe(jshint())//检查代码
    .pipe(babel({//编译ES6
        presets: ['es2015']
    }))
    .pipe(uglify())//压缩js
    .pipe(gulp.dest('app/dist/js'))
    .pipe(connect.reload());
})

gulp.task('fonts', function() {
    return gulp.src('app/fonts/**/*')
        .pipe(gulp.dest('app/dist/fonts'))
})

gulp.task('images', function() {
    return gulp.src('app/images/**/*.+(png|jpg|jpeg|gif|svg)')
        // Caching images that ran through imagemin
        .pipe(cache(imagemin({//压缩图片文件
        interlaced: true,
        })))
        .pipe(gulp.dest('dist/images'))
});

gulp.task('clean:app/dist', function() {//删除之前生成的文件
    return del(['app/dist']);
});

gulp.task('clean:dist', function() {//异步清理除dist目录图片以外的文件
     return del(['app/dist/**/*', '!dist/images', '!dist/images/**/*']);
});

gulp.task('minFs', function() {//压缩文件
    return gulp.src('app/dist/*.html')
        .pipe(useref())//合并js
        .pipe(
            gulpIf('*.js',uglify())//压缩js
        )
        .pipe(gulpIf('*.css', minifyCSS()))//压缩css
        .pipe(RevAll.revision({//不被重命名
            dontRenameFile:[/^\/favicon.ico$/g, ".html"]
        }))  
        .pipe(gulp.dest('dist'));
});

gulp.task('connect:app',function(){
    connect.server({
        root:'app',//根目录
        // ip:'192.168.11.62',//默认localhost:8080
        livereload:true,//自动更新
        port:9998//端口
    })
})

gulp.task('connect:dist',function(cb){
    connect.server({
        root:'app',//根目录
        // ip:'192.168.11.62',//默认localhost:8080
        livereload:true,//自动更新
        port:9999//端口
    })
    cb()//执行回调，表示这个异步任务已经完成，起通作用,这样会执行下个任务
})

gulp.task('watchs',function(){//监听变化执行任务
    //当匹配任务变化才执行相应任务
    gulp.watch('app/*.html',gulp.series('html'));
    gulp.watch('app/scss/**/*.scss',gulp.series('css'));
    gulp.watch('app/js/**/*.js',gulp.series('js'));
    gulp.watch('app/fonts/**/*',gulp.series('fonts'));
    gulp.watch('app/images/**/*',gulp.series('images'));
})

//gulp.series|4.0 依赖顺序执行
//gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行

//下面1和2分别运行

//1.自动监测文件变化并刷新浏览器

//初始生成app/dist目录
gulp.task('init',gulp.series('clean:app/dist',gulp.parallel('html','css','js','fonts','images')));

//启动任务connect:app服务，并监控变化
gulp.task('run',gulp.series('init','connect:app','watchs'));

//2.生成打包文件
gulp.task('build',gulp.series('clean:dist',gulp.parallel('init'),'minFs'));

//启动任务connect:dist服务，生成打包文件后，监控其变化
gulp.task('serve',gulp.series('connect:dist','build','clean:app/dist','watchs'));
```
## 3.4 Linux环境基本命令	
> 可参见开发环境下的Linux面试题相关章节。

【JS相关】开发环境

3.2.1 谈一下你对JS模块化的理解

3.2.2 AMD和CommonJS规范的区别和使用场景

3.3.2 Gulp的基本配置流程，与webpack的区别？

# NOdeJS 中间件

## 1. 中间件到底是个什么东西呢？
> [!NOTE]
> 中间件其是一个函数，在响应发送之前对请求进行一些操作

![中间件模型](../../img/node-中间件模型.png)

```js
    function middleware(req,res,next){
        // 做该干的事
    
        // 做完后调用下一个函数
        next();
    }
```
这个函数有些不太一样，它还有一个next参数，而这个next也是一个函数，它表示函数数组中的下一个函数

## 2. 函数数组又是什么呢?
> [!NOTE]
> express内部维护一个函数数组，这个函数数组表示在发出响应之前要执行的所有函数，也就是中间件数组

使用app.use(fn)后，传进来的fn就会被扔到这个数组里，执行完毕后调用next()方法执行函数数组里的下一个函数，如果没有调用next()的话，就不会调用下一个函数了，也就是说调用就会被终止

## 3. 如何实现一个中间件呢？
```js
    function express() {
      // 函数数组用于存放所有的中间件函数
      let fns = [];
      
      let app = function(req, res) {
        let i = 0;
        
        function next() {
          // 取出数组中的下一个函数
          let task = fns[i++];
          // 如果函数存在的u啊
          if (task) {
              // 就先去执行这个用户自定义的函数里面的业务逻辑(每次把当前的next继续向后传递)
              task(req, res, next);
          }
        }
        
        // 用户首次调用的执行第一个
        next();
      }
      
      // 使用use的时候就把用户指定的这个函数放入到一个函数数组里面去
      app.use = function(task) {
        fns.push(task);
      }
      
      return app;
    }
```


## 4. 模拟实现一个异步按顺序执行的函数？（面试重点）
```js
    function fn1(next) {
      next();
    }
    
    function fn2(next) {
      next();
    }
    
    function fn3(next) {
      next();
    }
    
    
    // 类似于一个异步的迭代器
    function nextRegister(...tasks) {
      let i = 0;
      
      
      function next() {
        let task = tasks[i];
        if (!task || typeof task !== 'function') {
            return ;
        }
        task(next);
      }
      
      // 第一次调用
      next();
    }
    
    // 开始注册三个异步函数
    nextRegister(fn1, fn2, fn3);
```


## 5. 描述一下express或者koa的技术架构？
> [!NOTE]
> 关键在于解释清楚对路由中间件的理解，可以以koa的洋葱模型讲解为例。

![洋葱模型](../../img/koa-洋葱模型.jpg)

【NodeJS相关】中间件

1. 中间件到底是个什么东西呢？

4. 模拟实现一个异步按顺序执行的函数？（面试重点）

5. 描述一下express或者koa的技术架构？

【JS相关】ES6专题系列

1.如何搭建ES6的webpack开发环境？

3.class和JS普通构造函数的区别？

5.4 Es6中箭头函数与普通函数的区别？

6. 箭头函数和普通函数的8点区别？

# NodeJS基础知识
## 1. Node的全局对象和全局变量
### 1.1 全局对象：所有模块都可以调用的
1. global：表示Node所在的全局环境，类似于浏览器的window对象。

2. process：该对象表示Node所处的当前进程，允许开发者与该进程互动。

3. console：指向Node内置的console模块，提供命令行环境中的标准输入、标准输出功能。

### 1.2 全局函数
1. 定时器函数：共有4个，分别是setTimeout(), clearTimeout(), setInterval(), clearInterval()；
2. require：用于加载模块；
3. Buffer()：用于操作二进制数据。

### 1.3 全局变量
1. __filename：指向当前运行的脚本文件名。
2. __dirname：指向当前运行的脚本所在的目录。


## 2. Node的三大特点
### 2.1 单线程
    Node.js不为每个客户连接创建一个新的线程，而仅仅使用一个线程。当有用户连接了，就触发一个内部事件，通过非阻塞I/O、事件驱动机制，让Node.js程序宏观上也是并行的。
        

### 2.2 非阻塞I/O  

1. 由于Node.js中采用了非阻塞型I/O机制，因此在执行了访问数据库的代码之后，将立即转而执行其后面的代码，把数据库返回结果的处理代码放在回调函数中，从而提高了程序的执行效率。

2. 当某个I/O执行完毕时，将以事件的形式通知执行I/O操作的线程，线程执行这个事件的回调函数。为了处理异步I/O，线程必须有事件循环，不断的检查有没有未处理的事件，依次予以处理。

3. 阻塞模式下，一个线程只能处理一项任务，要想提高吞吐量必须通过多线程。而非阻塞模式下，一个线程永远在执行计算操作，这个线程的CPU核心利用率永远是100%。所以，这是一种特别有哲理的解决方案：与其人多，但是好多人闲着；还不如一个人玩命，往死里干活儿。

### 2.3 事件驱动event-driven

1. 在Node中，在一个时刻，只能执行一个事件回调函数，但是在执行一个事件回调函数的中途，可以转而处理其他事件（比如，又有新用户连接了），然后返回继续执行原事件的回调函数，这种处理机制，称为“事件环”机制。

2. Node.js底层是C++（V8也是C++写的）。底层代码中，近半数都用于事件队列、回调函数队列的构建。


## 3. Node技术架构
### 3.1 Node底层架构
> nodejs组成部分：v8 engine, libuv, builtin modules, native modules以及其他辅助服务。

![Node架构图](../../img/node-架构图.jpg)


+ v8 engine：主要有两个作用 
    1.虚拟机的功能，执行js代码（自己的代码，第三方的代码和native modules的代码）。
    2.提供C++函数接口，为nodejs提供v8初始化，创建context，scope等。

+ libuv：它是基于事件驱动的异步IO模型库，我们的js代码发出请求，最终由libuv完成，而我们所设置的回调函数则是在libuv触发。

+ builtin modules：它是由C++代码写成各类模块，包含了crypto，zlib, file stream etc 基础功能。（v8提供了函数接口，libuv提供异步IO模型库，以及一些nodejs函数，为builtin modules提供服务）。

+ native modules：它是由js写成，提供我们应用程序调用的库，同时这些模块又依赖builtin modules来获取相应的服务支持

> [!NOTE]
> 总结：如果把nodejs看做一个黑匣子，起暴露给开发者的接口则是native modules，当我们发起请求时，请求自上而下，穿越native modules，通过builtin modules将请求传送至v8，libuv和其他辅助服务，请求结束，则从下回溯至上，最终调用我们的回调函数。

### 3.2 Node函数调用机制
![函数调用机制](../../img/node-函数调用.png)

1. v8执行js代码 server.listen()时，会通过一些基础服务到TCPWrap::listen(),TCPWrap是nodejs的內建模块，其通过libuv的api uv_listen()的方式，由libuv来完成异步调用。

2. 图中1,2,3,4,5步骤标明了调用和返回的路径，这几步很快结束，留下callback TCPWrap::OnConnection()等着所需要的数据准备好后被调用。

3. libuv在得到所需要的请求后，会调用callback TCPWrap::OnConnection()，在该函数最后通过 tcp_wrap->MakeCallback(env->onconnection_string(), ARRAY_SIZE(argv), argv) 调用V8 engine中的JavaScript callback。

4. Node.js内建模块http其实是建立在模块net之上的。如果看net.js代码会发现，其通过 new TCP() 返回的类对象完成后续的TCP connect, bind, open等socket动作。

5. 可以看到Node.js做的工作像是一座桥。左手V8，右手libuv，将2者有机连接在一起。例如HandleWrap::HandleWrap()中记录了V8 instance中的JavaScript对象以及TCPWrap对象。这样在TCPWrap::OnConnection()中可以拿到这两个对象，执行后续的callback调用。

---
**参考文章**
- https://www.cnblogs.com/peiyu1988/p/8192066.html


【NodeJS相关】基础知识

1.1 全局对象：所有模块都可以调用的