前端面试复习

React采用的Virtual DOM会对渲染出来的结果做脏检查，react如果父组件传递给子组件的数据发生变化，会引起整个组件树的变化

vue跟踪每一个组件的依赖关系，深度优先diff出需要更新的地方，不需要重新渲染整个组件树，且提供指令操作virtual Dom

react是单向数据流，状态驱动视图state-》view-》New State-》New View -》 ui-》render（data）

vue是双向数据流，Vue 是MVVM框架，双向数据绑定，当ViewModel对Model进行更新时，通过数据绑定更新到View。

React是通过JSX来渲染模板，而Vue是通过扩展的HTML来进行模板的渲染。

组件形式不同，Vue文件里将HTML，JS，CSS组合在一起。react提供class组件和function组

Vue封装好了一些v-if，v-for，React什么都是自己实现，自由度更高

react是类式写法

vue是声明式，传入各种options，api和参数都很多

react-redux，react-router交给社区维护

vuex，vue-router官方提供

react通过高阶组件扩展

vue通过mixins扩展
Vue也能实现高阶组件，只是特别麻烦，因为Vue对与组件的option做了各种处理，想实现高阶组件就要知道每一个option是怎么处理的，然后正确的设置。具体有多复杂，可以参考下面的文章。

react思想是all in js,通过jis来生成html，css，使用的是jsx，vue也有jsx方式，但是官方推崇使用html的语法创建.vue文件

react性能优化需要手动支持，vue自动优化，（当state太多多时候，vue的watcher也会多，造成卡顿，所以大型应用使用react会比较可控）

Vue通过 getter/setter以及一些函数的劫持，能精确知道数据变化。

React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。
为什么React不精确监听数据变化呢？
这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强调数据的不可变，两者没有好坏之分，Vue更加简单，而React构建大型应用的时候更加好

1、首屏加载慢，如果不对路由进行处理，就会将所有组件全部加载并向服务器请求数据，这导致首屏加载速度慢

不利于seo

1.vue.use(vuex),调用vuex 的install方法

在beforeCreate钩子前混入vuexInit方法，实现了store注入vue组件实例。并注册了vuex store的引用属性$store

vuex的state是响应式的，借助vue的data实现，将state存入vue实例组件的data

vuex的getter是借助vue的计算属性computed实现数据监听

state

mutations

action

getters

用来保存状态，组件发送dispatch触发action异步，然后action提交mutation，相当于一个处理中心，mutations修改state，最后渲染组件

使用场景：购物车，登陆状态，音乐播放

hash # 后面的字符是不包括在http请求中的，一般用来指导浏览器动作

提供pushState()、replacState(),可以对浏览器历史记录栈进行修改

history模式下，在服务端要增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面

props

事件传递$emit(“绑定的函数名”,'子传父的值')。在父组件中都子组件标签绑定事件，子组件通过this.$emit触发，并传递参数给父组件

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就 指向组件实例

$parent / $children：访问父 / 子实例

v-bind="$attrs" 里存放的是父组件中绑定的非 Props 属性，
v-on="$listeners"里存放的是父组件中绑定的非原生事件。

Vue2.4提供了$attrs , $listeners 来传递数据与事件，跨级组件之间的通讯变得更简单。
父传孙和孙传父->给子组件添加v-bind="$attrs" v-on="$listeners"属性，

（只传递，不处理数据）

inheritAttrs：true 继承除props之外的所有属性；inheritAttrs：false 只继承class属性。

vue 实例 作为事件总线（事件中心）用来触发事件和监听事件

// bus.js
import Vue from 'vue' 
export defult new Vue()

bus.$on('sendTitle',(val)=>{console.log(val)})

bus.$emit('sendTitle','传递的值')

祖先组件中通过provider来 提供变量，然后在子孙组件中通过inject来注入变量。

provide 和inject绑定并不是可响应的，实现响应式API Vue.observable

1、Observer将this.data转换成getter/setter进行响应式绑定
2、Dep【依赖管理】,收集包括{{}},watch,computed,的依赖，当数据发生变化，调用收集的回调。
3、如何收集依赖：Compile当读取属性当时候收集，就是当触发Object.defineproperty get 的时候
4、什么是订阅者：Watcher，Compile时遇到{{}},v-modle等时，创建订阅者，并触发get添加到dep依赖管理中心

1、提供与真实dom节点所对应的虚拟节点vnode

2、将虚拟vnode和旧vnode进行对比（diff），然后更新视图

1.diff 算法是虚拟 DOM 技术的必然产物：通过新旧虚拟 DOM 作对比，区分出增加、删除、移动，更新的元素，将变化更新在真实 DOM 上；Vue2.diff高效的执行对比过程，将时间复杂度降低为 O(n)
2.vue 2.x 中为了降低 Watcher 粒度，每个组件只有一个 Watcher 与之对应，引入 diff 和key结合能精确找到发生变化的地方。
3.vue 中 diff 执行的时刻是组件实例执行其更新函数时，它会比对上一次渲染结果 oldVnode 和新的渲染结果 newVnode，此过程称为 patch。 (diff发生的地方-patch.js--patchVnode())
4.diff 过程整体遵循深度优先、同层比较的策略；两个节点之间比较会根据它们是否拥有子节点或者文本节点做不同操作；比较两组子节点是diff算法的重点，源码在updateChildren()，首先假设头尾节点可能相同做 4 次比对尝试(首首，尾尾，首尾，尾首)， 如果没有找到相同节点才按照通用方式遍历查找，查找结束再按情况处理剩下的节点；借助 key 通常可以非常精确找到相同节点，因此整个patch过程非常高效。（patch.js 高效性分析-updateChildren()），不使用diff算法去比较两颗树的算法复杂度首O(n^3),使用diff算法能将复杂度降低到O(n)

虚拟dom

但是在Vue3中使用了静态标记后，对于不参与更新的元素，只会被创建一次，在渲染时直接复用即可

升级是否平滑：vue3兼容之前的写法，仅新增少量api Composition api是可选的

生态是否跟上：相关工具、生态、库更新都需要时间，或许到普及还需要一段时间

vue3比vue2好吗： 杀手级特性：Composition setup函数， <script setup> 代码简化 用户体验：性能提升，响应式革新 更好类型判断支持 兼容性

vue2通过递归调用defineproperty使之变为响应式对象 vue3 proxy原生支持对象的属性访问，新增，删除的拦截，支持数组属性和长度的属性

vue3通过标记所有静态根节点，diff的时候只比较动态节点内容

模板不再创建唯一根节点

patch flag, 跳过静态节点,直接对比动态节点,缓存事件处理函数

vue3移除了一些不常用的api，例如：inline-template、filter等 使用tree-shaking

Options Api

composition Api

在 Vue2.x 中具名插槽和作用域插槽分别使用slot和slot-scope来实现， 在 Vue3.0 中将slot和slot-scope进行了合并同意使用。 Vue3.0 中v-slot：

自定义指令名称变更，update去掉，componentUpdate->update,新增beforeUpdate、beforeUnmount

v-model 升级，Vue 3 中抛弃了.async写法， 统一使用v-model

defineProperty

Proxy

通过编译阶段对静态模板的分析，生成block tree，可以对子节点动态收集。增加了patchFlag标记动态节点，渲染效率不再与模板大小成正相关，而是与模板中动态节点的数量成正相关。

Vue Composition API 围绕一个新的组件选项 setup 而创建。setup() 为 Vue 组件提供了状态、计算值、watcher 和生命周期钩子。

并没有让原来的 API（Options-based API）消失。允许开发者 结合使用新旧两种 API（向下兼容）

vue2mixin和vue3setup使用区别

diff优化

hoistStatic 静态提升

事件侦听器缓存 cacheHandlers

beforeCreate-> 使用 setup()

created-> 使用setup()

beforeMount -> onBeforeMount

Mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestory ->onBeforeDestory

destoryed -> onDestoryed

直接监听整个对象而非属性

直接监听数组的变化

13种拦截方法，ownKeys、deleteProperty、has 等是 Object.defineProperty 不具备的。

Proxy返回的是一个新对象，可以操作新对象达到目的，而Object.defineProperty只能遍历对象属性

Proxy性能更好

5. Proxy 兼容性差 ⽬前并没有⼀个完整⽀持 Proxy 所有拦截⽅法的Polyfill⽅案

只能劫持对象的属性，因此需要对每个属性进行遍历。

vue不能检测到对象属性的添加或删除,使用Vue.set

不能监听数组长度变化，通过改变.length无法被监听 vue做的处理：Vue使用了重写原型的方案代替。拦截了数组的一些方法，在这个过程中再去做通知变化等操作。 第一步：先获取原生 Array 的原型方法，因为拦截后还是需要原生的方法帮我们实现数组的变化。 第二步：对 Array 的原型方法使用 Object.defineProperty 做一些拦截操作。 第三步：把需要被拦截的 Array 类型的数据原型指向改造后原型。

更新路由但不重新请求页面，是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有2种方式： 1、利用URL中的hash("#"); 2、利用HTML5 History interface在中新增的方法pushState和replaceState;

hash

history

全局的钩子函数

单个的路由配置的钩子函数

组件内的钩子函数

组件

列表

其他

预渲染

服务端渲染SSR

压缩代码 Tree Shaking/Scope Hoisting 使⽤cdn加载第三⽅模块 多线程打包happypack splitChunks抽离公共⽂件 sourceMap优化

⻣架屏 PWA 还可以使⽤缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

第一个参数是自定义元素名称，也就是将来在别的组件中使用这个组件的标签名称。

第二个参数是将要注册的Vue组件。

Vue.use注册插件,这接收一个参数。这个参数必须具有install方法。Vue.use函数内部会调用参数的install方法。

如果插件没有被注册过，那么注册成功之后会给插件添加一个installed的属性值为true。Vue.use方法内部会检测插件的installed属性，从而避免重复注册插件。

插件的install方法将接收两个参数，第一个是参数是Vue，第二个参数是配置项options。

在install方法内部可以添加全局方法或者属性

Vue.directive('report', report(options)) 自定义指令提供了几个钩子函数：bind：指令第一次绑定到元素时调用inserted：被绑定元素插入父节点时调用update：所在组件的 VNode 更新时调用

开发时

loader

plugins

初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；

开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run方法开始执行编译；

确定入口：根据配置中的 entry 找出所有的入口文件；

编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；

完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；

输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；

输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

compiler

compilation

- img标签资源处理

- 多页应用打包

- 第三方库的引入方式

- 区分配置文件打包

- 环境变量

- proxy

- HMR

作用：处理非js文件

原理：从下至上，右至左加载loader，将源代码管道式进行加工处理后返回给下一个loader

如何编写loader 其实loader就是对外暴露一个函数

原理

编写插件

class HelloWorldPlugin { apply(compiler) { compiler.hooks.done.tap('Hello World Plugin', (stats) => { console.log('Hello World!'); }); }/ } module.exports = HelloWorldPlugin;

作用

原理

webpack实现事件流的原理

特点

两大核心

常用功能

作用

原理

核心包

工具包

功能包

polyfill和runtime

使用

webpack自带优化详解

css优化

js优化

- 多进程打包

- 打包分析

前向治理（提升构建速度）

后向治理（保证构建质量）

实际项目中优化过程

glup 基于流的构建工具

webpack（为SPA 大应用而生）

做了一个express服务器，托管在根目录，找到根目录的index.html

1、利用浏览器es module imports，关键变化是index.html中的文件导入方式 <script type="module" src="/src/main.js"></script>

2、第三方依赖打包，并将导入地址修改为相对地址，从而统一所有请求为相对地址

3、启动一个开发服务器处理这些资源请求

4、vite需要根据请求资源做不同解析工作，比如App.vue，将导入模块解析成一个render函数，然后将render设置在函数设置到组件配置对象中，使用

vite对js/ts处理使用esbuild，支持babel，压缩等功能

项目规模

成员规模

是否需要开源

vue2

vue3

同时使用js和ts

Service Worker 有自己独立的工作线程，与网页区分开，网页崩溃了，Service Worker 一般情况下不会崩溃；

Service Worker 生命周期一般要比网页还要长，可以用来监控网页的状态

预加载 ：资源预拉取（prefetch）则是另一种性能优化的技术。通过预拉取可以告诉浏览器用户在未来可能用到哪些资源。 prefetch支持预拉取图片、脚本或者任何可以被浏览器缓存的资源。 在head里 添加 <linkrel="prefetch"href="image.png">

路由懒加载-按需加载组件，当路由被访问的时候再加载对应组件，而不是首页的时候加载）、第三方依赖按需加载 图片懒加载（IntersectionObserver）

FP、FCP、FMP与TTI都表示浏览器在屏幕上渲染像素的时间点。

组件

列表

其他

预渲染；

服务端渲染SSR；

骨架屏；

PWA；

还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

长列表1、vue-virtual-scroll-list优化长列表

2、Object.freeze优化长列表

压缩代码；uglifyjsplugin

Tree Shaking/Scope Hoisting；

使用cdn加载第三方模块；

多线程打包happypack；

splitChunks抽离公共文件；

sourceMap优化；

动静分离其实就是 Nginx 服务器将接收到的请求分为动态请求和静态请求。

静态请求直接从 nginx 服务器所设定的根目录路径去取对应的资源，动态请求转发给真实的后台（前面所说的应用服务器，如图中的Tomcat）去处理。 这样做不仅能给应用服务器减轻压力，将后台api接口服务化，还能将前后端代码分开并行开发和部署。（传送门：nginx动静分离的好处）

是什么

作用

配置

是什么

作用

配置

是什么

package.json添加script执行入口文件， 或者bin+npm link全局使用

入口文件#!/usr/bin/env node 以node环境执行

commander库 添加控制台命运选项

引入模板配置文件。获取用户输入，看是否存在文件require('co-prompt')

凭借拉取项目代码的命令并执行，拼接git命令行+切换对应分支（exec）

a、 一件事情，有很多方案可以实现。

b、我可以在任何时候，决定采用哪一种实现。

c.、未来可能增加更多的方案。

d、 策略模式让方案的变化不会影响到使用方案的客户。

User-Agent + Referer检测

账号及Cookie验证

验证码

IP限制频次

chrome headless或phantomjs来模拟浏览器环境

tesseract识别验证码

代理IP淘宝就能买到

HTTP/1.0

HTTP/1.1

HTTP/2.0

HTTP2.0的副作用

HTTP/1.1，开始支持长连接，但是 HTTP/1.1 协议中 「浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制。超过限制数目的请求会被阻塞」

HTTP/1.1将Connection写入了标准，默认值为keep-alive。除非强制设置为Connection: close，才会在请求后断开TCP连接。 默认情况下建立的TCP连接不会断开，只有在请求头中设置Connection: close才会在请求后关闭TCP连接

HTTP/1.1中，单个TCP连接，在同一时间只能处理一个http请求，虽然存在Pipelining技术支持多个请求同时发送，但由于实践中存在很多问题无法解决，所以浏览器默认是关闭，所以可以认为是不支持同时多个请求。

HTTP2提供了多路传输功能，多个http请求，可以同时在同一个TCP连接中进行传输

页面资源请求时，浏览器会同时和服务器建立多个TCP连接，在同一个TCP连接上顺序处理多个HTTP请求。所以浏览器的并发性就体现在可以建立多个TCP连接，来支持多个http同时请求。

Chrome浏览器最多允许对同一个域名Host建立6个TCP连接，不同的浏览器有所区别。

如何攻击

如何阻止

后果

攻击流程如下：

产生条件

几种常见的攻击方式

如何冒充身份

防范

vue-lazyload

audio

video

原理

为js创建多线程环境。web worker是运行在后台的javaScript 独立于其他脚本，不会影响页面性能，可以继续做其他事情：如点击

localStorage

sessionStorage

是h5提供的一种在单个tcp连接上进行双工通讯的协议

浏览器和服务器只需做一个握手动作，就建立一条快速通道，两者之间可以数据相互传送

使用xml绘制的2d图形语言

可以为某个元素附加javascript事件处理

每个被绘制的图形均被视为对象，如果对象属性变化会重新绘制

复杂度高会减慢渲染速度（原理都是操作dom）

不适合游戏

适合带有大型渲染区域的应用程序

通过js绘制出来的2D图形

canvas是逐个像素进行渲染的

依赖分辨率

不支持js事件处理

能够以.jpg和png保存的图片

适合图像密集型游戏

字符串

数组

函数

对象

标准对象

Json

其他

面向对象编程

es6新特性

Symbol 代表用给定名称作为唯一标识

箭头函数

Promise

js严格模式

模块化

setTimeout

requestanimationframe

原生ajax封装成Promise

异步加载js的方式

浏览器之间的通讯

ajax、fetch和axios

http、https

http2.0和http1.1

浏览器xss（跨站脚本攻击）
CSRF（跨站请求伪造）

内存泄漏是什么原因怎么解决

js垃圾回收

js的防抖节流

event loop 异步的原理

事件

js作用域有什么用

原型和原型链

this

词法作用域与作用域链

BFC（Block formatting context），即块级格式化上下文，它作为HTML页面上的一个独立渲染区域，只有区域内元素参与渲染，且不会影响其外部元素。简单来说，可以将 BFC 看做是一个“围城”，外面的元素进不来，里面的元素出不去（互不干扰）

1、浮动元素，float 除 none 以外的值；

2、定位元素，position（absolute，fixed）；

3、display 为以下其中之一的值 inline-block，table-cell，table-caption；

4、overflow 除了 visible 以外的值（hidden，auto，scroll）；

5、body 根元素 

满足以上任一条件，就出发BFC布局

边距重叠问题

消除浮动问题

自适应布局问题

1、内部的块级元素会在垂直方向，一个接一个地放置。

2、块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻块级元素的margin会发生重叠。

3、对于从左往右的格式化，每个元素（块级元素与行内元素）的左边缘，与包含块的左边缘相接触，(对于从右往左的格式化则相反)。即使包含块中的元素存在浮动也是如此，除非其中元素再生成一个BFC。

4、BFC的区域不会与浮动元素重叠。

5、BFC是一个隔离的独立容器，容器里面的子元素和外面的元素互不影响。

6、计算BFC容器的高度时，浮动元素也参与计算。

水平居中：当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。

垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中

align-content

align-items

justify-content

flex-flow

flex-wrap

flex-direction

order

flex-grow

flex-shrink

flex-basis

flex

align-self

行内元素

块级元素

行内元素display

块级元素

jsonp

服务器代理

nginx反向代理

CORS 最常用的跨域方式，支持post

可以通过iframe跨域

websocket跨域

WebSocket是HTML5中的协议，本质上是基于TCP，先通过HTTP/HTTPS协议发起一条特殊HTTP请求进行握手后创建一个用于交换数据的TCP连接，也是支持长连接的。WebSocket是由HTTP先发起的，然后在转为WebSocket。

Socket.io 支持向下兼容：socket.io封装了websocket，同时包含了其它的连接方式，你在任何浏览器里都可以使用socket.io来建立异步的连接。socket.io包含了服务端和客户端的库，如果在浏览器中使用了socket.io的js，服务端也必须同样适用。
socket.io底层是基于engine.io这个库。engine.io为 socket.io 提供跨浏览器/跨设备的双向通信的底层库。engine.io使用了 Websocket 和 XHR 方式封装了一套 socket 协议。在低版本的浏览器中，不支持Websocket，为了兼容使用长轮询(polling)替代

和http有什么关系

特点

作用

HTML页面中，如果在执行脚本时，页面的状态是不可响应的，直到脚本执行完成后，页面才变成可响应。

web worker是运行在后台的js，独立于其他脚本，不会影响页面你的性能。
并且通过postMessage将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了

创建Worker时，JS引擎向浏览器申请开一个子线程（子线程是浏览器开的，完全受主线程控制，而且不能操作DOM）
JS引擎线程与worker线程间通过特定的方式通信（postMessage API，需要通过序列化对象来与线程交互特定的数据）

限制

cookie

session

url重写

隐藏的input

ip地址

1xx（消息）

2xx(成功)

3xx（重定向）

4xx（请求错误）

5xx（服务器错误）

cookies

localStorage

sessionStorage

不同浏览器无法共享localStorage和sessionStorage中的信息。同一浏览器的相同域名和端口的不同页面间可以共享相同的 localStorage，但是不同页面间无法共享sessionStorage的信息。
解决：目前广泛采用的是postMessage和iframe相结合的方法。postMessage(data,origin)方法允许来自不同源的脚本采用异步方式进行通信，可以实现跨文本档、多窗口、跨域消息传递。

强缓存 200 OK (from cache)

协商缓存 304 Not Modified

整个缓存分析过程

Accept: 接收类型，表示浏览器支持的MIME类型 （对标服务端返回的Content-Type） Accept-Encoding：浏览器支持的压缩类型,如gzip等,超出类型不能接收 Content-Type：客户端发送出去实体内容的类型 Cache-Control: 指定请求和响应遵循的缓存机制，如no-cache If-Modified-Since：对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内，http1.0中 Expires：缓存控制，在这个时间内不会请求，直接使用缓存，http1.0，而且是服务端时间 Max-age：代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存，http1.1中 If-None-Match：对应服务端的ETag，用来匹配文件内容是否改变（非常精确），http1.1中 Cookie: 有cookie并且同域访问时会自动带上 Connection: 当浏览器与服务器通信时对于长连接如何进行处理,如keep-alive Host：请求的服务器URL Origin：最初的请求是从哪里发起的（只会精确到端口）,Origin比Referer更尊重隐私 Referer：该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址，csrf拦截常用到这个字段) User-Agent：用户客户端的一些必要信息，如UA头部等

Access-Control-Allow-Headers: 服务器端允许的请求Headers Access-Control-Allow-Methods: 服务器端允许的请求方法 Access-Control-Allow-Origin: 服务器端允许的请求Origin头部（譬如为*） Content-Type：服务端返回的实体内容的类型 Date：数据从服务器发送的时间 Cache-Control：告诉浏览器或其他客户，什么环境可以安全的缓存文档 Last-Modified：请求资源的最后修改时间 Expires：应该在什么时候认为文档已经过期,从而不再缓存它 Max-age：客户端的本地资源应该缓存多少秒，开启了Cache-Control后有效 ETag：请求变量的实体标签的当前值 Set-Cookie：设置和页面关联的cookie，服务器通过这个头部把cookie传给客户端 Keep-Alive：如果客户端有keep-alive，服务端也会有响应（如timeout=38） Server：服务器的一些相关信息

DNS解析出ip

TCP连接，3次握手

发送http请求

服务器处理请求，并返回报文

浏览器渲染页面

断开连接，TCP四次挥手
(由浏览器发起，告诉服务器，我响应报文接受完了，我准备关闭了，你也准备吧)

- 浏览器输入url，浏览器主进程接管，开一个下载线程， 然后进行 http请求（略去DNS查询，IP寻址等等操作），然后等待响应，获取内容， 随后将内容通过RendererHost接口转交给Renderer进程 - 浏览器渲染流程开始

进程是资源分配的基本单位，线程是CPU独立运行和独立调度的基本单位
（可以理解为一个进程中执行的代码片段）

浏览器的渲染进程是多线程的

JS单线程指的是浏览器中负责解释和执行JS代码的只有一个线程，即为 JS引擎线程

一个进程下面的线程是可以去通信的，共享资源

进程有独立的地址空间，一个进程崩溃后，在保护模式下不会对其它进程产生影响，而线程只是一个进程中的不同执行路径。线程有自己的堆栈和局部变量，但线程没有单独的地址空间，一个线程死掉就等于整个进程死掉。

GUI线程
负责html/css构建render tree页面渲染、reflow、repaint

JS引擎线程（V8引擎）
负责处理javascript脚本

事件触发线程
负责管理事件循环和任务队列
只要异步任务有了运行结果，就在任务队列之中放置一个事件

定时器线程
setInterval与setTimeout所在线程
负责计时

HTTP请求线程
每建立一个请求建立一个线程

JS是解释型语音，所以它无需提前编译，而是由解释器实时运行

引擎对JS的处理过程

JS的预处理阶段

JS的执行阶段

document.createElement(element) 创建 HTML 元素

document.removeChild(element) 删除 HTML 元素

document.appendChild(element) 添加 HTML 元素

document.replaceChild(element) 替换 HTML 元素

document.write(text) 写入 HTML 输出流

document.getElementById(id) 通过元素 id 来查找元素

document.getElementsByTagName(name) 通过标签名来查找元素

document.getElementsByClassName(name) 通过类名来查找元素

document.querySelectorAll("p.intro")  CSS 选择器查找 HTML 元素

parentNode

childNodes[nodenumber]

firstChild

lastChild

nextSibling

previousSibling

element.innerHTML = new html content 改变元素的 inner HTML

element.attribute = new value 改变 HTML 元素的属性值

element.setAttribute(attribute, value) 改变 HTML 元素的属性值

element.style.property = new style 改变 HTML 元素的样式

document.getElementById(id).onclick = function(){code} 向 onclick 事件添加事件处理程序

timers(定时器) : 此阶段执行那些由 `setTimeout()` 和 `setInterval()` 调度的回调函数.

I/O callbacks(I/O回调) : 此阶段会执行几乎所有的回调函数, 除了 close callbacks(关闭回调) 和 那些由 timers 与 setImmediate()调度的回调
.setImmediate 约等于 setTimeout(cb,0)

idle(空转), prepare : 此阶段只在内部使用

poll(轮询): 检索新的I/O事件; 在恰当的时候Node会阻塞在这个阶段
（其中poll阶段除了执行当前阶段的队列里的所有callback之外，
poll还负责检测是否有timer的callback，如timer到达时间，并且timer的callback还未执行，
那么就循环至开头执行timer的callback

check(检查) : `setImmediate()` 设置的回调会在此阶段被调用

close callbacks(关闭事件的回调): 诸如 `socket.on('close', ...)` 此类的回调在此阶段被调用

当事件循环进入到某一个阶段，其会执行该阶段的任何操作。直到这个阶段的任务队列为空，或者是回调函数的调用次数达到上限。此时事件循环将会到下一个阶段。

当我们在事件循环的某个阶段执行某个回调时候，该回调可能会生成更多的回调。这些回调都是被添加到对应阶段的队列中。因此，长时间运行的回调可以允许轮询阶段的运行时间远远超过计时器的阀值

功能

进入轮询阶段，且代码未设定timer

setImmediate()处于check阶段，设计用于在当前轮询阶段后执行脚本

setTimeout() 安排在经过最小阀值后执行的脚本

setTimeout(function timeout () {
  console.log('timeout');
},0);

setImmediate(function immediate () {
  console.log('immediate');
});

//setImmediate和setTimeout执行顺序不确定

受程序启动时间限制。设置的 delay 是 0，但其实是1，就经过了check阶段，直接进入下一个timer阶段，所以有时setImmediate先执行，有时setTimeout，

执行定时器的顺序将根据调用他们的上下文有所不同，
如果是从主模块中调用两者，那么时间将会受到进程性能的限制；

如果这两者运行在非I/O周期内，这两者的顺序无法保证，
如果是在I/O周期内的话，setImmediate()与优先于setTimeout()

nodeJS中. settimeout(fn,1) === setTimeout(fn,0)

属性

方法

事件

exec()：执行shell，并返回输出

execSync(). exec()的同步版本

execFile()，参数有区别的exec

spawn 和execFile类似，但没有回调函数，只能通过监听事件，来获取运行结果。

fork() 用于进程之间的通信,也是IPC通信的基础

属性和方法

事件

**cluster多进程模型**

express的四⼤模块为application、request、response、router；

koa也是四个模块，分别是Application、Request、Response、Context。封装请求和响应

Express的中间件是线型的

Koa 的中间件是U型的（洋葱模型）

express使用回调函数next()，基于ES5语法

koa v1.x 使用generator 语法

koa v2.x 使用async/await 语法

Koa API 基本和Express一样

Egg 的插件机制有很高的可扩展性，一个插件只做一件事，Egg 奉行『约定优于配置』，按照[一套统一的约定](https://eggjs.org/zh-cn/advanced/loader.html)进行应用开发，团队内部采用这种方式可以减少开发人员的学习成本，开发人员不再是『钉子』，可以流动起来。

Egg 选择了 Koa 作为其基础框架，在它的模型基础上，进一步对它进行了一些增强

过期时间

文件标识

文件更新最后时间，只能精确到1s以内

localStorage

SessionStorage

主要功能