前端面试技能树2023

virtual Dom的使用

组件化

单向？双向数据流

模版渲染

组件形式

自由度

类式的组件写法，还是声明式写法（vue3.0已支持）

是否提供内置功能

扩展

all in js？

数据是否自动watcher可变

监听数据变化的实现原理不同

v-if会调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染； v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display； v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值

.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.self: 当事件发生在该元素本身而不是子元素的时候会触发；
.capture: 事件侦听，事件发生的时候会调用

1. key的作⽤主要是为了更⾼效的对⽐虚拟DOM中的某个节点是否相同。

2. vue在patch过程中判断两个节点是否是相同节点，从源码中可以知道，vue判断两个节点是否相同时主要判断两者的key和元素类型等，key作为唯⼀标识，因此如果不设置key，它的值就是undefined，则可能永远认为这是两个相同节点，只会频繁更新dom，明显是不可取的。使得整个patch过程⽐较低效，影响性能。

3. 应该避免使⽤数组索引作为key，这可能导致⼀些隐蔽的bug；（例如当删除数组中某个值时，这时候它和它后面的index变了，但是vue并不能知道哪一个值被删除，key对应index，所以它和后面的所有vdom 都会重新渲染，没有重复利用。如果使用唯一id作为key，vue可以准确找到那个节点被删除，直接删除vdom就好了，其他直接复用）

用 index 作为 key 时，在对数据进行，逆序添加，逆序删除等破坏顺序的操作时，会产生没必要的真实 DOM更新，从而导致效率低

用 index 作为 key 时，如果结构中包含输入类的 DOM，会产生错误的 DOM 更新

在开发中最好每条数据使用唯一标识固定的数据作为 key，比如后台返回的 ID，手机号，身份证号等唯一值

如果不对数据进行逆序添加 逆序删除破坏顺序的操作， 只用于列表展示的话 使用index 作为Key没有毛病

①使得数据处理结构清晰；

②依赖于数据，数据更新，处理结果自动更新；

③计算属性内部this指向vm实例；

④在template调用时，直接写计算属性名即可；

⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；

⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computer从缓存中获取，不会重新计算。

computed本身是通过代理的方式代理到组件实例上的，所以读取计算属性的时候，执行的是一个内部的getter，而不是用户定义的方法。

computed内部实现了一个惰性的watcher，在实例化的时候不会去求值，其内部通过dirty属性标记计算属性是否需要重新求值。当computed依赖的任一状态（不一定是return中的）发生变化，都会通知这个惰性watcher，让它把dirty属性设置为true。所以，当再次读取这个计算属性的时候，就会重新去求值。

优点：
1、除了首次加载页面，但页面内容改变不需要重新加载整个页面，
利用ajax实现良好的交互体验，没有页面之间的切换，不会出现白屏，也不会闪烁
2、前后端完全分离，后端不再负责模版渲染，输出页面，后端更专注业务开发和性能优化
3、单页面相对服务器压力小，服务器只用输出数据就可以

缺点

用来对组件进行缓存，从而节省性能，<keep-alive>由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM元素，
被包裹在keep-alive中的组件的状态将会被保留，不会重新加载，不会触发mounted

keep-alive生命周期钩子函数：activated、deactivated,如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

如何添加自定义指令

自定义过滤器

原理

属性

用处

hash模式

history模式

父传子

子传父

$parent / $children与 ref

4. $attr/$listeners （跨级组件，父子，兄弟组件）

eventBus（跨级组件，父子，兄弟组件）

vuex(跨级)

inject/provide（跨级/高阶用法）

vue.js 采用数据劫持结合发布者-订阅者模式，
1、通过Observer类，利用Object.defineProperty()来劫持各个属性的getter/setter，
2、通过Dep类作为订阅管理中心，为每个属性管理订阅者，
3、通过Watcher类创建订阅者和绑定update()更新回调，
4、在初始化编译模版compile时触发getter，这时会为属性的Dep订阅中心添加订阅者watcher，
在数据变动触发set时通知所有订阅者watcher，触发相应update回调，更新页面

双向绑定过程

伪代码

Model是指数据模型，用于业务逻辑实现和数据改变的定义，
View是视图模型，用户将数据模型的UI展示
ViewModel：是将数据模型和视图模型连接起来，当数据改变触发页面ui的改变，这个是双向的，就是双方的改变都会被同步起来，
通过监听数据模型和管理视图变更，可以理解用于同步View和Model的对象，

好处就是，这个同步复杂的关系和逻辑开发者不需要关注，不需要处理Dom，只需把关注点放在业务逻辑上

用Js对象结构表示的Dom树的结构，本质上就是真实dom的映射。里面包含标签名，属性和子元素对象。vue最终的工作就是通过这颗树批量生成真实dom。直接修改js这个树对象，达到统一更新dom。整个机制是在JavaScript层面计算，在完成之前并不会操作DOM，等数据稳定之后再实现精准的修改。这样更能达到优化性能的目的。

虚拟dom的作用其实有两方面：

diff

虚拟dom

从构建VNode到生成真实节点树

整个过程源码分析

diff算法的双端比较
updateChildren()

痛点和vue3优化

虚拟DOM最核心的部分就是patch，它可以将vnode渲染成真实的DOM，而对比两个vnode之间的差异只是patch的一部分，
patch的目的是修改DOM节点，也可以理解为渲染视图，并且patch不是暴力替换节点，而是在现有DOM上进行修改。对现有DOM进行修改需要做三件事：

1、创建新增的DOM
2、删除已经废弃的节点
3、修改需要更新的节点

优点：数据的双向绑定，组件化，提高了开发效率，方便重复使用，提升了项目的可维护性，便于协同开发，前后端分离，更专注业务

缺点：不支持低版本浏览器，不适于SEO优化

vue3适合我嘛？会迅速替代Vue吗

优化点

Composition Api 与 Vue 2.x使用的Options Api 有什么区别

Teleport传送门（dialog插入到body上的例子）

Suspense

vue3响应式实现原理

用法变更

monorepo[mɔnəu ˈriːpəʊ]管理方式：yarn workspace，将模块拆分到package中

性能优化：引入tree-shaking，未被使用到的不会被打包

类型检测增强：从flow换到了ts

内部代码优化：- 响应式相关代码更加简洁，
数据劫持私用proxy，在使用时候劫持，

模板编译优化

Vue Composition API 基本使用 基于函数和逻辑复用机制

Vue3.0是如何变得更快的

周期函数

Proxy优势

Proxy缺点

Object.defineProperty缺点

Vue重写Array原型。循环数组八大方法并加以修改实现监听

对 Array 的原型方法使用Object.defineProperty 做一些拦截操作。把Array的数据原型指向改造后原型。

因为原型链的机制，找到对应的⽅法就不会继续往上找了。编译⽅法中会对⼀些会增加索引的

变异的本质就在这些方法内部加上自定义的逻辑，其实就是想监听这些方法的调用。

Vue中默认的做法就是在数组实例与它的原型之间，插入了一个新的原型对象，这个原型方法实现了这些变异方法，也就拦截了真正数组原型上的方法（因为原型链的机制，找到了就不会继续往上找了）。 变异方法中增加了自定义逻辑，也调用了真正数组原型上的方法，即实现了目的，也不会对正常使用造成影响。

如果浏览器不支持___proto__这个属性，Vue则直接在数组实例上增加这些变异方法。

渐进式vue框架

高效性

易用性

灵活性

一个 vue 单文件就是一个 vue 实例（组件最后被webpack转换成js），而 <template> 标签中的内容就是 Vue 实例接管形成虚拟 DOM 的那部分内容，如果 template 下有多个 div ，那么无法指定 vue 实例的入口，所以需要通过唯一根节点，递归遍历整个vue树下的所有节点，并处理为vdom，最后再渲染成真正的 HTML，插入在正确的位置。

总结：需要构建VNode，而VNode只能有一个根节点（其内只能有一个节点是因为当前构建和 diff virutalDOM 的算法还未支撑这样的结构，也很难在保证性能的情况下支撑。）

vue3 fragmrnt 不再需要唯一跟元素，原理：将写的多个标签使用fragment标签包裹，是一个虚拟标签，不是真实 DOM 树的一部分，不会参与渲染

渲染过程：
⽗组件挂载/更新/销毁完成⼀定是等⼦组件都挂载/更新/销毁完成后，才算是⽗组件挂载/更新/销毁完，
所以⽗组件的mounted在⼦组件mouted之后
⽗beforeCreate -> ⽗created -> ⽗beforeMount -> ⼦beforeCreate -> ⼦created -> ⼦beforeMount
-> ⼦mounted -> ⽗mounted
⼦组件更新过程：
1. 影响到⽗组件： ⽗beforeUpdate -> ⼦beforeUpdate->⼦updated -> ⽗updted
2. 不影响⽗组件： ⼦beforeUpdate -> ⼦updated
⽗组件更新过程：
1. 影响到⼦组件： ⽗beforeUpdate -> ⼦beforeUpdate->⼦updated -> ⽗updted
2. 不影响⼦组件： ⽗beforeUpdate -> ⽗updated
销毁过程：
⽗beforeDestroy -> ⼦beforeDestroy -> ⼦destroyed -> ⽗destroyed
看起来很多好像很难记忆，其实只要理解了，不管是哪种情况，都⼀定是⽗组件等待⼦组件完成后，才
会执⾏⾃⼰对应完成的钩⼦，就可以很容易记住

1、new vue()
2、初始化生命周期钩子

beforeCreate ：
（实例初始化之后，el和data还没初始化，
无法访问methods、data、computed）

创建前：data：undefined  $el:undefined

data observer和事件配置调用

初始化内部事件 inject，provide state

created：
（data已经初始化，
完成dataObserver/计算属性/event/watch事件回调，
dom还没挂载）

已创建：data：{} ，$el:undefined

beforeMount：
编译模版compile
（挂载之前，render函数首次被调用成虚拟Dom）

准备挂载 compile：data:xxx；$el：xxxx(虚拟)

VNode替换成真实DOM

mounted：
（挂载完成，dom树已经完成
渲染到页面，可以进行dom操作）

挂载完成：虚拟 替换真实 data：xxx；$el：xx(真实)

beforeUpdate：
（数据有更新被调用，发生在Dom重新渲染和打补丁之前，
可以进一步修改状态，不会触发重新渲染过程）

Updated：（虚拟dom重新渲染补丁，以最小dom开支来渲染
不建议这步进行状态修改，可能会导致无限循环）

beforeDestroy：
（在实例销毁之前，实例还能使用，
可以做一些清除定时器，监听dom事件的操作）

清除watcher，子组件，事件监听器等

destroyed：
（组件被销毁后调用，事件监听会被移除，
所有实例都会被销毁，但是data和$el还是可以取到，
只会销毁实例，不会清除dom）

路由原理

vue路由的实现

vue路由的钩子函数

Vue的异步渲染实际上是在数据每次变化时，将其所要引起页面变化的部分都放到一个异步API的回调函数里，直到同步代码执行完之后，异步回调开始执行，最终将同步代码里所有的需要渲染变化的部分合并起来，去掉重复修改的操作，最终执行一次渲染操作。这里使用异步API的优先级是promise.then>MutationObserver>setImmediate>setTimeout

  如果同时两次修改val，当val第一次赋值时，页面会渲染出对应的文字，但是实际这个渲染变化会暂存，val第二次赋值时，再次暂存将要引起的变化，这些变化操作会被丢到异步API，Promise.then的回调函数中，等到所有同步代码执行完后，then函数的回调函数得到执行，然后将遍历存储着数据变化的全局数组，将所有数组里数据确定先后优先级，最终合并成一套需要展示到页面上的数据，执行页面渲染操作操作。

  异步队列执行后，存储页面变化的全局数组得到遍历执行，执行的时候会进行一些筛查操作，将重复操作过的数据进行处理，实际就是先赋值的丢弃不渲染，最终按照优先级最终组合成一套数据渲染。

  这里触发渲染的异步API优先考虑Promise，其次MutationObserver，如果没有MutationObserver的话，会考虑setImmediate，没有setImmediate的话最后考虑是setTimeout。

原理就是在dom异步更新的队列后面添加nextTick的回调

1、nextTick是Vue提供的⼀个全局API，由于vue的异步更新策略导致我们对数据的修改不会⽴刻体现在dom变化上，
此时如果想要⽴即获取更新后的dom状态，就需要使⽤这个⽅法
2. Vue 在更新 DOM 时是异步执⾏的。只要侦听到数据变化，Vue 将开启⼀个队列
并缓冲在同⼀事件循环中。 nextTick 回调被添加到dom修改的异步队列后面
(vue 进行DOM 更新内部也是调用nextTick来做异步队列控制。而当我们自己调用 nextTick 的时候，它就在更新 DOM 的那个异步队列后追加了nextTick的回调函数，)从而确保我们的代码在 DOM 更新后执行，同时也避免了 setTimeout 可能存在 的多次执行问 题。

nextTick即有可能是微任务，也有可能是宏任务，从优先去Promise和MutationObserver可以看出nextTick优先微任务，其次是setImmediate和setTimeout宏任务。

如何避免同一个数据被多次修改引起的重复渲染：
如果同⼀个 watcher 被多次触发，只会被推⼊到队列中⼀次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是⾮常重要的。将多次数据变化所引起的响应变化收集后合并成一次页面渲染，从而更合理的利用机器资源，提升性能与用户体验

nextTick 优先使用微任务
（微任务会先于宏任务，微任务执行完后会进入浏览器更新渲染阶段，所以更新渲染前使用微任务会比宏任务块），
其次再到宏任务。优先级为promise.then> MutationObserver> setImmediate> setTimeout。
注意：之所以将 nextTick 的回调函数放⼊到数组中⼀次性执⾏，⽽不是直接在 nextTick 中执⾏回调函数，
是为了保证在同⼀个tick内多次执⾏了 nextTcik ，不会开启多个异步任务，
⽽是把这些异步任务都压成⼀个同步任务，在下⼀个tick内执⾏完毕。

Template > ast 抽象语法树> render function > 执行 render function > VNode
第⼀步：解析
将模板字符串解析⽣成 AST，⽣成的AST 元素节点总共有 3 种类型，1 为普通元素， 2 为表达式，3为纯⽂本。
第⼆步：优化语法树
 Vue 模板中并不是所有数据都是响应式的，有很多数据是⾸次渲染后就永远不会变化的，那么这部分数据⽣成的 DOM 也不会变化，我们可以在 patch 的过程跳过对他们的⽐对。
此阶段会深度遍历⽣成的 AST 树，检测它的每⼀颗⼦树是不是静态节点，如果是静态节点则它们⽣成DOM 永远不需要改变，这对运⾏时对模板的更新起到极⼤的优化作⽤。
1. ⽣成代码
const code = generate(ast, options)
通过 generate ⽅法，将ast⽣成 render 函数。

组件中的data写成⼀个函数，是给每个组件实例创建⼀个私有的数据空间，让各个组件实例维护各⾃的数据。如果写成对象形式，那么所有组件实例共⽤了⼀个数据空间data，就会造成数据污染，但由于根实例只有一个，所以不存在数据污染这种情况，也就可以使用对象了。

编码阶段

SEO优化

打包优化

⽤户体验

1. new Vue()是创建Vue实例，它内部执⾏了根实例的初始化过程。
2. 具体包括以下操作：
选项合并options, (⽤户选项、默认选项)
生命周期初始化
$children, $refs, $slots, $createElement等实例属性和⽅法初始化
render初始化
--------beforCreate-------
init inject 
数据响应式和事件处理（methods，watch，computed，props）
init provide
-----created----
等待挂载
3. 总结：new Vue()创建了根实例并准备好数据和⽅法，未来执⾏挂载时，
此过程还会递归的应⽤于它的⼦组件上，最终形成⼀个有紧密关系的组件实例树。

computed 计算属性，是依赖其他属性的计算值，并且有缓存，只有当依赖的值变化时才会更新。

watch 是在监听的属性发⽣变化时，在回调中执⾏⼀些逻辑。

所以， computed 适合在模板渲染中，某个值是依赖了其他的响应式对象甚⾄是计算属性计算⽽来，

⽽ watch 适合监听某个值的变化去完成⼀段复杂的业务逻辑。

watch支持异步，computed不支持异步

watch 会生成一个watcher对象，在监视的属性每次变动时都会触发回调 
computed 则是生成一个惰性的watcher，只有在取值操作(getter触发)时收集依赖且计算值 当有依赖变动时仅将 dirty 置为 true，不做计算操作 当有取值操作时，根据自身标记 dirty 属性返回上一次计算结果/重新计算值

Vue.component()方法注册全局组件。

vue.use()注册插件

Vue的prototype

vue指令（v-report）

高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。
在不改变对象自身的前提下在程序运行期间动态的给对象添加一些额外的属性或行为。

特点

Runtime Only
vue-loader预编译+runtime

runtime-compiler
运行时编译

运行时构建： 不包含模板编译器（Runtime Only）
渲染过程: render -> Virtual DOM -> UI

独立构建：包含模板编译器（runtime-compiler）
渲染过程: template  -> AST(抽象语法树)  ->  render -> Virtual DOM -> UI

运行时版本（Runtime Only）和带编译（runtime-compiler）的版本主要区别在于对template的处理，使用带编译功能的vue版本，能支持template属性。

一句话来讲就是：如果有render函数就可以使用运行时版本的vuejs，否则必须使用Runtime + Compiler版本的vuejs。

template逻辑

vue-loader预编译+runtime ："开发时预编译，上线使用运行时”的方式既满足了开发需要又减少了线上文件的大小。

自定义指令生命周期

指令工作原理

执行过程

computed里面控制缓存最重要的一点就是脏数据标记为dirty, dirty是watcher的一个属性。

当dirty为true时，读取computed会重新计算
当dirty为false时，读取computed会使用缓存

computed

1、首先是使用范围：
1）v-bind适用于所有元素，且主要是绑定元素的attributions（包括class、name、src、value、id、style等）；
2）v-model只能用于表单元素，表单之外的元素使用了无意义，且只能绑定元素的值，其他属性还是需要使用v-bind；

2、使用模式：
1）v-model是MVVM模式（双向），即可以通过改变Model（即data数据）来改变View；也可以通过改变View来改变Model；
2）v-bind是MV模式（单向），即通过控制Model来改变View;

v-model是value+input的语法糖，是v-bind和v-on的简洁写法。v-model就实现了双向数据绑定

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

setState()是异步更新数据的

父组件引起子组件更新，纯组件利用shouldComponentUpdate提升性能

虚拟Dom和diff结合保证更新效率

虚拟Dom是state+JSX 结合生成

虚拟Dom真正的价值不只是性能，而是跨平台。虚拟dom摆脱浏览器限制，只要在可以运行js的环境下都可以使用

1、点击Link组件（a标签），修改了浏览器地址栏的url

2、React路由监听到地址栏url的变化

3、React路由内部遍历所有Router组件，使用路由规则（path）与pathNmae进行匹配

4、当路由规则（path）能够匹配搭配地址栏中的path时，展示Route组件内容

Router组件包裹整个应用，只需要使用一次

Link组件是入口，Route是组件出口

通过props.history实现编程式导航

默认模糊匹配，添加exect变精确匹配

React路由一切都是组件，可以像思考组件一样思考路由

相同点

不同点

props

消息订阅-发布

集中式管理

Context｜Provider｜Consumer

React 中 setState 什么时候是同步的，什么时候是 异步的

webpack基础配置

webpack 编译过程
是一个串行的过程

webpack的compiler和compilation

webpack高级配置

loader

plugins

谈谈webpack的理解：
1、 作用：
        前端项目构建工具，
         可以将各种资源打包成一个bundle，包括css，html，图片资源，.vue文件等。
2、 webpack编译过程
3、webpack两大核心：loader和plugins 
     （1）常用loader 常用plugins
     （2）loader原理
     （3）plugins 原理
4、webpack优化：3种代码抽离+noparse+extranal+IgnorePlugin
5、webapck本身自带优化：production模式下的tree-shaking+scope hoisting
6、开发环境配置：source-map+dev-server根据开发环境或者是生产环境进行的不同配置优化

babel

webpack性能优化

如何使用webpack对项目对优化

webpack和gulp、grunt区别

webpack-dev-server原理

热更新服务原理

对 tree-shaking 的了解

tree shaking原理

webpack4升级webpack5

to v4 from v3

webpack5

__webpack_require__做了什么

Chunk VS Module

为什么在webpack中可以书写import ES6模块，也支持require CommonJS模块？

webpack如何异步加载模块原理

原理：
基于浏览器对es模块的支持，启动一个koa服务器拦截浏览器的请求。
请求模块时按需动态编译显示（根据请求路径后缀读取依赖文件，按需以ES模块格式返回给客户端）
因为跳过了模块分析和打包过程，做到项目项目极速启动，模块热更新，按需编译的功能
（由于 Vite 在启动的时候不需要打包，也就意味着不需要分析模块的依赖、
不需要编译。因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。）

vite&webpack区别

TS有什么优势

interface 和 type的区别

idkey+img src

FP（首次绘制）

FCP（首次内容绘制 First contentful paint）

LCP（最大内容绘制时间 Largest contentful paint）

FPS（每秒传输帧数）

TTI（页面可交互时间 Time to Interactive）

HTTP 请求响应时间

DNS 解析时间

TCP 连接时间

sentry

Vue.config.errorHandler,（Vue提供只能捕获其页面生命周期内的函数，比如created,mounted）

window.onerror()当有js运行时错误触发时,onerror可以接受多个参数(message, source, lineno, colno, error)。

window.addEventListener('error'), function(e) {}, true 会比window.onerror先触发,不能阻止默认事件处理函数的执行，但可以全局捕获资源加载异常的错误

网页崩溃

懒加载

cdn

js性能优化

网站查看性能优化

实际使用过程的前端性能优化

1) 缓存，主要有 cdn、浏览器缓存、本地缓存以及应用离线包
 （详细资料：解析Web缓存及其最佳实践）

2) 图⽚优化

3) 静态⽂件优化

4) 浏览器优化

5) ⽂件合并压缩（js、css压缩，tree-shaking等）

预加载/按需加载/异步加载

1）节流防抖

2）按需执⾏

3）回流重绘

4）框架优化
（⽐如vue3的静态标记和diff优化，webpack5 tree-shaking）

1、前端性能指标分析

2、关键性能指标统计

3、性能分析工具

1、Vue性能优化

2、SEO优化

3、用户体验优化

4、长列表优化

5、打包优化

单元测试

集成测试

端到端测试E2E

测试框架：mocha、jasmine、jest、Karma、Nightmare

提供ui界面或者CLI工具：Karma、jasmine、jest、testCafe、Cypress

断言库：用于判断结果是否符合预期
should.js、chai、expect
断言库提供很多语义化方法来对值做判断
（例如mocha+chai结合）

是一个测试运行环境，高效、可扩展、运行在真实设备、无缝使用流程，

优点：是能通过插件的方式继承大部分主流的测试框架和前端库，方便一次在多浏览器环境执行测试用例，并生成测试覆盖率报告
缺点：对测试页面环境的搭建和资源文件的加载不常见，配置不直观

带有断言库和环境模拟和mocks，配置较简单

提供开发者的一个基础测试结构，不包含mock、断言、环境模拟

异步特性和并发运行测试

BDD：更偏向于系统功能和业务逻辑的自动化测试

TDD：快速开发并测试功能模块的过程中更加高效，达到快速完成开发目的

轻量级web服务器

设计思想是事件驱动的异步非阻塞

占用内存少，启动快，并发强

C语言开发

扩展性好，第三方插件多

/usr/local/etc/nginx/nginx.conf （nginx配置文件路径）

/usr/local/var/www （nginx服务器默认的根目录）

/usr/local/Cellar/nginx/1.17.9 （nginx的安装路径）

/usr/local/var/log/nginx/error.log (nginx默认的日志路径)

动静分离

反向代理
(负载均衡、跨域、安全)

负载均衡

正向代理
（VPN、webpack-dev-server.proxy）

yeoman：老牌的项目脚手架工具
hygen：快速且可扩展的代码生成器
commander：Nodejs处理控制台命令
co：异步控制,同步的逻辑来表达异步的流程
co-prompt：分步接收用户输入
chalk：控制台彩色字体
ora：控制台loading，
exec ：require('child_process').exec，执行命令

思路

lerna+yarn workspace

保证一个类仅有一个实例，并提供一个访问它都全局访问切点（window）、Vuex.stroe全局只有一个实例

工厂模式主要是为创建对象提供了接口

定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

为一个对象提供一个代用品或占位符，以便控制对它的访问

提供一种方法顺序访问一个聚合对象中的各个元素 1、generator 天生为迭代器的 API 2、（jq中的迭代器$.each(function(i,j){....i...j})） 3、Map 迭代器 4、 KOA 由插件调用 next() 控制迭代

观察者模式

发布订阅模式

区别

和策略模式很相似，命令模式是含有不同的命令（含有接收者的请求）：做不同的事情；隐藏接收者执行细节。常见菜单事件，

使用树形方式创建对象的结构，把相同的操作应用在对象和单个对象

是一种典型的通过封装变化提高系统扩展性的设计模式，将相同逻辑抽象都父类模版中，子类具体自定义（高阶函数更好）

镜像

容器

镜像仓库

dockerfile

dockerCompose

一切从dockerfile开始。dockerfile是镜像的源代码

创建dockerfile后，可以创建容器的镜像。镜像只是“源代码”的“编译版本”

获得容器镜像后，应使用注册表重新分发容器。注册表就像一个git存储库-可以推送和拉取镜像

接下来，可以使用该镜像来运行容器，在许多方面，正在运行的容器与虚拟机（但没有管理程序）非常相似

1.启动docker服务 sudo service docker start
2.停止docker服务  sudo service docker stop
3.检查docker 守护进程是否在运行 sudo docker stats
4.查看docker相关信息 sudo docker info
5.列出所有容器 sudo docker ps -a
6.最后一次运行的容器 sudo docker ps -l
7.重新启动已停止的容器 sudo docker start 容器名(也可以使用容器ID)
8.获取容器的日志 sudo docker logs 容器名
获取最后几条日志 sudo docker -f 容器名
9.列出镜像 sudo docker images
10.拉取镜像 sudo docker pull 镜像名
11.删除所有容器 sudo  docker rm $(docker ps -a -q)
12.删除单个容器 sudo docker rm 容器名

13.删除所有镜像
sudo docker rmi $(docker images | grep none | awk '{print $3}' | sort -r)
14.保存镜像
sudo docker save 镜像名 > /home/新镜像名.tar

14.加载自定义镜像
sudo docker load < /home/自定义镜像15.获取容器更多信息
sudo docker inspect 容器名

16.删除为none的镜像
docker images --no-trunc| grep none | awk '{print $3}' | xargs -r docker rmi
常用参数：
-i：以交互模式运行容器，通常与 -t 同时使用
-t：为容器重新分配一个伪输入终端，通常与 -i 同时使用
-p : 端口映射 格式为[主机端口：容器端口]
-d : 后台模式运行
-name : 给容器一个新的名称
-v：挂载主机的目录
-e： username="ritchie": 设置环境变量
-m：设置容器使用内存最大值
--env-file=[]：从指定文件读入环境变量

rebase把当前的commit放到公共分支的最后面，所以叫变基，就好像从公共分支又重新拉出来这个分支一样
merge把当前的commit和公共分支合并在一起

用merge命令解决完冲突后产生一个commit，而用rebase命令解决完冲突后不会产生额外的commit

git pull做了两个操作分别是‘获取’和合并，所以加了rebase就是以rebase的方式进行合并分支，默认为merge。

反爬虫（判断真人访问）

反反爬虫（模拟真人访问）

1、FONT-FACE拼凑式，不是真正的数字，使用font-face定义字符集并通过unicode去映射展示，图像识别还需要爬取字符集

BACKGROUND拼凑式（与font的策略类似，美团里用到的是background拼凑。数字其实是图片，根据不同的background偏移，显示出不同的字符。）

4、伪元素隐藏式：爬取网页，必须得解析css，需要拿到伪元素的content

元素定位覆盖式（利用css，爬到数据和展示数九以一样）

IFRAME异步加载式（html源码里几乎只有一个iframe，并且它的src是空白的：about:blank。接着js开始运行，把整个页面的框架异步塞到了iframe里面）

字符集替换式，html里明明写的3211，视觉上展示的却是1231

🔥内置支持热Mocker文件替换。

🚀通过JSON快速轻松地配置API。

🌱模拟API代理变得简单。

💥可以独立使用，无需依赖webpack和webpack-dev-server。

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连接中进行传输

若在 HTTP/1.1 时代，那个时候没有多路传输，当浏览器拿到一个有几十张图片的网页，肯定不能只开一个 TCP 连接顺序下载，那样用户肯定等的很难受，但是如果每个图片都开一个 TCP 连接发 HTTP 请求，那电脑或者服务器都可能受不了，要是有 1000 张图片的话总不能开 1000个TCP 连接吧。
页面资源请求时，浏览器会同时和服务器建立多个TCP连接，在同一个TCP连接上顺序处理多个HTTP请求。
所以浏览器的并发性就体现在可以建立多个TCP连接，来支持多个http同时请求。

Chrome浏览器最多允许对同一个域名Host建立6个TCP连接，不同的浏览器有所区别。
如果图片都是 HTTPS 连接并且在同一个域名下，那么浏览器在 SSL 握手之后会和服务器商量能不能用HTTP2，如果能的话就使用多路复用。不过也未必会所有挂在这个域名的资源都会使用一个 TCP 连接去获取。如果发现用不了 HTTP2 呢？或者用不了 HTTPS（现实中的 HTTP2 都是在 HTTPS 上实现的，所以也就是只能使用 HTTP/1.1）。

浏览器就会在一个 HOST 上建立多个 TCP 连接，连接数量的最大限制取决于浏览器设置，这些连接会在空闲的时候被浏览器用来发送新的请求， 如果所有的连接都正在发送请求的话，那其他的请求就只能等等了。

vue-lazyload

对比相邻分的两个，比较大的右移，做两个嵌套循环，每一次循环将最大数移到最右边

优化版

将一个记录插入到已经排好序的有序表中，从而一个新的、记录数增1的有序表。在其实现过程使用双层循环，外层循环对除了第一个元素之外的所有元素，内层循环对当前元素前面有序表进行待插入位置查找，并进行移动

将数组均分两份，直到分到最小单位，排序，最后合并俩个有序数组

以左边第一位作为标记，分别将小于标记安置在左侧，大于标记的安置在右侧，递归两边

cache-contorl（max-age相对时间）

expires

Etag/if-none-Match

last-modify（响应头）/if-modify-since（请求头）

webStorage

Cookie

websql

indexDB

应用缓存，Application Cache

PWA（渐进式页面应用）

script、img、link（href）、iframe

attribute是HTML标签属性，值只能是字符串

property是DOM对象的属性，是js对象

title是鼠标移动到图片上的展示，alt是图片加载不出来时显示

用正确的标签做正确的事

例如header，nav，footer，article

作用：让人和机器更易读懂，也有利于搜索引擎

语义标签 比如 article、footer、header、nav、section

增强型表单 calendar[ˈkælɪndə]、date、time、email、url、search

视频和音频

canvas

svg

地理位置

拖放api

web worker

web Storage

webSocket

1、阻塞onload事件

iframe和主页面共享连接池，影响页面并行加载

2、不利于seo

3、增加服务器http请求

4、无法兼容移动设备

xml可扩展标记语言

html超文本标记语言

xml写法严谨，要求闭合/对大小写敏感、正确嵌套，html没这么严格要求，

HTML是静态的，用于显示数据。 XML是动态的，用于传输数据

svg

canvas

echarts

dragstart

darg

dragenter

dragover

dragleave

drop

gragend

基础语法

es6+

规范

动画

通讯

内存与事件

js高级

border

content

padding

margin

什么是BFC

形成BFC的条件
触发BFC布局：浮动、定位、display=table.. 、overflow、html

BFC 一般用来解决以下几个问题

渲染规则

IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)I

作用

display值为flex或者inline-flex

添加新的元素 、应用 clear：both；

BFC：父级div定义 overflow: hidden/auto/scroll

使用伪元素来清除浮动(:after,注意：作用于浮动元素的父亲）

使用双伪元素清除浮动

容器上的属性

单个item属性

水平居中
text-align：center
absolute+margin-left、transform
flex+justify:center

垂直居中
1、line-height
2、table-cell+vertical-align:middle
3、父grid+子margin：auto
4、absoliute+transform、margin-top
5、flex+align-item：center

float布局：左边左浮动，右边右浮动，中间margin：0 100px;

Position布局: 左边left：0; 右边right：0; 中间left: 100px; right: 100px;

table布局: 父元素 display: table; 左右 width: 100px; 三个元素display: table-cell;

弹性(flex)布局:父元素 display: flex; 左右 width: 100px;

网格（gird）布局：

scoped 属性

css in js

CSS Modules

使用less，尽量少使用全局对选择器

跨域

websocket

web worker

如何实现会话跟踪

状态码

cookies/sessionStorage/localStorage

缓存

常用的请求头部（部分）：

常用的响应头部（部分）：

举个栗子

一般来说，请求头部和响应头部是匹配分析的。
譬如，请求头部的Accept要和响应头部的Content-Type匹配，否则会报错
譬如，跨域请求时，请求头部的Origin要匹配响应头部的Access-Control-Allow-Origin，否则会报跨域错误
譬如，在使用缓存时，请求头部的If-Modified-Since、If-None-Match分别和响应头部的Last-Modified、ETag对应

浏览器从url到输入到显示页面

css\js\dom之间加载关系

1、IE浏览器内核：Trident内核，也被称为IE内核；

2、Chrome浏览器内核：
Chromium内核 → Webkit内核 → Blink内核；

4、Safari浏览器内核：Webkit内核；

3、Firefox浏览器内核：Gecko内核，也被称Firefox内核；

5、Opera浏览器内核：最初是自主研发的Presto内核，后跟随谷歌，从Webkit到Blink内核；

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；

7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）；

8、百度浏览器、世界之窗内核：IE内核；

浏览器的进程

开启一个页面至少有多少个进程

进程和线程的关系

渲染进程中的线程
每一个tab页面就是一个浏览器内核进程(渲染进程)

各线程之间的关系

事件循环机制

JS的解释阶段

navigator.appName：浏览器名称；

navigator.appVersion：浏览器版本；

navigator.language：浏览器设置的语言；

navigator.platform：操作系统类型；

navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

screen.width：屏幕宽度，以像素为单位；

screen.height：屏幕高度，以像素为单位；

screen.colorDepth：返回颜色位数，如8、16、24

location.protocol; //http

location.host; // www.example.com

location.port; // 8080

location.pathname; // /path/index.html

location.search; // ?a=1&b=2

location.hash; // TOP

添加/删除节点

查找 HTML 元素

改变 HTML 元素

添加事件处理程序

history.go() -- 前进或后退指定的页面数 history.go(num);

history.back() -- 后退一页

history.forward() -- 前进一页

replaceState会替换当前的history中的记录，并且不刷新浏览器
history.replaceState({}, "title", "/test.html")

pushState只会在当前history中添加一条记录，并不会刷新浏览器
history.pushState({}, "title", "/test.html")

手写promise

Promise().then().then....catch() 多任务串行执行.

Promise.all([p1,p2,...]) 多任务并行执行

Promise.race([p1,p2,...]) 多任务赛跑.

在浏览器或者nodejs环境中，运行时对js脚本的调度方式就叫做事件循环

6个阶段

阶段执行规则

poll轮询阶段

setImmediate() 与 setTimeout()执行顺序

微任务优先级：porcess.nextTick() > Promise.then()

Node.js 在主线程里维护了一个事件队列，当接到请求后，就将该请求作为一个事件放入这个队列中，然后继续接收其他请求。当主线程空闲时(没有请求接入时)，就开始循环事件队列，检查队列中是否有要处理的事件，这时要分两种情况：如果是非 I/O 任务，就亲自处理，并通过回调函数返回到上层调用；如果是 I/O 任务，就从 线程池 中拿出一个线程来处理这个事件，并指定回调函数，然后继续循环队列中的其他事件。

当线程中的 I/O 任务完成以后，就执行指定的回调函数，并把这个完成的事件放到事件队列的尾部，等待事件循环，当主线程再次循环到该事件时，就直接处理并返回给上层调用。 这个过程就叫 事件循环 (Event Loop)，其运行原理如下图所示

应用层：   即 JavaScript 交互层，常见的就是 Node.js 的模块，比如 http，fs

V8引擎层：  即利用 V8 引擎来解析JavaScript 语法，进而和下层 API 交互

NodeAPI层：  为上层模块提供系统调用，一般是由 C 语言来实现，和操作系统进行交互 。

LIBUV层： 是跨平台的底层封装，实现了 事件循环、文件操作等，是 Node.js 实现异步的核心

为什么在模块中有全局的require、module.exports、exports、__dirname、__filename等关键字,它们是从哪来的？

为什么一定要使用module.exports或者exports导出模块信息？

module.exports和exports的区别，它们之间的关系是什么？

加载模块，是通过沙箱方式，把字符串拼接成闭包函数的形式，把实例module、exports、require、__filename、__dirname以参数的方式注入到环境变量中。

导出模块的内容必须是module.exports的内容，exports是module.exports简写，指向相同块内存。

Exports = module.exports，但是exports被覆盖时，exports被分配的是一个新开辟的内存，不再指向module.exports。所以官网建议不要在模块内部直接覆盖exports，即代码不要写exports = ...。

可以使用nodejs vm模块，将拼接字符串代码转执行代码，解决一些非常规需求，如用户自定义执行函数、自定义Mock函数、自定义模块加载器等

nodejs单线程，在处理http请求的时候一个错误都会导致整个进程的退出，这是灾难级的。

总结： 线程快而进程可靠性高
**1）需要频繁创建销毁的优先用线程**
这种原则最常见的应用就是Web服务器了，来一个连接建立一个线程，断了就销毁线程，要是用进程，创建和销毁的代价是很难承受的
**2）需要进行大量计算的优先使用线程**
所谓大量计算，当然就是要耗费很多CPU，切换频繁了，这种情况下线程是最合适的。
这种原则最常见的是图像处理、算法处理。
**3）强相关的处理用线程，弱相关的处理用进程**
什么叫强相关、弱相关？理论上很难定义，给个简单的例子就明白了。
一般的Server需要完成如下任务：消息收发、消息处理。“消息收发”和“消息处理”就是弱相关的任务，而“消息处理”里面可能又分为“消息解码”、“业务处理”，这两个任务相对来说相关性就要强多了。因此“消息收发”和“消息处理”可以分进程设计，“消息解码”、“业务处理”可以分线程设计。
**4）可能要扩展到多机分布的用进程，多核分布的用线程**
**5）都满足需求的情况下，用你最熟悉、最拿手的方式

Process 进程 

child_process 子进程

Clusternode进行多进程的模块

1. 高并发

2. 聊天

3. 实时消息推送

优点：Nodejs 是单线程，⾮阻塞 I/O，事件驱动，它的特点决定了它适合做⼀些⼤量 I/O 的东⻄，⽐
如，聊天室，表单提交等不需要⼤量计算的功能。做⼀些微信后端开发，或者做消息系统等。可以整个
项⽬⽤， 也可以根据它的特点在某个模块使⽤，⽐如 socketio，打造⼀个消息系统等。

Buffer：为数据缓冲对象，是⼀个类似数组结构的对象，可以通过指定开始写⼊的位置及写⼊的
数据⻓度，往其中写⼊⼆进制数据。

Stream：是对 buffer 对象的⾼级封装，其操作的底层还是 buffer
对象， stream 可以设置为可读、可写，或者即可读也可写，在 nodejs 中继承了 EventEmitter 接⼝，
可以监听读⼊、写⼊的过程。具体实现有⽂件流，httpresponse 等。

npx原理

npx和npm区别

npm link

express[ik'spres]

koa

egg

关系：
1.express和koa都是基于nodejs的web开发框架，都可以作为HTTP Server或者TCP Server使
⽤，
2.并且koa是express原版⼈⻢打造。
3.Koa 是一个非常优秀的框架，然而对于企业级应用来说，它还比较基础
4.Egg 选择了 Koa 作为其基础框架，在它的模型基础上，进一步对它进行了一些增强。
约定优于配置，高度可扩展，是一个企业级框架。

特点

<meta name="viewport" content="width=750,initial-scale=0.5">

header {   font-size: calc(28vw * var(--width)) }