# 事件循环

## 浏览器的进程模型

### 何为进程？

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

![图片](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 全局对象：所有模块都可以调用的

# [前端工程师面试宝典](https://fecommunity.github.io/front-end-interview/index.html)

> 前端面试宝典，收集于全网最新、最全面的面试资料，帮助各位求职面试者斩获理想Offer。

本书整理了前端工程师在求职面试过程中的前端知识和面经资料，希望各位网友们在学习交流过程中也可以不断丰富完善本书。


## 本书结构
本书一共分为八大部分。
### 第一部分：[前端知识体系](https://fecommunity.github.io/front-end-interview/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/HTML%E7%9B%B8%E5%85%B3/1.HTML%E5%9F%BA%E7%A1%80%E5%BC%BA%E5%8C%96.html)
本章从HTML、CSS、JavaScript、流向框架、Nodejs、性能优化、前端工程化、错误监控、Web安全共九个方面概括总结了前端面试中的主要知识点，帮助读者快速构建前端知识体系。
### 第二部分：[计算机网络](https://fecommunity.github.io/front-end-interview/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/1.TCP.html)
介绍了面试中涉及到的13大常考知识点，涉及到OSI七层参考模型中各层的功能和传输细节，以及跨域和缓存等前端常考知识点。
### 第三部分：[操作系统](https://fecommunity.github.io/front-end-interview/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86.html)
简单概括了操作系统的知识体系，并总结了面试中常考的8大考点。
### 第四部分：[数据结构与算法](https://fecommunity.github.io/front-end-interview/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/1.%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84.html)
该章节内容细节待完善，简单介绍了数据结构和算法设计中的常考知识点。
### 第五部分：[开发环境](https://fecommunity.github.io/front-end-interview/%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/1.Git%E7%9B%B8%E5%85%B3.html)
主要介绍了前端工程师在开发环境中需要掌握的Linux基础命令和Git的基本操作，提高开发效率。
### 第六部分：[编程题与分析题](https://fecommunity.github.io/front-end-interview/%E7%BC%96%E7%A8%8B%E9%A2%98%E4%B8%8E%E5%88%86%E6%9E%90%E9%A2%98/1.%E7%BB%A7%E6%89%BF%E7%9A%84%E5%A4%9A%E7%A7%8D%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F.html)
整理了前端面试中常考的27个经典面试题，涉及到原型链和继承、作用域和闭包、异步和单线程、ES6高级知识和一些简单的算法设计实现等考点。
### 第七部分：[面经系列](https://fecommunity.github.io/front-end-interview/%E9%9D%A2%E7%BB%8F%E7%B3%BB%E5%88%97/0.%E9%9D%A2%E8%AF%95%E6%8A%80%E5%B7%A7.html)
目前收集整理了前端工程师在BAT等一线互联网公司的技术面试题，后续读者们可以不断更新完善该章节。
### 第八部分：[结束](https://fecommunity.github.io/front-end-interview/%E6%80%BB%E7%BB%93/1.%E5%89%8D%E7%AB%AF%E6%80%BB%E7%BB%93.html)
由于时间和精力有限，本书很难面面俱到。如果大家在使用本书的过程中有什么问题或建议，欢迎到[GitHub前端社区issue区](https://github.com/fecommunity/front-end-interview/issues "前端社区")讨论，后续将不断完善本书内容。
 
## 目标读者
本书主要面向初中高级前端开发方向的求职者，希望本书能助你一臂之力，祝各位早日成功，未来可期。  

## 最后
**欢迎star** :star:,  欢迎补充和完善。



<p align="center">
<a href="https://fecommunity.github.io/front-end-interview/index.html" target="_blank">
	<img src="https://fecommunity.github.io/front-end-interview/gitbook/gitbook-plugin-theme-fexa/logo.png" width=""/>
</a>
</p>

<p align="center">
  <a href="https://fecommunity.github.io/front-end-interview/"><img src="https://img.shields.io/badge/阅读-read-brightgreen.svg" alt="阅读"></a>
  <a href="https://shang.qq.com/wpa/qunwpa?idkey=256c9ab161f115b71e8bec5acbcaa4837eeca4029048f5490ede49dee0495990"><img src="https://img.shields.io/badge/chat-QQ群-blue.svg" alt="QQ群"></a>
  <a href="https://github.com/fecommunity/front-end-interview/issues"><img src="https://img.shields.io/badge/support-讨论-critical.svg" alt="投稿"></a>
  <a href="https://fecommunity.github.io/front-end-interview/%E9%9D%A2%E7%BB%8F%E7%B3%BB%E5%88%97/0.%E9%9D%A2%E8%AF%95%E6%8A%80%E5%B7%A7.html"><img src="https://img.shields.io/badge/前端-面经系列-important" alt="投稿"></a>
</p>


推荐使用 https://fecommunity.github.io/front-end-interview/index.html 在线阅读，在线阅读内容与本仓库同步一致。这种方式阅读的优势在于：有侧边栏阅读体验更好，GitHub pages 的访问速度相对来说也比较快。

### 注：如遇在线访问当前仓库速度太慢，可尝试访问加速备用链接[点击进入](https://www.52tech.tech/docs/)


【front-end-interview】md

[前端工程师面试宝典](https://fecommunity.github.io/front-end-interview/index.html)

第一部分：[前端知识体系](https://fecommunity.github.io/front-end-interview/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB/HTML%E7%9B%B8%E5%85%B3/1.HTML%E5%9F%BA%E7%A1%80%E5%BC%BA%E5%8C%96.html)

第二部分：[计算机网络](https://fecommunity.github.io/front-end-interview/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/1.TCP.html)

第三部分：[操作系统](https://fecommunity.github.io/front-end-interview/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86.html)

第四部分：[数据结构与算法](https://fecommunity.github.io/front-end-interview/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/1.%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84.html)

第五部分：[开发环境](https://fecommunity.github.io/front-end-interview/%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83/1.Git%E7%9B%B8%E5%85%B3.html)

第六部分：[编程题与分析题](https://fecommunity.github.io/front-end-interview/%E7%BC%96%E7%A8%8B%E9%A2%98%E4%B8%8E%E5%88%86%E6%9E%90%E9%A2%98/1.%E7%BB%A7%E6%89%BF%E7%9A%84%E5%A4%9A%E7%A7%8D%E5%AE%9E%E7%8E%B0%E6%96%B9%E5%BC%8F.html)

第七部分：[面经系列](https://fecommunity.github.io/front-end-interview/%E9%9D%A2%E7%BB%8F%E7%B3%BB%E5%88%97/0.%E9%9D%A2%E8%AF%95%E6%8A%80%E5%B7%A7.html)

第八部分：[结束](https://fecommunity.github.io/front-end-interview/%E6%80%BB%E7%BB%93/1.%E5%89%8D%E7%AB%AF%E6%80%BB%E7%BB%93.html)

注：如遇在线访问当前仓库速度太慢，可尝试访问加速备用链接[点击进入](https://www.52tech.tech/docs/)

【前端面试题】JS高级

1、   JQuery一个对象可以同时绑定多个事件，这是如何实现的？

2、   知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?

3、   如何测试前端代码? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

4、   前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

5、   简述一下 Handlebars 的基本用法？

6、   简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？

8、   检测浏览器版本版本有哪些方式？

9、   我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获

10、实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制

11、如何消除一个数组里面重复的元素？

13、下面这个ul，如何点击每一列的时候alert其index?（闭包）

14、编写一个JavaScript函数，输入指定类型的选择器(仅需支持id，class，tagName三种简单CSS选择器，无需兼容组合选择器)可以返回匹配的DOM节点，需考虑浏览器兼容性和性能。

15、请评价以下代码并给出改进意见。

16、给String对象添加一个方法，传入一个string类型的参数，然后将string的每个字符间价格空格返回，例如：

17、定义一个log方法，让它可以代理console.log的方法。

18、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

19、对作用域上下文和this的理解，看下列代码：

20、原生JS的window.onload与Jquery的$(document).ready(function(){})有什么不同？如何用原生JS实现Jq的ready方法？

21、（设计题）想实现一个对页面某个节点的拖曳？如何做？（使用原生JS）

27、  关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

28、  什么是闭包（closure），为什么要用它？

29、javascript 代码中的"use strict";是什么意思 ? 使用它区别是什么？

30、如何判断一个对象是否属于某个类？

32、用原生JavaScript的实现过什么功能吗？

33、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

37、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）规范区别？

38、requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）

39、让你自己设计实现一个requireJS，你会怎么做？

40、谈一谈你对ECMAScript6的了解？

41、ECMAScript6 怎么写class么，为什么会出现class这种东西?

43、documen.write和 innerHTML的区别?

44、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

45、call() 和 .apply() 的含义和区别？

46、数组和对象有哪些原生方法，列举一下？

47、JS 怎么实现一个类。怎么实例化这个类

48、JavaScript中的作用域与变量声明提升？

49、如何编写高性能的Javascript？

50、那些操作会造成内存泄漏？

51、javascript对象的几种创建方式？

54、JavaScript 原型，原型链 ? 有什么特点？

55、事件、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

56、简述一下Sass、Less，且说明区别？

57、关于javascript中apply()和call()方法的区别？

60、分别阐述split(),slice(),splice(),join()？

62、如何阻止事件冒泡和默认事件？

63、添加 删除 替换 插入到某个接点的方法？

64、你用过require.js吗？它有什么特性？

65、谈一下JS中的递归函数，并且用递归简单实现阶乘？

66、请用正则表达式写一个简单的邮箱验证。

67、简述一下你对web性能优化的方案？

68、在JS中有哪些会被隐式转换为false

69、定时器setInterval有一个有名函数fn1，setInterval（fn1,500）与setInterval（fn1(),500）有什么区别？

70、外部JS文件出现中文字符，会出现什么问题，怎么解决？

71、谈谈浏览器的内核，并且说一下什么是内核？

72、JavaScript原型，原型链 ? 有什么特点？

73、写一个通用的事件侦听器函数

74、事件、IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

75、什么是闭包（closure），为什么要用？

76、如何判断一个对象是否属于某个类？

83、JS中的call()和apply()方法的区别？

85、jquery 中如何将数组转化为json字符串，然后再转化回来？

86、JavaScript中的作用域与变量声明提升？

87、前端开发的优化问题（看雅虎14条性能优化原则）。

88、http状态码有那些？分别代表是什么意思？

89、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

# 阿里面经系列
1. react hooks 是为了解决什么
2. jsonp
3. 跨域
4. rem
5. flex
6. 闭包
7. async await
8. async 经过 babel 处理后的代码看过吗
9. React 性能优化
10. 说一说 React
11. 正则贪婪和非贪婪匹配
12. 变量声明提升和函数提升
13. 同源策略
14. 为什么js单线程
15. nodejs处理高并发
16. 事件循环
17. 框架
18. webpack
19. 移动端touch事件
20. 实现一个斐波那契数列
21. 快排
22. 跨域
23. 闭包
24. 面向对象
25. nodejs应用
26. 行内元素、行内块元素。。。
27. 定位（position）
28. 盒模型
29. 事件代理
30. react受控组件和非受控组件  
31. nodejs用的场景 ；
32. js为什么单线程；
33. url的过程；
34. es6数组常用 ；
35. react哪些时候可以设置state 哪些时候不能会（循环）；
36. 304；
37. 常见的攻击xss csrf sql注入；
38. react和别的框架的差别。
39. 跨域；
40. 写过什么组件。。。可以复用（单例模式，form表单的验证）；
41. 为什么选择这些框架；
42. 后台用php做过什么；15.浏览器兼容怎么做，做过什么
43. 平时怎么学习的？
44. HTML CSS JS 官方文档在哪...
45. 看过哪些书
46. xss csrf
47. 函数节流防抖
48. 一道 this 指向题，一道原型链题
49. React setState
50. React componentWillMount 做 setState 会干嘛
51. 性能优化
52. 懒加载怎么实现的
53. 跨域，问的比较细
54. React 同构
55. Redux connect 做了什么
56. Redux 怎么做到每个组件可以访问的 store 的
57. React Router
58. 了解哪些后端语言，搭过服务吗
59. Http 2.0
60. 了解 PWA 吗？（看过相关的文章），答：不了解（不然就是坑）
61. 有做过移动端项目吗
62. 项目场景，技术方案
63. 项目涉及的性能优化
64. 实习中都做了什么
65. 实习中收获最大的一个项目是什么，你在这个项目中做了什么
66. 实习中印象最深刻的一个项目
67. 人生经历中最有成就感的一件事
68. 未来两三年前端的发展
69. 对前端这个职业的看法（？？我也记不清了，反正扯了一堆扯到了nodejs）
70. 实习中都有什么收获
71. 大意是在前端方向有没有什么偶像式的人物
72. 问点基础题：平时怎么调试；有一个数据量很大的表格要怎么处理
73. node 中的js和浏览器中的js区别，从区别，相同，性能，分析？
74. (上面提到了promise的polyfill)promise介绍下？
75. promise，以前的异步回调以及其他解决异步的区别？
76. 目前的小程序和H5的区别，从性能，渲染方式来说？
77. react和vue怎么选型
78. 项目: 做过的项目中最难的地方
79. 假定场景: 一个游戏活动, 有一个人从东到西运动, 碰到图上的点后获得奖励。怎么设计? 没有控制, 活动开始直接运动, 遇到点弹出动画。
80. 动画方面用Vue会有哪些瓶颈？ - 操作DOM
81. 现在有一个场景, 如果有一个用户登录淘宝了, 显示登录成功了, 然后网断了, 过了20分钟网络又连接上了, 那他接下来打开页面可以继续访问还是要去登录? - 不会去登录, 后端保存session 前端会携带用户信息进行碰撞
82. Vue从哪个版本开始接触的, 有了解过1.0吗, 他们之间对比？- 指令, 生命周期
83. 说一下Node的事件机制（宏队列微队列
84. 为什么时间机制是这样的呢？js如何运作的？
85. 说一下你偏向前端的一个项目吧
86. 你对自己未来的前端发展有什么看法？
87. Hybrid你是指的什么？专门的客户端开发吗？
88. 那你就要都接触iOS和Android了，这块要做的还很多
89. React Hooks有了解么？
90. React中key的作用你知道么
91. key的具体运作方式是什么？
92. 说一下你为什么做前端
93. 说一下你对前端未来的发展趋势及看法（多元化，WebGL、Node、Hybrid
94. 说一下你对React的理解？React设计思想？（没答好
95. 那你比较下React和Vue？（Vue双向绑定、React all in js
96. diff找到了差距后，渲染时会做什么优化吗（从shouldComponentUpdate开始，扯到了async rendering、time slicing
97. 说一下你对前端设计思想的理解？（MV*、函数式、面向对象/过程
98. 你知道双向绑定有什么缺点吗？（触发改变的方式很多？
99. 那你说说js引擎gc机制（引用计数，标记清除
100. 缓存类、hashMap、Node多进程）
101. 多进程复用有去了解过社区内的解决方式吗（专门的dataBus进程、Pandora.js对象代理、主子进程通信、借助Redis
102. 说一下Node直出的优缺点？（展示时间优化、SEO，不知怎么扯扯到了骨架屏
103. 骨架屏的概念&作用？（background、懒加载、回流/重绘
104. 数组随机化？
105. 数组去重？
106. 浏览器发起请求的方法？（XHR、fetch
107. 有了解XHR和fetch的区别吗？
108. 有了解跨域的一些东西吗？
109. 有了解Promise一族吗
