# blog

**Repository Path**: Chinese01/blog

## Basic Information

- **Project Name**: blog
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-27
- **Last Updated**: 2021-09-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## HTTP、网络、浏览器 1

### 从输入 URL 到浏览器完成页面渲染发生了什么？2

-   DNS 解析:将域名解析成 IP 地址
-   TCP 连接：TCP 三次握手
-   发送 HTTP 请求
-   服务器处理请求并返回 HTTP 报文
-   浏览器解析渲染页面
-   断开连接：TCP 三次挥手

输入 url 后，首先需要找到这个 url 域名的服务器 ip,为了寻找这个 ip，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存-》系统缓存-》路由器缓存，缓存中没有则查找系统的 hosts 文件中是否有记录，如果没有则查询 DNS 服务器，

得到服务器的 ip 地址后，浏览器根据这个 ip 以及相应的端口号，构造一个 http 请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据，并将这个 http 请求封装在一个 tcp 包中，这个 tcp 包会依次经过传输层，网络层，数据链路层，物理层到达服务器，服务器解析这个请求来作出响应，返回相应的 html 给浏览器，

浏览器拿到 HTML 后，遇见 HTML 和 CSS 之后渲染引擎会立即解析，如果遇到 CSS 连接会发起请求连接并继续解析剩下代码，等下载完后，则解析下载的，等遇到 js 代码则会停下来用 JS 解析器解析 js 代码，当遇到 JS 连接则会停下来下载 JS 等下载完之后才继续解析，

因为 html 是一个树形结构，浏览器根据这个 html 来构建 DOM 树，在 dom 树的构建过程中如果遇到 JS 脚本和外部 JS 连接，则会停止构建 DOM 树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐 JS 代码应该放在 html 代码的后面，之后根据外部央视，内部央视，内联样式构建一个 CSS 对象模型树 CSSOM 树，构建完成后和 DOM 树合并为渲染树，这里主要做的是排除非视觉节点，比如 script，meta 标签和排除 display 为 none 的节点，之后进行布局，布局主要是确定各个元素的位置和尺寸，之后是渲染页面，因为 html 文件中会含有图片，视频，音频等资源，在解析 DOM 的过程中，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一般是 9-6 个，当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过 Cache-Control、Last-Modify、Expires 等首部字段控制。 Cache-Control 和 Expires 的区别在于 Cache-Control 使用相对时间，Expires 使用的是基于服务器 端的绝对时间，因为存在时差问题，一般采用 Cache-Control，在请求这些有设置了缓存的数据时，会先 查看是否过期，如果没有过期则直接使用本地缓存，过期则请求并在服务器校验文件是否修改，如果上一次 响应设置了 ETag 值会在这次请求的时候作为 If-None-Match 的值交给服务器校验，如果一致，继续校验 Last-Modified，没有设置 ETag 则直接验证 Last-Modified，再决定是否返回 304

**DNS 解析**

域名为什么要解析成 ip？因为相对于带有字母和数字的字符串，计算机更擅长处理数字，DNS 服务营运而生

**第三次握手**

第一次：发送端首先发送一个带 SYN 标志的数据包给对方。

第二次：接收端收到后，回传一个带有 SYN/ACK 标志的数据包以示传达确认信息。

第三次：发送端再回传一个带 ACK 标志的数据包，代表“握手”结束。 若在握手过程中某个阶段莫名中断，TCP 协议会再次以相同的顺序发送相同的数据包。

**发送 HTTP 请求**

响应行 响应主体

### 对称加密与非对称加密

对称加密：通信双方使用的是同一套算法，比如对一个文件进行用这个算法进行加密，则用这个算法的逆过程就能解密，这样带来的开销比较小，缺点是算法可以被攻破的，一旦算法被攻克密码也就知道了

非对称加密：分飞两个密钥，公钥和私钥，公钥谁都能有，用于对信息加密，只有私钥才能解开。

三次握手的时候使用的是非对称加密，传输数据使用的是对称加密。

**HTTPS 绝对安全吗？**

不是，如果更改服务器或者证书更改则失效

### HTTP 和 HTTPS 的区别？

1. HTTPS 需要 CA 申请书,很少有免费的，需要交费
2. HTTP 运行在 TCP 之上，所有传输都是明文，而 HTTPS 是运行在 SSL/TLS 之上，而 SSL/TLS 是运行在 TCP 之上，所有传输内容都是经过加密的
3. HTTPS 有效的防止了运营商的劫持
4. HTTP 用的端口是 80，HTTPS 运行的端口是 443
5. HTTPS 是非对称加密

### HTTP 请求方法

HTTP1.1 新增了六种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 和 CONNECT 方法。

### HTTP1.0、HTTP1.X 与 HTTP2.0 的区别？

1996 年 1999 年 2015 年

-   **新的二进制格式**（Binary Format），HTTP1.x 的解析是基于文本。基于文本协议的格式解析存在天然缺陷，文本的表现形式有多样性，要做到健壮性考虑的场景必然很多，二进制则不同，只认 0 和 1 的组合。基于这种考虑 HTTP2.0 的协议解析决定采用二进制格式，实现方便且健壮。
-   **多路复用**（MultiPlexing），即连接共享，即每一个 request 都是是用作连接共享机制的。一个 request 对应一个 id，这样一个连接上可以有多个 request，而 http1.1 只能有一定的请求数量，超过限制会被阻塞。
-   **header 压缩**，如上文中所言，对前面提到过 HTTP1.x 的 header 带有大量信息，而且每次都要重复发送，HTTP2.0 使用 encoder 来减少需要传输的 header 大小，通讯双方各自 cache 一份 header fields 表，既避免了重复 header 的传输，又减小了需要传输的大小。
-   **服务端推送**（server push），同 SPDY 一样，HTTP2.0 也具有 server push 功能
-   **提升访问速度** ，所需时间更少相比 http1.0

### HTTPS 握手

![](../../../Pictures/Camera%20Roll/555379-20160210231313448-2027205313.png)

1. 客户端发起 HTTPS 请求

2. 服务端的配置

采用 HTTPS 协议的服务器必须要有一套数字证书，可以是自己制作或者 CA 证书。区别就是自己颁发的证书需要客户端验证通过，才可以继续访问，而使用 CA 证书则不会弹出提示页面。这套证书其实就是一对公钥和私钥。公钥给别人加密使用，私钥给自己解密使用。

3. 传送证书

这个证书其实就是公钥，只是包含了很多信息，如证书的颁发机构，过期时间等。

4. 客户端解析证书

这部分工作是有客户端的 TLS 来完成的，首先会验证公钥是否有效，比如颁发机构，过期时间等，如果发现异常，则会弹出一个警告框，提示证书存在问题。如果证书没有问题，那么就生成一个随即值，然后用证书对该随机值进行加密。

5. 传送加密信息

这部分传送的是用证书加密后的随机值，目的就是让服务端得到这个随机值，以后客户端和服务端的通信就可以通过这个随机值来进行加密解密了。

6. 服务段解密信息

服务端用私钥解密后，得到了客户端传过来的随机值(私钥)，然后把内容通过该值进行对称加密。所谓对称加密就是，将信息和私钥通过某种算法混合在一起，这样除非知道私钥，不然无法获取内容，而正好客户端和服务端都知道这个私钥，所以只要加密算法够彪悍，私钥够复杂，数据就够安全。

7. 传输加密后的信息

这部分信息是服务端用私钥加密后的信息，可以在客户端被还原。

8. 客户端解密信息

客户端用之前生成的私钥解密服务段传过来的信息，于是获取了解密后的内容。

PS: 整个握手过程第三方即使监听到了数据，也束手无策。

总结

为什么 HTTPS 是安全的？

在 HTTPS 握手的第四步中，如果站点的证书是不受信任的，会显示出现下面确认界面，确认了网站的真实性。另外第六和八步，使用客户端私钥加密解密，保证了数据传输的安全。

### HTTP 状态码

100 Continue 继续。客户端应继续其请求

101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到 HTTP 的新版本协议

200 OK 请求成功。一般用于 GET 与 POST 请求

201 Created 已创建。成功请求并创建了新的资源

202 Accepted 已接受。已经接受请求，但未处理完成

203 Non-Authoritative Information 非授权信息。请求成功。但返回的 meta 信息不在原始的服务器，而是一个副本

204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档

205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域

206 Partial Content 部分内容。服务器成功处理了部分 GET 请求

300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择

301 Moved Permanently 永久移动。请求的资源已被永久的移动到新 URI，返回信息会包括新的 URI，浏览器会自动定向到新 URI。今后任何新的请求都应使用新的 URI 代替

302 Found 临时移动。与 301 类似。但资源只是临时被移动。客户端应继续使用原有 URI

303 See Other 查看其它地址。与 301 类似。使用 GET 和 POST 请求查看

304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

305 Use Proxy 使用代理。所请求的资源必须通过代理访问

306 Unused 已经被废弃的 HTTP 状态码

307 Temporary Redirect 临时重定向。与 302 类似。使用 GET 请求重定向

400 Bad Request 客户端请求的语法错误，服务器无法理解

401 Unauthorized 请求要求用户的身份认证

402 Payment Required 保留，将来使用

403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求

404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

405 Method Not Allowed 客户端请求中的方法被禁止

406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求

407 Proxy Authentication Required 请求要求代理的身份认证，与 401 类似，但请求者应当使用代理进行授权

408 Request Time-out 服务器等待客户端发送的请求时间过长，超时

409 Conflict 服务器完成客户端的 PUT 请求是可能返回此代码，服务器处理请求时发生了冲突

410 Gone 客户端请求的资源已经不存在。410 不同于 404，如果资源以前有现在被永久删除了可使用 410 代码，网站设计人员可通过 301 代码指定资源的新位置

411 Length Required 服务器无法处理客户端发送的不带 Content-Length 的请求信息

412 Precondition Failed 客户端请求信息的先决条件错误

413 Request Entity Too Large 由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个 Retry-After 的响应信息

414 Request-URI Too Large 请求的 URI 过长（URI 通常为网址），服务器无法处理

415 Unsupported Media Type 服务器无法处理请求附带的媒体格式

416 Requested range not satisfiable 客户端请求的范围无效

417 Expectation Failed 服务器无法满足 Expect 的请求头信息

500 Internal Server Error 服务器内部错误，无法完成请求

501 Not Implemented 服务器不支持请求的功能，无法完成请求

502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应

503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的 Retry-After 头信息中

504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求

505 HTTP Version not supported 服务器不支持请求的 HTTP 协议的版本，无法完成处理

### 跨域的九种方式

-   第一种方式：jsonp 请求；jsonp 的原理是利用<script>标签的跨域特性，可以不受限制地从其他域中加载资源，类似的标签还有<img>.

-   第二种方式：document.domain；这种方式用在主域名相同子域名不同的跨域访问中 www.qq.com id.qq.com

-   第三种方式：window.name；window 的 name 属性有个特征：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个 window.name 的，每个页面对 window.name 都有读写的权限，window.name 是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。在应用页面（a.com/app.html）中监听 iframe 的 onload 事件，在此事件中设置这个 iframe 的 src 指向本地域的代理文件（代理文件和应用页面在同一域下，所以可以相互通信）

-   第四种方式：window.postMessage；window.postMessages 是 html5 中实现跨域访问的一种新方式，可以使用它来向其它的 window 对象发送消息，无论这个 window 对象是属于同源或不同源。

-   第五种方式：CORS(_cors-orgin-resource-sharing_)CORS 背后的基本思想，就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败。Access-Control-Allow-Origin

-   第六种方式：Web Sockets；web sockets 原理：在 JS 创建了 web socket 之后，会有一个 HTTP 请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用 HTTP 升级从 HTTP 协议交换为 web sockt 协议。

-   第七种方式：location.hash

-   第八种方式：nginx

-   第九种方式：http-proxy

    中规中矩的就是 JSONP 和 CORS ---------------document.domain，window.name，web sockets 就先别闹了，腰不好 : )

### 跨域了解吗？如何解决？怎么产生的？

跨域的产生是由于浏览器的同源策略，同源策略指的是： 1、域名 2、端口号 3、协议名 只要有一个不同就称为跨域 解决跨域：

1、jsonp 跨域(只能解决 get） 原理：动态创建一个 script 标签。利用 script 标签的 src 属性不受同源策略限制，因为所有的 src 属性和 href 属性都不受同源策略的限制，可以请求第三方服务器资源内容

2、服务器设置对 CORS 的支持 原理：nginx 设置 Access-Control-Allow-Origin HTTP 响应头之后，浏览器将会允许跨域请求

​ 3.proxy 实现跨域利用的是浏览器受同源策略限制，而服务器不会，当 npm run dev 的时候在本地就跑起来一个项目。

**JSONP 跨域 ajax 跨域**

```
$.ajax({
url:'http://www.baidu.com',
type:get,
dataType:'jsonp'
scuurss:function(data){
	console.log(data)
}
})
```

JSONP 与 CORS

JSONP 与 CORS 的使用目的相同，并且都需要服务端和客户端同时支持

**优缺点** ：JSONP 只支持 get 请求，并且兼容所有浏览器 CORS 支持 post，put，get 请求等，但是兼容性较差，仅支持 IE10 一下

**定义** ：JSONP 利用 src 引用静态资源不受跨域的限制，在客户端搞一个回调做一些数据接受与操作，在服务器将数据填充到约定好的回调函数中去

CORS 在 header 中添加字段请求与获取有权限访问的资源，利用服务器设置好 accoss-control-allow-orgin

### TCP 的长连接和短连接的区别

**短链接**

概念:客户端与服务器建立连接开始通信，一次/指定次数通信结束之后就断开本次 TCP 连接， 当下次再次通信时，再次建立 TCP 的链接。

优点：不长期占用服务器的内存，那么服务器能处理的连接数量是比较多的

缺点：1、因为要等到发送或者获取资源时，才去请求建立连接，而且 http 协议只能客户端主动向服务端发送数据后，服务端才返回 对应的数据，那么服务端想主动发送数据给客户端呢？Websocket 可以让服务端主动发送数据给客户端，或者要等到下一次要请求数据时，才发送，比如我们采用 轮询（30 秒或者更长）拉取消息， 那么服务器与客户端通信的实时性就丧失了。

​ 2、客户端采用轮询来实时获取信息，或者说大量的客户端使用短连接的方式通信，那么就浪费了大量的 CPU 和带宽资源用于建立连接 和释放连接，存在资源浪费，甚至是无法建立连接。比如经典的 http 长轮询（微信网页客户端端）

长连接

概念: TCP 与服务器建立连接之后一直处于连接状态，直到最后不再需要服务的时候才断开连接

优点： 1、传输数据快 2、服务器能够主动第一时间传输数据到客户端

缺点: 1、因为客户端与服务器一直保持这种连接，那么在高并发分布式集群系统中客户端数量会越来越多，占 用很多的系统资源 2、TCP 本身是一种有状态的数据，在高并发分布式系统会导致后台设计比较难做。

### 一个 TCP 连接可以发送几个 http 请求

http1.0 一般情况下不支持长连接，但是当设置 Connection : Keep-Alive 可以让 TCP 连接保持活跃，但是此方式有限制

http1.1 支持长连接，可以发送无限个 http 请求

http2.0 支持多用复用，一个 tcp 可以并发多个 http，可以一直发送 http，没有上限

### TCP，HTTP，UDP，IP 之间的区别

把 IP 想像成一种高速公路，它允许其它协议在上面行驶并找到到其它电脑的出口。TCP 和 UDP 是高速公路上的“卡车”，它们携带的货物就是像 HTTP，文件传输协议 FTP 这样的协议等。

**TCP 和 UDP 的区别**

-   TCP 面向连接，UDP 尽最大努力交付，无连接

1. UDP 信息包的标题很短，只有 8 个字节，相对于 TCP 的 20 个字节信息包的额外开销很小
2. TCP 传输可靠的数据：无差错，不丢失，不重复，按序到达 ，UDP 可能丢包，不保证顺序
3. TCP 是流模式(可以将字节流拆分和合并)，UDP 是数据报模式(一次发送一个报文)
4. TCP 基于连接，进行三次握手。UDP 无连接
5. UDP：使用与 IP 电话，视频会议

**什么是 HTTP？**

HTTP 是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范。

-

### TCP 三次握手四次挥手？

SYN 这个标志位只有在 TCP 建立连接时才会被置 1 ,握手完成后 SYN 标志位被置 0

为了准确无误地把数据送达目标处，TCP 协议采用了三次握手策略。用 TCP 协议把数据包送出去后，TCP 不会对传送 后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了 TCP 的标志：SYN 和 ACK。

发送端首先发送一个带 SYN 标志的数据包给对方。接收端收到后，回传一个带有 SYN/ACK 标志的数据包以示传达确认信息。 最后，发送端再回传一个带 ACK 标志的数据包，代表“握手”结束。 若在握手过程中某个阶段莫名中断，TCP 协议会再次以相同的顺序发送相同的数据包。

断开一个 TCP 连接则需要“四次握手”：

第一次挥手：主动关闭方发送一个 FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在 fin 包之前发送出去的数据，如果没有收到对应的 ack 确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。

第二次挥手：被动关闭方收到 FIN 包后，发送一个 ACK 给对方，确认序号为收到序号+1（与 SYN 相同，一个 FIN 占用一个序号）。

第三次挥手：被动关闭方发送一个 FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。

第四次挥手：主动关闭方收到 FIN 后，发送一个 ACK 给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。

为什么断开连接需要四次？因为服务端接受到报文之后不会立即断开连接

### session、cookie 与 token 的区别

### HTTP 请求方法

| 序号 | 方法    | 描述                                                                                                                                     |
| :--: | :------ | :--------------------------------------------------------------------------------------------------------------------------------------- |
|  1   | GET     | 请求指定的页面信息，并返回实体主体。                                                                                                     |
|  2   | HEAD    | 类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头                                                                          |
|  3   | POST    | 向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。 |
|  4   | PUT     | put 和 post 区别：调用一次与连续调用多次是等价的（即没有副作用），而连续调用多次 POST 方法可能会有副作用                                 |
|  5   | DELETE  | 请求服务器删除指定的页面。                                                                                                               |
|  6   | CONNECT | HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。                                                                                |
|  7   | OPTIONS | 允许客户端查看服务器的性能。                                                                                                             |
|  8   | TRACE   | 回显服务器收到的请求，主要用于测试或诊断。                                                                                               |
|  9   | PATCH   | 是对 PUT 方法的补充，用来对已知资源进行局部更新 。                                                                                       |

### HTTP 请求、响应头

https://itbilu.com/other/relate/EJ3fKUwUx.html#http-request-headers

### HTTP 缓存机制-强制缓存与协商缓存

**缓存** 的好处：

```
1.减少服务器压力
2.缩短页面响应时间
3.减少冗余的数据传输，减少了网络费用
```

**强制缓存** ：在第一次访问取到数据后，以后在过期时间内不会再请求

http1.0 的 expires 设定过期时间

http 1.1 的 cache-control max-age

**协商缓存** ：第一次请求服务器后，服务器会将缓存的标识和数据一起发送给客户端，客户端将二者备份至缓存数据库中，再次请求时服务器时进行判断，如果成功，将返回 304 不会返回任何数据，通知客户端可以使用缓存数据。

Last-Modified / If-Modified-Since

服务器修改的最后时间，如果时间大于 If-Modified-Since > 最后修改时间 则返回 200 否则返回 304

**E-tag 与 Last-Modified 的区别**

LM 根据文件修改时间来判断是否要重新返回整个文件，对应请求头 IF-M-S ，服务端和客户端进行对比，但是时间只能精确到秒，假如在这一秒之间恰好发生了变化就 GG 了。
E-tag 则是对文件求 MD5 或者哈希值，绝对精确，只要有任何变化都能体现出来，这个算法貌似是 server 配置的

### 浏览器事件机制

**捕获，目标对象，冒泡**

1.其中捕获（Capture）是 事件对象([event object](https://dom.spec.whatwg.org/#event)) 从 window 派发到 目标对象父级的过程。 2.目标（Target）阶段是 事件对象派发到目标元素时的阶段，如果事件类型指示其不冒泡，那事件传播将在此阶段终止。 3.冒泡（Bubbling）阶段 和捕获相反，是以目标对象父级到 window 的过程。
在任一阶段调用 [stopPropagation](https://dom.spec.whatwg.org/#dom-event-stoppropagation) 都将终止本次事件的传播。

### 浏览器缓存有哪些

1、`http缓存`是基于 HTTP 协议的浏览器文件级缓存机制。
2、`websql`这种方式只有较新的 chrome 浏览器支持，并以一个独立规范形式出现
3、`indexDB` 是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API
4、`Cookie`一般网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）
5、`Localstorage`html5 的一种新的本地缓存方案，目前用的比较多，一般用来存储 ajax 返回的数据，加快下次页面打开时的渲染速度
6、`Sessionstorage`和 localstorage 类似，但是浏览器关闭则会全部删除，api 和 localstorage 相同，实际项目中使用较少。
7、`application cache` 是将大部分图片资源、js、css 等静态资源放在 manifest 文件配置中
8、`cacheStorage`是在 ServiceWorker 的规范中定义的，可以保存每个 serverWorker 申明的 cache 对象
9、`flash缓存` 这种方式基本不用，这一方法主要基于 flash 有读写浏览器端本地目录的功能

### 网络七层模型

1.物理层-数据链路层-网络层-传输层-会话层-表示层-应用层

物理层：建立、维护、断开物理连接

数据链路层：建立逻辑连接，进行硬件地址寻址，差错校验等功能

网络层：进行逻辑地址寻址，实现不同网络之间的路径选择

传输层：定义传输数据的协议端口号，以及流控和差错校验

会话层：建立，管理，终止会话

应用层：网路服务与最终用户的一个接口

| 应用层     | HTTP、SMTP、SNMP、FTP、Telnet、 SIP、 SSH、 NFS、RTSP、XMPP、Whois、 ENRP        |
| ---------- | -------------------------------------------------------------------------------- |
| 表示层     | XDR、ASN.1、 SMB、AFP、NCP                                                       |
| 会话层     | ASAP、TLS、SSH、ISO 8327 ICCITT X.225、RPC、NetBIOS、 ASP、Winsock、 BSD sockets |
| 传输层     | TCP、UDP、RTP、SCTP、SPX、ATP、IL                                                |
| 网络层     | IP、 ICMP、IGMP、IPX、 BGP、OSPF、RIP、 IGRP、EIGRP、ARP、RARP、 X.25            |
| 数据链路层 | 以太网、令牌环、HDLC、帧中继、ISDN、ATM、IEEE 802.11、 FDDI、 PPP                |
| 物理层     | 线路、无线电、光纤、信鸽                                                         |

### TCP/IP 四层模型

-   应用层：http, dns, ftp, smtp, pop3;
-   传输层：TCP UDP ;
-   网络层：IP, RIP, OSPF
-   数据链路层：ARP

### HTTPS 抓包能看到 ip 地址吗

-   https 只能加密除两端以外的报文，换个角度来看，假如你把对端 ip 都加密了，路由器怎么办？你的数据根本无法在网络上转发。

-   加密数据只有客户端和服务器端才能得到明文，客户端到服务端的通信过程是安全的。
-   技术一点来说，TLS 协议是在 tcp 协议之上的，tcp 又是基于 IP 协议的。所以无论如何，你的对端 IP 地址是肯定无法加密的。
-   另外 TLS 协议也只是把 HTTP 层的数据加密了，所以也只是无法看到 HTTP 传输的内容，但是其他协议层的内容还是明文传输的。
-   这是因为: https(ssl)加密是发生在应用层与传输层之间，所以在传输层看到的数据才是经过加密的
-   但是可以在本地截获密码，那怎么办，比如支付宝支付的时候会有控件可以防止本地密码截获

### 常见 web 安全及防护原理

**sql 注入原理**

就是通过把 SQL 命令插入到 Web 表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的 SQL 命令。

总的来说有以下几点：

1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。

2.永远不要使用动态拼装 SQL，可以使用参数化的 SQL 或者直接使用存储过程进行数据查询存取。

3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。

4.不要把机密信息明文存放，请加密或者 hash 掉密码和敏感的信息。

**XSS 原理及防范**

Xss(cross-site scripting)跨站脚本攻击，攻击指的是攻击者往 Web 页面里插入恶意 html 标签或者 javascript 代码。比如：攻击者在论坛中放一个

看似安全的链接，骗取用户点击后，窃取 cookie 中的用户私密信息；或者攻击者在论坛中加一个恶意表单，

当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。

**XSS 防范方法**

首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以 encode，避免不小心把 html tag 弄出来。这一个层面做好，至少可以堵住超过一半的 XSS 攻击。

首先，避免直接在 cookie 中泄露用户隐私，例如 email、密码等等。

其次，通过使 cookie 和系统 ip 绑定来降低 cookie 泄露后的危险。这样攻击者得到的 cookie 没有实际价值，不可能拿来重放。

如果网站不需要再浏览器端对 cookie 进行操作，可以在 Set-Cookie 末尾加上 HttpOnly 来防止 javascript 代码直接获取 cookie 。

尽量采用 POST 而非 GET 提交表单

**CSRF 的原理及防范**

CSRF 是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。

XSS 是获取信息，不需要提前知道其他用户页面的代码和数据包。

要完成一次 CSRF 攻击，受害者必须依次完成两个步骤：登录受信任网站 A，并在本地生成 Cookie。在不登出 A 的情况下，访问危险网站 B。

CSRF 的防御

服务端的 CSRF 方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。

通过验证码的方法

### 两个 HTML 传值

Webstorage（localStorage sessionStorage） cookie

### webSocket

1、最大的特点就是服务端可以主动向客户端发送数据，支持持久性链接

2、与 HTTP 协议有着良好的兼容性。默认端口是 80 和 443，并握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

3、数据格式比较轻量，性能开销小，通信高效。

4、可以发送文本，也可以发送二进制数据。

5、没有同源限制，客户端可以与任意服务器通信。

6、协议标识符是 ws（如果加密，则为 wss，加密层是 TLS），服务器网址就是 URL。

### Web Worker

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。

Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

### 哈希模式和 history 模式

1 hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。
2 history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”
3 结合自身例子，对于一般的 Vue + Vue-Router + Webpack + XXX 形式的 Web 开发场景，用 history 模式即可，只需在后端（Apache 或 Nginx）进行简单的路由配置，同时搭配前端路由的 404 页面支持。

### 性能优化

代码层面：避免使用 css 表达式，避免使用高级选择器，通配选择器。

缓存利用：缓存 Ajax，使用 CDN，使用外部 js 和 css 文件以便缓存，添加 Expires 头，服务端配置 Etag，减少 DNS 查找等

请求数量：合并样式和脚本，使用 css 图片精灵，初始首屏之外的图片资源按需加载，静态资源延迟加载。

请求带宽：压缩文件，开启 GZIP，

代码层面的优化

用 hash-table 来优化查找

少用全局变量

用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能

用 setTimeout 来避免页面失去响应

缓存 DOM 节点查找的结果

避免使用 CSS Expression

避免全局查询

避免使用 with(with 会创建自己的作用域，会增加作用域链长度)

多个变量声明合并

避免图片和 iFrame 等的空 Src。空 Src 会重新加载当前页面，影响速度和效率

尽量避免写在 HTML 标签中写 Style 属性

### 单页面应用有什么优缺点

优点：

1. 用户体验好，快，内容改变不需要刷新整个页面
2. 避免出现‘白屏’

缺点：

1. 首次加载时间较长
2. 不利于 SEO 优化
3. 页面复杂度较高

### 浏览器渲染机制 JS 阻塞怎么办?(金山 WPS)

1.将 js 放在最后加载

2.监听 onload 异步 加载

### 进程和线程的区别

线程在进程下行进（单纯的车厢无法运行）

一个进程可以包含多个线程（一辆火车可以有多个车厢）

不同进程间数据很难共享（一辆火车上的乘客很难换到另外一辆火车，比如站点换乘）

同一进程下不同线程间数据很易共享（A 车厢换到 B 车厢很容易）

进程要比线程消耗更多的计算机资源（采用多列火车相比多个车厢更耗资源）

进程间不会相互影响，一个线程挂掉将导致整个进程挂掉（一列火车不会影响到另外一列火车，但是如果一列火车上中间的一节车厢着火了，将影响到所有车厢）

### 进程间的通信方式

-   管道 pipe：管道是一种半双工的通信方式，数据只能单向流动，而且只能在具有亲缘关系的进程间使用。进程的亲缘关系通常是指父子进程关系。
-   命名管道 FIFO：有名管道也是半双工的通信方式，但是它允许无亲缘关系进程间的通信。
-   消息队列 MessageQueue：消息队列是由消息的链表，存放在内核中并由消息队列标识符标识。消息队列克服了信号传递信息少、管道只能承载无格式字节流以及缓冲区大小受限等缺点。
-   共享存储 SharedMemory：共享内存就是映射一段能被其他进程所访问的内存，这段共享内存由一个进程创建，但多个进程都可以访问。共享内存是最快的 IPC 方式，它是针对其他进程间通信方式运行效率低而专门设计的。它往往与其他通信机制，如信号量，配合使用，来实现进程间的同步和通信。
-   信号量 Semaphore：信号量是一个计数器，可以用来控制多个进程对共享资源的访问。它常作为一种锁机制，防止某进程正在访问共享资源时，其他进程也访问该资源。因此，主要作为进程间以及同一进程内不同线程之间的同步手段。
-   套接字 Socket：套解口也是一种进程间通信机制，与其他通信机制不同的是，它可用于不同及其间的进程通信。
-   信号 ( sinal ) ： 信号是一种比较复杂的通信方式，用于通知接收进程某个事件已经发生。

### 常见得浏览器内核有那些

1.IE Trident 内核

2.firefox Gecko 内核 （该扣）

3.谷歌 blink

4.safari webkit

### 前端的认识

**前端工程化**
还记得我在最早期写前端代码时,往往一个页面就是一个文件搞定,HTML/CSS/JS 全部写在一起,后来知道应该把结构、样式和动作分离,我想这是我接触到最早的前端工程化的思想了,所谓前端工程化我认为就是：

将前端项目当成一项系统工程进行分析、组织和构建从而达到项目结构清晰、分工明确、团队配合默契、开发效率提高的目的

前面我说接触最早的工程化思维就是“结构、样式和动作分离”,在只有若干个页面的小型项目我们只需要用这些简单的做法就能把项目很好的组织起来,但是在一个大型 web 项目中往往有更加复杂的结构和非常多的页面需要很多人甚至是多个团队配合才能把项目做完,我们需要有更加严谨和复杂的工程化思维去组织结构。从更高层面的项目组织来看我们要做项目的各种规范、技术选型、项目构建优化等等,在代码层面我们还需要用到 JS/CSS 模块机、UI 组件化等开发方式。

**前端模块化**
前面我们提到在组织代码的时候会用到模块化和组件化,大家应该理解到,前端工程化是一个高层次的思想,而模块化和组件化是为工程化思想下相对较具体的开发方式,因此可以简单的认为模块化和组件化是工程化的表现形式。

那具体什么是模块化呢,还是举简单的例子,我们要写一个实现 A 功能的 JS 代码,这个功能在项目其他位置也需要用到,那么我们就可以把这个功能看成一个模块采用一定的方式进行模块化编写,既能实现复用还可以分而治之,同理在写样式的时候,如果我们需要某种特殊的样式,会在很多地方应用,那么我们也可以采用一定的方式进行 CSS 的模块化,具体说来,JS 模块化方案很多有 AMD/CommonJS/UMD/ES6 Module 等,CSS 模块化开发大多是在 less、sass、stylus 等预处理器的 import/mixin 特性支持下实现的,具体技术大家自行学习。

总体而言,模块化不难理解,重点是要学习相关的技术并且灵活运用。

**前端组件化**
前文中我们提到过,组件化也是工程化的表现形式,那么到底什么是前端组件化呢

页面上的每个独立的、可视/可交互区域视为一个组件;
每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护;
由于组件具有独立性,因此组件与组件之间可以 自由组合;
页面只不过是组件的容器,负责组合组件形成功能完整的界面;
当不需要某个组件,或者想要替换组件时,可以整个目录删除/替换。

组件化将页面视为一个容器,页面上各个独立部分例如:头部、导航、焦点图、侧边栏、底部等视为独立组件,不同的页面根据内容的需要,去盛放相关组件即可组成完整的页面。

PS:模块化和组件化一个最直接的好处就是复用,同时我们也应该有一个理念,模块化和组件化除了复用之外还有就是分治,我们能够在不影响其他代码的情况下按需修改某一独立的模块或是组件,因此很多地方我们及时没有很强烈的复用需要也可以根据分治需求进行模块化或组件化开发。

## css

### link 标签和@import 标签的区别

link 属于 html 标签，而@import 是 css 提供的

页面被加载时，link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加载。

link 是 html 标签，因此没有兼容性，而@import 只有 IE5 以上才能识别。

link 方式样式的权重高于@import 的。

### CSS 标签

**行内标签：**span em input a strong i label br

**块级标签：** div h1-h6 p ul li ol dt dd dl form header footer nav artical dl 标签：自定义标签的主标签；

**行内块标签：** img input textarea

### 响应式布局

@media screen and (max-width: 768) { .main { background-color:red;} 992px 1200px 1920px

}

**rem 响应布局**

原理：假设我们将屏幕宽度平均分成 100 份，每一份的宽度用 x 表示，x = 屏幕宽度 / 100，如果将 x 作为单位，x 前面的数值就代表屏幕宽度的百分比。x 单位为 rem

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + ‘px’;

```css
html {fons-size: 屏幕宽度 / 100}   那1rem和1x就等价了
```

### 语义化标签

**定义**：语义化的标签，合适的标签干合适的事情，旨在让标签有自己的含义。

**优点**：

-   即使在没有 CSS 样式的条件下，也能很好地呈现出内容结构、代码结构。
-   语义化标签会使 HTML 结构变的清晰，有利于维护代码和添加样式。
-   方便其他设备（如屏幕阅读器、盲人阅读器、移动设备）解析。
-   提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息。
-   便于团队开发和维护，语义化更具可读性，可以减少差异化。
-   通常标签语义化会使代码变的更少，使页面加载更快。

### 画一个三角形

```
.main {
   width: 0;
   height: 0;
   border-bottom: 100px solid red;
   border-top: 0px;
   border-left: 100px solid transparent;
   border-right: 100px solid transparent;
  }
```

### BFC 是什么？为什么？怎么做？

为什么会出现盒子塌陷？

在 CSS 出现之前使用的 P 标签，是设计师要求的，是为了兼容 css1.0 之前的 P 标签，他要求每个段落都有相同间隔，所以当你对 P 标签设置了 margin-top 和 margin-bottom 时候就发现两个 margin 合并的情况，并且取最大值。

1. BFC 在布局上不会影响到外面的元素，并且备普通元素没有的特性
2. 盒子塌陷只出现在上下
3. BFC 是一个独立的元素，外面的元素不会影响到里面的元素
4. BFC 元素不会与浮动元素发生重叠，可以用来清除浮动 -----左边宽度固定 ，中间自适应

直译为块级格式化上下文，数于同一个 BFC 的两个相邻 Box 会发生重叠，BFC 里的元素与外面的元素不会发生影响 。

如何创建 BFC？触发 BFC 的四个条件，满足其中一个即可

-   position 的值为：absolute，fixed
-   display 的值为：inline-block，table-cell，table-caption,table，flex；
-   float 的值不为 none；(left,right,inheirt,)
-   overflow 的值不为 visible；（scroll,hidden,auto,inherit）

边距重叠什么时候发生？

-   父与子之间，父级的 margin 与子级的 margin 会发生重叠
-   空元素的 margin-top 和 margin-bottom 会发生重叠
-   兄弟元素之间每个元素都有上下边距取最大边距

### CSS 选择器以及权重

!important > 行内（1000）>id 选择器（100） > 属性选择器 = 类选择器 = 伪元素选择器 > 标签选择器 = 伪类选择器（::after）> 通配符 > 继承 >浏览器默认属性

| 选择器                                                                                         | 示例                                                                                                    |
| :--------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------ |
| [类型选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors)                  | `h1 { }`                                                                                                |
| [通配选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors)             | `* { }`                                                                                                 |
| [类选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors)                   | `.box { }`                                                                                              |
| [ID 选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors)                     | `#unique { }`                                                                                           |
| [标签属性选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors)         | `a[title] { }`                                                                                          |
| [伪类选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes)                  | hover 悬停，active 激活，focus 获得焦点，link 超链接点击前，visited 超链接点击之后，`p:first-child { }` |
| [伪元素选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements)               | first-line，first-letter，after，before 设置元素的首行首字母样式，在元素的内容之前之后插入内容          |
| [后代选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Descendant_combinator)           | `article p`                                                                                             |
| [子代选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Child_combinator)                | `article > p`                                                                                           |
| [相邻兄弟选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator) | `h1 + p`                                                                                                |
| [通用兄弟选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/General_sibling_combinator)  | `h1 ~ p`                                                                                                |

### CSS 性能优化

1. 内联首屏 CSS，当内联的话下载完 html 就可以渲染了
2. 异步加载 CSS，将首屏外的 CSS 进行异步加载
3. 文件压缩
4. 删除无用 CSS
5. 有选择的使用选择器

### Flex：1 代表什么？

**flex: 1 === flex: 1 1 auto;** flex-grown flex-shrink flex-basis

-   第一个参数表示: **flex-grow 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大,如果值为 1 的话，平分剩余空间**
-   第二个参数表示: **flex-shrink 定义了项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小，如果值为 1, 将不缩小**
-   第三个参数表示: **flex-basis** **给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小如果为 0%以上面两个条件为准**

> flex 阮一峰：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool（语法篇）

### CSS 盒模型

IE 盒模型：width = content + padding + border

W3C 标准盒模型： width = content

### 清除浮动

```
    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
```

## js

### js 事件循环

**前言**

javascript 从诞生之日起就是一门单线程的非阻塞的脚本语言。这是由其最初的用途来决定的：与浏览器交互。单线程确保了执行顺序的同时也限制了 JS 执行效率，于是有了 webworker。web worker 技术开的多线程有着诸多限制，例如：所有新线程都受主线程的完全控制，不能独立执行。这意味着这些“线程” 实际上应属于主线程的子线程。

事件循环，js 是单线程，所有的异步操作都是模拟出来的，所有任务可分为同步任务与异步任务，首先执行宏任务 script 整体代码，首先判定是同步任务还是异步任务如果是同步任务则进入主线程立即执行，如果是异步任务则进入任务队列，当主线程任务执行完就会将任务队列里的任务推入主线程中。异步任务被分为宏任务与微任务，当 js 执行到宏任务的时候会将他们加入到宏任务事件队列里面，执 行到微任务的时候会将他们推入到 当主线程，微任务比如说 promise 等，宏任务有 setTimeout,setInterval 等等。

当遇到同步任务则直接执行，如果遇到微任务则推入微任务队列，当遇到宏任务则推入宏任务队列，当整个宏任务执行完，则会执行所有微任务，当微任务执行完，则会查看是否有宏任务重复上述操作

**优先级**： process.nexttick() > promise.then () > setTimeout > setImmediate

**为什么会有事件循环**

1. JavaScript 是单线程，非阻塞的

单线程：

JavaScript 的主要用途是与用户互动，以及操作 DOM。如果它是多线程的会有很多复杂的问题要处理，比如有两个线程同时操作 DOM，一个线程删除了当前的 DOM 节点，一个线程是要操作当前的 DOM 阶段，最后以哪个线程的操作为准？为了避免这种，所以 JS 是单线程的。即使 H5 提出了 web worker 标准，它有很多限制，受主线程控制，是主线程的子线程。

非阻塞：通过 event loop 实现。

**浏览器和 node 的事件循环区别是什么**

**事件队列**

事件队列: 异步代码的执行，遇到异步事件不会等待它返回结果，而是将这个事件挂起，继续执行执行栈中的其他任务。当异步事件返回结果，将它放到事件队列中，被放入事件队列不会立刻执行起回调，而是等待当前执行栈中所有任务都执行完毕，主线程空闲状态，主线程会去查找事件队列中是否有任务，如果有，则取出排在第一位的事件，并把这个事件对应的回调放到执行栈中，然后执行其中的同步代码。

**宏任务和微任务**

为什么要引入微任务，只有一种类型的任务不行么？

页面渲染事件，各种 IO 的完成事件等随时被添加到任务队列中，一直会保持先进先出的原则执行，我们不能准确地控制这些事件被添加到任务队列中的位置。但是这个时候突然有高优先级的任务需要尽快执行，那么一种类型的任务就不合适了，所以引入了微任务队列。

### 原型链

1. 每个函数都有一个 prototype 属性
2. 函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的**实例**的原型
3. 那什么是原型呢？你可以这样理解：每一个 JavaScript 对象(null 除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性。

### 继承

**原型链继承**

```
Child.prototype = new Parent();
```

缺点：1.引用类型的属性被所有实例共享（因为 parent 属性在 Child 的原型上） 2.在创建 Child 的实例时，不能向 Parent 传参

**借用构造函数（经典继承）**

```
function Child () {
    Parent.call(this);
}
```

优点：1.引用类型的属性没有被实例共享 2.再创建 Child 的实例时，可以向 Parent 传参

缺点：1.方法都在构造函数中定义，每次创建一遍实例都会创建一遍方法

**组合继承**（原型链继承 + 构造函数继承）

```
function Child () {
    Parent.call(this);
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
```

优点：融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式。

**原型式继承**

```
function createObj(o) {
    function F(){}
    F.prototype = o;
    return new F();
}
var person = {
    name: 'kevin'
}
var person1 = createObj(person);
```

就是 ES5 Object.create 的模拟实现，将传入的对象作为创建的对象的原型。

缺点：包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。

**寄生式继承**

```
function createObj (o) {
    var clone = Object.create(o);
    clone.sayName = function () {
        console.log('hi');
    }
    return clone;
}
```

创建一个仅用于封装继承过程的函数，该函数在内部以某种形式来做增强对象，最后返回对象。

缺点：跟借用构造函数模式一样，每次创建对象都会创建一遍方法。

**寄生组合式继承**

```
function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}
function prototype(child, parent) {
    var prototype = object(parent.prototype);
    prototype.constructor = child;
    child.prototype = prototype;
}
// 当我们使用的时候：
prototype(Child, Parent);
```

### 闭包

1. 从理论角度：所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就相当于是在访问自由变量，这个时候使用最外层的作用域。
2. 从实践角度：以下函数才算是闭包：
    1. 即使创建它的上下文已经销毁，它仍然存在（比如，内部函数从父函数中返回）
    2. 在代码中引用了自由变量

### 作用域

1.查找变量声明

2.查找函数声明

JS 真正解析之前，js 会首先把整个文件进行预处理，以消除一些歧义，这个预处理的过程被称为预编译

GO 全局对象 Global Object
AO 活动对象 Activation Object

-   在函数被调用时产生，用来保存当前函数的执行环境，也叫执行期上下文
-   在函数调用结束时销毁

caller：谁调用

scopes: 作用域链

### 变量提升

var function 变量提升

function 在 var 的后面

### 浮点数精度

0.1 + 0.2 是否等于 0.3

因为 0.1 转成二进制是一个无限循环的数，浮点数以 64 位存储

### 添加元素

document.getElementById('myid').appendChild(ele)

### 虚拟 Dom 与 真实 Dom

**为什么说直接操作/频繁的操作 DOM 会性能差?**

JS 引擎和 DOM 引擎是独立的，当调用 Dom API 的时候，首先要挂起 JS 引擎然后执行 Dom API，激活 DOM 引擎，重绘后再调用 JS 引擎执行之后的代码，没有批量处理优化。引擎间频繁的切换会浪费性能。

虚拟 DOM 和真实 DOM 的区别和优化

1. 虚拟 DOM 不会立马进行排版和重绘操作
2. 虚拟 DOM 进行频繁修改，然后一次性比较并修改真实 DOM 中需要改的部分，最后在真实 DOM 中进行排版和重绘，减少过多的 DOM 节点重排和重绘损耗。
3. 虚拟 DOM 有效降低大面积真实 DOM 的重绘与排版，因为最终与真实 DOM 比较差异，可以只渲染局部

### Error

-   ReferenceError:找不到对象时
-   TypeError:错误的使用了类型或对象的方法时
-   RangeError:使用内置对象的方法时，参数超范围
-   SyntaxError:语法写错了
-   EvalError:错误的使用了 Eval
-   URIError:URI 错误

### CommonJS,AMD,CMD,ES6 模块

**什么是模块化？**

-   将一个复杂的程序，依据一定的规则(规范)封装成一个或多个块(文件), 并进行组合在一起
-   块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

**为什么要模块化？**

1.使用模块化开发能解决文件之间的依赖关系，按需加载。

2.使用模块化开发可以避免命名的冲突。

3.使用模块化开发能进行代码的复用。

4.维护性更高。

**CommonJS 和 ES6 的区别**

1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
3. CommonJs 是单个值导出，ES6 Module 可以导出多个
4. CommonJs 是动态语法可以写在判断里，ES6 Module 静态语法只能写在顶层
5. CommonJs 的 this 是当前模块，ES6 Module 的 this 是 undefined

CommonJS

1. 对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。
2. 对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。
3. 当使用 require 命令加载某个模块时，就会运行整个模块的代码。
4. 当使用 require 命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，CommonJS 模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。
5. 循环加载时，属于加载时执行。即脚本代码在 require 的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。
6. require('') module.exports exports

ES6 模块

1. ES6 模块中的值属于【动态只读引用】。
2. 对于只读来说，即不允许修改引入变量的值，import 的变量是只读的，不论是基本数据类型还是复杂数据类型。当模块遇到 import 命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
3. 对于动态来说，原始值发生变化，import 加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
4. 循环加载时，ES6 模块是动态引用。只要两个模块之间存在某个引用，代码就能够执行。
5. export export default import

**CommonJS**

服务端：同步加载

浏览器端：提前编译打包处理 安装 browserify 执行 browserify 原文件位置 -o 目标位置

暴露：module.exports = value 与 exports.XXX = value 暴露的是对象

引入： requrire('./')

**AMD**

专门用于浏览器端 也称 require.js

暴露：define(['module1','module2'], function(m1, m2){ return 模块})

引入：require(['module1','module2'], function(m1, m2){ 使用 m1/m2})

**CMD**

阿里人写的，作为了解，卖给国外了

ES6

export

export default

**IIFE**立即调用函数表达式

### 字符串 API

length()—属性返回字符串的长度

indexOf()—属性返回字符串中指定文本首次出现的索引（位置）

lastIndexOf()—属性返回字符串中指定文本最后一次出现的索引（位置）

search()—属性返回字符串中特定值的字符串的首次出现的索引（位置）

toUpperCase()—转为大写

toLowerCase();—转为小写

substring(start, end):—开始下标到结束下标。如果省略第二个参数表示截取到结尾。

substr(start, length):—从 start 开始截取，一共最多截取 length，不写 length，直接截取到结尾

trim();—去除首尾空白符

split(separator,howmany);—separator 必需。字符串或正则表达式，从该参数指定的地方分割 。howmany 可选。该参数可指定返回的数组的最大长度。

slice();—提取字符串片段

for of 遍历

at();—返回字符串给定位置的字符

includes();—返回布尔值，表示是否找到了参数字符串。

startsWith();—返回布尔值，表示参数字符串是否在源字符串的头部。

endsWith();—返回布尔值，表示参数字符串是否在源字符串的尾部。

repeat();—方法返回一个新字符串，表示将原字符串重复 n 次。

padStart();—字符串补全长度的功能，用于头部补全。

padEnd();—用于尾部补全。

match();—找到一个或多个正则表达式匹配

replace();替换与正则表达式匹配的子串

function formatDate(date, format) {
var obj = {
yyyy: date.getFullYear(),
yy: ('' + date.getFullYear()).slice(-2),
MM: ('0' + (date.getMonth() + 1)).slice(-2),
M: date.getMonth() + 1,
dd: ('0' + date.getDate()).slice(-2),
d: date.getDate(),
HH: ('0' + date.getHours()).slice(-2),
H: date.getHours(),
hh: ('0' + date.getHours() % 12).slice(-2),
h: date.getHours() % 12,
mm: ('0' + date.getMinutes()).slice(-2),
m: date.getMinutes(),
ss: ('0' + date.getSeconds()).slice(-2),
s: date.getSeconds(),
w: ['日', '一', '二', '三', '四', '五', '六'][date.getday()],
}
return format.replace(/(\w+)/g, ($1) => {
return obj[$1];
})
}

### Match

str.match('.at') 和 RegExp 的用法相同

### 数组 API

会改变原来数组的：
pop()—删除数组的最后一个元素并返回删除的元素。
push()—向数组的末尾添加一个或更多元素，并返回新的长度。
shift()—删除并返回数组的第一个元素。
unshift()—向数组的开头添加一个或更多元素，并返回新的长度。
reverse()—反转数组的元素顺序。
sort()—对数组的元素进行排序。
splice()—用于插入、删除或替换数组的元素。 返回的是含有被删除的数组
································································································
不会改变原来数组的：
concat()—连接两个或更多的数组，并返回结果。
every()—检测数组元素的每个元素是否都符合条件。
some()—检测数组元素中是否有元素符合指定条件。
filter()—检测数组元素，并返回符合条件所有元素的数组。
indexOf()—搜索数组中的元素，并返回它所在的位置。
join()—把数组的所有元素放入一个字符串。
toString()—把数组转换为字符串，并返回结果。
lastIndexOf()—返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
map()—通过指定函数处理数组的每个元素，并返回处理后的数组。
slice()—选取数组的的一部分，并返回一个新数组。
valueOf()—返回数组对象的原始值。

### Promise

**特别注意**

new Promise()方法属于同步代码。

promise 函数对象上的方法有 then，catch， finally 实 例对象上有 all，race，reject，resolve

**Promise 的三种状态，catch 和 reject 的区别**？

catch 是原型上的属性，reject 是 promise 属性

catch 会捕获 promise 链的所有异常

reject 返回一个错误的 reject

**回调地狱**

```
doSomething( function(result) {
	doSomethingElse( result, function( newResult) {
		doThirdThing( newResult, function(finalResult) {
			console.log( 'Got the final result :' + finalResult)
		},failureCallback )
	}, failureCallback)
}, failureCallback )
```

1. 回调函数嵌套，代码水平向右发展 ，阅读不方便
2. 每个函数都要处理异常，处理异常十分麻烦

**用 promsie 链式调用解决回调地狱问题**

```
doSomething(I . then( function(result) {
	return doSomethingElse( result)
})
.then( function(newResult) {
	return doThirdThing( newResult )
})
.then(function( finalResult) {
	console.log( 'Got the final result: ' + finalResult)
})
.catch(failureCallback)
```

1. 代码从上往下写，同步的写法，阅读方便
2. 处理异常用统一的 catch 处理，catch 具有异常传透

**先指定回调函数还是先改变状态**

```
//常规:先指定回调函数，后改变的状态
new Promise((resolve, reject) => {
	setTimeout(( ) => {
		resolve(1) //后改变的状态(同时指定数据)，异步执行回调函数
	}，1000);
}).then(//	先指定回调函数，保存当前指定的回调函数
	value => {},
	reason => {console. 1og('reason', reason)}
//如何先改状态，后指定回调函数
new Promise((resolve, reject) => {
	resolve(1) //先改变的状态(同时指定数据)
}).then(//后指定回调函数，异步执行回调函数
	value => {console.1og( 'value2', value)},
	reason => {console. 1og( 'reason2', reason)}
)
```

### 迭代器与生成器

迭代器：字符串，数组，映射，集合，对象，arguments，DOM 集合类型

` let newArr = arr[Symbol.iterator]() newArr.next()`

生成器：可以暂停函数 `let generatorFn = function* (a) { yield ++a; } generatorFn (5).next()`

### async 和 await 的了解

async 加在函数声明之前，使其成为 async function，则此时函数返回值为 promise，是迭代器与生成器和 promise 的语法糖

### 匿名函数和回调函数

**匿名函数** ：没有名字的函数，并且没有赋值给变量

**回调函数** ：一般将一个函数的返回值传给另一个函数 ，

​ 优势：1. 如果传递的是匿名函数可以节省一个全局变量 2. 节省代码 3. 提高性能

### **Map**和**Set**两种新的数据结构

-   Map 是类似 Object 的一种键值对集合，区别在于 Map 的键不仅限于是字符串，其他各种类型的值包括对象都可以成为 Map 的键
-   Set 是类似数组的一种数据结构，不同点在于 Set 中没有重复的值

### this 指向

-   实际上 this 的最终指向的是那个调用它的对象
-   如果一个函数中有 this，这个函数有被上一级的对象所调用，那么 this 指向的就是上一级的对象。
-   返回值，如果返回值是一个对象，那么 this 指向的就是那个返回的对象，如果返回值不是一个对象那么 this 还是指向函数的实例。

### new 做了什么？

1.创建空对象

2.将构造函数中的作用域赋给新对象（因此 this 就指向了新对象）

3.执行构造函数中的代码（为新对象添加属性）

4.返回新对象

```
let liu = new Person('liu','18')

let a = {}
a.__proto__ = Person.prototype
Person.call(a)
```

### 事件委托 事件捕获 事件冒泡

**事件委托**

事件就是我们普通绑定的事件。委托就是不绑定在当前元素上，而是绑定在了父级或者祖辈元素上，通过 event 事件对象的 target 属性，获取当前点击的精确元素。

原理： 使用了冒泡的原理。

优点：1.减少 for 循环，减少绑定事件数量，减少了内存泄露的概率。2.可以给未来的元素绑定事件

缺点：

1. 事件委托基于冒泡，对于不冒泡的事件不支持。
2. 层级过多，冒泡过程中，可能会被某层阻止掉。
3. 理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在 table 上代理 td，而不是在 document 上代理 td。
4. 把所有事件都用代理就可能会出现事件误判。比如，在 document 中代理了所有 button 的 click 事件，另外的人在引用改 js 时，可能不知道，造成单击 button 触发了两个 click 事件。

### Call,apply,bind 的区别

apply 第一个参数是 this 指向，第二个参数是函数接受的参数，立即执行

call 第一个参数是 this 指向，后面传入的是一个参数列表 立即执行

bind 第一参数也是 this 的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入，call 则必须一次性传入所有参数)，但是它改变 this 指向后不会立即执行，而是返回一个永久改变 this 指向的函数。

### setTimeout,promise,async await 之间的区别

async await：async 可以让函数具有异步特征，但是仍是同步执行，当有返回值时，返回的是一个 promise.resolve 包装的期约对象，，当遇到 await 的时候，会等待后面的 promise 执行完，然后执行后面代码。

promise：Promise 本身是同步的，但在执行 resolve 或者 rejects 时是异步的，即 then 方法是异步的。

setTimeout：异步执行函数是宏任务

### require、export 和 export default 的区别

common JS module.exports require()

ES6 模块不共享全局命名空间。

模块顶级 this 的值是 undefined（常规脚本中是 window）。

ES6 模块默认在严格模式下执行。

ES6 模块是异步加载和执行的。

require 是值的拷贝，import 是值的引用

ES 可以先使用再引用，requrie 必须先引用

require 可以放到模块中去 module.exports 的会被缓存 ES6 的不会被缓存

ES6 最大的一个改进就是引入了模块规范 A 依赖 B ,B 依赖 C，C 依赖 D， 他会先导入 A 发现需要 B 再导入 B 以此类推

export：export 语句与导出值的相对位置或者

export 关键字在模块中出现的顺序没有限制。export 语句甚至可以出现在它要导出的值之前

```
// 允许
const foo = 'foo';
export { foo };
// 允许
export const foo = 'foo';
// 允许，但应该避免
export { foo };
const foo = 'foo';
```

export default 只能有一个，重复的话会报错。 导入的时候不需要加大括号

import 和 export 一样，必须出现在模块的顶级（不是顶部，是顶级）导入的时候需要加大括号

### 箭头函数和普通函数的区别

1. 箭头函数 没有 arguments 对象，普通函数有
2. 箭头函数无 this,普通函数有 this 并且可以通过 call，apply，bind 改变 this
3. 普通函数可以当构造函数使用，箭头函数不可以

### javascript 中有几种数据类型？

-   基本数据类型：Undefine Null String Number Boolean Symble(ES6 新增) BigInt(ES10 新增)
-   引用数据类型有 Object Array Function

### 说一说你对原型链的理解？

**原型的作用**：① 数据共享，节约资源。② 继承

**原型链的定义**：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数的原型。这样就在实例和原型之间构造了一条原型链。

特例：

```
Object.__proto__ === Function.prototype //true
Object.__proto__ === Function.__proto__//true
Object.prototype === Function.prototype.__proto__ // true
//因此
Function instanceof Object //true
Object instanceof Function //true
```

### 判断是不是数组的五种方法？

​ **const arr = [1,2,3,4]**

1. arr instanceof Array //true
2. Object.prototype.toString.call(arr) === '[object Array]';
3. Array.isArray(arr)
4. arr.constructor === Array
5. arr.** proto** === Array.prototype

**判断是否为对象：**

Object.prototype.toString.call(arr) === '[object Object]'; （最靠谱）

obj.constructor === Object

### 正则

手机号正则表达式

```
/^1[3|4|5|7|8][0-9]{9}$/
```

邮箱正则表达式

```
/^[A-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
```

### settimeout 实现 setInterval

```
function mySetInterval(fn, time) {
	function interval(){
		setTimeout(interval, time)
		fn()
	}
	setTimeout(interval, time)
}
```

### setTimeout 定时不准问题

原因：

1. 浏览器中的所有 JavaScript 都在单线程上执行，所以异步事件（比如鼠标点击和定时器）仅在线程空闲时才会被调度运行。 2. 为了控制要执行的代码， JavaScript 配置了一个任务队列，这些异步事件任务会按照将它们添加到队列的顺序执行。
2. 而 setTimeout() 的第二个参数（延时时间）只是告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

解决：

1. 在定时器开始前和运行时动态获取当前时间，在设置下一次定时时长时，在期望值基础上减去当前时延，以获得相对精准的定时运行效果。

    此方法仅能消除 setInterval()长时间运行造成的误差累计，但无法消除单个定时器执行延迟问题

    2.Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。

### Fast-Click 原理（京东 2019）

检测到 touched 事件的时候，会通过 DOM 自定义事件发送一个 Click 事件，并将浏览器在 300ms 后的 Click 事件给阻止掉

缺点：脚本相对较大。

### new 与 Object.create()区别

-   new 创建一个对象，执行构造函数。
-   Object.create 相当于创建一个对象，但是不执行构造函数

### 暂时性死区

如果区块中存在`let`和`const`命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。声明之前的区域就形成了死区。

### 获取元素的大小和位置

obj.clientWidth //获取元素的宽度（width+padding）
obj.clientHeight //元素的高度
obj.offsetLeft //元素相对于父元素的 left 是否有父元素有的话 .offsetParent 重复操作

### 事件委托 兼容性写法

```
addEventListener 新版本
attachEvent 老版本  事件类型前加on
```

_/\*事件委托(事件代理): 即是把原先绑定子元素的事件（click，ablClick,keydown,...）委托给父元素，让父元素担当监听职务， 事件代理的原理是 Dom 元素的事件冒泡。_

_//1.事件委托：父元素 ul_ var ul=document.getElementsByTagName("ul")[0]; ul.addEventListener("click",fn1,false);_//DOM2 级事件添加 单击,函数执行,冒泡;_ function fn1(e){_//函数执行_ var e=e||window.event; _//老式 IE 的兼容语句_ var tg=e.target; switch (tg.id) {_//通过 id 控制_ case "first":alert("第一个 li 被单击了"); break; case "two":alert("第二个 li 被单击了"); break; case "third":alert("第三个 li 被单击了"); break; case "fo":alert("第四个 li 被单击了"); break; } }

### fetch 网络请求

1. 语法简洁，更加语义化，业务逻辑更清晰

2. 基于标准 Promise 实现，支持 async/await

    ```
    fetch(url).then(response => response.json())``//解析为可读数据
     .then(data => console.log(data))``//执行结果是 resolve就调用then方法
     .catch(err => console.log(``"Oh, error"``, err))``//执行结果是 reject就调用catch方法
    ```

## vue

### diff 算法

**传统方法：** 通过循环递归对节点进行比较，然后判断每个节点的状态以及要做的操作，然后根据虚拟 dom 进行渲染，复杂度为 O(n^3)

**高效算法：** 复杂度为：O(n)

1. 同层比较：新的 Diff 算法是逐层进行比较，只比较同一层次的节点，

2. 不同类型节点的比较：如果发现新旧两个节点类型不同时，Diff 算法会直接删除旧的节点及其子节点并插入新的节点，这是由于前面提出的不同组件产生的 DOM 结构一般是不同的，所以可以不用浪费时间去比较。

3. 相同类型节点比较：若是两个节点类型相同时，Diff 算法会更新节点的属性实现转换。

4. 列表节点的比较：列表节点的操作一般包括添加、删除和排序，列表节点需要我们给它一个 key 才能进行高效的比较。

### 组件间通讯

1.props 和$emit

​ 1).父组件传递了 message 数据给子组件，并且通过 v-on 绑定了一个 getChildData 事件来监听子组件的触发事件；

​ 2).子组件通过 props 得到相关的 message 数据,最后通过 this.$emit 触发了 getChildData 事件。

2.$bus 事件总线

```
import Vue from 'vue'
export default new Vue()
import Bus from './bus.js'
Bus.$emit('val', this.elementValue)
Bus.$on('val', elementValue => {
		console.log(elementValue)
	})
```

3.VueX

### 为什么选 vue vue 和 react 区别

vue 体积小，易用于小型项目，有双向绑定，不用直接操作 DOM，容易上手，国人开发在中国使用率更高

区别：react 更适用于大型企业，没有双向绑定，谷歌公司开发，生态圈更大，react 是 JSX 书写，vue 使用 HTML 模板书写。

### Vue 的双向绑定原理(远景)

vue 通过 Object.defineProperty 的 set 和 get 进行数据劫持和结合发布者订阅者模式进行更改 DOM。

首先 vue 有一个监听者 obserber 用于监听数据的变化，当数据发生变化时，通过 Object.defineProperty 的 set 和 get 拦截数据，传给订阅者，由于订阅者过多所以有个监听器用于管理和通知订阅者的，解析器 compile 用于解析每个元素节点的指令和解析，根据指令模板替换数据，以及绑定相应的更新函数，订阅者用于收集每个属性的变化并将指令绑定相应的函数，从而更新视图。

---

首先数据存放在 vue 的 data 中，然后利用递归将 observer 用 Object.keys 和 forEach 将 data 中的每一个属性遍历出来，并利用 Object.defineProperty 的 set 和 get 属性监听 data 中的每一个数据变化。然后有个 dep 函数，里面有 subs 订阅器数组用来收集订阅者的，dep 原型里面有两个函数对象，一个 addSub 函数对象用于 subs 数组添加订阅者，还有另一个 notify 用于遍历每个订阅者并将每个订阅者绑定 update 方法。

通知所有订阅者，数值一旦变化，notify 被调用，然后通知每一个监听者，subs 里面有好多 watcher，执行 update，update 调用观察者原型的 run 方法，run 调用 get 方法

观察者模式是一对多的一种模式，一：你改了某一个 data 数据，多：页面上凡是用了这个数据的地方，都更新 ，因此多地方都观察这个 data

observer：遍历 data 中的所有属性并在每个方法上添加 Object.defineProperty 的 set 和 get 方法进行数据劫持。

第一步监听每个数据变化 compile 解析 html 中指令替换成数据，初始化视图。创建 watcher，绑定更新函数，并会触发在 Object.defineProperty 里的 get 方法里面的 addSub 方法，该方法会将 watcher 添加到订阅器 dep 中

第二步告诉 watcher 订阅者触发更新函数 update

第三步 watcher 订阅者的由来

**观察者** ：利用`Obeject.defineProperty()`来监听属性变动 那么将需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 `setter`和`getter` 这样的话，给这个对象的某个值赋值，就会触发`setter`，那么就能监听到了数据变化。

**订阅器** ：用于监听 Data 的改变，当 Data 发生改变的时候，会遍历所有订阅者并添加 update 方法，

**解析器** ：将模板中的变量替换成数据，初始化渲染页面视图，并将每个指令节点绑定更新函数，添加监听数据订阅者，数据变化通知更新视图。

**订阅者**： 1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个 update()方法
3、待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发 Compile 中绑定的回调，则功成身退。

数据对象放到 data 中，然后 observer 用 Object.keys(data)和 forEach 将 data 进行遍历

**响应式** ：把数据填充到页面叫响应式

### Vue 的 key 值作用

为什么有 key 值？如果没有 key 值得话，diff 算法会全部比较，会一项一项的比较，全部元素替换，没有做到最小更新。有了 key 值得话就更改一项。

如果删除前面的一项 key 值会发生变化，所以会被重新渲染，并且可能产生 Bug

加索引行吗？不行，因为索引可能发生改变，加一个时间戳加 key 值。

### v-model 的原理说一下？

通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信 桥梁，达到数据变化->视图更新在初始化 vue 实例时，遍历 data 这个对象，给每一个键值对利用 Object.definedProperty 对 data 的键值 对新增 get 和 set 方法，利用了事件监听 DOM 的机制，让视图去改变数据。

### 介绍一下虚拟 DOM

1、虚拟 DOM 本质就是用一个原生的 JavaScript 对象去描述一个 DOM 节点。是对真实 DOM 的一层抽象。 2、在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产生性能问题，所以需要这一层抽象，在 patch 过程中尽可能地一次性将差异更新到 DOM 中，这样保证了 DOM 不会出现性能很差的情况。 3、Vue2.x 中的虚拟 DOM 主要是借鉴了 snabbdom.js，Vue3 中借鉴 inferno.js 算法进行优化。

### JQuery 和 vue 的区别 vue 好在哪里

JQuery 是通过$直接操作 DOM，vue 不是直接更改 DOM，vue 通过虚拟 DOM 更改 DOM，JQuery 比 vue 更加轻量级更原生，

vue 通过虚拟 DOM 更改数据大大减少性能损耗，为什么减少损耗？当视图发生改变时并不是直接更改 DOM 而是放在一个对象里，然后进行对比 DOM 改变，只有

### 获取子节点得方法

children childNodes

### 谈谈你对 webpack 的了解

```
入口  entery：“./pages”

出口 output: {
    filename: 'index',
    path: path.resolve(__dirname, '/dist')
  }
loader：moludes: [
    rules: [
        {
            test: /\.scss$/,
            use: [
                {
                     loader: "sass-loader" // 将 Sass 编译成 CSS
                }
           ]
        }
]
插件
```

### 浏览器的渲染过程

浏览器将获取的 HTML 文档解析成 DOM 树。

处理 CSS 标记，构成层叠样式表模型 CSSOM(CSS Object Model)。

将 DOM 和 CSSOM 合并为渲染树(`rendering tree`)，代表一系列将被渲染的对象。

渲染树的每个元素包含的内容都是计算过的，它被称之为布局`layout`。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。

将渲染树的各个节点绘制到屏幕上，这一步被称为绘制`painting`。当什么什么改变的时候才有重排和回流

### process.nextTick 和 setImmediate 的区别

-   nextTick 把回调函数放在当前执行栈的底部
-   setImmediate 把回调函数放在当前事件队列的底部

## 数据结构与算法

存储结构四种：顺序存储(数组)，链式存储（对象），散列存储（哈希），索引存储（key-value）

逻辑结构：集合，线性结构，树形结构，图形结构

数据结构定义：数据结构是指相互之间存在着一种或多种关系的数据元素的**集合**和该集合中数据元素之间的关系组成 。
常用的数据结构有：数组，栈，链表，队列，树，图，堆，散列表等。

### 栈（static）

简介：栈和队列的基本操作是线性表的子集。限定仅在表尾进行插入或者删除的线性表。对于栈来说，表尾端称为栈顶（top），表头端称为栈低（bottom）。不含元素的空表称为空栈。因为栈限定在表尾进行插入或者删除，所以栈又被称为`后进先出`的线性表（简称 LIFO:`Last in, First out.`结构）。

例子：浏览器历史记录（浏览器返回按钮）

| 方法名  |                                                      |
| ------- | ---------------------------------------------------- |
| pop     | 删除此堆栈顶部的对象，并将该对象作为此函数的值返回。 |
| peek    | 查看此堆栈顶部的对象，而不从堆栈中删除它。           |
| isEmpty | 测试此堆栈是否为空。                                 |
| push    | 将项目推送到此堆栈的顶部。                           |
| size    | 返回栈中元素的数目                                   |
| clear   | 清除栈里所有元素                                     |

数据的逻辑结构：[逻辑关系](https://baike.baidu.com/item/逻辑关系)是指数据元素之间的前后间关系，而与他们在计算机中的存储位置无关

-   集合：数据结构中的元素之间除了“同属一个集合” 的相互关系外，别无其他关系；
-   线性结构：数据结构中的元素存在一对一的相互关系；
-   数据结构中的元素存在一对多的相互关系；
-   [图形结构](https://baike.baidu.com/item/图形结构)：数据结构中的元素存在多对多的相互关系

### 队列（Queue）

概括：队列是一种特殊的[线性表](https://baike.baidu.com/item/线性表)，特殊之处在于它只允许在表的前端（front）进行删除操作，而在表的后端（rear）进行插入操作，和栈一样，队列是一种操作受限制的线性表。进行插入操作的端称为队尾，进行删除操作的端称为队头。队列中没有元素时，称为空队列。

| 方法名  |                                                  |
| ------- | ------------------------------------------------ |
| enqueue | 向队尾添加一个或多个新的项                       |
| dequeue | 移除队列第一项，并返回                           |
| peek    | 返回队列中第一个元素                             |
| isEmpty | 查看队列是否为空                                 |
| size    | 返回队列包含的元素个数，与数组的 length 属性类似 |

### 树（Tree）

### 堆（Heap）

### 数组（Array）

数组是可以再内存中连续存储多个元素的结构，在内存中的分配也是连续的，数组中的元素通过数组下标进行访问，数组下标从 0 开始。例如下面这段代码就是将数组的第一个元素赋值为 1。

int[] data = new int[100]；data[0] = 1;
优点：
1、按照索引查询元素速度快
2、按照索引遍历数组方便

缺点：
1、数组的大小固定后就无法扩容了
2、数组只能存储一种类型的数据
3、添加，删除的操作慢，因为要移动其他的元素。

适用场景：
频繁查询，对存储空间要求不大，很少增加和删除的情况。

### 链表（Listed List）

### 图（Graph）

### 散列表（Hash）

存储结构：顺序存储结构和链式存储结构，索引和哈希

​ 顺序存储结构：数组

Hash：散列，通过关于键值(key)的函数，将数据映射到内存存储中一个位置来访问。这歌过程叫做 Hash，这个映射函数称作散列函数，存放记录的数组称作哈希表(Hash Table)，又叫哈希表。

-   数据结构：数组、链表、栈、队列、散列表、二叉树、堆、跳表、图、树
-   算法： 递归、排序、二分查找、搜索、哈希算法、贪心算法、分治算法、回溯算法、动态规划、字符串匹配算法

### 排序算法

稳定排序：冒泡排序，插入排序，归并排序，计数排序，桶排序，基数排序

**快速排序** 基准值放中间 小的放左边 大的放右边 当有最不稳定

**冒泡排序** 比较相邻的元素。如果第一个比第二个大，就交换他们两个 把最大值放在后面

**选择排序** 找到最小值，把最小值放在前面

**希尔排序**

**插入排序** 将第一个数和第二个数排序，然后构成一个有序序列；将第三个数插入进去，构成一个新的有序序列；对第四个数、第五个数......直到最后一个数

**归并排序** 排序 1，2 排序 3，4 排序 1，2，3，4 排序 5，6 排序 7，8 排序 5，6，7，8 排序 1，2，3，4，5，6，7，8

**堆排序**

**计数排序** 将数字放到对应位置上，有两个的话加一，然后再展开

**桶排序**

**基数排序** 排序十位再排序个位

### 哈希算法

特点：易压缩，单向性，抗碰撞性

在一万首歌里找出一首歌是很困难的，但是将每首歌转化为固定长度的数字

### 回溯

从问题的某一种可能出发, 搜索从这种情况出发所能达到的所有可能, 当这一条路走到” 尽头 “的时候, 再倒回出发点, 从另一个可能出发, 继续搜索. 这种不断” 回溯 “寻找解的方法, 称作” 回溯法 “。

### 递归

为了描述问题的某一状态，必须用到该状态的上一状态，而描述上一状态，又必须用到上一状态的上一状态……这种用自已来定义自己的方法，称为递归定义。形式如 f(n) = n\*f(n-1), if n=0,f(n)=1.

我是啥子

### 时间复杂度与空间复杂度

**时间复杂度**：

```
var` `i = 1;``while` `(i <= n) {``  ``i = i * 10;``}
```

在这段代码中，可以看到 while 里边，作为判断条件的 i 被每次\*10，那么所以说最后循环的次数并不是 n 次，而是说十分之一 n 次，所以说这个时候的时间复杂度是 10i=n，i=logn，所以得出结论就是时间复杂度是 T(n)=O(logn)

复杂度相加：O(n 方) + O(n) = O(n 方)

**空间复杂度**：

let d = 1; 空间复杂度为 O(1)

let a = Array(n) ; 空间复杂度为 O(n)

```
let arr=[]
for (var i = 0; i < n; i++) {
  arr[i]=i
  for (var j = 0; j < n; j++) {
    arr[i][j]=j
  }
}
```

空间复杂度为 O(n 方)

## JQuery

### 如何发起请求

```
$.ajax({
     url: "http://localhost/sltest/test4.php",      //请求接口的地址
     type: "GET",                                   //请求的方法GET/POST
     data: {                                        //需要传递的参数
        name: 'sl',
        password: '123456',
     },
     success: function (res) {                      //请求成功后的操作
          console.log(res);                          //在控制台输出返回结果
      },
     error: function (err) {                       //请求失败后的操作
          console.log(22);                          //请求失败在控制台输出22
       }
   })
```

## webpack

### loader 和 plugin 的区别？spa 单页面

1. loader 用于加载某些资源文件。
   因为 webpack 只能理解 JavaScript 和 JSON 文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的 loader 将资源转化，加载进来。从字面意思也能看出，loader 是用于加载的，它作用于一个个文件上。
2. plugin 用于扩展 webpack 的功能。
   目的在于解决 loader 无法实现的其他事,它直接作用于 webpack，扩展了它的功能。当然 loader 也是变相的扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域。而 plugin 的功能更加的丰富，而不仅局限于资源的加载。比如压缩文件

### 常用 loader 以及 plugin

样式：style-loader、css-loader、less-loader、sass-loader 等

文件：raw-loader、file-loader 、url-loader 等

编译：babel-loader、coffee-loader 、ts-loader 等

校验测试：mocha-loader、jshint-loader 、eslint-loader 等

## 深入了解 JS

### 浅谈 typeof 和 instanceof 的实现原理

**typeof**

在判读除 null 之外的基本数据类型可以准确判断 在判断 object 的时候不能细致判断出是那种 Object，

底层原理：在变量的机器码的低位 1-3 位存储其类型信息

000 对象 010 浮点 100 字符串 110 布尔 1 整数 全是 0null -2^30undefined

因此将 null 数据类型为 object

## TypeScript

**优点：**

1：快速简单，易于学习。

2：编译时提供错误检查， 在代码运行前就会进行错误提示。

3：支持所有的 JS 库。

4：支持 ES6，提供了 ES6 所有优点和更高的生产力。

5：使用继承提供可重用性。

6：有助于代码结构。

7：通过定义模块来定义命名空间。

**缺点：**

1：需要长时间的来编译代码。

2：在使用第三方库时，需要有三方库的定义文件，并不是所有三方库都提供了定义文件，提供的定义文件是否准确也值得商榷。

## Node.js

node 常用 api

一、http 模块：

```jsx
http.createServer(function (req, res) {})
```

二、NodeJS 的模块：

```java
 1. exports.方法 = 方法
 2. module.exports = {}
 3. const 本地变量 = require('js地址')
```

三、 fs 模块

```jsx
  1. fs.readFile("文件路径",function(err,data){})
```

四、全局变量

```undefined
  1. __dirname
  2. __filename
```

五、path 模块：

```css
  1. path.join()
  2. path.resolve()
  3. path.extname()
```

六、 mime 模块(第三方模块)

```bash
  mime.getType() :  文档类型
  res.writeHead(200, { "Content-type": mime.getType('.jpg') });
```

七、 url 模块

```rust
  // http://www.yts.com/api/index.html?username=rose&type=flower
  1.  const result = url.parse(url地址)
  2.  result.pathname  --->  api/index.html
  3.  result.query    ---->  "username=rose&type=flower"
```

## **vuedraggable**

事件绑定

-   group:相同的组之间可以相互拖拽
    -   name:组名
    -   pull:
    -   put
-   sort: 是否开启内部排序,如果设置为 false,它所在组无法排序，在其他组可以拖动排序
-   move:自定义控制拖拽和停靠
-   ghostClass: 设置拖动元素的占位符类名,你的自定义样式可能需要加!important 才能生效，并把 forceFallback 属性设置成 true
-   animation:过渡时间
-   handle: 鼠标在指定元素上才允许拖动

事件监听

-   end:拖拽完成时的事件
-   add: 从 A 组拖动到 B 组完成的事件,当当前网页只有一页时不会触发该事件。
-   start:开始拖拽时触发的事件

属性

-   filter:排除不允许拖动的元素 filter:'.forbid'

**ace ** 在线代码编辑器

## 面试总纲

**HTML**

html 这标签语言真的基本没问啥

-   对语义化标签的理解 - 让人更可读，让机器更可读（利于 SEO）
-   meta 标签 - 问得多一点

    **CSS**

-   flex 布局，容器的属性，[项目]()的属性 - 阮一峰老师的两篇文档，给我看！flex-direction flex-wrap flex-flow justify-content align-items align-content
-   实现两栏（左固定 右自适应）/三栏（左右固定 中间自适应）布局
-   常见伪元素、伪类，越多越好
-   垂直水平居中方法，越多越好
-   八种定位属性的具体含义 - static relative fixed absolute sticky inherit initial unset
-   选择器和优先级，权重- 这里继承优先级最低，那么哪些属性可继承？
-   回流重绘的概念、触发条件，避免回流重绘的操作，flush 队列，display:none 触发的是哪一个，visibility:hidden 呢
-   两种盒子模型
-   BFC（块级格式上下文）的概念，触发条件，渲染规则，应用场景
-   移动端适配 - 这里涉及到的东西可就多了：媒体查询，viewport，em/rem，vw/vh

    \*\*
    \*\*

    **[JavaScript]()**

考察的更多的还是 es6，什么 let/const，数组对象的新方法，解构赋值，箭头函数，promise，async，generator，set,map 之类的

-   数据类型，原始类型和引用类型，存储方式（堆、栈），判断数据类型的三种方法
-   知道哪些数组的方法 - 红宝书上超多个方法，过一遍
-   null 和 undefined 的不同，为什么 == 结果是 true，而 === 结果是 false
-   闭包的概念，使用场景，缺点 - 我最认同《你不知道的[JavaScript]()》里写的当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。是一种现象。
-   原型链
-   var let const 的不同 - 概念的不同，变量提升，暂时性死区，顶层对象
-   箭头函数和普通函数的区别，this 的问题，为什么不能用作构造函数
-   promise - 为什么我就写了一个单词，因为我 promise 不太熟（。
-   this 的问题 - 永远指向最后调用它的函数（es5），call/apply/bind 改变指向（es6）
-   new 实例化一个对象 / new 一个对象时发生了什么？四个步骤
-   防抖节流的使用，区别，手写
-   继承的方法
-   Eventloop，可以顺便说一下浏览器渲染进程，哪些是宏任务微任务 - 经典看代码写输出
-   事件流，事件代理解决的问题
-   深浅拷贝的区别，如何解决循环引用，手写实现 - https://segmentfault.com/a/1190000020255831经典好文！不得不看！
-   load 和 DOMContentLoaded(DOM Ready)的区别 - 看红宝书
-   引用 script 标签时涉及到的 defer async
-   BOM：window location navigator - 解析 url 会用到 location 对象
-   JSBridge 的原理及使用 - 因为我实习做的是 APP 内嵌页，涉及到与[客户端]()通信

    **Vue**

经常有面试官问我看过[源码]()没，您好，没有（学习时间太短了，来不及嘛），所以[面经]()笔记没有涉及到[源码]()部分

顺便各位，读[源码]()有什么建议吗，嗯看真是难下手

-   单页应用的优缺点
-   computed 和 watch 的区别
-   v-for 和 v-if 的区别
-   双向绑定的原理，哪些操作不会触发视图更新 - Vue3 使用了 proxy 来代替传统的双向绑定
-   组件通信的方法，父子、隔代、兄弟，如果能再说说 Vuex 就更不错了
-   nextTick 是干嘛的
-   vue-router，history hash 的区别，需不需要后端配置，守卫，路由钩子
-   写一个通用组件需要考虑哪些问题

    \*\*
    \*\*

    **计算机网络 浏览器**

-   HTTP 相关，请求头响应头构成，HTTP0.9/1.0/1.1/2 各版本的区别，默认端口 80
-   HTTPS 相关，与 HTTP 区别，默认端口 443
-   状态码 1XX - 5XX，背就完事了
-   get / post 的区别
-   TCP / IP，OSI 七层模型 - 物理层 数据链路层 网络层 传输层 会话层 表示层 应用层
-   跨域相关，同源策略，跨域办法 - jsonp 以及缺点 / webSocket 协议 / CORS 以及分类，预检请求
-   进程线程的概念
-   从输入 URL 到浏览器完成页面渲染发生了什么 - 被问烂了，越详细越好。这里又有 web 优化问题
-   强缓存，协商缓存 - 相关的头部、状态码
-   cookie、session、localStorage、sessionStorage
-   安全问题，XSS、CSRF 概念，出现的场景，解决的办法 - XSS：CSP、HttpOnly Cookie；CSRF： samesite、Referer Check、Anti-CSRF-Token

    \*\*
    \*\*

    **手写**

-   new 实例化一个对象 / new 一个对象时发生了什么
-   继承
-   防抖节流
-   实现 call、apply、bind
-   数组去重
-   深浅拷贝
-   事件代理
-   vue 双向绑定

    \*\*
    \*\*

    **其他**

下面这些是我了解过并写在简历上的，所以被问了

-   webpack，常用 loader、plugin，如何配置
-   常用的 git 命令
-   linux 基本指令
-   css 预处理器相关，sass/less/postcss
-   使用 postman 来干啥
-   vim 基本指令

## git

git init 初始化

git status 查看文件目录与暂存区状态，看不到本地仓库

git add '文件名' 添加到暂存区

git add . 添加所有到暂存区

git commit -m '文件名' 已经到本地仓库里面了 （git commit -am '文件名' add 和 commit 的缩写 add 所有文件）

git commit -am '文件名' 添加到暂存区并添加到本地仓库

git log 查看提交日志信息

git reflog 查看所有日志信息

--pretty=oneline 一行显示

git reset --hard + '唯一标识'

git checkout 回退

git rm '文件名' 删除操作

git ls-files 查看 git 里面仓库目录

git config --global user.name 'your_username'

git config --global user.email your_email@domain.com

git config --list 查看所有配置 octotree

git push -u origin master 第一次提交前加-u 以后提交就成 git push 了

git checkout ’分支名‘切换到指定分支

git branch 查看所有分支

git checkout -b '分支名' 新建并切换到分支

切换到主干 合并分支 分支的作用是防止在线上出现 bug

git branch -d '文件名

git push origin '分支名' 添加到分支名

git reset --hard + ‘目标版本号’

git push -f 强推

git revert 反做

git revert -n 版本号”反做，并使用“git commit -m 版本名”提交

**git pull 和 git fetch 的区别？**

git pull 等于先 git fetch + git merge

git fetch 将远程仓库最新的数据拉取过来，

git merge 将拉取过来的数据和现在已经修改的分叉数据进行合并

git pull 可能会出现代码错误，最好是用 git fetch 然后 git merge

**git rebase 和 git merge 的区别**

## 程序员专用词

### 协程

（Coroutine）在执行过程中可中断去执行其他任务，执行完毕后再回来继续原先的操作。可以理解为两个或多个程序协同工作

协程特点在于**单线程**执行。
优势一：具有极高的执行效率，因为在任务切换的时候是程序之间的切换（由程序自身控制）而不是线程间的切换，所以没有线程切换导致的额外开销（时间浪费），线程越多，携程性能优势越明显。

优势二：由于是单线程工作，没有多线程需要考虑的同时写变量冲突，所以不需要多线程的[锁机制](https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143192823818768cd506abbc94eb5916192364506fa5d000)，故执行效率比多线程更高。

## Socket（套接字）

在计算机通信领域，socket 被翻译为“套接字”，它是计算机之间进行**通信**的**一种约定**或一种方式。通过 socket 这种约定，一台计算机可以接收其他计算机的数据，也可以向其他计算机发送数据

## 编程题：

**5 亿个数据如何找中位数**

分治法

分治法的思想是把一个大的问题逐渐转换为规模较小的问题来求解。

对于这道题，顺序读取这 5 亿个数字，对于读取到的数字 num，如果它对应的二进制中最高位为 1，则把这个数字写到 f1 中，否则写入 f0 中。通过这一步，可以把这 5 亿个数划分为两部分，而且 f0 中的数都大于 f1 中的数（最高位是符号位）。

划分之后，可以非常容易地知道中位数是在 f0 还是 f1 中。假设 f1 中有 1 亿个数，那么中位数一定在 f0 中，且是在 f0 中，从小到大排列的第 1.5 亿个数与它后面的一个数的平均值。

> **提示**，5 亿数的中位数是第 2.5 亿与右边相邻一个数求平均值。若 f1 有一亿个数，那么中位数就是 f0 中从第 1.5 亿个数开始的两个数求得的平均值。

对于 f0 可以用次高位的二进制继续将文件一分为二，如此划分下去，直到划分后的文件可以被加载到内存中，把数据加载到内存中以后直接排序，找出中位数。

> **注意**，当数据总数为偶数，如果划分后两个文件中的数据有相同个数，那么中位数就是数据较小的文件中的最大值与数据较大的文件中的最小值的平均值。

**查找英文文章里出现次数最多的字母和次数**

**模板字符串，es5 实现**

**两个字符串找最大公共子串**

**生成一个数值区间在 2-32 的随机数组**

**实现数组的 flat，并加入传参，参数为深度**

**函数柯里化**

**将算术表达式转化为后缀表达式**

**1000 枚硬币中有 10 枚金币，现在随机取 n 枚硬币，取到金币的概率是多少？（保留六位小数）**

```
掌阅科技：https://www.hotjob.cn/wt/zhangyue/web/index?brandCode=1#/pc
京东方：http://campus.boe.com/Portal/Apply/Index
小米：http://campus.hr.xiaomi.com/campus_apply/xiaomi/286/#/
数美科技：HR@ishumeil.com
狸米网校
转转 https://m.zhuanzhuan.com/platform/zzjob/index.html#/pc/campus/2021
58 http://campus.58.com/Portal/Apply/Index
去哪网 https://app.mokahr.com/recommendation-apply/qunar/4208?recommenderId=747270#/job/77fc3a39-b5a6-4f05-85f7-fa238036d311
搜狐 rdcplatform@sohu-inc.com
龙湖集团
海康威视 https://campushr.hikvision.com/school.html
```

获取 DOM 节点方法：document.quector(whtml {fons-size: 屏幕宽度 / 100} 那 1rem 和 1x 就等价了

```

### 语义化标签

**定义**：语义化的标签，合适的标签干合适的事情，旨在让标签有自己的含义。

**优点**：

- 即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构。
- 语义化标签会使HTML结构变的清晰，有利于维护代码和添加样式。
- 方便其他设备（如屏幕阅读器、盲人阅读器、移动设备）解析。
- 提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息。
- 便于团队开发和维护，语义化更具可读性，可以减少差异化。
- 通常标签语义化会使代码变的更少，使页面加载更快。

### 画一个三角形

```

.main {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-top: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
}

```

### BFC  是什么？为什么？怎么做？

为什么会出现盒子塌陷？

在CSS出现之前使用的P标签，是设计师要求的，是为了兼容css1.0之前的P标签，他要求每个段落都有相同间隔，所以当你对P标签设置了margin-top和margin-bottom时候就发现两个margin合并的情况，并且取最大值。

1. BFC在布局上不会影响到外面的元素，并且备普通元素没有的特性
2. 盒子塌陷只出现在上下
3. BFC是一个独立的元素，外面的元素不会影响到里面的元素
4. BFC元素不会与浮动元素发生重叠，可以用来清除浮动  -----左边宽度固定 ，中间自适应

直译为块级格式化上下文，数于同一个BFC的两个相邻Box会发生重叠，BFC里的元素与外面的元素不会发生影响  。

如何创建BFC？触发BFC的四个条件，满足其中一个即可

- position的值为：absolute，fixed
- display的值为：inline-block，table-cell，table-caption,table，flex；
- float的值不为none；(left,right,inheirt,)
- overflow的值不为visible；（scroll,hidden,auto,inherit）

边距重叠什么时候发生？

- 父与子之间，父级的margin与子级的margin会发生重叠
- 空元素的margin-top和margin-bottom会发生重叠
- 兄弟元素之间每个元素都有上下边距取最大边距

### CSS选择器以及权重

 !important  > 行内（1000）>id选择器（100） > 属性选择器 =  类选择器 = 伪元素选择器 > 标签选择器 = 伪类选择器（::after）> 通配符 > 继承 >浏览器默认属性

| 选择器                                                       | 示例                                                         |
| :----------------------------------------------------------- | :----------------------------------------------------------- |
| [类型选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors) | `h1 { }`                                                     |
| [通配选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors) | `* { }`                                                      |
| [类选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors) | `.box { }`                                                   |
| [ID选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors) | `#unique { }`                                                |
| [标签属性选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors) | `a[title] { }`                                               |
| [伪类选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes) | hover悬停，active激活，focus获得焦点，link超链接点击前，visited超链接点击之后，`p:first-child { }` |
| [伪元素选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements) | first-line，first-letter，after，before 设置元素的首行首字母样式，在元素的内容之前之后插入内容 |
| [后代选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Descendant_combinator) | `article p`                                                  |
| [子代选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Child_combinator) | `article > p`                                                |
| [相邻兄弟选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator) | `h1 + p`                                                     |
| [通用兄弟选择器](https://developer.mozilla.org/zh-CN/docs/Web/CSS/General_sibling_combinator) | `h1 ~ p`                                                     |

### CSS性能优化

1. 内联首屏CSS，当内联的话下载完html就可以渲染了
2. 异步加载CSS，将首屏外的CSS进行异步加载
3. 文件压缩
4. 删除无用CSS
5. 有选择的使用选择器

### Flex：1代表什么？

**flex: 1 === flex: 1 1 auto;**  flex-grown flex-shrink flex-basis

- 第一个参数表示: **flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大,如果值为1的话，平分剩余空间**
- 第二个参数表示: **flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小，如果值为1, 将不缩小**
- 第三个参数表示: **flex-basis** **给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小如果为0%以上面两个条件为准**

> flex阮一峰：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool（语法篇）

### CSS盒模型

IE盒模型：width = content + padding + border

W3C标准盒模型： width = content

### 清除浮动

```

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/

```

## js

### js事件循环

**前言**

javascript从诞生之日起就是一门单线程的非阻塞的脚本语言。这是由其最初的用途来决定的：与浏览器交互。单线程确保了执行顺序的同时也限制了JS执行效率，于是有了webworker。web worker技术开的多线程有着诸多限制，例如：所有新线程都受主线程的完全控制，不能独立执行。这意味着这些“线程” 实际上应属于主线程的子线程。

事件循环，js是单线程，所有的异步操作都是模拟出来的，所有任务可分为同步任务与异步任务，首先执行宏任务script整体代码，首先判定是同步任务还是异步任务如果是同步任务则进入主线程立即执行，如果是异步任务则进入任务队列，当主线程任务执行完就会将任务队列里的任务推入主线程中。异步任务被分为宏任务与微任务，当js执行到宏任务的时候会将他们加入到宏任务事件队列里面，执 行到微任务的时候会将他们推入到 当主线程，微任务比如说promise等，宏任务有setTimeout,setInterval等等。

当遇到同步任务则直接执行，如果遇到微任务则推入微任务队列，当遇到宏任务则推入宏任务队列，当整个宏任务执行完，则会执行所有微任务，当微任务执行完，则会查看是否有宏任务重复上述操作

**优先级**： process.nexttick() > promise.then () > setTimeout > setImmediate

**为什么会有事件循环**

1. JavaScript是单线程，非阻塞的

单线程：

JavaScript的主要用途是与用户互动，以及操作DOM。如果它是多线程的会有很多复杂的问题要处理，比如有两个线程同时操作DOM，一个线程删除了当前的DOM节点，一个线程是要操作当前的DOM阶段，最后以哪个线程的操作为准？为了避免这种，所以JS是单线程的。即使H5提出了web worker标准，它有很多限制，受主线程控制，是主线程的子线程。

非阻塞：通过 event loop 实现。

**浏览器和node的事件循环区别是什么**

**事件队列**

事件队列: 异步代码的执行，遇到异步事件不会等待它返回结果，而是将这个事件挂起，继续执行执行栈中的其他任务。当异步事件返回结果，将它放到事件队列中，被放入事件队列不会立刻执行起回调，而是等待当前执行栈中所有任务都执行完毕，主线程空闲状态，主线程会去查找事件队列中是否有任务，如果有，则取出排在第一位的事件，并把这个事件对应的回调放到执行栈中，然后执行其中的同步代码。

**宏任务和微任务**

为什么要引入微任务，只有一种类型的任务不行么？

页面渲染事件，各种IO的完成事件等随时被添加到任务队列中，一直会保持先进先出的原则执行，我们不能准确地控制这些事件被添加到任务队列中的位置。但是这个时候突然有高优先级的任务需要尽快执行，那么一种类型的任务就不合适了，所以引入了微任务队列。



### 原型链

1. 每个函数都有一个 prototype 属性
2. 函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的**实例**的原型
3. 那什么是原型呢？你可以这样理解：每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性。

### 继承

**原型链继承**

```

Child.prototype = new Parent();

```

缺点：1.引用类型的属性被所有实例共享（因为parent属性在Child的原型上） 			 2.在创建 Child 的实例时，不能向Parent传参

**借用构造函数（经典继承）**

```

function Child () {
Parent.call(this);
}

```

优点：1.引用类型的属性没有被实例共享  2.再创建Child的实例时，可以向Parent传参

缺点：1.方法都在构造函数中定义，每次创建一遍实例都会创建一遍方法

**组合继承**（原型链继承 + 构造函数继承）

```

function Child () {
Parent.call(this);
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

```

优点：融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式。

**原型式继承**

```

function createObj(o) {
function F(){}
F.prototype = o;
return new F();
}
var person = {
name: 'kevin'
}
var person1 = createObj(person);

```

就是 ES5 Object.create 的模拟实现，将传入的对象作为创建的对象的原型。

缺点：包含引用类型的属性值始终都会共享相应的值，这点跟原型链继承一样。

**寄生式继承**

```

function createObj (o) {
var clone = Object.create(o);
clone.sayName = function () {
console.log('hi');
}
return clone;
}

```

创建一个仅用于封装继承过程的函数，该函数在内部以某种形式来做增强对象，最后返回对象。

缺点：跟借用构造函数模式一样，每次创建对象都会创建一遍方法。

**寄生组合式继承**

```

function object(o) {
function F() {}
F.prototype = o;
return new F();
}
function prototype(child, parent) {
var prototype = object(parent.prototype);
prototype.constructor = child;
child.prototype = prototype;
}
// 当我们使用的时候：
prototype(Child, Parent);

```

### 闭包

1. 从理论角度：所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就相当于是在访问自由变量，这个时候使用最外层的作用域。
2. 从实践角度：以下函数才算是闭包：
   1. 即使创建它的上下文已经销毁，它仍然存在（比如，内部函数从父函数中返回）
   2. 在代码中引用了自由变量

### 作用域

1.查找变量声明

2.查找函数声明

JS真正解析之前，js会首先把整个文件进行预处理，以消除一些歧义，这个预处理的过程被称为预编译

GO 全局对象 Global Object
AO 活动对象 Activation Object

- 在函数被调用时产生，用来保存当前函数的执行环境，也叫执行期上下文
- 在函数调用结束时销毁



caller：谁调用

scopes: 作用域链

### 变量提升

var  function变量提升

function在var的后面

### 浮点数精度

0.1 + 0.2 是否等于 0.3

因为0.1转成二进制是一个无限循环的数，浮点数以64位存储

### 添加元素

document.getElementById('myid').appendChild(ele)

### 虚拟Dom 与 真实Dom

**为什么说直接操作/频繁的操作DOM会性能差?**

JS引擎和DOM引擎是独立的，当调用Dom API的时候，首先要挂起JS引擎然后执行Dom API，激活DOM引擎，重绘后再调用JS引擎执行之后的代码，没有批量处理优化。引擎间频繁的切换会浪费性能。

虚拟DOM和真实DOM的区别和优化

1. 虚拟DOM不会立马进行排版和重绘操作
2. 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后在真实DOM中进行排版和重绘，减少过多的DOM节点重排和重绘损耗。
3. 虚拟 DOM 有效降低大面积真实 DOM 的重绘与排版，因为最终与真实 DOM 比较差异，可以只渲染局部

### Error

- ReferenceError:找不到对象时
- TypeError:错误的使用了类型或对象的方法时
- RangeError:使用内置对象的方法时，参数超范围
- SyntaxError:语法写错了
- EvalError:错误的使用了Eval
- URIError:URI错误

### CommonJS,AMD,CMD,ES6模块

**什么是模块化？**

- 将一个复杂的程序，依据一定的规则(规范)封装成一个或多个块(文件), 并进行组合在一起
- 块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信

**为什么要模块化？**

1.使用模块化开发能解决文件之间的依赖关系，按需加载。

2.使用模块化开发可以避免命名的冲突。

3.使用模块化开发能进行代码的复用。

4.维护性更高。

**CommonJS和ES6的区别**

1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。
2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。
3. CommonJs 是单个值导出，ES6 Module可以导出多个
4. CommonJs 是动态语法可以写在判断里，ES6 Module 静态语法只能写在顶层
5. CommonJs 的 this 是当前模块，ES6 Module的 this 是 undefined

CommonJS

1. 对于基本数据类型，属于复制。即会被模块缓存。同时，在另一个模块可以对该模块输出的变量重新赋值。
2. 对于复杂数据类型，属于浅拷贝。由于两个模块引用的对象指向同一个内存空间，因此对该模块的值做修改时会影响另一个模块。
3. 当使用require命令加载某个模块时，就会运行整个模块的代码。
4. 当使用require命令加载同一个模块时，不会再执行该模块，而是取到缓存之中的值。也就是说，CommonJS模块无论加载多少次，都只会在第一次加载时运行一次，以后再加载，就返回第一次运行的结果，除非手动清除系统缓存。
5. 循环加载时，属于加载时执行。即脚本代码在require的时候，就会全部执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。
6. require('')  module.exports  exports

ES6模块

1. ES6模块中的值属于【动态只读引用】。
2. 对于只读来说，即不允许修改引入变量的值，import的变量是只读的，不论是基本数据类型还是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
3. 对于动态来说，原始值发生变化，import加载的值也会发生变化。不论是基本数据类型还是复杂数据类型。
4. 循环加载时，ES6模块是动态引用。只要两个模块之间存在某个引用，代码就能够执行。
5. export  export default  import

**CommonJS**

服务端：同步加载

浏览器端：提前编译打包处理 安装 browserify   执行browserify  原文件位置 -o 目标位置

暴露：module.exports = value 与 exports.XXX = value     暴露的是对象

引入： requrire('./')

**AMD**

专门用于浏览器端  也称require.js

暴露：define(['module1','module2'], function(m1, m2){ return 模块})

引入：require(['module1','module2'], function(m1, m2){ 使用m1/m2})

**CMD**

阿里人写的，作为了解，卖给国外了

ES6

export

export default

**IIFE**立即调用函数表达式

### 字符串API

length()—属性返回字符串的长度

indexOf()—属性返回字符串中指定文本首次出现的索引（位置）

lastIndexOf()—属性返回字符串中指定文本最后一次出现的索引（位置）

search()—属性返回字符串中特定值的字符串的首次出现的索引（位置）

toUpperCase()—转为大写

toLowerCase();—转为小写

substring(start, end):—开始下标到结束下标。如果省略第二个参数表示截取到结尾。

substr(start, length):—从start开始截取，一共最多截取length，不写length，直接截取到结尾

trim();—去除首尾空白符

split(separator,howmany);—separator必需。字符串或正则表达式，从该参数指定的地方分割 。howmany 可选。该参数可指定返回的数组的最大长度。

slice();—提取字符串片段

for of 遍历

at();—返回字符串给定位置的字符

includes();—返回布尔值，表示是否找到了参数字符串。

startsWith();—返回布尔值，表示参数字符串是否在源字符串的头部。

endsWith();—返回布尔值，表示参数字符串是否在源字符串的尾部。

repeat();—方法返回一个新字符串，表示将原字符串重复n次。

padStart();—字符串补全长度的功能，用于头部补全。

padEnd();—用于尾部补全。

match();—找到一个或多个正则表达式匹配

replace();替换与正则表达式匹配的子串

function formatDate(date, format) {
    var obj = {
        yyyy: date.getFullYear(),
        yy: ('' + date.getFullYear()).slice(-2),
        MM: ('0' + (date.getMonth() + 1)).slice(-2),
        M: date.getMonth() + 1,
        dd: ('0' + date.getDate()).slice(-2),
        d: date.getDate(),
        HH: ('0' + date.getHours()).slice(-2),
        H: date.getHours(),
        hh: ('0' + date.getHours() % 12).slice(-2),
        h: date.getHours() % 12,
        mm: ('0' + date.getMinutes()).slice(-2),
        m: date.getMinutes(),
        ss: ('0' + date.getSeconds()).slice(-2),
        s: date.getSeconds(),
        w: ['日', '一', '二', '三', '四', '五', '六'][date.getDay()],
    }
    return format.replace(/(\w+)/g, ($1) => {
        return obj[$1];
    })
}

### Match



str.match('.at') 和 RegExp的用法相同

### 数组API

会改变原来数组的：
pop()—删除数组的最后一个元素并返回删除的元素。
push()—向数组的末尾添加一个或更多元素，并返回新的长度。
shift()—删除并返回数组的第一个元素。
unshift()—向数组的开头添加一个或更多元素，并返回新的长度。
reverse()—反转数组的元素顺序。
sort()—对数组的元素进行排序。
splice()—用于插入、删除或替换数组的元素。 返回的是含有被删除的数组
································································································
不会改变原来数组的：
concat()—连接两个或更多的数组，并返回结果。
every()—检测数组元素的每个元素是否都符合条件。
some()—检测数组元素中是否有元素符合指定条件。
filter()—检测数组元素，并返回符合条件所有元素的数组。
indexOf()—搜索数组中的元素，并返回它所在的位置。
join()—把数组的所有元素放入一个字符串。
toString()—把数组转换为字符串，并返回结果。
lastIndexOf()—返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。
map()—通过指定函数处理数组的每个元素，并返回处理后的数组。
slice()—选取数组的的一部分，并返回一个新数组。
valueOf()—返回数组对象的原始值。

### Promise

**特别注意**

new Promise()方法属于同步代码。

promise函数对象上的方法有then，catch， finally  实 例对象上有all，race，reject，resolve

**Promise的三种状态，catch和reject的区别**？

catch是原型上的属性，reject是promise属性

catch会捕获promise链的所有异常

reject返回一个错误的reject

**回调地狱**

```

doSomething( function(result) {
doSomethingElse( result, function( newResult) {
doThirdThing( newResult, function(finalResult) {
console.log( 'Got the final result :' + finalResult)
},failureCallback )
}, failureCallback)
}, failureCallback )

```

1. 回调函数嵌套，代码水平向右发展 ，阅读不方便
2. 每个函数都要处理异常，处理异常十分麻烦

**用promsie链式调用解决回调地狱问题**

```

doSomething(I . then( function(result) {
return doSomethingElse( result)
})
.then( function(newResult) {
return doThirdThing( newResult )
})
.then(function( finalResult) {
console.log( 'Got the final result: ' + finalResult)
})
.catch(failureCallback)

```

1. 代码从上往下写，同步的写法，阅读方便
2. 处理异常用统一的catch处理，catch具有异常传透

**先指定回调函数还是先改变状态**

```

//常规:先指定回调函数，后改变的状态
new Promise((resolve, reject) => {
setTimeout(( ) => {
resolve(1) //后改变的状态(同时指定数据)，异步执行回调函数
}，1000);
}).then(// 先指定回调函数，保存当前指定的回调函数
value => {},
reason => {console. 1og('reason', reason)}
//如何先改状态，后指定回调函数
new Promise((resolve, reject) => {
resolve(1) //先改变的状态(同时指定数据)
}).then(//后指定回调函数，异步执行回调函数
value => {console.1og( 'value2', value)},
reason => {console. 1og( 'reason2', reason)}
)

```

### 迭代器与生成器

迭代器：字符串，数组，映射，集合，对象，arguments，DOM集合类型

` let newArr = arr[Symbol.iterator]() newArr.next()`

生成器：可以暂停函数 `let generatorFn = function* (a) { yield ++a; }     generatorFn (5).next()`



### async和await的了解

async加在函数声明之前，使其成为async function，则此时函数返回值为promise，是迭代器与生成器和promise的语法糖

### 匿名函数和回调函数

**匿名函数** ：没有名字的函数，并且没有赋值给变量

**回调函数** ：一般将一个函数的返回值传给另一个函数 ，

​					优势：1. 如果传递的是匿名函数可以节省一个全局变量  2. 节省代码 3. 提高性能

### **Map**和**Set**两种新的数据结构

- Map是类似Object的一种键值对集合，区别在于Map的键不仅限于是字符串，其他各种类型的值包括对象都可以成为Map的键
-  Set是类似数组的一种数据结构，不同点在于Set中没有重复的值

### this指向

- 实际上this的最终指向的是那个调用它的对象
- 如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。
- 返回值，如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象那么this还是指向函数的实例。

### new 做了什么？

1.创建空对象

2.将构造函数中的作用域赋给新对象（因此this就指向了新对象）

3.执行构造函数中的代码（为新对象添加属性）

4.返回新对象

```

let liu = new Person('liu','18')

let a = {}
a.**proto** = Person.prototype
Person.call(a)

```

### 事件委托  事件捕获 事件冒泡

**事件委托**

事件就是我们普通绑定的事件。委托就是不绑定在当前元素上，而是绑定在了父级或者祖辈元素上，通过event事件对象的target属性，获取当前点击的精确元素。

原理： 使用了冒泡的原理。

优点：1.减少for循环，减少绑定事件数量，减少了内存泄露的概率。2.可以给未来的元素绑定事件

缺点：

1. 事件委托基于冒泡，对于不冒泡的事件不支持。
2. 层级过多，冒泡过程中，可能会被某层阻止掉。
3. 理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托，比如在table上代理td，而不是在document上代理td。
4. 把所有事件都用代理就可能会出现事件误判。比如，在document中代理了所有button的click事件，另外的人在引用改js时，可能不知道，造成单击button触发了两个click事件。

### Call,apply,bind的区别

apply 第一个参数是this指向，第二个参数是函数接受的参数，立即执行

call 第一个参数是this指向，后面传入的是一个参数列表 立即执行

bind 第一参数也是this的指向，后面传入的也是一个参数列表(但是这个参数列表可以分多次传入，call则必须一次性传入所有参数)，但是它改变this指向后不会立即执行，而是返回一个永久改变this指向的函数。

### setTimeout,promise,async await之间的区别

async await：async 可以让函数具有异步特征，但是仍是同步执行，当有返回值时，返回的是一个promise.resolve包装的期约对象，，当遇到await的时候，会等待后面的promise执行完，然后执行后面代码。

promise：Promise本身是同步的，但在执行resolve或者rejects时是异步的，即then方法是异步的。

setTimeout：异步执行函数是宏任务



### require、export和export default的区别

common JS  module.exports    require()

ES6 模块不共享全局命名空间。

模块顶级 this 的值是 undefined（常规脚本中是 window）。

ES6 模块默认在严格模式下执行。

ES6 模块是异步加载和执行的。

require是值的拷贝，import是值的引用

ES可以先使用再引用，requrie必须先引用

require 可以放到模块中去  module.exports 的会被缓存 ES6的不会被缓存

ES6 最大的一个改进就是引入了模块规范    A 依赖B  ,B依赖C，C依赖D， 他会先导入A发现需要B再导入B以此类推

export：export 语句与导出值的相对位置或者

export 关键字在模块中出现的顺序没有限制。export 语句甚至可以出现在它要导出的值之前

```

// 允许
const foo = 'foo';
export { foo };
// 允许
export const foo = 'foo';
// 允许，但应该避免
export { foo };
const foo = 'foo';

```

export default只能有一个，重复的话会报错。 导入的时候不需要加大括号

import 和export一样，必须出现在模块的顶级（不是顶部，是顶级）导入的时候需要加大括号

### 箭头函数和普通函数的区别

1. 箭头函数 没有arguments对象，普通函数有
2. 箭头函数无this,普通函数有this并且可以通过call，apply，bind改变this
3. 普通函数可以当构造函数使用，箭头函数不可以

### javascript中有几种数据类型？

- 基本数据类型：Undefine Null String Number Boolean Symble(ES6新增)  BigInt(ES10新增)
- 引用数据类型有 Object Array Function

### 说一说你对原型链的理解？

**原型的作用**：①数据共享，节约资源。②继承

**原型链的定义**：每个构造函数都有一个原型对象，原型有一个属性指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数的原型。这样就在实例和原型之间构造了一条原型链。

特例：

```

Object.**proto** === Function.prototype //true
Object.**proto** === Function.**proto**//true
Object.prototype === Function.prototype.**proto** // true
//因此
Function instanceof Object //true
Object instanceof Function //true

```

### 判断是不是数组的五种方法？

​		**const arr = [1,2,3,4]**

1. arr instanceof Array //true
2. Object.prototype.toString.call(arr) === '[object Array]';
3. Array.isArray(arr)
4. arr.constructor ===  Array
5. arr.__ proto__ === Array.prototype

**判断是否为对象：**

Object.prototype.toString.call(arr) === '[object Object]';  （最靠谱）

obj.constructor === Object



### 正则

手机号正则表达式

```

/^1[3|4|5|7|8][0-9]{9}$/

```

邮箱正则表达式

```

/^[A-z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

```



### settimeout实现setInterval

```

function mySetInterval(fn, time) {
function interval(){
setTimeout(interval, time)
fn()
}
setTimeout(interval, time)
}

```

### setTimeout定时不准问题

原因：

1. 浏览器中的所有JavaScript都在单线程上执行，所以异步事件（比如鼠标点击和定时器）仅在线程空闲时才会被调度运行。
   2. 为了控制要执行的代码， JavaScript 配置了一个任务队列，这些异步事件任务会按照将它们添加到队列的顺序执行。
3. 而setTimeout() 的第二个参数（延时时间）只是告诉 JavaScript 再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

解决：

1. 在定时器开始前和运行时动态获取当前时间，在设置下一次定时时长时，在期望值基础上减去当前时延，以获得相对精准的定时运行效果。

   此方法仅能消除setInterval()长时间运行造成的误差累计，但无法消除单个定时器执行延迟问题

   2.Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。

### Fast-Click原理（京东2019）

检测到touched事件的时候，会通过DOM自定义事件发送一个Click事件，并将浏览器在300ms后的Click事件给阻止掉

缺点：脚本相对较大。

### new与Object.create()区别

- new创建一个对象，执行构造函数。
- Object.create相当于创建一个对象，但是不执行构造函数

### 暂时性死区

如果区块中存在`let`和`const`命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。声明之前的区域就形成了死区。

### 获取元素的大小和位置

obj.clientWidth //获取元素的宽度（width+padding）
 obj.clientHeight //元素的高度
 obj.offsetLeft //元素相对于父元素的left    是否有父元素有的话 .offsetParent 重复操作



### 事件委托 兼容性写法

```

addEventListener 新版本
attachEvent 老版本 事件类型前加 on

```

*/\*事件委托(事件代理):           即是把原先绑定子元素的事件（click，ablClick,keydown,...）委托给父元素，让父元素担当监听职务，           事件代理的原理是Dom元素的事件冒泡。*

  *//1.事件委托：父元素ul*     var ul=document.getElementsByTagName("ul")[0];     ul.addEventListener("click",fn1,false);*//DOM2级事件添加  单击,函数执行,冒泡;*     function fn1(e){*//函数执行*         var e=e||window.event; *//老式IE的兼容语句*         var tg=e.target;        switch (tg.id) {*//通过id控制*            case "first":alert("第一个li被单击了");            break;            case "two":alert("第二个li被单击了");            break;            case "third":alert("第三个li被单击了");            break;            case "fo":alert("第四个li被单击了");            break;        }     }

### fetch网络请求

1. 语法简洁，更加语义化，业务逻辑更清晰

2. 基于标准 Promise 实现，支持 async/await

```

fetch(url).then(response => response.json())`//解析为可读数据 .then(data => console.log(data))`//执行结果是 resolve 就调用 then 方法
.catch(err => console.log(`"Oh, error"`, err))``//执行结果是 reject 就调用 catch 方法

```

## vue

### diff算法

**传统方法：** 通过循环递归对节点进行比较，然后判断每个节点的状态以及要做的操作，然后根据虚拟dom进行渲染，复杂度为O(n^3)

**高效算法：** 复杂度为：O(n)

1. 同层比较：新的Diff算法是逐层进行比较，只比较同一层次的节点，

2. 不同类型节点的比较：如果发现新旧两个节点类型不同时，Diff算法会直接删除旧的节点及其子节点并插入新的节点，这是由于前面提出的不同组件产生的DOM结构一般是不同的，所以可以不用浪费时间去比较。

3. 相同类型节点比较：若是两个节点类型相同时，Diff算法会更新节点的属性实现转换。

4. 列表节点的比较：列表节点的操作一般包括添加、删除和排序，列表节点需要我们给它一个key才能进行高效的比较。



### 组件间通讯

1.props和$emit

​	1).父组件传递了message数据给子组件，并且通过v-on绑定了一个getChildData事件来监听子组件的触发事件；

​	2).子组件通过props得到相关的message数据,最后通过this.$emit触发了getChildData事件。

2.$bus事件总线

```

import Vue from 'vue'
export default new Vue()
import Bus from './bus.js'
Bus.$emit('val', this.elementValue)
Bus.$on('val', elementValue => {
console.log(elementValue)
})

```

3.VueX

### 为什么选vue  vue和react区别

vue体积小，易用于小型项目，有双向绑定，不用直接操作DOM，容易上手，国人开发在中国使用率更高

区别：react更适用于大型企业，没有双向绑定，谷歌公司开发，生态圈更大，react是JSX书写，vue使用HTML模板书写。

### Vue的双向绑定原理(远景)

vue通过Object.defineProperty的set和get进行数据劫持和结合发布者订阅者模式进行更改DOM。

首先vue有一个监听者obserber用于监听数据的变化，当数据发生变化时，通过Object.defineProperty的set和get拦截数据，传给订阅者，由于订阅者过多所以有个监听器用于管理和通知订阅者的，解析器compile用于解析每个元素节点的指令和解析，根据指令模板替换数据，以及绑定相应的更新函数，订阅者用于收集每个属性的变化并将指令绑定相应的函数，从而更新视图。

--------------------------------------------

首先数据存放在vue的data中，然后利用递归将observer用Object.keys和forEach将data中的每一个属性遍历出来，并利用Object.defineProperty的set和get属性监听data中的每一个数据变化。然后有个dep函数，里面有subs订阅器数组用来收集订阅者的，dep原型里面有两个函数对象，一个addSub函数对象用于subs数组添加订阅者，还有另一个notify用于遍历每个订阅者并将每个订阅者绑定update方法。

通知所有订阅者，数值一旦变化，notify被调用，然后通知每一个监听者，subs里面有好多watcher，执行update，update调用观察者原型的run方法，run调用get方法

观察者模式是一对多的一种模式，一：你改了某一个data数据，多：页面上凡是用了这个数据的地方，都更新 ，因此多地方都观察这个data

observer：遍历data中的所有属性并在每个方法上添加Object.defineProperty的set和get方法进行数据劫持。

第一步监听每个数据变化   compile解析html中指令替换成数据，初始化视图。创建watcher，绑定更新函数，并会触发在Object.defineProperty里的get方法里面的addSub方法，该方法会将watcher添加到订阅器dep中

第二步告诉watcher订阅者触发更新函数 update

第三步watcher订阅者的由来

**观察者** ：利用`Obeject.defineProperty()`来监听属性变动 那么将需要observe的数据对象进行递归遍历，包括子属性对象的属性，都加上	`setter`和`getter` 这样的话，给这个对象的某个值赋值，就会触发`setter`，那么就能监听到了数据变化。

**订阅器** ：用于监听Data的改变，当Data发生改变的时候，会遍历所有订阅者并添加update方法，

**解析器** ：将模板中的变量替换成数据，初始化渲染页面视图，并将每个指令节点绑定更新函数，添加监听数据订阅者，数据变化通知更新视图。

**订阅者**： 1、在自身实例化时往属性订阅器(dep)里面添加自己
                 2、自身必须有一个update()方法
                 3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。



数据对象放到data中，然后observer用Object.keys(data)和forEach将data进行遍历



**响应式** ：把数据填充到页面叫响应式

### Vue的key值作用

为什么有key值？如果没有key值得话，diff算法会全部比较，会一项一项的比较，全部元素替换，没有做到最小更新。有了key值得话就更改一项。

如果删除前面的一项key值会发生变化，所以会被重新渲染，并且可能产生Bug

加索引行吗？不行，因为索引可能发生改变，加一个时间戳加key值。

### v-model的原理说一下？

通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信 桥梁，达到数据变化->视图更新在初始化vue实例时，遍历data这个对象，给每一个键值对利用Object.definedProperty对data的键值 对新增get和set方法，利用了事件监听DOM的机制，让视图去改变数据。

### 介绍一下虚拟DOM

1、虚拟DOM本质就是用一个原生的JavaScript对象去描述一个DOM节点。是对真实DOM的一层抽象。 2、在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生性能问题，所以需要这一层抽象，在patch过程中尽可能地一次性将差异更新到DOM中，这样保证了DOM不会出现性能很差的情况。 3、Vue2.x中的虚拟DOM主要是借鉴了snabbdom.js，Vue3中借鉴inferno.js算法进行优化。

### JQuery和vue的区别 vue好在哪里

JQuery是通过$直接操作DOM，vue不是直接更改DOM，vue通过虚拟DOM更改DOM，JQuery比vue更加轻量级更原生，

vue通过虚拟DOM更改数据大大减少性能损耗，为什么减少损耗？当视图发生改变时并不是直接更改DOM而是放在一个对象里，然后进行对比DOM改变，只有

### 获取子节点得方法

children childNodes



### 谈谈你对webpack的了解

```

入口 entery：“./pages”

出口 output: {
filename: 'index',
path: path.resolve(\_\_dirname, '/dist')
}
loader：moludes: [
rules: [
{
test: /\.scss$/,
use: [
{
loader: "sass-loader" // 将 Sass 编译成 CSS
}
]
}
]
插件

```



### 浏览器的渲染过程

浏览器将获取的HTML文档解析成DOM树。

处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。

将DOM和CSSOM合并为渲染树(`rendering tree`)，代表一系列将被渲染的对象。

渲染树的每个元素包含的内容都是计算过的，它被称之为布局`layout`。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。

将渲染树的各个节点绘制到屏幕上，这一步被称为绘制`painting`。当什么什么改变的时候才有重排和回流

### process.nextTick 和 setImmediate的区别

- nextTick 把回调函数放在当前执行栈的底部
- setImmediate 把回调函数放在当前事件队列的底部

## 数据结构与算法

存储结构四种：顺序存储(数组)，链式存储（对象），散列存储（哈希），索引存储（key-value）

逻辑结构：集合，线性结构，树形结构，图形结构

数据结构定义：数据结构是指相互之间存在着一种或多种关系的数据元素的**集合**和该集合中数据元素之间的关系组成 。
常用的数据结构有：数组，栈，链表，队列，树，图，堆，散列表等。

### 栈（static）

简介：栈和队列的基本操作是线性表的子集。限定仅在表尾进行插入或者删除的线性表。对于栈来说，表尾端称为栈顶（top），表头端称为栈低（bottom）。不含元素的空表称为空栈。因为栈限定在表尾进行插入或者删除，所以栈又被称为`后进先出`的线性表（简称LIFO:`Last in, First out.`结构）。

例子：浏览器历史记录（浏览器返回按钮）

| 方法名  |                                                      |
| ------- | ---------------------------------------------------- |
| pop     | 删除此堆栈顶部的对象，并将该对象作为此函数的值返回。 |
| peek    | 查看此堆栈顶部的对象，而不从堆栈中删除它。           |
| isEmpty | 测试此堆栈是否为空。                                 |
| push    | 将项目推送到此堆栈的顶部。                           |
| size    | 返回栈中元素的数目                                   |
| clear   | 清除栈里所有元素                                     |

数据的逻辑结构：[逻辑关系](https://baike.baidu.com/item/逻辑关系)是指数据元素之间的前后间关系，而与他们在计算机中的存储位置无关

- 集合：数据结构中的元素之间除了“同属一个集合” 的相互关系外，别无其他关系；
- 线性结构：数据结构中的元素存在一对一的相互关系；
- 数据结构中的元素存在一对多的相互关系；
- [图形结构](https://baike.baidu.com/item/图形结构)：数据结构中的元素存在多对多的相互关系

### 队列（Queue）

概括：队列是一种特殊的[线性表](https://baike.baidu.com/item/线性表)，特殊之处在于它只允许在表的前端（front）进行删除操作，而在表的后端（rear）进行插入操作，和栈一样，队列是一种操作受限制的线性表。进行插入操作的端称为队尾，进行删除操作的端称为队头。队列中没有元素时，称为空队列。

| 方法名  |                                                |
| ------- | ---------------------------------------------- |
| enqueue | 向队尾添加一个或多个新的项                     |
| dequeue | 移除队列第一项，并返回                         |
| peek    | 返回队列中第一个元素                           |
| isEmpty | 查看队列是否为空                               |
| size    | 返回队列包含的元素个数，与数组的length属性类似 |



### 树（Tree）

### 堆（Heap）

### 数组（Array）

数组是可以再内存中连续存储多个元素的结构，在内存中的分配也是连续的，数组中的元素通过数组下标进行访问，数组下标从0开始。例如下面这段代码就是将数组的第一个元素赋值为 1。

int[] data = new int[100]；data[0]  = 1;
优点：
1、按照索引查询元素速度快
2、按照索引遍历数组方便

缺点：
1、数组的大小固定后就无法扩容了
2、数组只能存储一种类型的数据
3、添加，删除的操作慢，因为要移动其他的元素。

适用场景：
频繁查询，对存储空间要求不大，很少增加和删除的情况。

### 链表（Listed List）

### 图（Graph）

### 散列表（Hash）

存储结构：顺序存储结构和链式存储结构，索引和哈希

​				顺序存储结构：数组

Hash：散列，通过关于键值(key)的函数，将数据映射到内存存储中一个位置来访问。这歌过程叫做Hash，这个映射函数称作散列函数，存放记录的数组称作哈希表(Hash Table)，又叫哈希表。

- 数据结构：数组、链表、栈、队列、散列表、二叉树、堆、跳表、图、树
- 算法： 递归、排序、二分查找、搜索、哈希算法、贪心算法、分治算法、回溯算法、动态规划、字符串匹配算法

### 排序算法

稳定排序：冒泡排序，插入排序，归并排序，计数排序，桶排序，基数排序

**快速排序**   基准值放中间  小的放左边 大的放右边  当有最不稳定

**冒泡排序**  比较相邻的元素。如果第一个比第二个大，就交换他们两个   把最大值放在后面

**选择排序**   找到最小值，把最小值放在前面

**希尔排序**

**插入排序**  将第一个数和第二个数排序，然后构成一个有序序列；将第三个数插入进去，构成一个新的有序序列；对第四个数、第五个数......直到最后一个数

**归并排序** 排序1，2排序3，4排序1，2，3，4排序5，6排序7，8排序5，6，7，8排序1，2，3，4，5，6，7，8

**堆排序**

**计数排序** 将数字放到对应位置上，有两个的话加一，然后再展开

**桶排序**

**基数排序** 排序十位再排序个位

### 哈希算法

特点：易压缩，单向性，抗碰撞性

在一万首歌里找出一首歌是很困难的，但是将每首歌转化为固定长度的数字

### 回溯

从问题的某一种可能出发, 搜索从这种情况出发所能达到的所有可能, 当这一条路走到” 尽头 “的时候, 再倒回出发点, 从另一个可能出发, 继续搜索. 这种不断” 回溯 “寻找解的方法, 称作” 回溯法 “。

### 递归

为了描述问题的某一状态，必须用到该状态的上一状态，而描述上一状态，又必须用到上一状态的上一状态……这种用自已来定义自己的方法，称为递归定义。形式如 f(n) = n*f(n-1), if n=0,f(n)=1.

我是啥子

### 时间复杂度与空间复杂度

**时间复杂度**：

```

var` `i = 1;`` while` `(i <= n) { `` `i = i * 10;`}

```

在这段代码中，可以看到while里边，作为判断条件的i被每次*10，那么所以说最后循环的次数并不是n次，而是说十分之一n次，所以说这个时候的时间复杂度是10i=n，i=logn，所以得出结论就是时间复杂度是T(n)=O(logn)

复杂度相加：O(n方) + O(n) = O(n方)

**空间复杂度**：

let d = 1; 空间复杂度为O(1)

let a = Array(n) ; 空间复杂度为O(n)

```

let arr=[]
for (var i = 0; i < n; i++) {
arr[i]=i
for (var j = 0; j < n; j++) {
arr[i][j]=j
}
}

```

空间复杂度为O(n方)

## JQuery

### 如何发起请求

```

$.ajax({
url: "http://localhost/sltest/test4.php", //请求接口的地址
type: "GET", //请求的方法 GET/POST
data: { //需要传递的参数
name: 'sl',
password: '123456',
},
success: function (res) { //请求成功后的操作
console.log(res); //在控制台输出返回结果
},
error: function (err) { //请求失败后的操作
console.log(22); //请求失败在控制台输出 22
}
})

````



## webpack

### loader和plugin的区别？spa 单页面

1. loader 用于加载某些资源文件。
   因为 webpack 只能理解 JavaScript 和 JSON 文件，对于其他资源例如 css，图片，或者其他的语法集，比如 jsx， coffee，是没有办法加载的。 这就需要对应的loader将资源转化，加载进来。从字面意思也能看出，loader是用于加载的，它作用于一个个文件上。
2. plugin 用于扩展webpack的功能。
   目的在于解决loader无法实现的其他事,它直接作用于 webpack，扩展了它的功能。当然loader也是变相的扩展了 webpack ，但是它只专注于转化文件（transform）这一个领域。而plugin的功能更加的丰富，而不仅局限于资源的加载。比如压缩文件

### 常用loader以及plugin

样式：style-loader、css-loader、less-loader、sass-loader等

文件：raw-loader、file-loader 、url-loader等

编译：babel-loader、coffee-loader 、ts-loader等

校验测试：mocha-loader、jshint-loader 、eslint-loader等

## 深入了解JS

### 浅谈  typeof 和 instanceof  的实现原理

**typeof**

在判读除null之外的基本数据类型可以准确判断 在判断object的时候不能细致判断出是那种Object，

底层原理：在变量的机器码的低位1-3位存储其类型信息

000 对象 010浮点  100字符串 110布尔 1整数  全是0null  -2^30undefined

因此将null数据类型为object



## TypeScript

**优点：**

1：快速简单，易于学习。

2：编译时提供错误检查， 在代码运行前就会进行错误提示。

3：支持所有的JS库。

4：支持ES6，提供了ES6所有优点和更高的生产力。

5：使用继承提供可重用性。

6：有助于代码结构。

7：通过定义模块来定义命名空间。

**缺点：**

1：需要长时间的来编译代码。

2：在使用第三方库时，需要有三方库的定义文件，并不是所有三方库都提供了定义文件，提供的定义文件是否准确也值得商榷。

## Node.js

node常用api

一、http模块：

```jsx
    http.createServer(function(req,res){})
````

二、NodeJS 的模块：

```java
 1. exports.方法 = 方法
 2. module.exports = {}
 3. const 本地变量 = require('js地址')
```

三、 fs 模块

```jsx
  1. fs.readFile("文件路径",function(err,data){})
```

四、全局变量

```undefined
  1. __dirname
  2. __filename
```

五、path 模块：

```css
  1. path.join()
  2. path.resolve()
  3. path.extname()
```

六、 mime 模块(第三方模块)

```bash
  mime.getType() :  文档类型
  res.writeHead(200, { "Content-type": mime.getType('.jpg') });
```

七、 url 模块

```rust
  // http://www.yts.com/api/index.html?username=rose&type=flower
  1.  const result = url.parse(url地址)
  2.  result.pathname  --->  api/index.html
  3.  result.query    ---->  "username=rose&type=flower"
```

## **vuedraggable**

事件绑定

-   group:相同的组之间可以相互拖拽
    -   name:组名
    -   pull:
    -   put
-   sort: 是否开启内部排序,如果设置为 false,它所在组无法排序，在其他组可以拖动排序
-   move:自定义控制拖拽和停靠
-   ghostClass: 设置拖动元素的占位符类名,你的自定义样式可能需要加!important 才能生效，并把 forceFallback 属性设置成 true
-   animation:过渡时间
-   handle: 鼠标在指定元素上才允许拖动

事件监听

-   end:拖拽完成时的事件
-   add: 从 A 组拖动到 B 组完成的事件,当当前网页只有一页时不会触发该事件。
-   start:开始拖拽时触发的事件

属性

-   filter:排除不允许拖动的元素 filter:'.forbid'

**ace ** 在线代码编辑器

## 面试总纲

**HTML**

html 这标签语言真的基本没问啥

-   对语义化标签的理解 - 让人更可读，让机器更可读（利于 SEO）
-   meta 标签 - 问得多一点

    **CSS**

-   flex 布局，容器的属性，[项目]()的属性 - 阮一峰老师的两篇文档，给我看！flex-direction flex-wrap flex-flow justify-content align-items align-content
-   实现两栏（左固定 右自适应）/三栏（左右固定 中间自适应）布局
-   常见伪元素、伪类，越多越好
-   垂直水平居中方法，越多越好
-   八种定位属性的具体含义 - static relative fixed absolute sticky inherit initial unset
-   选择器和优先级，权重- 这里继承优先级最低，那么哪些属性可继承？
-   回流重绘的概念、触发条件，避免回流重绘的操作，flush 队列，display:none 触发的是哪一个，visibility:hidden 呢
-   两种盒子模型
-   BFC（块级格式上下文）的概念，触发条件，渲染规则，应用场景
-   移动端适配 - 这里涉及到的东西可就多了：媒体查询，viewport，em/rem，vw/vh

    \*\*
    \*\*

    **[JavaScript]()**

考察的更多的还是 es6，什么 let/const，数组对象的新方法，解构赋值，箭头函数，promise，async，generator，set,map 之类的

-   数据类型，原始类型和引用类型，存储方式（堆、栈），判断数据类型的三种方法
-   知道哪些数组的方法 - 红宝书上超多个方法，过一遍
-   null 和 undefined 的不同，为什么 == 结果是 true，而 === 结果是 false
-   闭包的概念，使用场景，缺点 - 我最认同《你不知道的[JavaScript]()》里写的当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。是一种现象。
-   原型链
-   var let const 的不同 - 概念的不同，变量提升，暂时性死区，顶层对象
-   箭头函数和普通函数的区别，this 的问题，为什么不能用作构造函数
-   promise - 为什么我就写了一个单词，因为我 promise 不太熟（。
-   this 的问题 - 永远指向最后调用它的函数（es5），call/apply/bind 改变指向（es6）
-   new 实例化一个对象 / new 一个对象时发生了什么？四个步骤
-   防抖节流的使用，区别，手写
-   继承的方法
-   Eventloop，可以顺便说一下浏览器渲染进程，哪些是宏任务微任务 - 经典看代码写输出
-   事件流，事件代理解决的问题
-   深浅拷贝的区别，如何解决循环引用，手写实现 - https://segmentfault.com/a/1190000020255831经典好文！不得不看！
-   load 和 DOMContentLoaded(DOM Ready)的区别 - 看红宝书
-   引用 script 标签时涉及到的 defer async
-   BOM：window location navigator - 解析 url 会用到 location 对象
-   JSBridge 的原理及使用 - 因为我实习做的是 APP 内嵌页，涉及到与[客户端]()通信

    **Vue**

经常有面试官问我看过[源码]()没，您好，没有（学习时间太短了，来不及嘛），所以[面经]()笔记没有涉及到[源码]()部分

顺便各位，读[源码]()有什么建议吗，嗯看真是难下手

-   单页应用的优缺点
-   computed 和 watch 的区别
-   v-for 和 v-if 的区别
-   双向绑定的原理，哪些操作不会触发视图更新 - Vue3 使用了 proxy 来代替传统的双向绑定
-   组件通信的方法，父子、隔代、兄弟，如果能再说说 Vuex 就更不错了
-   nextTick 是干嘛的
-   vue-router，history hash 的区别，需不需要后端配置，守卫，路由钩子
-   写一个通用组件需要考虑哪些问题

    \*\*
    \*\*

    **计算机网络 浏览器**

-   HTTP 相关，请求头响应头构成，HTTP0.9/1.0/1.1/2 各版本的区别，默认端口 80
-   HTTPS 相关，与 HTTP 区别，默认端口 443
-   状态码 1XX - 5XX，背就完事了
-   get / post 的区别
-   TCP / IP，OSI 七层模型 - 物理层 数据链路层 网络层 传输层 会话层 表示层 应用层
-   跨域相关，同源策略，跨域办法 - jsonp 以及缺点 / webSocket 协议 / CORS 以及分类，预检请求
-   进程线程的概念
-   从输入 URL 到浏览器完成页面渲染发生了什么 - 被问烂了，越详细越好。这里又有 web 优化问题
-   强缓存，协商缓存 - 相关的头部、状态码
-   cookie、session、localStorage、sessionStorage
-   安全问题，XSS、CSRF 概念，出现的场景，解决的办法 - XSS：CSP、HttpOnly Cookie；CSRF： samesite、Referer Check、Anti-CSRF-Token

    \*\*
    \*\*

    **手写**

-   new 实例化一个对象 / new 一个对象时发生了什么
-   继承
-   防抖节流
-   实现 call、apply、bind
-   数组去重
-   深浅拷贝
-   事件代理
-   vue 双向绑定

    \*\*
    \*\*

    **其他**

下面这些是我了解过并写在简历上的，所以被问了

-   webpack，常用 loader、plugin，如何配置
-   常用的 git 命令
-   linux 基本指令
-   css 预处理器相关，sass/less/postcss
-   使用 postman 来干啥
-   vim 基本指令

## git

git init 初始化

git status 查看文件目录与暂存区状态，看不到本地仓库

git add '文件名' 添加到暂存区

git add . 添加所有到暂存区

git commit -m '文件名' 已经到本地仓库里面了 （git commit -am '文件名' add 和 commit 的缩写 add 所有文件）

git commit -am '文件名' 添加到暂存区并添加到本地仓库

git log 查看提交日志信息

git reflog 查看所有日志信息

--pretty=oneline 一行显示

git reset --hard + '唯一标识'

git checkout 回退

git rm '文件名' 删除操作

git ls-files 查看 git 里面仓库目录

git config --global user.name 'your_username'

git config --global user.email your_email@domain.com

git config --list 查看所有配置 octotree

git push -u origin master 第一次提交前加-u 以后提交就成 git push 了

git checkout ’分支名‘切换到指定分支

git branch 查看所有分支

git checkout -b '分支名' 新建并切换到分支

切换到主干 合并分支 分支的作用是防止在线上出现 bug

git branch -d '文件名

git push origin '分支名' 添加到分支名

git reset --hard + ‘目标版本号’

git push -f 强推

git revert 反做

git revert -n 版本号”反做，并使用“git commit -m 版本名”提交

**git pull 和 git fetch 的区别？**

git pull 等于先 git fetch + git merge

git fetch 将远程仓库最新的数据拉取过来，

git merge 将拉取过来的数据和现在已经修改的分叉数据进行合并

git pull 可能会出现代码错误，最好是用 git fetch 然后 git merge

**git rebase 和 git merge 的区别**

## 程序员专用词

### 协程

（Coroutine）在执行过程中可中断去执行其他任务，执行完毕后再回来继续原先的操作。可以理解为两个或多个程序协同工作

协程特点在于**单线程**执行。
优势一：具有极高的执行效率，因为在任务切换的时候是程序之间的切换（由程序自身控制）而不是线程间的切换，所以没有线程切换导致的额外开销（时间浪费），线程越多，携程性能优势越明显。

优势二：由于是单线程工作，没有多线程需要考虑的同时写变量冲突，所以不需要多线程的[锁机制](https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/00143192823818768cd506abbc94eb5916192364506fa5d000)，故执行效率比多线程更高。

## Socket（套接字）

在计算机通信领域，socket 被翻译为“套接字”，它是计算机之间进行**通信**的**一种约定**或一种方式。通过 socket 这种约定，一台计算机可以接收其他计算机的数据，也可以向其他计算机发送数据

## 编程题：

**5 亿个数据如何找中位数**

分治法

分治法的思想是把一个大的问题逐渐转换为规模较小的问题来求解。

对于这道题，顺序读取这 5 亿个数字，对于读取到的数字 num，如果它对应的二进制中最高位为 1，则把这个数字写到 f1 中，否则写入 f0 中。通过这一步，可以把这 5 亿个数划分为两部分，而且 f0 中的数都大于 f1 中的数（最高位是符号位）。

划分之后，可以非常容易地知道中位数是在 f0 还是 f1 中。假设 f1 中有 1 亿个数，那么中位数一定在 f0 中，且是在 f0 中，从小到大排列的第 1.5 亿个数与它后面的一个数的平均值。

> **提示**，5 亿数的中位数是第 2.5 亿与右边相邻一个数求平均值。若 f1 有一亿个数，那么中位数就是 f0 中从第 1.5 亿个数开始的两个数求得的平均值。

对于 f0 可以用次高位的二进制继续将文件一分为二，如此划分下去，直到划分后的文件可以被加载到内存中，把数据加载到内存中以后直接排序，找出中位数。

> **注意**，当数据总数为偶数，如果划分后两个文件中的数据有相同个数，那么中位数就是数据较小的文件中的最大值与数据较大的文件中的最小值的平均值。

**查找英文文章里出现次数最多的字母和次数**

**模板字符串，es5 实现**

**两个字符串找最大公共子串**

**生成一个数值区间在 2-32 的随机数组**

**实现数组的 flat，并加入传参，参数为深度**

**函数柯里化**

**将算术表达式转化为后缀表达式**

**1000 枚硬币中有 10 枚金币，现在随机取 n 枚硬币，取到金币的概率是多少？（保留六位小数）**

```
掌阅科技：https://www.hotjob.cn/wt/zhangyue/web/index?brandCode=1#/pc
京东方：http://campus.boe.com/Portal/Apply/Index
小米：http://campus.hr.xiaomi.com/campus_apply/xiaomi/286/#/
数美科技：HR@ishumeil.com
狸米网校
转转 https://m.zhuanzhuan.com/platform/zzjob/index.html#/pc/campus/2021
58 http://campus.58.com/Portal/Apply/Index
去哪网 https://app.mokahr.com/recommendation-apply/qunar/4208?recommenderId=747270#/job/77fc3a39-b5a6-4f05-85f7-fa238036d311
搜狐 rdcplatform@sohu-inc.com
龙湖集团
海康威视 https://campushr.hikvision.com/school.html
```

获取 DOM 节点方法：document.quector(ww