[JavaScript知识库]值得收藏--2021企业高薪常问的面试题

高薪常问:

一、css3 , HTML5

1.BFC是什么?

定义 BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域， 只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区 域外部毫不相干

布局规则

1、内部的 Box 会在垂直方向，一个接一个地放置

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

3、每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往 右的格式化，否则相反)。即使存在浮动也是如此

4、BFC 的区域不会与 float box 重叠

5、BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。 反 之也如此

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

哪些元素会生成 BFC：

1、根元素

2、float 属性不为 none

3、position 为 absolute 或 fixed

4、display 为 inline-block， table-cell， table-caption， flex， inline-flex

5、overflow 不为 visible

二、WebAPI

1.dom 树和 render 树之间的关系？

1、dom 树，css 树合并成成渲染树（render 树）

2、DOM 树与 HTML 标签一一对应，包括 head 和隐藏元素

3、渲染树不包括 head 和隐藏元素，大段文本的每一个行都是独立节点，每一个节点都有对应 的 css 属性

2.获取到页面中所有的 CheckBox 怎么做（不适用第三方 框架）？

var domList = document.getElementsByTagName(‘input’);
var checkBoxList = [];
var len = domList.length;//缓存到局部变量
while (len--) {//使用 while 的效率会比 for 循环更高
if (domList[len].type == ‘checkbox’) {
 checkBoxList.push(domList[len]);
}
}

3.简单说一下页面重绘和回流？

1、什么是回流

回流：当 render tree 的一部分或全部的元素因改变了自身的宽高，布局，显示或 隐藏，或者元素内部的文字结构发生变化 导致需要重新构建页面的时候，回流就产生了

2、什么是重绘

重绘：当一个元素自身的宽高，布局，及显示或隐藏没有改变，而只是改变了元素 的外观风格的时候，就会产生重绘。例如你改变了元素的 background-color… 因此得出了一个结论：回流必定触发重绘，而重绘不一定触发回流

4.如何最小化重绘(repaint)和回流(reflow)

需要要对元素进行复杂的操作时，可以先隐藏(display:“none”)，操作完成后再显示 需要创建多个 DOM 节点时，使用 DocumentFragment 创建完后一次性的加入 document

缓存 Layout 属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次 回流

尽量避免用 table 布局（table 元素一旦触发回流就会导致 table 里所有的其它元素回 流）

避免使用 css 表达式(expression)，因为每次调用都会重新计算值（包括加载页面） 尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, bordercolor

批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

三、JQuery

1. jQuery 的属性拷贝(extend)的实现原理是什么，如何实 现深浅拷贝？

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

语法：

$.extend( target [, object1 ] [, objectN ] )

指示是否深度合并;

$.extend( [deep ], target, object1 [, objectN ] )

注意:不支持第一个参数传递 false 。

深拷贝，深拷贝代码把 extend 函数的第一个参数设置为 true： （对原始对象属性所引用的对象进行递归拷贝）

var newObject = $.extend(true, {},oldObject);

浅拷贝，浅拷贝代码 extend 函数里不传入第一个参数，默认为 false（只复制一份原始对 象的引用）

var newObject = $.extend({}, oldObject);

2. jQuery 的实现原理？

1、为了防止全局变量污染，把 jQuery 的代码写在一个自调函数中

2、咱们平常使用的$实际上 jQuery 对外暴漏的一个工厂函数

3、而构造函数在 jQuery 的内部叫 init，并且这个构造函数还被添加到了 jQuery 的原型 中。当我们调用工厂函数的时候 返回的其实是一个构造函数的实例

4、jQuery 为了让第三方能够对其功能进行扩展，所以把工厂函数的原型与构造函数的原 型保持了一致。这样子对外暴漏工厂函数，即可对原型进行扩展

3. jQuery 是如何处理缓存的？

要处理缓存就是禁用缓存

1、通过$.post()方法来获取数据，那么默认就是禁用缓存的

2、通过$.get()方法来获取数据，可以通过设置时间戳来避免缓存。可以在URL后面加上+(+newDate)例$.get(‘ajax.xml?’+(+newDate),function(){//内容});

3、通过$.ajax 方法来获取数据，只要设置 cache:false 即可

4. jQuery 的 slideUp 动画，当鼠标快速连续触发动画会滞 后反复执行，该如何处理呢?

在触发元素上的事件设置为延迟处理：使用 JS 原生 setTimeout()方法 在触发元素的事件时预先停止所有的动画，再执行相应的动画事件：

$('.tab').stop().slideUp();

四、ES6

1. ES6 和 node 的 commonjs 模块化规范的区别

ES6 是 js 的增强版，是 js 的语法规范，commonjs 都只是为了解决 js 文件之间的依赖和引 用 问题，所以是一种 js 的包管理规范，其中的代表是 node 遵循 commonjs 规范

2. Promise 中 reject 和 catch 处理上有什么区别

reject 是用来抛出异常，catch 是用来处理异常

reject 是 Promise 的方法，而 catch 是 Promise 实例的方法

reject 后的东西，一定会进入 then 中的第二个回调，如果 then 中没有写第二个回调，则 进入catch

网络异常（比如断网），会直接进入 catch 而不会进入 then 的第二个回调

3. 手写一个 Promise

var Promise = new Promise((resolve, reject) => {
 if (操作成功) {
 resolve(value)
 } else {
 reject(error)
 }
})
Promise.then(function (value) {
 // success
}, function (value) {
 // failure
})

4. 下面的输出结果是多少

const Promise = new Promise((resolve, reject) => {
 console.log(2);
 resolve();
 console.log(333);
})
Promise.then(() => {
 console.log(666);
})
console.log(888);

解析：Promise 新建后立即执行，所以会先输出 2，333，而 Promise.then()内部的代码在 当 次 事件循环的 结尾 立刻执行 ，所以会继续输出 888，最后输出 666

5. 以下代码依次输出的内容是

setTimeout(function () {
 console.log(1)
}, 0);new Promise(function executor(resolve) {
 console.log(2);
 for (var i = 0; i < 10000; i++) {
 i == 9999 && resolve();
 }
 console.log(3);
}).then(function () {
 console.log(4);
});
console.log(5)

解析：首先先碰到一个 setTimeout，于是会先设置一个定时，在定时结束后将传递这个函 数 放到任务队列里面，因此开始肯定不会输出 1 。 然后是一个 Promise，里面的函数是直接执行的，因此应该直接输出 2 3 。 然后，Promise 的 then 应当会放到当前 tick 的最后，但是还是在当前 tick 中。 因此，应当先输出 5，然后再输出 4 ， 最后在到下一个 tick，就是 1 。

6. 分析下列程序代码，得出运行结果，解释其原因

const Promise = new Promise((resolve, reject) => {
 console.log(1)
 resolve()
 console.log(2)
})
Promise.then(() => {
 console.log(3)
})
console.log(4)
运行结果：1 2 4 3

解析：Promise 构造函数是同步执行的，Promise.then 中的函数是异步执行的。

7. 分析下列程序代码，得出运行结果，解释其原因

const Promise = new Promise((resolve, reject) => {
 resolve('success1')
 reject('error')
 resolve('success2')
})
Promise
 .then((res) => {
 console.log('then: ', res)
 })
 .catch((err) => {
 console.log('catch: ', err)
 })
运行结果：then: success1

解析：构造函数中的 resolve 或 reject 只有第一次执行有效，多次调用没有任何作用，呼 应代码二结论：Promise 状态一旦改变则不能再变。

8. 使用结构赋值，实现两个变量的值的交换

let a = 1;let b = 2;
[a,b] = [b,a];

9. 设计一个对象，键名的类型至少包含一个 symbol 类 型，并且实现遍历所有 key

let name = Symbol('name');
let product = {
 [name] : "平衡车", 
 "price" : 1999
};
Reflect.ownKeys(product);

10. 下面 Set 结构，打印出的 size 值是多少

let s = newSet();
s.add([1]);s.add([1]);
console.log(s.size);
2

解析：两个数组[1]并不是同一个值，它们分别定义的数组，在内存中分别对应着不同的存 储地址，因此并不是相同的值 都能存储到 Set 结构中，所以 size 为 2

11. 使用 class 手写一个 Promise

//创建一个 Promise 的类
 class Promise{
 constructor(executer){//构造函数 constructor 里面是个执行器
 this.status = 'pending';//默认的状态 pending
 this.value = undefined//成功的值默认 undefined
 this.reason = undefined//失败的值默认 undefined
 //状态只有在 pending 时候才能改变
 let resolveFn = value =>{
 //判断只有等待时才能 resolve 成功
 if(this.status == pending){
 this.status = 'resolve';
 this.value = value;
   }
 }
 //判断只有等待时才能 reject 失败
 let rejectFn = reason =>{
 if(this.status == pending){
 this.status = 'reject';
 this.reason = reason;
   }
 } 
 try{
 //把 resolve 和 reject 两个函数传给执行器 executer
 executer(resolve,reject);
 }catch(e){
 reject(e);//失败的话进 catch
   }
 }
  then(onFufilled,onReject){
 //如果状态成功调用 onFufilled
 if(this.status = 'resolve'){
 onFufilled(this.value);
 }
 //如果状态失败调用 onReject
 if(this.status = 'reject'){
 onReject(this.reason);
    }
   }
 }

12. 说一下 ES6 的导入导出模块

导入模块

通过 import 关键字

// 只导入一个

import {sum} from "./example.js"

// 导入多个

import {sum,multiply,time} from "./exportExample.js"

// 导入一整个模块

import * as example from "./exportExample.js"

导出模块

导出通过 export 关键字

//可以将 export 放在任何变量,函数或类声明的前面

export var firstName = 'Chen';
export var lastName = 'Sunny';
export var year = 1998;

//也可以使用大括号指定所要输出的一组变量

var firstName = 'Chen';
var lastName = 'Sunny';
var year = 1998;
export {firstName, lastName, year};

//使用 export default 时，对应的 import 语句不需要使用大括号

let bosh = function crs(){}
export default bosh;
import crc from 'crc';

//不使用 export default 时，对应的 import 语句需要使用大括号

let bosh = function crs(){}
export bosh;
import {crc} from 'crc';

五、Ajax/计算机网络相关

1. 一个页面从输入 URL 到页面加载显示完成，这个过程 中都发生了什么

1、浏览器查找域名对应的 IP 地址(DNS 查询：浏览器缓存->系统缓存->路由器缓存->ISP DNS 缓存->根域名服务器)

2、浏览器向 Web 服务器发送一个 HTTP 请求（TCP 三次握手）

3、服务器 301 重定向（从 HTTP://example.com 重定向到 HTTP://www.example.com）

4、浏览器跟踪重定向地址，请求另一个带 www 的网址

5、服务器处理请求（通过路由读取资源）

6、服务器返回一个 HTTP 响应（报头中把 Content-type 设置为 ‘text/html’）

7、浏览器进 DOM 树构建

8、浏览器发送请求获取嵌在 HTML 中的资源（如图片、音频、视频、CSS、JS 等）

9、浏览器显示完成页面

10、浏览器发送异步请求

2. 你知道的 HTTP 请求方式有几种

HTTPRequestMethod 共计 17 种

1、GET 请求指定的页面信息，并返回实体主体。

2、HEAD 类似于 get 请求，只不过返回的响应中没有具体的内容，用于获取报头

3、POST 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被 包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。

4、PUT 从客户端向服务器传送的数据取代指定的文档的内容。

5、DELETE 请求服务器删除指定的页面。

6、CONNECT HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。

7、OPTIONS 允许客户端查看服务器的性能。

8、TRACE 回显服务器收到的请求，主要用于测试或诊断。

9、PATCH 实体中包含一个表，表中说明与该 URI 所表示的原内容的区别。

10、MOVE 请求服务器将指定的页面移至另一个网络地址。

11、COPY 请求服务器将指定的页面拷贝至另一个网络地址。

12、LINK 请求服务器建立链接关系。

13、UNLINK 断开链接关系。

14、WRAPPED 允许客户端发送经过封装的请求。

15、LOCK 允许用户锁定资源，比如可以再编辑某个资源时将其锁定，以防别人同时 对 其进行编辑。

16、MKCOL 允许用户创建资源

17、Extension-mothed 在不改动协议的前提下，可增加另外的方法。

3. 描述一下 HTTP 的请求过程与原理

HTTP 请求的过程 :

域名解析 --> 发起 TCP 的 3 次握手 --> 建立 TCP 连接后发起 HTTP 请求 -->服务器响 应 HTTP 请求，浏览器得到 html 代码 -->浏览器解析 html 代码，并请求 html 代码中的资 源（如 js、css、图片等） --> 浏览器对页面进行渲染呈现给用户

请求原理 :

HTTP 协议是应用层的一种协议，是一种 C/S 架构服务，基于 TCP/IP 协议来通信，监听在 TCP 的 80 端口上，HTTP 协议实现的是客户端可以向服务端获得 web 资源

4. HTTPS 有几次握手和挥手？HTTPS 的原理什么是

HTTPS 是 3 次握手和 4 次挥手，和 HTTP 是一样的。

HTTPS 的原理

HTTPS 在传输数据前需要客户端(浏览器)与服务器(网站)之间进行一次握手,在握手过程中 将确立双方加密传输数据的密码信息.TLS/SSL 协议是一套加密传输协议,使用了非对称加 密,对称加密,以及 HASH 算法，

HTTPS 为什么安全

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如 果使用 HTTPS，密钥在你和终点站才有。HTTPS 之所以比 HTTP 安全，是因为他利用 ssl/tls 协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer 传递等。保障了传输过程的安全性

5. 什么是 TCP 连接的三次握手

TCP 是因特网中的传输层协议，使用三次握手协议建立连接，完成三次握手，客户端与 服 务器开始传送数据。

第一次握手：建立连接时，客户端发送 syn 包（syn=j）到服务器，并进入 SYN_SENT 状 态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。

第二次握手：服务器收到 syn 包，必须确认客户的 SYN（ack=j+1），同时自己也发送一 个 SYN 包（syn=k），即 SYN+ACK 包，此时服务器进入 SYN_RECV 状态；

第三次握手：客户端收到服务器的 SYN+ACK 包，向服务器发送确认包 ACK(ack=k+1）， 此 包发送完毕，客户端和服务器进入 ESTABLISHED（TCP 连接成功）状态，完成三次握手。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6jeg9c1m-1627386899709)(C:\Users\MrLI\AppData\Local\Temp\WeChat Files\f90a4c93ee9d26b9c2dcb7cebd2bf2b.png)]

TCP 协议优点

TCP 发送的包有序号，对方收到包后要给一个反馈，如果超过一定时间还没收到反馈 就 自动执行超时重发，因此 TCP 最大的优点是可靠。

TCP 协议缺点

很简单，就是麻烦，如果数据量比较小的话建立连接的过程反而占了大头，不断地重 发 也会造成网络延迟，因此比如视频聊天通常就使用 UDP，因为丢失一些包也没关系， 速 度流畅才是重要的。

6. 为什么 TCP 连接需要三次握手四次挥手

为什么是三次握手

为了防止已失效的连接请求报文段突然有送到了服务器，因而产生错误,假设两次握手时， 客户发出的第一个请求连接报文段在某一网络节点长时间滞留，以致延误到连接释放后才 到达服务器。服务器收到失效的连接请求报文段后，认为是客户又发出一次新的连接请 求。于是向客户发送确认报文段，同意建立连接，此时在假定两次握手的前提下，连接建立成 功。这样会导致服务器的资源白白浪费

为什么是四次挥手

TCP 协议是全双工通信，这意味着客户端和服务器端都可以向彼此发送数据，所以关闭连 接 是双方都需要确认的共同行为，假设是三次挥手时，首先释放了客户到服务器方向的连 接，此时 TCP 连接处于半关闭状态，这时客户不能向服务器发送数据，而服务器还是可以向客 户发送数据。如果此时客户收到了服务器的确认报文段后，就立即发送一个确认报文段， 这会导致服务器向客户还在发送数据时连接就被关闭。这样会导致客户没有完整收到服务 器所发的报文段

7. TCP 与 UDP 的区别有哪些

什么是 TCP

TCP（Transmission Control Protocol 传输控制协议）是一种面向连接的、可靠的、基于字 节 流的传输层通信协议

什么是 UDP

UDP(User Datagram Protocol 用户数据报协议）是 OSI（Open System Interconnection，开 放式系统互联） 参考模型中一种无连接的传输层协议，提供面向事务的简单不可靠信息传送 服 务

区别

TCP 是面向连接的传输控制协议，而 UDP 提供了无链接的数据报服务//类似电话与短信

TCP 面向连接，提供可靠的数据服务

TCP 首部开销 20 字节,UDP 首部开销 8 字节

TCP 逻辑通信信道是全双工的可靠信道，UDP 则是不可靠信道

UDP 没有拥塞机制，因此网络出现拥堵不会使源主机的发送效率降低（有利于实时会议视 频 等）

TCP 的连接只能是点到点的,UDP 支持一对一，多对一，多对多的交互通信

8. HTTP2 / HTTP1 之间的区别是什么

区别

1、HTTP2 采用二进制格式而非文本格式，比起文本格式，二进制格式解析起来更加高 效，并且错误少

2、HTTP2 是完全的多路复用，非有序并阻塞的----只需要一个连接即可实现并行，多路 复用的意思是它能同时处理多个消息的请求和响应，HTTP1 是一个连接一次只能提交一个 请 求的效率比较高，多了就会变慢

3、使用报头压缩，HTTP2 降低了开销，HTTP1 的消息头很大冗余,HTTP2 是将消息头中的 不 同的部分分别用不用的索引进行表示，且会用哈夫曼编码压缩字符串，最后封装成 frame

4、HTTP2 让服务器可以将响应主动”推送”到客户端缓存中，HTTP2 中服务器会主动将 资源推 送给客户端，例如把 js 和 css 文件主动推送给客户端而不用客户端解析 HTML 后请求 再响应

9. 介绍一下 websocket

什么是 websocket websocket

是一种网络通信协议，是 HTML5 开始提供的一种在单个 TCP 连接上进行全双 工通信的协议，这个对比着 HTTP 协议来说，HTTP 协议是一种无状态的、无连接的、单向的应 用层协议，通信请求只能由客户端发起，服务端对请求做出应答处理。HTTP 协议无法实 现 服务器主动向客户端发起消息，websocket 连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。websocket 只需要建立一次连 接，就可以一直保持连接状态

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8JbyEJMq-1627386899713)(C:\Users\MrLI\AppData\Local\Temp\WeChat Files\d22f6646ece528c9cc46d2869ebd223.png)]

10. websocket 如何兼容低浏览器

Adobe Flash Socket 、

ActiveX HTMLFile (IE) 、

基于 multipart 编码发送 XHR 、

基于长轮询的 XHR

11. 浏览器如何加载页面的，script 脚本阻塞有什么解决办 法，defer 和 async 的区别是什么

从浏览器地址栏的请求链接开始，浏览器通过 DNS 解析查到域名映射的 IP 地址，成功 之后浏览器端向此 IP 地址取得连接，成功连接之后，浏览器端将请求信息通过 HTTP 协议向此 IP 地址所在服务器发起请求，服务器接收到请求之后等待处理，最后向浏览 器端发回响应，此时在 HTTP 协议下，浏览器从服务器接收到 text/html 类型的代码， 浏览器开始显示此 html，并获取其中内嵌资源地址，然后浏览器再发起请求来获取这 些资源，并在浏览器的 html 中显示

1 、 推迟加载（延迟加载）

如果页面初始的渲染并不依赖于 js 或者 CSS 可以用推迟加载，就是最后在加载 js 和 css，把引用外部文件的代码写在最后

2、 defer 延迟加载

在文档解析完成开始执行，并且在 DOMContentLoaded 事件之前执行完成，会按照他们在文档出现的顺序去下载解析。效果和把 script 放在文 档最后之前是一样的。

注：defer 最好用在引用外部文件中使用，用了 defer 不要使用 document.write()方法;使用 defer 时最好不要请求样式信息，因为样式表可能尚未加 载，浏览器会禁止该脚本等待样式表加载完成，相当于样式表阻塞脚本执行

3 、 异步加载

async 异步加载：就是告诉浏览器不必等到加载完外部文件，可以边渲染边下载，什么 时候下载完成什么时候执行。 defer 和 async 的区别：有了 async 属性，表 示后续文档的加载和渲染与 js 脚本的加载和执行是并行进行的，即异步执行； 有了 defer 属性，加载后续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行 的(异步)，js 脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded 事 件触发执行之前

12. 拆解一下 URL 的各个部分，分别是什么意思

例如：scheme://host:port/path?query#fragment

1、 .scheme:通信协议，常用的 HTTP,ftp,maito 等

2、 .host:主机，服务器(计算机)域名系统 (DNS) 主机名或 IP 地址

3、 .port:端口号，整数，可选，省略时使用方案的默认端口，如 HTTP 的默认端口 为 80

4、 .path:路径，由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录 或文件地址

5、 .query:查询，可选，用于给动态网页传递参数，可有多个参数，用"&“符号隔 开，每个参数的名和值用”="符号隔开

6、 .fragment:信息片断，字符串，用于指定网络资源中的片断。例如一个网页中有 多个名词解释，可使用 fragment 直接定位到某一名词解释。(也称为锚点)

13. Ajax 解决浏览器缓存问题？

1、在 Ajax 发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,“0”)。

2、在 Ajax 发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,“no-cache”)。

3、在 URL 后面加上一个随机数： “fresh=” + Math.random();。

4、在 URL 后面加上时间戳：“nowtime=” + new Date().getTime();。

5、如果是使用 jQuery，直接这样就可以 $.AjaxSetup({cache:false})。这样页面的所有 Ajax 都会执行这条语句就是不需要保存缓存记录

14. 为什么要使用模板引擎

什么是模版引擎

模板引擎（这里特指用于 Web 开发的模板引擎）是为了使用户界面与业务数据（内容） 分 离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的 HTML 文档

为什么要使用模版引擎

在一些示例中 javascript 有大量的 html 字符串，html 中有一些像 onclick 样的 javascript，这 样 javascript 中有 html，html 中有 javascript，代码的偶合度很高，不便于修改与维护，使用 模板引擎可以解决问题。

15.目前 JS 对于异步的解决方案有哪些？

deferred （jQuery 或者 zepto 中）—— 注意，这块很多同学不知道，可以多去查查相 关资料，因为 jQuery 和 zepto 目前还有很多、很多、很多项目在用！！！

Promise（ES6 或者第三方库，如 q.js bluebird.js），不仅要知道怎么用，还要熟悉 Promise 的标准

Generator（从 koa 升级 2.x 之后已经不再常用）

async/await （ES7 ）

六、git

1. 如何把本地仓库的内容推向一个空的远程仓库

首先确保本地仓库与远程之间是连同的。如果提交失败，则需要进行下面的命令进行连 通：

git remote add origin XXXX

注意：XXXX 是你的远程仓库地址。

如果是第一次推送，则进行下面命令：

git push -u origin master

注意：-u 是指定 origin 为默认主分支

之后的提交，只需要下面的命令：

git push origin master

七、node.js

1. express 和 koa 有什么关系，有什么区别

koa 是由 express 原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的 Web 框 架

使用 koa 编写 web 应用，通过组合不同的 generator，可以免除重复繁琐的回调函数嵌 套，并极大地提升错误处理的效率

koa 不在内核方法中绑定任何中间件，它仅仅提供了一个轻量优雅的函数库，使得编写 Web 应用变得得心应手

koa 是一个比 express 更精简，使用 node 新特性的中间件框架，相比之前 express 就是一 个庞大的框架如果你喜欢 DIY 很潮，可以考虑 koa，他有足够的的扩展和中间，而且自己写 很 简单

如果你想简单点，找一个框架啥都有，那么先 express

2. 什么是前后端分离的项目?什么是 JS 渲染的项目，前端 渲染和后端渲染的区别

前后端分离的项目

前端 HTML 页面通过 Ajax 调用后端的 RESTFUL API 接口并使用 JSON 数据进行交互

JS 渲染的项目

通过 Ajax 请求数据以后, 通过 JS 代码动态创建 html 的标签和数据等(一般右键查看网页源 代码 是看不到渲染后的 HTML 标签的)

前端渲染

指的是后端返回 JSON 数据，前端利用预先写的 html 模板，循环读取 JSON 数据，拼接字 符 串（ES6 的模板字符串特性大大减少了拼接字符串的的成本），并插入页面。

好处：网络传输数据量小。不占用服务端运算资源（解析模板），模板在前端（很有可能 仅部分在前端），改结构变交互都前端自己来了，改完自己调就行。

坏处：前端耗时较多，对前端工作人员水平要求相对较高。前端代码较多，因为部分以前 在后台处理的交互逻辑交给了前端处理。占用少部分客户端运算资源用于解析模板。

后端渲染： 前端请求，后端用后台模板引擎直接生成 html，前端接收到数据之后，直接插入页面。

好处：前端耗时少，即减少了首屏时间，模板统一在后端。前端（相对）省事，不占用客 户端运算资源（解析模板）

坏处：占用服务器资源。

前端渲染与后端渲染对比

1、后端渲染

页面呈现速度：快，受限于用户的带宽

流量消耗：少一点点（可以省去前端框架部分的代码）

可维护性：差（前后端东西放一起，掐架多年，早就在闹分手啦）

seo 友好度：好

编码效率：低（这个跟不同的团队不同，可能不对）

2、前端渲染

页面呈现速度：主要受限于带宽和客户端机器的好坏，优化的好，可以逐步动态展开内 容，感觉上会更快一点

流量消耗：多一点点（一个前端框架大概 50KB）当然，有的用后端渲染的项目前端部分也 有在用框架

可维护性：好，前后端分离，各施其职，代码一目明了

SEO 友好度：差，大量使用 Ajax，多数浏览器不能抓取 Ajax 数据

编码效率：高，前后端各自只做自己擅长的东西，后端最后只输出接口，不用管页面呈 现，只要前后端人员能力不错，效率不会低

3. mysql 和 mongoDB 有什么区别

MySQL

1、关系型数据库

2、在不同的引擎上有不同 的存储方式

3、查询语句是使用传统的 sql 语句，拥有较为成熟的体系，成熟度很高

4、开源数据库的份额在不断增加，mysql 的份额页在持续增长

5、缺点就是在海量数据处理的时候效率会显著变慢

MongoDB

非关系型数据库（Nosql）,属于文档型数据库。先解释一下文档的数据库，即可以存放 xml、 json、bson（即 Binary-JSON）类型系那个的数据。这些数据具备自述性（selfdescribing），呈现分层的树状数据结构。数据结构由键值(key=>value)对组成 MongoDB 是由 C++语言编写的，主要是在为 WEB 应用提供可扩展的高性能数据存储解 决方案

存储方式：虚拟内存+持久化

查询语句：是独特的 Mongodb 的查询方式

适合场景：事件的记录，内容管理或者博客平台等等

架构特点：可以通过副本集，以及分片来实现高可用

数据处理：数据是存储在硬盘上的，只不过需要经常读取的数据会被加载到内存中，将数 据存储在物理内存中，从而达到高速读写

成熟度与广泛度：新兴数据库，成熟度较低，Nosql 数据库中最为接近关系型数据库，比 较 完善的 DB 之一，适用人群不断在增长

MongoDB 的优势

1、快速！在适量级的内存的 Mongodb 的性能是非常迅速的，它将热数据存储在物理内存 中，使得热数据的读写变得十分快

2、高扩展。

3、自身的 Failover 机制。

4、json 的存储格式。

5、内置 GridFS，支持大容量的存储。

6、内置 Sharding，分片简单。

7、海量数据下，性能优越。

8、支持自动故障恢复（复制集）。

MongoDB 的缺陷

1、 不支持事务操作

2、占用空间过大。

3、 MongoDB 没有如 MySQL 那样成熟的维护工具。

4、无法进行关联表查询，不适用于关系多的数据。

5、复杂聚合操作通过 mapreduce 创建，速度慢

6、 模式自由，自由灵活的文件存储格式带来的数据错误

7、MongoDB 没有如 MySQL 那样成熟的维护工具，这对于开发和 IT 运营都是个值得注意 的 地方

4. 事件的订阅和发布的设计模式是什么

5. 其实就是收集事件名, 对应的方法体, 当触发对应事件名时, 把事 件名对应的所有方法体 调用执行一遍

express 中 Router 的作用

可以认为是一个微型的只用来处理中间件与控制器的 app，它拥有和 app 类 似的方 法，例 如 get、post、all、use 等等

router 它解决了直接把 app 暴露给其它模块使得 app 有被滥用的风险, 优化路由管理

6. npm 自定义命令在哪里配置

在运行命令时, 所在目录下的 package.json 中的 scripts 字段对应的位置进行配置 key 是 npm run 要执行的自定义命令的名字

value 是 执行自定义命令时, 真正对应的 cmd 命令

7. express 优点、缺点

express 的优点

线性逻辑：路由和中间件完美融合，通过中间件形式把业务逻辑细分，简化，一个请求进 来经过一系列中间件 处理后再响应给用户，再复杂的业务也是线性了，清晰明了

express 缺点

express 是基于 callback 来组合业务逻辑。Callback 有两大硬伤，一是不可组合，二是异 常 不可捕获

8. 什么是中间件

中间件是什么 :

其实就是一个个的函数, 当调用 next 时, 才会执行下一个中间件函数 express 是一个自 身 功能极简，完全是路由和中间件

构成一个 web 开发框架：从本质上来说，一个 express 应用就是在调用各种中间件函数。 封 装了一些或许复杂但肯定是通用的功能

非内置的中间件需要通过安装后，require 到文件就可以运行

9. 为什么要进行模块化

目前前端的开发形势就是模块化和组件化；从软件工程学分析来说就是有了更好的可维护 性、可复用性等好处；但是前端的主要语言 js 在 ES6

之前却没有模块化功能，之前有使用 require.js 和 sea.js 但是推出 ES6 的模块化之后，ES6 的模块化使用形式基本统一

10.谈谈你对 AMD 和 CMD 的理解

AMD

AMD 推崇依赖前置，在定义模块的时候就要声明其依赖的模块 同样都是异步加载模块，AMD 在加载模块完成后就会执行该模块，所有模块都加载执行 完 后会进入 require 的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写 顺 序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖 加载完成后才执行

CMD

CMD 推崇就近依赖，只有在用到某个模块的时候再去 require

CMD 加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主 逻辑，遇到 require 语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完 全 一致的。

特点对比

AMD 用户体验好，因为没有延迟，依赖模块提前执行了；CMD 性能好，因为只有用 户 需要的时候才执行。

11、node 怎么跟 MongoDB 建立连接

1、引入 mongoose

2、使用 mongoose.connect()方法连接到 MongoDB 数据库 3、监听连接是否成功

3、然后通过 node，书写接口，对数据库进行增删改查

12、请介绍一下 require 的模块加载机制

这道题基本上就可以了解到面试者对 node 模块机制的了解程度

1、先计算模块路径

2、如果模块在缓存里面，取出缓存

3、加载模块

4、输出模块的 exports 属性即可

13、内置的 fs 模块架构是什么样子的

fs 模块主要由下面几部分组成

1、POSIX 文件 Wrapper,对应于操作系统的原生文件操作

2、文件流 fs.createReadStream 和 fs.createWriteStream

3、同步文件读写,fs.readFileSync 和 fs.writeFileSync

4、异步文件读写, fs.readFile 和 fs.writeFile

14、express 中如何获取路由的参数

/users/:name 使用 req.params.name 来获取;

req.body.username 则是获得表单传入参数 username

express 路由支持常用通配符 ?, +, *, and ()

15、express response 有哪些常用方法

res.download() 弹出文件下载

res.end() 结束 response

res.json() 返回 json 在这里插入代码片

res.jsonp() 返回 jsonp

res.redirect() 重定向请求

res.render() 渲染模板

res.send() 返回多种形式数据

res.sendFile 返回文件

res.sendStatus() 返回状态

16、实现一个简单的 HTTP 服务器

思路是加载 HTTP 模块，创建服务器，监听端口 代码演示：

var HTTP = require('HTTP'); // 加载 HTTP 模块
HTTP.createServer(function(req, res) {
 res.writeHead(200, {'Content-Type': 'text/html'}); // 200 代表状态成功, 文档类型是给浏
览器识别用的
res.write('<meta charset="UTF-8"><h1>我是标题啊！</h1><font color="red">原生初
级的服务器!</font>'); // 返回给客户端的 html 数据
 res.end(); // 结束输出流
}).listen(3000); // 绑定 3000, 查看效果请访问 HTTP://localhost:3000

八、Vue

1.VNone 是什么？什么是虚拟 DOM？

1、Vnode 是什么

Vnode 是 JavaScript 对象，Vnode 表示 Virtual DOM，用 JavaScript 对象来描述真实的 DOM 把 DOM 标签，属性，内容都变成对象的属性。就像使用 JavaScript 对象对一种动物进行 说明一样{name: ‘Hello Kitty’, age: 1, children: null}。

1）Vnode 的作用

通过 render 将 template 模版描述成 Vnode，然后进行一系列操作之后形成真实 的 DOM 进行挂载。

2 Vnode 的优点

2-1) 兼容性强，不受执行环境的影响。Vnode 因为是 JS 对象，不管 node 还是 浏览器，都可以统一操作，从而获得了服务端渲染、原生渲染、手写渲染函数等能力。

2-2) 减少操作 DOM，任何页面的变化，都只使用 Vnode 进行操作对比，只需要 在最后一步挂载更新 DOM，不需要频繁操作 DOM，从而提高页面性能。

3、 什么是虚拟 DOM?

1、文档对象模型或 DOM 定义了一个接口，该接口允许 JavaScript 之类的语言访问和操 作 HTML 文档。元素由树中的节点表示，并且接口允许我们操纵它们。但是此接口需要付出 代价，大量非常频繁的 DOM 操作会使页面速度变的非常缓慢

2、Vue 通过在内存中实现文档结构的虚拟表示来解决此问题，其中虚拟节点（Vnode） 表示 DOM 树中的节点。当需要操纵时，可以在虚拟 DOM 的 内存中执行计算和操作，而不 是在真实 DOM 上进行操纵。这自然会更快，并且允许虚拟 DOM 算法计算出最优化的方式 来更新实际 DOM 结构,一旦计算出，就将其应用于实际的 DOM 树，这就提高了性能，这就 是为什么基于虚拟 DOM 的框架（例如 Vue 和 react）如此突出的原因。

2、Vue 中如何实现一个虚拟 DOM？说说你的思路

首先要构建一个 Vnode 的类，DOM 元素上的所有属性在 Vnode 类实例化出来的对象上都 存在对应的属性。例如 tag 表示一个元素节点的名称，text 表示一个文本节点的文本，chlidren 表示子节点等。将 Vnode 类实例化出来的对象进行分类，例如注释节点、文本节点、元素节 点、组件节点、函数式节点、克隆节点。

然后通过编译将模板转成渲染函数 render，执行渲染函数 render，在其中创建不同类型的 Vnode 类，最后整合就可以得到一个虚拟 DOM（vnode），最后通过 patch 将 vnode 和 oldVnode 进行比较后，生成真实 DOM

3、Vue 中操作 data 中数组的方法中哪些可以触发视图更 新，哪些不可以，不可以的话有什么解决办法？

1、可以被改变的

push()、pop()、shift()、unshift()、splice()、sort()、reverse()这些方法会改变被操作的数 组；

2、不可以改变的

filter()、concat()、 slice()这些方法不会改变被操作的数组，并且返回一个新的数组，以上 方法都可以触发视图更新

3、解决方案

1、利用索引直接设置一个数组项，例：this.array[index] = newValue，直接修改数组 的长度，例：this.array.length = newLength

2、以上两种方法不可以触发视图更新

1）可以使用 this.$set(this.array,index,newValue)，this.array.splice(index,1,newValue)

2）可以使用 this.array.splice(newLength)

4、Vue 中如何重置 data?

要初始化 data 中的数据，可以使用 Object.assign()方法，实现重置 data 中的数据，以下就 是对该方法的详细介绍，以及如何使用该方法，重置 data 中的数据

1、Object.assign()方法基本定义

1，1）Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目 标对象。它将返回目标对象。

1，2）用法： Object.assign(target, …sources)，第一个参数是目标对象，第二个参数 是源对象，就是将源对象属性复制到目标对象，返回目标对象

2、具体使用方式

使用 Object.assign()，vm.$data可以获取当前状态下的data，vm.$options.data(this) 可以获取到组件初始化状态下的 data，复制 Object.assign(this.$data,this.$options.data(this)) // 注意加 this，不然取不到 data() { a: this.methodA } 中的 this.methodA

5、如何对 Vue 首屏加载实现优化?

1、把不常改变的库放到 index.html 中，通过 cdn 引入

2、vue 路由的懒加载

3、不生成 map 文件

4、vue 组件尽量不要全局引入

5、使用更轻量级的工具库

6、开启 gzip 压缩

7、首页单独做服务端渲染

6、Vue 的 nextTick 的原理是什么?

1、为什么需要 nextTick

Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须 对数据更改–刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了

2、理解原理前的准备

首先需要知道事件循环中宏任务和微任务这两个概念

2,1）常见的宏任务有：script, setTimeout, setInterval, setImmediate, I/O, UI rendering

2,2）常见的微任务有：process.nextTick(nodejs),Promise.then(), MutationObserver

3、理解 nextTick 的原理

正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果 大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性 优雅降级的问题

7、在 Vue 实例中编写生命周期 hook 或其他 option/propertie 时，为什么不使用箭头函数？

箭头函数自己没有定义 this 上下文，而是绑定到其父函数的上下文中，当你在 Vue 程序 中使用箭头函数（=>）时，this 关键字病不会绑定到 Vue 实例，因此会引发错误，所以强烈 建议改用标准函数声明

8、is 这个特性你有用过吗？主要用在哪些方面？

1、动态组件

， componentName 可以是在本页面 已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。 当控制 componentName 改变时就可以动态切换选择组件

2、is 的用法

有些 HTML 元素，诸如

• 、
  1. 、 和 , 对于哪些元素可以出现在其内 部是有严格限制的

而有些 HTML 元素，诸如

• 和 、只能出现在其它某些特定的元素内 部

• <ul> <card-list></card-list></ul>
  

  所以上面会被作为无效的内容提升到外部，并导致最终渲染结果出 错。应该这么写：

  <ul> <li is="cardList"></li></ul>
  

  9、scss 是什么？在 Vue-cli 中的安装使用步骤是？有哪几 大特性？

  1、基本定义

  SCSS 即是 SASS 的新语法，是 Sassy CSS 的简写，是 CSS3 语法的超集，也就是说 所有有效的 CSS3 样式也同样适合于 SASS，SASS 是 CSS3 的一个扩展，增加了规则嵌套、 变量、混合、选择器继承等等，通过使用命令行的工具或 WEB 框架插件把它转换成标准 的、格式良好的 CSS 代码

  2、使用步骤：

  1,1）先装 css-loader、node-loader、sass-loader 等加载器模块

  1,2）在 build 目录找到 webpack.base.config.js，在那个 extends 属性中加一个拓 展.scss

  1,3）在同一个文件，配置一个 module 属性

  1,4）然后在组件的 style 标签加上 lang 属性 ，例如：lang=”scss”

  3、特性:

  3,1）可以用变量，例如（$变量名称=值）

  3,2）可以用混合器，例如（）

  3,3）可以嵌套

  九、webpack

  1、如何利用 webpack 来优化前端性能

  1、压缩代码。uglifyJsPlugin 压缩 js 代码， mini-css-extract-plugin 压缩 css 代码

  2、利用 CDN 加速，将引用的静态资源修改为 CDN 上对应的路径，可以利用 webpack 对 于 output 参数和 loader 的 publicpath 参数来修改资源路径

  3、删除死代码（tree shaking），css 需要使用 Purify-CSS

  4、提取公共代码。webpack4 移除了 CommonsChunkPlugin (提取公共代码)，用 optimization.splitChunks 和 optimization.runtimeChunk 来代替

  2、是否写过 Loader 和 Plugin？描述一下编写 loader 或 plugin 的思路？

  1、基本定义

  Loader 像一个"翻译官"把读到的源文件内容转义成新的文件内容，并且每个 Loader 通过链式操作，将源文件一步步翻译成想要的样子。

  2、 编写思路

  2.1）编写 Loader 时要遵循单一原则，每个 Loader 只做一种"转义"工作， 每个 Loader 的拿到的是源文件内容（source），可以通过返回值的方式将处理后的内容输出，也可 以调用 this.callback()方法，将内容返回给 webpack，还可以通过 this.async()生成一个 callback函数，再用这个 callback 将处理后的内容输出出去，此外 webpack 还为开发者准备了开发 loader 的工具函数集——loader-utils

  2.2）相对于 Loader 而言，Plugin 的编写就灵活了许多， webpack 在运行的生命周期 中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 webpack 提供的 API 改 变输出结果

  3、 编写注意事项

  3.1）Loader 支持链式调用，所以开发上需要严格遵循“单一职责”，每个 Loader 只负责自己需要负责的事情

  3.2）Loader 运行在 node.js 中，我们可以调用任意 node.js 自带的 API 或者安装 第三方模块进行调用

  3.3）webpack 传给 Loader 的原内容都是 UTF-8 格式编码的字符串，当某些场景下 Loader 处理二进制文件时，需要通过 exports.raw = true 告诉 webpack 该 Loader 是否需要 二进制数据

  3.4）尽可能的异步化 Loader，如果计算量很小，同步也可以

  3.5）Loader 是无状态的，我们不应该在 Loader 中保留状态

  3.6）使用 loader-utils 和 schema-utils 为我们提供的实用工具

  3.7）加载本地 Loader 方法

  3、使用 webpack 开发时，你用过哪些可以提高效率的插 件？

  1、webpack-dashboard：可以更友好的展示相关打包信息。

  2、webpack-merge：提取公共配置，减少重复配置代码

  3、speed-measure-webpack-plugin：简称 SMP，分析出 webpack 打包过程中 Loader 和 Plugin 的耗时，有助于找到构建过程中的性能瓶颈

  4、size-plugin：监控资源体积变化，尽早发现问题

  5、HotModuleReplacementPlugin：模块热替换

  4、source map 是什么？生产环境怎么用？

  1、基本定义

  source map 是将编译、打包、压缩后的代码映射回源代码的过程。打包压缩后的代码 不具备良好的可读性，想要调试源码就需要 soucre map

  ２、具体使用

  map 文件只要不打开开发者工具，浏览器是不会加载的，线上环境一般有三种处理方 案

  2．1）hidden-source-map：借助第三方错误监控平台 Sentry 使用

  2．2）nosources-source-map：只会显示具体行数以及查看源代码的错误栈，安全性 比 sourcemap 要高一些

  2．3）sourcemap：通过 nginx 设置将 .map 文件只对白名单开放(公司内网)

  注意：避免在生产中使用 inline- 和 eval-，因为它们会增加 bundle 体积大小，并降 低整体性能

  5、请详细说明一下 Babel 编译的原理是什么？

  大多数 JavaScript Parser 遵循 estree 规范，Babel 最初基于 acorn 项目(轻量级现代 JavaScript 解析器) Babel 大概分为三大部分：

  1、解析：将代码转换成 AST

  2、词法分析：将代码(字符串)分割为 token 流，即语法单元成的数组

  3、语法分析：分析 token 流(上面生成的数组)并生成 AST，转换：访问 AST 的节点进行 变换操作生产新的 AST，taro 就是利用 babel 完成的小程序语法转换,生成：以新的 AST 为基 础生成代码

  6、在生产环境下如何提升 webpack 优化构建速度

  1、优化 babel-loader（加缓存，加 hash）

  2、noParse（不去解析属性值代表的库的依赖）

  3、IgnorePlugin（忽略本地化内容，如引入了一个插件，只用到了中文语言包，打包的时 候把非中文语言包排除掉）

  4、happyPack（多进程进行打包）

  5、parallelUglifyPlugin（多进程打包 js，压缩，优化 js）

  7、什么是长缓存？在 webpack 中如何做到长缓存优化？

  1、什么是长缓存

  浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存 储，但是每一次代码升级或者更新，都需要浏览器去下载新的代码，最方便和最简单的更新方 式就是引入新的文件名称

  2、具体实现

  在 webpack 中，可以在 output 给出输出的文件制定 chunkhash，并且分离经常更新 的代码和框架代码，通过 NameModulesPlugin 或者 HashedModulesPlugin 使再次打包文件名 不变

  8、如何提高 webpack 的构建速度？

  在多入口情况下，使用 CommonsChunkPlugin 来提取公共代码

  1、通过 externals 配置来提取常用库

  2、利用 DllPlugin 和 DllReferencePlugin 预编译资源模块 通过 DllPlugin 来对那些我们引用 但是绝对不会修改的 npm 包来进行预编译，再通过 DllReferencePlugin 将预编译的模块加载进 来。

  3、使用 Happypack 实现多线程加速编译

  4、使用 webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpackuglify-parallel 采用了多核并行压缩来提升压缩速度

  5、使用 Tree-shaking 和 Scope Hoisting 来剔除多余代码

  9、webpack 的占位符[hash],[chunkhash],[contenthash] 有 什么区别和联系

  1、[hash]：是整个项目的 hash 值，其根据每次编译内容计算得到，每次编译之后都会生 成新的 hash，即修改任何文件都会导致所有文件的 hash 发生改变；在一个项目中虽然入口不 同，但是 hash 是相同的，hash 无法实现前端静态资源在浏览器上长缓存，这时候应该使用 chunkhash

  2、[chunkhash]：根据不同的入口文件（entry）进行依赖文件解析，构建对应的 chunk， 生成相应的 hash，只要组成 entry 的模块文件没有变化，则对应 hash 也是不变的，所以一般项 目优化时，会将公共代码库拆分到一起，因为公共代码库代码变动较少的，使用 chunkhash 可 以发挥最长缓存的作用

  3、[contenthash]：使用 chunkhash 存在一个问题，当在一个 js 文件引入 css 文件，编译后 他们的 hash 是相同的，而且，只要 js 文件内容发生改变，与其关联的 css 文件 hash 也会改 变，针对这种情况，可以把 css 从 js 中抽离出来并使用 contenthash

  10、怎么实现 webpack 的按需加载？什么是神奇注释?

  1、按需加载

  在 webpack 中，import 不仅仅是 ES6 module 的模块导入方式，还是一个类似 require 的函数，我们可以通过 import(‘module’)的方式引入一个模块，import()返回的是一个 Promise 对象；使用 import（）方式就可以实现 webpack 的按需加载

  2、神奇注释

  在 import（）里可以添加一些注释，如定义该 chunk 的名称，要过滤的文件，指定引 入的文件等等，这类带有特殊功能的注释被称为神器注释

  十、小程序

  1、如何封装微信小程序的数据请求(http-promise)？

  1、将所有的接口放在统一的 js 文件中并导出

  2、在 app、js 中创建封装请求数据的方法

  3、在子页面中调用封装的方法请求数据

  2、小程序关联微信公众号如何确定用户的唯一性？

  使用 wx.getUserInfo 方法 withCredentials 为 true 时可获取 encryptedData，里面有 UnionID。后端需要进行对称解密

  十一、react.js

  1、react-router 的原理

  BrowserRouter 或 hashRouter 用来渲染 Router 所代表的组件

  Route 用来匹配组件路径并且筛选需要渲染的组件

  Switch 用来筛选需要渲染的唯一组件

  Link 直接渲染某个页面组件

  Redirect 类似于 Link，在没有 Route 匹配成功时触发

  2、为什么 react Router v4 中使用 switch 关键字 ？

  虽然

  ** 用于封装 Router 中的多个路由,当你想要仅显示要在多个定义的路线中呈 现的单个路线时，可以使用 “switch” 关键字，使用时， ** 标记会按顺序将已定义 的 URL 与已定义的路由进行匹配。找到第一个匹配项后，它将渲染指定的路径。从而绕过其它 路线

  3、react 的 diff 原理

  diff（翻译差异）：计算一棵树形结构转换成另一棵树形结构的最少操作

  1、把树形结构按照层级分解，只比较同级元素

  2、给列表结构的每个单元添加唯一的 key 属性，方便比较

  3、react 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字）

  4、合并操作，调用 component 的 setState 方法的时候, react 将其标记为 dirty.到每一个事 件循环结束, react 检查所有标记 dirty 的 component 重新绘制

  5、选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能

  4、为什么建议传递给 setState 的参数是一个 callback 而不 是一个对象

  因为 this.props 和 this.state 的更新可能是异步的，不能依赖它们的值去计算下一个 state

  5、redux 中间件原理

  ? redux 的中间件就是对 store 的 dispatch 做了个升级，升级之后 dispatch 就可以对象和函 数都可以接收，这个时候当调用 dispatch 方法给 dispatch 方法传递的参数是一个对象的话，那 么 dispatch 就会把这个对象直接传递给 store，跟之前我们写 dispatch 传递给它一个对象没什 么区别，但是如果传递给 dispatch 方法是一个函数的话，这个时候 dispatch 已经升级了，它就 不会把这个函数直接传递给 store，它会先让这个函数执行，执行完了之后需要调用 store 的时 候再去调用 store。所以 dispatch 在这里会根据参数的不同执行不同的事情

  6、react 性能优化的方案

  ? 减少 render 方法的调用; 避免使用状态提升来共享 state,此时应该使用 redux 解决方案; 保 持稳定的 dom 结构，尽量避免 dom 节点跨层级移动操作; 使用 css 来隐藏节点，而不是真的 移除或添加 DOM 节点等

  7、为什么我们需要使用 react 提供的 ChildrenAPI 而不是 JavaScript 的 map？

  props.children 是对象（object）而不是数组（array），如果我们使用 props.children.map 函数来遍历时会受到异常提示

  8、为什么虚拟 DOM 会提高性能?说下他的原理

  虚拟 dom 相当于在 js 和真实 dom 中间加了一个缓存，利用 dom 的 diff 算法避免了没有 必要的 dom 操作，从而提高性能

  VirtualDOM 工作过程有三个简单的步骤

  1、每当底层数据发生改变时，整个 UI 都将在 VirtualDOM 描述中重新渲染

  2、然后计算之前 DOM 表示与新表示的之间的差异

  3、完成计算后，将只用实际更改的内容更新 realDOM

  9、setState 何时同步何时异步？

  1、setState 只在合成事件（react 为了解决跨平台，兼容性问题，自己封装了一套事件机 制，代理了原生的事件，像在 jsx 中常见的 onClick、onChange 这些都是合成事件）和钩子函 数（生命周期）中是“异步”的，在原生事件和 setTimeout 中都是同步的

  2、setState 的“异步”并不是说内部由异步代码实现，其实本身执行的过程和代码都是同 步的，只是合成事件和钩子函数的调用顺序在更新之前，导致在合成事件和钩子函数中没法立 马拿到更新后的值，形式了所谓的“异步”，当然可以通过第二个参数 setState(partialState,callback)中的 callback 拿到更新后的结果

  3、setState 的批量更新优化也是建立在“异步”（合成事件、钩子函数）之上的，在原生 事件和 setTimeout 中不会批量更新，在“异步”中如果对同一个值进行多次 setState，setState 的批量更新策略会对其进行覆盖，取最后一次的执行，如果是同时 setState 多个不同的值，在 更新时会对其进行合并批量更新

  10、react 渲染机制

  1、当页面一打开，就会调用 render 构建一棵 DOM 树

  2、当数据发生变化（ state | props ）时，就会再渲染出一棵 DOM 树

  3、此时，进行 diff 运算，两棵 DOM 树进行差异化对比，找到更新的地方进行批量改动

  11、解释 react 中 render()的目的

  每个 react 组件强制要求必须有一个 render()。它返回一个 react 元素，是原生 DOM 组件 的表示,如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 、、

  等,此函数必须保持纯净，即必须每次调用时都返回相同的结果

  十二、计算机相关术语

  1、关于计算机相关术语的介绍

  了解计算机相关术语的目的：作为一个计算机相关专业的学生来说，大学开设的课程 有： 计算机基础、网页设计、计算机组成原理、数据结构、C 语言、C++、java、.net、 计算机网络、高等数学、线性代数、离散数学、概率论、操作系统、软件测试、linux、汇 编语言等。了解一定的计算机相关术语有助于更好的体现我们的专业性、技术性。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vKvPY8xd-1627386899715)(C:\Users\MrLI\AppData\Local\Temp\WeChat Files\d857dc1b3fddf07eda70f3583f11e26.png)]

  2、http 超文本传输协议

  超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一 种网络协议。所有的 WWW 文件（即超文本文件（Hypertext），是指具有超链接功能的文件，它可以将文件中已经定义好的关键字（Keyword），经过鼠标的点取（Click），便可 以得到该关键字的相关解释，这种方法使用户使用起来更感舒适。类似于早期使用的 WIN32 下的 HELP 文件。）都必须遵守这个标准。设计 HTTP 最初的目的是为了提供一种 发布和接收 HTML 页面的方法。

  工作原理：

  一次 HTTP 操作称为一个事务，其工作过程可分为四步：

  1、首先客户机与服务器需要建立连接。只要单击某个超级链接，HTTP 的工作就开始了。

  2、建立连接后，客户机发送一个请求给服务器，请求方式的格式为：统一资源标识符 （URL）、协议版本号，后边是 MIME 信息包括请求修饰符、客户机信息和可能的内容。

  3、服务器接到请求后，给予相应的响应信息，其格式为一个状态行，包括信息的协议版本 号、一个成功或错误的代码，后边是 MIME 信息包括服务器信息、实体信息和可能的内 容。

  4、客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上，然后客户机与服务 器断开连接。

  注意：如果在以上过程中的某一步出现错误，那么产生错误的信息将返回到客户端，由显 示屏输出。对于用户来说，这些过程是由 HTTP 自己完成的，用户只要用鼠标点击，等待 信息显示就可以了。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-omkgxWOz-1627386899718)(C:\Users\MrLI\AppData\Local\Temp\WeChat Files\1f7eef0299e9b5fc8cc7519d48461c8.png)]

  报文格式：

  请求报文格式如下：

  请求行 － 通用信息头 － 请求头 － 实体头 － 报文主体

  应答报文格式如下：

  状态行 － 通用信息头 － 响应头 － 实体头 － 报文主体

  协议功能：

  HTTP 协议（HyperText Transfer Protocol，超文本传输协议）是用于从 WWW 服务器 传输超文本到本地浏览器的传输协议。它可以使浏览器更加高效，使网络传输减少。它不 仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内 容首先显示(如文本先于图形)等。

  HTTP 是客户端浏览器或其他程序与 Web 服务器之间的应用层通信协议。在 Internet 上的 Web 服务器上存放的都是超文本信息，客户机需要通过 HTTP 协议传输所要访问的超 文本信息。HTTP 包含命令和传输信息，不仅可用于 Web 访问，也可以用于其他因特网/内 联网应用系统之间的通信，从而实现各类应用资源超媒体访问的集成。

  我们在浏览器的地址栏里输入的网站地址叫做 URL (Uniform Resource Locator，统一 资源定位符)。就像每家每户都有一个门牌地址一样，每个网页也都有一个 Internet 地址。 当你在 浏览器的地址框中输入一个 URL 或是单击一个超级链接时，URL 就确定了要浏览的地址。 浏览器通过超文本传输协议(HTTP)，将 Web 服务器上站点的网页代码提取出来，并翻译成 漂亮的网页。

  3、计算机网络的分层体系结构

  物理层：物理接口规范,传输比特流,网卡是工作在物理层的.

  数据链路层：成帧,保证帧的无误传输,MAC 地址,形成 EHTHERNET 帧 数据链路层在不可靠 的物理介质上提供可靠的传输。该层的作用包括：物理地址寻址、数据的成帧、流量控 制、数据的检错、重发等。

  网络层：路由选择,流量控制,IP 地址,形成 IP 包

  传输层：端口地址,如 HTTP 对应 80 端口.TCP 和 UDP 工作于该层,还有 差错校验和流量控制.

  会话层:组织两个会话进程之间的通信,并管理数据的交换使用 ETBIOS 和 WINSOCK 协议.QQ 等软件进行通讯因该是工作在会话层的

  表示层：使得不同操作系统之间通信成为可能.

  应用层：对应于各个应用软件[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xpzrGXIb-1627386899720)(C:\Users\MrLI\AppData\Local\Temp\WeChat Files\99b05ddf2b84370b6aff5baa44f5118.png)]

  4、计算机存储器相关知识

  存储器：是计算机的重要组成部分.

  它可分为：

  计算机内部的存储器（简称内存）

  计算机外部的存储器（简称外存）

  内存储器从功能上可以分为：读写存储器 RAM、只读存储器 ROM 两大类

  RAM 和 ROM 的区别：

  RAM：（Ramdom Access Memory）易挥发性随机存取存储器，高速存取，读写时间相 等，且与地址无关，如计算机内存等。RAM 表示的是读写存储器，可以与任一存储单元进 行读或写操作，计算机关闭电源后其内的信息将不在保存，再次开机需要重新装入，通常 用来存放操作系统，各种正在运行的软件、输入和输出数据、中间结果及与外存交换信息 等，我们常说的内存主要是指 RAM。

  ROM：（Read Only Memory）只读存储器。断电后信息不丢失，如计算机启动用的 BIOS芯片。存取速度很低，（较 RAM 而言）且不能改写。由于不能改写信息，不能升级，现 已很少使用。ROM 表示的是只读存储器，即：它只能读出信息，不能写入信息，计算机关 闭电源后其内的信息仍旧保存，一般用它存储固定的系统软件和字库等。

  5、浏览器

  1、浏览器相关知识介绍：

  浏览器是指可以显示网页服务器或者文件系统的 HTML 文件（标准通用标记语言的一 个应用）内容，并让用户与这些文件交互的一种软件。

  它用来显示在万维网或局域网等内的文字、图像及其他信息。这些文字或图像，可以 是连接其他网址的超链接，用户可迅速及轻易地浏览各种信息。大部分网页为 HTML 格 式。

  国内网民计算机上常见的网页浏览器有，QQ 浏览器、Internet Explorer、Firefox、 Safari，Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360 浏览器、 UC 浏览器、傲游浏览器、世界之窗浏览器等，浏览器是最经常使用到的客户端程序。

  移动端产品有（移动端的浏览器）：百度、搜狗、UC、腾讯

  内核：

  IE 内核。包括 360 安全浏览器、IE、 Greenbrowser、 Maxthon2、世界之窗、刚开始 的搜狗浏览器。

  Chrome 内核，如 Chrome 浏览器。

  双核(IE 和 chrome/webkit 内核).。双核的意思是一般网页用 chrome 内核(即 webkit 或 高速模式)打开，网银等指定的网页用 IE 内核打开。 如 360 高速浏览器,搜狗高速浏览 器，并不是 1 个网页同时用 2 个内核处理。

  Firefox。

  2、浏览器的主要构成（High Level Structure）

  浏览器的主要组件包括：

  1）用户界面 － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来 显示你所请求页面的主窗口之外的其他部分。

  2）浏览器引擎 － 用来查询及操作渲染引擎的接口。

  3）渲染引擎 － 用来显示请求的内容，例如，如果请求内容为 html，它负责解析 html 及 css，并将解析后的结果显示出来。

  4）网络 － 用来完成网络调用，例如 http 请求，它具有平台无关的接口，可以在不同平 台上工作。

  5）UI 后端 － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的 通用接口，底层使用操作系统的用户接口。

  6）JS 解释器 － 用来解释执行 JS 代码。

  7. 数据存储 － 属于持久层，浏览器需要在硬盘中保存类似 cookie 的各种数据， HTML5 定义了 web database 技术，这是一种轻量级完整的客户端存储技术[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FicFWFLW-1627386899720)(C:\Users\MrLI\AppData\Local\Temp\WeChat Files\a34865370020e027084a2c57d571aa5.png)]

  需要注意的是，不同于大部分浏览器，Chrome 为每个 Tab 分配了各自的渲染引擎实 例，每个 Tab 就是一个独立的进程。

  对于构成浏览器的这些组件，后面会逐一详细讨论。

  3、渲染引擎（The rendering engine）

  渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。

  默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也可以借助插件（一种浏 览器扩展）显示其他类型数据，例如使用 PDF 阅读器插件，可以显示 PDF 格式，将由专门 一章讲解插件及扩展，这里只讨论渲染引擎最主要的用途——显示应用了 CSS 之后的 html 及图片

  详情参照：http://blog.csdn.net/finish_dream/article/details/52304276

  6、服务器

  1、介绍

  服务器，也称伺服器，是提供计算服务的设备。由于服务器需要响应服务请求，并进 行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。

  服务器的构成包括处理器、硬盘、内存、系统总线等，和通用的计算机架构类似，但 是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、 可管理性等方面要求较高。

  在网络环境下，根据服务器提供的服务类型不同，分为文件服务器，数据库服务器， 应用程序服务器，WEB 服务器等。

  2、分类：

  按照体系架构来区分，服务器主要分为两类：非 x86 服务器和 x86 服务器

  按应用层次划分：

  1、入门级服务器

  2、工作组服务器 3、部门级服务器 4、企业级服 务器 5、典型服务器应用（办公 OA 服务器、ERP 服务器、WEB 服务器、数据库服务器、 财务服务器、打印服务器、集群服务器、视频监控服务器、游戏服务器、论坛服务器）

  3、特性：1、可扩展性 2、易使用性 3、可用性 4、易管理性

  4、外形：1、机架式 2、刀片 3、塔式 4、机柜式

  5、操作系统：服务器平台的操作系统。Unix 操作系统，由于是 Unix 的后代，大多都有较 好的作服务器平台的功能。

  7、经典编程算法

  1、快速排序算法

  2、堆排序算法

  3、归并排序

  4、二分查找算法

  5、BFPRT（线性查找算法）

  6、DFS（深度优先搜索）

  7、BFS（广度优先搜索）

  8、Floyd-Warshall all-pairs 最短路径算法

  8、经典排序算法

  1、插入排序—直接插入排序(Straight Insertion Sort)

  2、插入排序—希尔排序（Shell`s Sort）

  3、选择排序—简单选择排序（Simple Selection Sort）

  4、选择排序—堆排序（Heap Sort）

  5、交换排序—冒泡排序（Bubble Sort）

  6、快速排序（Quick Sort）

  7、归并排序（Merge Sort）

  8、桶排序/基数排序(Radix Sort)

  9、堆排序

  10、计数排序

  9、黑盒、白盒、灰盒测试

  白盒测试：

  白盒测试也称为结构测试或逻辑驱动测试，是针对被测单元内部是如何进行工作的测 试。它根据程序的控制结构设计测试用例，主要用于软件或程序验证。白盒测试法检查程 序内部逻辑结构，对所有的逻辑路径进行测试，是一种穷举路径的测试方法，但即使每条 路径都测试过了，但仍然有可能存在错误。因为：穷举路径测试无法检查出程序本身是否 违反了设计规范，即程序是否是一个错误的程序；穷举路径测试不可能检查出程序因为遗 漏路径而出错；穷举路径测试发现不了一些与数据相关的错误。

  白盒测试需要遵循的原则有： 1. 保证一个模块中的所有独立路径至少被测试一次；2. 所有逻辑值均需要测试真（true）和假（false）；两种情况；3. 检查程序的内部数据结 构，保证其结构的有效性；4. 在上下边界及可操作范围内运行所有循环。

  白盒测试方法有：

  静态测试、动态测试、单元测试、代码检查、同行评审、技术评审

  黑盒测试：

  黑盒测试又称为功能测试、数据驱动测试或基于规格说明书的测试，是一种从用户观 点出发的测试。测试人员一般把被测程序当作一个黑盒子。

  黑盒测试主要测到的错误类型有：不正确或遗漏的功能；接口、界面错误；性能错 误；数据结构或外部数据访问错误；初始化或终止条件错误等等。

  常用的黑盒测试方法有：等价类划分法；边界值分析法；因果图法；场景法；正交实 验设计法；判定表驱动分析法；错误推测法；功能图分析法。

  两者之间的区别： 黑盒测试着重测试软件功能。

  黑盒测试并不能取代白盒测试，它是与白盒测试互补的测试方法，它很可能发现白盒 测试不易发现的其他类型错误。

  灰盒测试 (Gray-Box Testing)

  灰盒测试更像是白盒测试和黑盒测试的混合测试，现阶段对灰盒测试没有更明确的定 义，但更多的时候，我们的测试做的就是灰盒测试，即既会做黑盒测试又会做白盒测试。

  10、二叉排序树

  定义：二叉排序树或者是一棵空树，或者是具有下列性质的二叉树：

  （1）若左子树不空，则左子树上所有结点的值均小于或等于它的根结点的值；

  （2）若右子树不空，则右子树上所有结点的值均大于或等于它的根结点的值；

  （3）左、右子树也分别为二叉排序树；

  详见：http://m.blog.csdn.net/yxb_yingu/article/details/51336197