掘金安东尼
掘金安东尼

串联高频面试问题，触类旁通，一通百通！

前言

开宗明义，本瓜深知汝之痛点：前端面试知识点太杂，卿总为了面试而面试，忘了记，记了又忘，循环往复，为此叫苦不迭。

来，让本瓜带领各位都稍稍回顾一下，自己曾经在学生时代记忆元素周期表的光辉岁月。

氢、氦、锂、铍、硼、碳、氮、氧、氟、氖、钠、镁、铝、硅、磷、硫、氯、氩、钾、钙、钪、钛、钒、铬、猛、铁、钴、镍、铜、锌…

咱当初记这前三十位元素，是死记硬背的吗？答案是否定的，机智的我们用到了 串联记忆法 。

一定是像这样或类似这样去记：

第一周期：氢 氦 ———— 轻嗨：轻轻的打个了招呼：嗨！
第二周期：锂 铍 硼 碳 氮 氧 氟 氖 ———— 你皮捧碳 蛋养福奶：你很皮，手里捧了一把碳。鸡蛋能够滋养福气的奶妈
第三周期：钠 镁 铝 硅 磷 硫 氯 氩 ———— 那美女桂林留绿牙：那美女在桂林留绿色的牙齿
第四周期：钾 钙 钪 钛 钒 铬 猛 铁 钴 镍 铜 锌 ———— 贾盖坑太凡哥 猛铁骨裂痛心：“贾盖”坑了“太凡哥”，导致猛男铁汉骨头碎裂很痛心

串联联想与二元链式联想记忆的方法有相似之处，就是都要通过想象、创造和编故事来帮助我们达到双脑学习和记忆的目的。—— 出处

有木有？本瓜记得尤为清楚，以上串联起来的谐音故事简直可以写出一个狗血剧本了。尤其是“那美女（钠镁铝）”简单三字仿佛就能激起青春期的荷尔蒙。如此，学习能不有兴趣吗？兴趣是最好的老师！想忘掉都难啊！

于是乎，本瓜类比归化，将自己遇到过的高频面试问题运用串联联想法进行了“串联”整理，以期形成系统，与各位同好分享。

上图！

串联高频面试问题，触类旁通，一通百通！_第1张图片

  • 本文脑图支持：processon
撰文不易✍ 点赞鼓励 您的反馈 我的动力

我是掘金安东尼，愿一直与你同行！
我的个站：https://tuaran.site
My Blog：https://tuaran.github.io

串联一：
从输入URL到页面加载发生了什么？

此题是经典中的经典，可挖掘的点非常之多，亦非常之深。

一图胜万言

串联高频面试问题，触类旁通，一通百通！_第2张图片

  • 原创脑图，转载请说明出处

串联知识点：URL解析、DNS查询、TCP握手、HTTP请求、浏览器处理返回报文、页面渲染

串联记忆：共计六步，归并为一句话来记忆：UDTH，处理返回加渲染。

“UDTH” 即URL解析、DNS查询、TCP握手、HTTP请求，

“处理返回加渲染”，即浏览器处理返回报文，和页面渲染。

同时，本瓜倾情在脑图上标注了每个步骤可能考察的知识点“关键词”，真的是个个重点，不容错过！

一、URL 解析

URL（Uniform Resource Locator），统一资源定位符，用于定位互联网上资源，俗称网址。

// 示例引自 wikipedia

                    hierarchical part
        ┌───────────────────┴─────────────────────┐
                    authority               path
        ┌───────────────┴───────────────┐┌───┴────┐
  abc://username:[email protected]:123/path/data?key=value&key2=value2#fragid1
  └┬┘   └───────┬───────┘ └────┬────┘ └┬┘           └─────────┬─────────┘ └──┬──┘
scheme  user information     host     port                  query         fragment


scheme       - 定义因特网服务的类型。常见的协议有 http、https、ftp、file，
               其中最常见的类型是 http，而 https 则是进行加密的网络传输。
host         - 定义域主机（http 的默认主机是 www）
domain       - 定义因特网域名，比如 baidu.com
port         - 定义主机上的端口号（http 的默认端口号是 80）
path         - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename     - 定义文档/资源的名称
query        - 即查询参数
fragment     - 即 # 后的hash值，一般用来定位到某个位置

更多可见：

  1. URL RFC
  2. Wikipedia-URI

URL 编码

一般来说，URL 只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号。此在 URL RFC 已做硬性规定。

这意味着，如果URL中有汉字，就必须编码后使用。但是麻烦的是，RFC 1738没有规定具体的编码方法，而是交给应用程序（浏览器）自己决定。这导致"URL编码"成为了一个混乱的领域。

阮老师早在 2010 年已解释了：关于URL编码- 阮一峰

这里可直接看结论：浏览器对 URL 编码会出现差异从而造成混乱，所以假设我们使用 Javascript 预先对 URL 编码，然后再向服务器提交。因为Javascript 的输出总是一致的，这样就保证了服务器得到的数据是格式统一的。

我们常使用到：encodeURI()、encodeURIComponent()；前者对整个 URL 进行 utf-8 编码，后者是对 URL 部分进行编码。

本瓜请问：你能清楚的解释 ASCII、Unicode、UTF-8、GBK 含义和关系吗？

也许我们并不太了解我们常见、常用的东西。

类型 含义
ASCII 8位一个字节,1个字节表示一个字符.即: 2 ** 8 = 256,所以ASCII码最多只能表示256个字符。
Unicode 俗称万国码,把所有的语言统一到一个编码里.解决了ASCII码的限制以及乱码的问题。unicode码一般是用两个字节表示一个字符,特别生僻的用四个字节表示一个字符。
UTF-8 “可变长的编码方式”,如果是英文字符,则采用ASCII编码,占用一个字节。如果是常用汉字,就占用三个字节,如果是生僻的字就占用4~6个字节。
GBK 国内版本,一个中文字符 == 两个字节 英文是一个字节

强缓存、协商缓存

言外之音：本瓜起初是将强缓存、协商缓存放在第三步 “HTTP 请求”中，后来了解到：如果命中了强缓存则可不再走DNS解析这步。遂将其归到此处。浏览器强缓存是按照ip还是域名缓存的？

强缓存、协商缓存是必考题。具体流程如下：

  1. 浏览器在加载资源时，根据请求头的 expires和 cache-control判断是否命中强缓存，是则直接从缓存读取资源，不会发请求到服务器。

    expires：HTTP/1.0 时期，根据对比本地时间和服务器时间来判断。

    cache-control：HTTP/1.1 时期，根据相对时间来判断，如设置max-age，单位为秒。

  2. 如果没有命中强缓存，浏览器一定会发送一个请求到服务器，通过Etag和Last-Modified-If验证资源是否命中协商缓存，如果命中，服务器会将这个请求返回（304），告诉浏览器从缓存中读取数据。

    【ETag、If-None-Match】成对：Etag 是服务器返回给浏览器的，If-None-Match 是浏览器请求服务器的。通过对比二者来判断，它们记录的是：文件生成的唯一标识。

    【Last-Modified，If-Modified-Since】成对：Modified-Since 是服务器返回给浏览器的，If-Modified-Since 是浏览器请求服务器的。通过对比二者来判断，它们记录的是：最后修改时间。

    注：ETag 的优先级比 Last-Modified 更高。大部分 web 服务器都默认开启协商缓存，而且是同时启用【ETag、If-None-Match】和 【Last-Modified，If-Modified-Since】。

  3. 如果前面两者都没有命中，直接从服务器加载资源。

综上，强缓存和协商缓存如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据；不同的是：强缓存不会发请求到服务器，协商缓存会发请求到服务器进行对比判断得出是否命中。

  • 借一个流程图，暂未找到真实出处，保留引用说明坑位。

串联高频面试问题，触类旁通，一通百通！_第3张图片

以上还有另一个重点，就是cache-control的值的分类：如“no-cache”、“no-store”、“private”等，需要细扣。此处仅暂列二三、作初步释义。

  1. no-cache: 跳过当前的强缓存，发送HTTP请求，即直接进入协商缓存阶段。
  2. no-store：不进行任何形式的缓存。
  3. private： 这种情况就是只有浏览器能缓存了，中间的代理服务器不能缓存。

更多可见：

  • Cache-Control - MDN
  • 缓存（二）——浏览器缓存机制：强缓存、协商缓存 #41

二、DNS查询

递归查询

DNS 解析 URL（自右向左） 找到对应的 ip

// 例如：查找www.google.com的IP地址过程（真正的网址是www.google.com.）：

// 根域名服务器 -> com顶级域名服务器 -> google.com域名服务器 -> www.google.com对应的ip
. -> .com -> google.com. -> www.google.com.

这是一个递归查询的过程。

串联高频面试问题，触类旁通，一通百通！_第4张图片

关于根域名的更多知识，可见
根域名的知识-阮一峰。

DNS 缓存

请记住：有 DNS 的地方，就有 DNS 缓存。

DNS存在着多级缓存，从距离浏览器的距离排序的话，有以下几种:

1.浏览器缓存 2.系统缓存 3.路由器缓存 4.IPS 服务器缓存 5.根域名服务器缓存 6.顶级域名服务器缓存 7.主域名服务器缓存。

查看缓存：

  1. 浏览器查看 DNS 缓存：chrome://net-internals/#dns

  2. win10 系统查看 DNS 缓存:win+R => cmd => ipconfig /displaydns

DNS 负载均衡

DNS负载均衡技术的实现原理是在DNS服务器中为同一个主机名配置多个IP地址，在应答DNS查询时，DNS服务器对每个查询将以DNS文件中主机记录的IP地址按顺序返回不同的解析结果，将客户端的访问引导到不同的机器上去，使得不同的客户端访问不同的服务器，从而达到负载均衡的目的。—— 百科

三、TCP握手

DNS解析返回域名的IP之后，接下来就是浏览器要和该IP建立TCP连接了。

言外之音：TCP 的相关知识在大学基础课程《计算机网络》都有，本瓜内心苦：出来混的迟早是要还的…

TCP/IP 模型：链路层-网络层-传输层-应用层。

与之对应，OSI（开放式系统互联模型）也不能忘。通常认为 OSI 模型的最上面三层（应用层、表示层和会话层）对应 TCP/IP 模型中的应用层。wiki

在 TCP/IP 模型中，像常用的 HTTP/HTTPS/SSH 等协议都在应用层上。

串联高频面试问题，触类旁通，一通百通！_第5张图片

三次握手、四次挥手

所谓三次握手(Three-way Handshake)，是指建立一个 TCP 连接时，需要客户端和服务器总共发送3个包。

三次握手就跟早期打电话时的情况一样：1、A：听得到吗？2、B：听得到，你呢？3、A：我也听到了。然后才开始真正对话。

1. 第一次握手(SYN=1, seq=x):

客户端发送一个 TCP 的 SYN 标志位置1的包，指明客户端打算连接的服务器的端口，以及初始序号 X,保存在包头的序列号(Sequence Number)字段里。

发送完毕后，客户端进入 SYN_SEND 状态。

2. 第二次握手(SYN=1, ACK=1, seq=y, ACKnum=x+1):

服务器发回确认包(ACK)应答。即 SYN 标志位和 ACK 标志位均为1。服务器端选择自己 ISN 序列号，放到 Seq 域里，同时将确认序号(Acknowledgement Number)设置为客户的 ISN 加1，即X+1。 发送完毕后，服务器端进入 SYN_RCVD 状态。

3. 第三次握手(ACK=1，ACKnum=y+1)

客户端再次发送确认包(ACK)，SYN 标志位为0，ACK 标志位为1，并且把服务器发来 ACK 的序号字段+1，放在确定字段中发送给对方，并且在数据段放写ISN的+1

发送完毕后，客户端进入 ESTABLISHED 状态，当服务器端接收到这个包时，也进入 ESTABLISHED 状态，TCP 握手结束。

串联高频面试问题，触类旁通，一通百通！_第6张图片

所谓四次挥手(Four-way handshake)，是指 TCP 的连接的拆除需要发送四个包。

四次挥手像老师拖堂的场景：1、学生说：老师，下课了。2、老师：好，我知道了，我说完这点。3、老师：好了，说完了，下课吧。4、学生：谢谢老师，老师再见。

1. 第一次挥手(FIN=1，seq=x)

假设客户端想要关闭连接，客户端发送一个 FIN 标志位置为1的包，表示自己已经没有数据可以发送了，但是仍然可以接受数据。

发送完毕后，客户端进入 FIN_WAIT_1 状态。

2. 第二次挥手(ACK=1，ACKnum=x+1)

服务器端确认客户端的 FIN 包，发送一个确认包，表明自己接受到了客户端关闭连接的请求，但还没有准备好关闭连接。

发送完毕后，服务器端进入 CLOSE_WAIT 状态，客户端接收到这个确认包之后，进入 FIN_WAIT_2 状态，等待服务器端关闭连接。

3. 第三次挥手(FIN=1，seq=y)

服务器端准备好关闭连接时，向客户端发送结束连接请求，FIN 置为1。

发送完毕后，服务器端进入 LAST_ACK 状态，等待来自客户端的最后一个ACK。

4. 第四次挥手(ACK=1，ACKnum=y+1)

客户端接收到来自服务器端的关闭请求，发送一个确认包，并进入 TIME_WAIT状态，等待可能出现的要求重传的 ACK 包。

服务器端接收到这个确认包之后，关闭连接，进入 CLOSED 状态。

客户端等待了某个固定时间（两个最大段生命周期，2MSL，2 Maximum Segment Lifetime）之后，没有收到服务器端的 ACK ，认为服务器端已经正常关闭连接，于是自己也关闭连接，进入 CLOSED 状态。

串联高频面试问题，触类旁通，一通百通！_第7张图片

你若问我：三次握手、四次挥手的详细内容太难记了，还记不记？本瓜答：进大厂是必要的。

动图来源：两张动图-彻底明白TCP的三次握手与四次挥手

流量控制（滑动窗口）

为了增加网络的吞吐量，想将数据包一起发送过去，实现“流量控制”，这时候便产生了“滑动窗口”这种协议。

滑动窗口允许发送方在收到接收方的确认之前发送多个数据段。窗口大小决定了在收到目的地确认之前，一次可以传送的数据段的最大数目。窗口大小越大，主机一次可以传输的数据段就越多。当主机传输窗口大小数目的数据段后，就必须等收到确认，才可以再传下面的数据段。

窗口的大小在通信双方连接期间是可变的，通信双方可以通过协商动态地修改窗口大小。改变窗口大小的唯一根据，就是接收端缓冲区的大小。

拥塞控制

需求>供给 就会产生拥塞

通过“拥塞窗口”、“慢启动”、“快速重传”、“快速恢复”动态解决。

TCP 使用多种拥塞控制策略来避免雪崩式拥塞。TCP会为每条连接维护一个“拥塞窗口”来限制可能在端对端间传输的未确认分组总数量。这类似 TCP 流量控制机制中使用的滑动窗口。TCP在一个连接初始化或超时后使用一种“慢启动”机制来增加拥塞窗口的大小。它的起始值一般为最大分段大小（Maximum segment size，MSS）的两倍，虽然名为“慢启动”，初始值也相当低，但其增长极快：当每个分段得到确认时，拥塞窗口会增加一个MSS，使得在每次往返时间（round-trip time，RTT）内拥塞窗口能高效地双倍增长。—— TCP拥塞控制-wikipedia

滑动窗口（流量控制）和拥塞控制里的原理性的东西太多，本瓜表示无力，暂时要求尽力去理解去记忆。

推荐阅读：

  • 一篇带你读懂TCP之“滑动窗口”协议
  • TCP流量控制、拥塞控制

四、HTTP请求

HTTP是万维网的数据通信的基础 —— 维基百科

HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。

HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。

HTTP、HTTPS

HTTP 和 HTTPS 的区别？

HTTP报文是包裹在TCP报文中发送的，服务器端收到TCP报文时会解包提取出HTTP报文。但是这个过程中存在一定的风险，HTTP报文是明文，如果中间被截取的话会存在一些信息泄露的风险。

如果在进入TCP报文之前对HTTP做一次加密就可以解决这个问题了。HTTPS协议的本质就是HTTP + SSL(or TLS)。在HTTP报文进入TCP报文之前，先使用SSL对HTTP报文进行加密。从网络的层级结构看它位于HTTP协议与TCP协议之间。

串联高频面试问题，触类旁通，一通百通！_第8张图片

HTTP2

http2 是完全兼容 http/1.x 的，并在此基础上添加了 4 个主要新特性：

  1. 二进制分帧：http/1.x 是一个文本协议，而 http2 是一个二进制协议。
  2. 头部压缩：http/1.x 中请求头基本不变，http2 中提出了一个 HPACK 的压缩方式，用于减少 http header 在每次请求中消耗的流量。
  3. 服务端推送：服务端主动向客户端推送数据。
  4. 多路复用：http/1.x，每个 http 请求都会建立一个 TCP 连接；http2，所有的请求都会共用一个TCP连接。

更多了解，可见 HTTP2 详解

GET、POST

直观区别：

  1. GET 用来获取数据，POST 用来提交数据。
  2. GET 参数有长度限制（受限于url长度，具体的数值取决于浏览器和服务器的限制，最长2M），而 POST 无限制。
  3. GET 请求的数据会附加在 URL 上，以"?“分割，多个参数用”&"连接，而 POST 请求会把请求的数据放在 HTTP 请求体中。都可被抓包。
  4. GET 请求会保存在浏览器历史记录中，还可能保存在 WEB 服务器的日志中。

隐藏区别（存在浏览器差异）：

  1. GET 产生一个 TCP 数据包；POST 产生两个 TCP 数据包。

更多了解：

RESTful API 设计指南 - 阮一峰

Keep-Alive

我们都知道使用 Keep-Alive 是为了避免重新建立连接。

目前大部分浏览器都是用 http1.1 协议，默认都会发起 Keep-Alive 的连接请求了，所以是否能完成一个完整的 Keep-Alive 连接就看服务器设置情况。

HTTP 长连接不可能一直保持，它有两个参数，例如 Keep-Alive: timeout=5, max=100，表示这个TCP通道可以保持5秒，max=100，表示这个长连接最多接收100次请求就断开。

Keep-Alive 模式发送数据 HTTP 服务器不会自动断开连接，所有不能使用返回EOF（-1）来判断。

基于此，抛问题：当 HTTP 采用 keepalive 模式，当客户端向服务器发生请求之后，客户端如何判断服务器的数据已经发生完成？

  1. 使用消息首部字段 Conent-Length：Conent-Length表示实体内容长度，客户端可以根据这个值来判断数据是否接收完成。

  2. 使用消息首部字段 Transfer-Encoding：如果是动态页面，服务器不可能预先知道内容大小，这时就可以使用Transfer-Encoding：chunk 模式来传输数据了。即如果要一边产生数据，一边发给客户端，服务器就需要使用"Transfer-Encoding: chunked"这样的方式来代替Content-Length。chunked 编码的数据在最后有一个空 chunked 块，表明本次传输数据结束

本瓜之前面试腾讯 PCG 就被问到 Transfer-Encoding：chunk 这个，请大家格外注意。

参考:

  • Keep-Alive - MDN
  • HTTP长连接和短连接

五、浏览器处理返回报文

状态码

1xx：指示信息–表示请求已接收，继续处理。

2xx：成功–表示请求已被成功接收、理解、接受。

3xx：重定向–要完成请求必须进行更进一步的操作。

4xx：客户端错误–请求有语法错误或请求无法实现。

5xx：服务器端错误–服务器未能实现合法的请求。

平时遇到比较常见的状态码有:200, 204, 301, 302, 304, 400, 401, 403, 404, 422, 500。

切分返回头和返回体（腾讯 PCG 考点）

这里的考点其实和 http keep-alive 中的问题重合，但是还是想着重强调，因为本瓜掉过这个坑，再三点出，以示后人。

最终归为这个问题：Detect end of HTTP request body - stackoverflow

解答：

1. If the client sends a message with Transfer-Encoding: Chunked, you will need to parse the somewhat complicated chunked transfer encoding syntax. You don not really have much choice in the matter -- if the client is sending in this format, you have to receive it. When the client is using this approach, you can detect the end of the body by a chunk with a length of 0.
2. If the client instead sends a Content-Length, you must use that.

即：如何获取 HTTP 返回体？

  1. 先把 header 直到 \r\n\r\n（两个换行）整个读取，即整个请求头;

  2. 如果返回 Transfer-Encoding: Chunked，则读取，直到遇到空 chunked 块，则结束。

  3. 如果返回 Content-Length，则读从请求头的末尾开始计算 Content-Length 长度的字节。

  4. 其他情况，等待返回。

了解更多：HTTP 之响应篇

本地数据存储

  1. cookie：4K，可以手动设置失效期。
  2. localStorage：5M，除非手动清除，否则一直存在。
  3. sessionStorage：5M，不可以跨标签访问，页面关闭就清理。
  4. indexedDB：浏览器端数据库，无限容量，除非手动清除，否则一直存在。
  5. Web SQL：关系数据库，通过SQL语句访问（已经被抛弃）。

浏览器缓存位置

按优先级从高到低：

  1. Service Worker：本质是一个web worker，是独立于网页运行的脚本。
  2. Memory Cache：Memory Cache指的是内存缓存，从效率上讲它是最快的。
  3. Disk Cache：Disk Cache就是存储在磁盘中的缓存，从存取效率上讲是比内存缓存慢的，但是他的优势在于存储容量和存储时长。
  4. Push Cache：即推送缓存，是 HTTP/2 的内容。

更多：

  • service worker 静态资源离线缓存实践
  • HTTP/2 push is tougher than I thought

离线缓存：

HTML5-离线缓存（Application Cache）

注：“浏览器缓存位置”和“离线缓存”了解相关，有个概念/印象即可。

六、页面渲染

CssTree+DomTree

本瓜知道你知道过程是这样的：

dom tree + css tree = render tree => layout =>painting?

但是你真的吃透了吗？

HTML → DOM树 转化过程：

  1. 解码：浏览器从磁盘或网络读取HTML的原始字节，然后根据指定的文件编码格式（例如 UTF-8）将其转换为相应字符
  2. 令牌化：浏览器把字符转化成W3C HTML5 标准指定的各种确切的令牌，比如""、""以及其他在尖括号内的字符串。每个令牌都有特殊的含义以及它自己的一套规则
  3. 词法分析：生成的令牌转化为对象，这个对象定义了它们的属性及规则
  4. DOM树构建：最后，由于HTML标记定义了不同标签之间的关系（某些标签嵌套在其他标签中），创建的对象在树状的数据结构中互相链接，树状数据结构也捕获了原始标签定义的父子关系：HTML对象是body对象的父对象，body是p对象的父对象等等

串联高频面试问题，触类旁通，一通百通！_第9张图片

CSS → CSSOM树 转化过程类同以上

CSSOM只输出包含有样式的节点，最终输出为：
串联高频面试问题，触类旁通，一通百通！_第10张图片

Render Tree （生成渲染树，计算可见节点和样式）

  1. 不包括Header 、 script 、meta 等不可见的节点
  2. 某些通过 CSS 隐藏的节点在渲染树中也会被忽略，比如应用了 display:none 规则的节点，而visibility: hidden只是视觉不可见，仍占据空间，不会被忽略。

layout：依照盒子模型，计算出每个节点在屏幕中的位置及尺寸

painting：按照算出来的规则，通过显卡，把内容画到屏幕上。

回流、重绘

回流：

当可见节点位置及尺寸发生变化时会发生回流

重绘：

改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

这里本瓜再抛两个问题。

Q1：浏览器在什么时候向服务器发送获取css、js外部文件的请求？

A1：解析DOM时碰到外部链接，如果还有connection，则立刻触发下载请求。

Q2：CSSOM DOM JavaScript 三者阻塞关系？

A2：CSSOM DOM互不影响，JavaScript会阻塞DOM树的构建但JS前的HTML可以正常解析成DOM树，CSSOM的构建会阻塞JavaScript的执行。对此句存疑？

  • css 加载的阻塞情况:

  1. css加载不会阻塞DOM树的解析
    // DOM解析和CSS解析是两个并行的进程，所以这也解释了为什么CSS加载不会阻塞DOM的解析。

  2. css加载会阻塞DOM树的渲染
    // 由于Render Tree是依赖于DOM Tree和CSSOM Tree的，所以他必须等待到CSSOM Tree构建完成，也就是CSS资源加载完成(或者CSS资源加载失败)后，才能开始渲染。因此，CSS加载是会阻塞Dom的渲染的。

  3. css加载会阻塞后面js语句的执行
    // 由于js可能会操作之前的Dom节点和css样式，因此浏览器会维持html中css和js的顺序。因此，样式表会在后面的js执行前先加载执行完毕。所以css会阻塞后面js的执行。

参考阅读：

  1. css加载会造成阻塞吗？
  2. 浏览器页面渲染流程梳理

综合补充

web 性能优化

  • 雅虎35条军规

串联二：
老生常谈，请你谈一下闭包？

假若你认为此题简单，一两句话就能说完？那当真浮于表面。此题实则一两天都说不完！它可以牵扯出 js 原理的大部分知识。是真正意义上的“母题”。

一图胜万言

串联高频面试问题，触类旁通，一通百通！_第11张图片

  • 原创脑图，转载请说明出处

串联知识点：闭包、作用域、原型链、js继承。

串联记忆：此题并非像上文题“从输入URL到页面加载发生了什么？”，后者“串联点”是按解答步骤来递进的。而这里的“串联点”，更多是你中有我，我中有你，前后互相补充，互相完善。当你领略完的时候，一定会有一种“万物归宗”的感觉。

归并为一五言诗来记忆：

闭包作用域

原型多考虑

继承八大法

基础好好叙

一、闭包

闭包含义

一言以蔽之。

在一个函数内有另外一个函数可以访问它的内部变量，并且另外一个函数在外部被调用，这样的词法环境叫闭包。

  • 作用：
  1. 读取函数内部的变量；（私有变量、不污染全局）
  2. 让变量始终保存在内存中。

闭包应用

  • 最经典试题
for(var i = 0; i < 5; i++){
	(function(j){
		setTimeout(function(){
			console.log(j);
		},1000);
	})(i);
}
console.log(i);

垃圾回收机制

  • js 垃圾回收机制：标记清除和引用计数。

标记清除简单讲就是变量存储在内存中，当变量进入执行环境的时候，垃圾回收器会给它加上标记，这个变量离开执行环境，将其标记为“清除”，不可追踪，不被其他对象引用，或者是两个对象互相引用，不被第三个对象引用，然后由垃圾回收器收回，释放内存空间。

防抖、节流函数

  • 防抖
function debounce(fn, delay) {
    var timer; // 维护一个 timer
    return function () {
        var _this = this; // 取debounce执行作用域的this
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            fn.apply(_this, args); // 用apply指向调用debounce的对象，相当于_this.fn(args);
        }, delay);
    };
}
  • 节流
function throttle(fn, delay) {
    var timer;
    return function () {
        var _this = this;
        var args = arguments;
        if (timer) {
            return;
        }
        timer = setTimeout(function () {
            fn.apply(_this, args);
            timer = null; // 在delay后执行完fn之后清空timer，此时timer为假，throttle触发可以进入计时器
        }, delay)
    }
}

二、作用域

全局作用域

  • 直接编写在script标签中的JS代码，都在全局作用域；
  • 全局作用域在页面打开时创建，在页面关闭时销毁；
  • 在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用；
  • 全局作用域中，创建变量都会作为window对象的属性保存；
  • 创建的函数都会作为window对象的方法保存；
  • 全局作用域中的变量都是全局变量，在页面的任何部分都可以访问的到；

我们可以在控制台直接打印试试看，正如以上所说：
串联高频面试问题，触类旁通，一通百通！_第12张图片

函数作用域（局部作用域）

  • 变量在函数内声明，变量属于局部作用域。
  • 局部变量：只能在函数内部访问。
  • 局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
  • 局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

块级作用域

块级作用域 : 块级作用域指的就是使用 if () { }; while ( ) { } …这些语句所形成的语句块 , 并且其中变量必须使用 let 或 const 声明,保证了外部不可以访问语句块中的变量。

注：函数作用域和块级作用域没有直接关系。

  • const、let、var 区别
  1. const 声明则不能改变，块级作用域，不允许变量提升。
  2. let 块级作用域，不允许变量提升。
  3. var 非块级作用域，允许变量提升。

作用域链

出现函数嵌套函数，则就会出现作用域链 scope chain。

  • 遍历嵌套作用域链的规则很简单：引擎从当前的执行作用域开始查找变量，如果找不到， 就向上一级继续查找。当抵达最外层的全局作用域时，无论找到还是没找到，查找过程都会停止。
  • 局部作用域（如函数作用域）可以访问到全局作用域中的变量和方法，而全局作用域不能访问局部作用域的变量和方法。

用作用域链来解释闭包：

function outter() {
  var private= "I am private";
  function show() {
    console.log(private);
  }
// [[scope]]已经确定：[outter上下文的变量对象，全局上下文变量对象]
  return show;
}

var ref = outter();
console.log(private);  // outter执行完以后，private不会被销毁，并且只能被show方法所访问，
                          //直接访问它会出现报错：private is not defined
ref(); // 打印I am private

其实，我们要明白的是函数的声明和调用是分开的，如果不搞清楚这一点，很多基础面试题就容易出错。

  • 深究：
    JavaScript深入之词法作用域和动态作用域 #3

变量生命周期

一个变量的声明意味着就是我们在内存当中申请了一个空间用来存储。这个内存也就是我们电脑的运行内存，如果我们一直的声明变量，不释放的话。会占用很大的内存。

在 c/c++ 当中是需要程序员在合适的地方手动的去释放变量内存，而 javascript 和 java 拥有垃圾回收机制（咱们在上文已说明）。

js 变量分为两种类型：全局变量和局部变量

  1. 全局变量的生命周期：从程序开始执行创建，到整个页面关闭时，变量收回。
  2. 局部变量的生命周期：从函数开始调用开始，一直到函数调用结束。
    但有的时候我们需要让局部变量的生命周期长一点，此时就用到了闭包。

三、原型链

实例与原型

一个原型对象的隐形属性指向构造它的构造函数的显示属性。

当一个对象去查找它的属性，找不到就去找他的构造函数的属性，一直向上找，直到找到 Object()。

判断数据类型

  1. typeof
  2. instanceof
  3. constructor
  4. Object.prototype.toString.call()

new 一个对象

步骤：

  1. 创建一个新对象
  2. 将构造函数的作用域赋给新对象（因此this指向了这个新对象）
  3. 执行构造函数中的代码（为这个新对象添加属性）
  4. 返回新对象

this 指向

this 指向 5 大规则：

  1. 如果 new 关键词出现在被调用函数的前面，那么JavaScript引擎会创建一个新的对象，被调用函数中的this指向的就是这个新创建的函数。
  2. 如果通过apply、call或者bind的方式触发函数，那么函数中的this指向传入函数的第一个参数。
  3. 如果一个函数是某个对象的方法，并且对象使用句点符号触发函数，那么this指向的就是该函数作为那个对象的属性的对象，也就是，this指向句点左边的对象
  4. 如果一个函数作为FFI被调用，意味着这个函数不符合以上任意一种调用方式，this指向全局对象，在浏览器中，即是window。
  5. 如果出现上面对条规则的累加情况，则优先级自1至4递减，this的指向按照优先级最高的规则判断。

参考：this指向记忆5大原则

  • 箭头函数中的 this 指向：箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。

更多：JS中的箭头函数与this

bind、call、apply

  • call
    call()方法接收的第一个参数和apply()方法接收的一样，变化的是其余的参数直接传递给函数。换句话说，在使用call()方法时，传递给函数的参数必须逐个列举出来。
function sum(num1 , num2){
	return num1 + num2;
}
function callSum(num1 , num2){
	return sum.call(this , sum1 , sum2);
}
console.log(callSum(10 , 10)); // 20
  • apply
    apply()方法接收两个参数：一个是在其中运行函数的作用域，另一个是参数数组，这里的参数数组可以是Array的实例，也可以是arguments对象（类数组对象）。
function sum(num1 , num2){
	return num1 + num2;
}
function callSum1(num1,num2){
	return sum.apply(this,arguments); // 传入arguments类数组对象
}
function callSum2(num1,num2){
	return sum.apply(this,[num1 , num2]); // 传入数组
}
console.log(callSum1(10 , 10)); // 20
console.log(callSum2(10 , 10)); // 20

call和apply的区别在于二者传参的时候，前者是一个一个的传，后者是传数组或类数组arguments

  • bind

bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。

手写深浅拷贝

浅：

function clone(target) {
    let cloneTarget = {};
    for (const key in target) {
        cloneTarget[key] = target[key];
    }
    return cloneTarget;
};

深（递归）：

function clone(target) {
    if (typeof target === 'object') {
        let cloneTarget = Array.isArray(target) ? [] : {};
        for (const key in target) {
            cloneTarget[key] = clone(target[key]);
        }
        return cloneTarget;
    } else {
        return target;
    }
};

了解更多，推荐阅读：如何写出一个惊艳面试官的深拷贝?

四、js 继承

八种继承方式，详细请看此篇：JavaScript常用八种继承方案。

本瓜不做赘述，此处仅列二三关键必记。

串联三：
请你谈谈 Vue 原理？

本瓜不装了，摊牌了。其实本文的目录结构编写时间线在 《 Vue(v2.6.11)万行源码生啃，就硬刚！》
这篇文章之前。当时就是因为似懂非懂，才定下心来“生啃源码”。现在源码看完了，体会的确又不一样了。但由于细节太多，篇幅受限。此处也仅列框架、点出要点、注释链接，以便记忆。

一图胜万言

串联高频面试问题，触类旁通，一通百通！_第13张图片

  • 原创脑图，转载请说明出处

串联知识点：Vue初始化和生命周期、虚拟DOM、响应式原理、组件编译、Vue常用补充、Vue全家桶。

串联记忆：编一顺口溜，见笑。

V U E 真容易

初始化 有生命

虚拟 dom 好给力

响应式 看仔细

组件化 大家利

全家桶 笑嘻嘻

会打包 挣一亿

  • 邀大家来改编

一、init&render

挂载和初始化

new Vue()发生了什么？

Vue 实际上是一个类，类在 Javascript 中是用 Function 来实现的。Vue 只能通过 new 关键字初始化，然后会调用 this._init 方法。

初始化主要实现：合并配置（mergeOptions），初始化生命周期（initLifecycle），初始化事件中心（initEvents），初始化渲染（initRender），初始化 data、props、computed、watcher 等等。

流程图参考如下：

串联高频面试问题，触类旁通，一通百通！_第14张图片

  • 此图在组件编译环节少了 optimize ，可能由于版本差异。 Vue2.4.4 源码
  • 借图，未找到真实出处，保留引用说明坑位。

实例生命周期

生命周期图示，还是得看官网文档。还记得这句话吗？

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。

注释版：

串联高频面试问题，触类旁通，一通百通！_第15张图片

推荐：源码解读

要点注释：

  1. beforeCreate 和 created 函数都是在实例化 Vue 的阶段，在 _init 方法中执行的。从源码中可以看到 beforeCreate 和 created 的钩子调用是在 initState 的前后，initState 的作用是初始化 props、data、methods、watch、computed 等属性。那么显然 beforeCreate 的钩子函数中就不能获取到 props、data 中定义的值，也不能调用 methods 中定义的函数。而 created 钩子函数可以。
Vue.prototype._init = function (options?: Object) {
  // ...
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate') // beforeCreate 钩子
  initInjections(vm) // resolve injections before data/props
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created') // created 钩子
  // ...
}

  1. 在执行 vm._render() 函数渲染 VNode 之前，执行了 beforeMount 钩子函数，在执行完 vm._update() 把 VNode patch 到真实 DOM 后，执行 mounted 钩子。（此点重要）

  2. beforeUpdate 的执行时机是在渲染 Watcher 的 before 函数中调用。update 的执行时机是在 flushSchedulerQueue 函数调用的时候。

  3. beforeDestroy 和 destroyed 钩子函数的执行时机在组件销毁的阶段。

  4. activated 和 deactivated 钩子函数是专门为 keep-alive 组件定制的钩子。

重点说明：

  1. 在 Vue2 中，所有 Vue 的组件的渲染最终都需要 render 方法，无论我们是用单文件 .vue 方式开发组件，还是写了 el 或者 template 属性，最终都会转换成 render 方法，用来把实例渲染成一个虚拟 Node（Virtual DOM）。

二、虚拟DOM

Vue 2.0 相比 Vue 1.0 最大的升级就是利用了 Virtual DOM。

vdom

vdom 其实就是一颗 js 对象树，最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性。原本对 DOM 节点的操作（浏览器将 DOM 设计的非常复杂）转成了对 js 对象的操作，加快处理速度、提升性能。

VNode 的创建是由 createElement 方法实现的。

欲知原理，推荐阅读：snabbdom

diff & patch

在实际代码中，会对新旧两棵树进行一个深度的遍历，每个节点都会有一个标记。每遍历到一个节点就把该节点和新的树进行对比，如果有差异就记录到一个对象中。即用 diff 算法比较差异，然后调用 patch 应用到真实 DOM 上去。patch 的过程即一个打补丁的过程。

串联高频面试问题，触类旁通，一通百通！_第16张图片

图片来源

diff 算法是一个交叉对比的过程，大致可以简要概括为：头头比较、尾尾比较、头尾比较、尾头比较。

入门级别 diff 详情推荐看此篇：LINK

串联高频面试问题，触类旁通，一通百通！_第17张图片

图片来源

注意：render函数返回的是 vdom，patch生成的才是真实DOM。

三、响应式原理

官方生图，高屋建瓴。

串联高频面试问题，触类旁通，一通百通！_第18张图片

本瓜曾在《简析 vue 的双向绑定原理》这篇文章写过，如今看又是一番心情。

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

发布订阅者模式（字节考题）

class emit {
}
cosnt eeee =  new emit()
eeee.on('aa' , function() { console.log(1)})
eeee.on('aa' , function() {console.log(2)})
eeee.emit('aa')
//class emit{}

// 要求手写发布者-订阅模式

class Subject{
    constructor () {
      this.observers =[]
    }
    add (observer) {
      this.observers.push(observer)
    }
    notify () {
      this.observers.map((item, index) => {
          item.update()
      })
    }
}
class Observer {
    constructor (name) {
        this.name = name
    }
    update () {
        console.log("I`m " + this.name)
    }
}
var sub = new Subject()
var obs1 = new Observer("obs1")
var obs2  = new Observer("obs2")
sub.add(obs1)
sub.add(obs2)
sub.notify() // I`m obs1   I`m obs2

除了“发布者订阅模式”，你还知道哪些 js 设计模式？这里留个坑，以后再补，东西太多了…

Observe

Observe 的功能就是用来监测数据的变化。它的作用是给对象的属性添加 getter 和 setter，用于依赖收集和派发更新：

这里贴一下源码片段，咱可以感受下：

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that has this object as root $data
  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    def(value, '__ob__', this)
    ...
  }
  walk (obj: Object) {
   ...
  }
  observeArray (items: Array) {
    ...
  }
}

有没有觉得和上面提到的“发布订阅者模式”中的相似。Observer 首先实例化 Dep 对象，接着通过执行 def 函数把自身实例添加到数据对象 value 的 ob 属性上。（def 函数是一个简单的对 Object.defineProperty 的封装）。

Dep

Dep 是整个 getter 依赖收集的核心。

串联高频面试问题，触类旁通，一通百通！_第19张图片

由于 Watcher 是有多个的，所以需要用 Dep 收集变化之后集中管理，再通知到对应的 Watcher。由此也好理解 Dep 是依赖于 Watcher 的。

贴源码片段，感受一下：

export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array;
  constructor () {
    this.id = uid++
    this.subs = []
  }
  addSub (sub: Watcher) {
    this.subs.push(sub)
  }
  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }
  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }
  notify () {
    // stabilize the subscriber list first
    ...
}

Watcher

贴源码片段，感受一二：

export default class Watcher {
  vm: Component;
  expression: string;
  cb: Function;
  id: number;
  deep: boolean;
  user: boolean;
  computed: boolean;
  sync: boolean;
  dirty: boolean;
  active: boolean;
  dep: Dep;
  deps: Array;
  newDeps: Array;
  depIds: SimpleSet;
  newDepIds: SimpleSet;
  before: ?Function;
  getter: Function;
  value: any;
  
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    // options
   ...
    // parse expression for getter
   ...
  }
  get () {
    pushTarget(this)
    ...
  }
  addDep (dep: Dep) {
    const id = dep.id
    ...
  }
  cleanupDeps () {
    ...
  }
  // ...
}

Watcher 会通知视图的更新 re-render。

常见视图更新场景：

  1. 数据变 → 使用数据的视图变（对应：负责敦促视图更新的render-watcher）
  2. 数据变 → 使用数据的计算属性变 → 使用计算属性的视图变（对应：执行敦促计算属性更新的computed-watcher）
  3. 数据变 → 开发者主动注册的watch回调函数执行（对应：用户注册的普通watcher（watch-api或watch属性））

四、组件编译

组件的思想也是 Vue 核心，将组件编译为 vdom ，则也是一重难点！

串联高频面试问题，触类旁通，一通百通！_第20张图片

你可以发现在 Vue 这一节有很多引用的图，其实它们有的相似，更多的是侧重点不同，建议都可按照流程图理解理解，做到融会贯通。

组件

官方示例：

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: ''
})



  



new Vue({ el: '#components-demo' })

组件还涉及：组件之间的通信、插槽、动态组件等内容。后续再表（OS:
这是自己给自己挖了个多大的坑）。

parse

编译过程首先就是对模板做解析，生成 AST，它是一种抽象语法树，是对源代码的抽象语法结构的树状表现形式。在很多编译技术中，如 babel 编译 ES6 的代码都会先生成 AST。这个过程会用到大量的正则表达式对字符串解析，源码很难读。

但是我们需要知道的是 start、end、comment、chars 四大函数。

对于普通标签的处理流程大致：

  1. 识别开始标签，生成匹配结构match。
  2. 处理attrs，将数组处理成 {name:‘xxx’,value:‘xxx’}
  3. 生成astElement，处理for,if和once的标签。
  4. 识别结束标签，将没有闭合标签的元素一起处理。
  5. 建立父子关系，最后再对astElement做所有跟Vue 属性相关对处理。slot、component等等。

参考阅读：Vue parse之 从template到astElement 源码详解

optimize

当我们的模板 template 经过 parse 过程后，会输出生成 AST 树，那么接下来我们需要对这颗树做优化 —— optimize。

optimize 中最重要的是标记静态根（markStaticRoots ）、静态节点（markStatic ）。如果是静态节点则它们生成的DOM永远不需要改变，这让模板的更新更搞笑（不变的节点不用更新）。

问题：为什么子节点的元素类型是静态文本类型，就会给 optimize 过程加大成本呢？
首先来分析一下，之所以在 optimize 过程中做这个静态根节点的优化，目的是什么，成本是什么？

目的：在 patch 过程中，减少不必要的比对过程，加速更新。

成本：a. 需要维护静态模板的存储对象。b. 多层render函数调用。

推荐阅读

codegen

编译的最后一步就是把优化后的 AST 树转换成可执行的代码，即在 codegen 环节。

主要步骤（调用函数）：

  1. generate
  2. genIf
  3. genFor
  4. genData & genChildren

此节考的不多，仅做了解。了解更多，得看源码。

五、常用补充

keep-alive（常考）

keepalive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存。

v-if、v-show、v-for

三个高频子问题：

  1. v-if、v-show 区别？

答：v-if 相当于 display; v-show 相当于 visibility; 前者会控制是否创建，后者仅控制是否隐藏显示。

  1. v-if、v-for 为什么不能放一起用？

答：因为 v-for 优先级比 v-if 高，所以在每次重新渲染的时候会先遍历整个列表，再进行 if 判断是否展示，消耗性能。

  1. v-for 中能用 index 作 key 吗？

答：key 是 diff 算法中用来对比的，用 index 作为 key 并未唯一识别，当插入元素时，key 也会变化。index 作为 key，只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出（官网说明）。

本瓜这里不做细答，想了解更多请自行解决。

自定义指令

Vue 中的混入（Minxin）、自定义指令（directive）、过滤器（filter）有共通之处，在注册的时候，需要平衡局部注册和全局注册的优劣。

transition

本瓜读源码的过程中，发现源码中有较大的篇幅在描述关于transition。在官方文档中，transition 也是作为独立的重要一节来说明。进入/离开 & 列表过渡，Vue 动画&过渡，是容易忽视的点。

六、全家桶

自从用上了 Vue 全家桶，腿也不疼了，腰也不酸了。咦，一口气写五个页面，妈妈再也不用担心我的学习了。（好像有点串广告了…）

Vue-Router

官方的路由管理器

分为两种模式：hash 和 history

  • 默认 hash 模式，通过加锚点的方式
  • history 利用 history.pushState API实现

原生：
HTML5引入了 history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate 配合使用。详情链接

Vuex

官方状态管理

由以下几部分核心组成：

  1. state：数据状态；
  2. mutations：更改状态（计算状态）；
  3. getters：将state中的某个状态进行过滤然后获取新的状态；
  4. actions：执行多个mutation，它可以进行异步操作（async ）；
  5. modules：把状态和管理规则分类来装，让目录结构更清晰；

VueCLI

官方脚手架

  • VueCLI4中很重要的是 vue.config.js 这个文件的配置。

VuePress

静态网站生成器

  • 采用 Vue + webpack，可以在 Markdown 中使用 Vue 组件，页面简洁大方，与 Vue 官网风格统一。

NuxtJS

服务端渲染

七、webpack

只要你做前端有两年经验左右，那一样就得要求自己掌握一款打包工具了。

webpack 原理

官方解释：

webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个_bundle_。

核心概念：

  1. Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
  2. Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
  3. Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
  4. Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
  5. Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。

功能：

代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布。

优化打包速度

  1. 搭载 webpack-parallel-uglify-plugin 插件，加速“压缩JS=>编译成 AST=>还原JS”的过程。
  2. 使用 HappyPack 提升 loader 解析速度。
  3. 使用 DLLPlugin 和 DLLReferencePlugin 插件，提前打包。
  4. tree-shaking 用来消除无用模块。

AMD、CMD

前端模块化有四种规范：CommonJS、AMD、CMD、ES6。

  1. AMD（异步模块定义）
  2. CMD（通用模块定义）
AMD（异步模块定义） CMD（通用模块定义）
速度快 性能较差
会浪费资源 只有真正需要才加载依赖
预先加载所有的依赖，直到使用的时候才执行 直到使用的时候才定义依赖

  1. Node.js是commonJS规范的主要实践者：module、module.exports（exports）、require、global。

  2. ES6 在语言标准的层面上，实现了模块功能，主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

问：比较 import 和 require 的区别？

import require
ES6标准中的模块化解决方案 是node中遵循CommonJS规范的模块化解决方案
不支持动态引入 支持动态引入
是关键词 不是关键词
编译时加载，必须放在模块顶部 运行时加载，理论上来说放在哪里都可以
性能较好 性能较差
实时绑定方式，即导入和导出的值都指向同一个内存地 导出时是值拷贝，就算导出的值变化了，导入的值也不会变化
会编译成require/exports来执行 -

更多：前端模块化：CommonJS,AMD,CMD,ES6

实现plugin插件（腾讯WXG考点）

  1. 创建 plugins/demo-plugin.js 文件；
  2. 传递参数 Options；
  3. 通过 Compilation 写入文件；
  4. 管理 Warnings 和 Errors

从零实现一个 Webpack Plugin

串联四：
你最喜欢什么算法？

其实本瓜想回答：我最喜欢减法！因为幸福生活需要用减法。

算法这一个 part 也已久远，既然逃不掉，那就正面挑战它！其实也没那么难。

一图胜万言
串联高频面试问题，触类旁通，一通百通！_第21张图片

  • 原创脑图，转载请说明出处

串联知识点：数据结构、基础算法、排序算法、进阶算法。

串联记忆：

算法算法我不怕

数据结构打趴下

遍历排序我最溜

指针动态贪心刷

一、数据结构

队列

先入先出。

栈

先入后出。

堆

堆通常是一个可以被看做一棵树的数组对象。

堆总是满足下列性质：

  1. 堆中某个节点的值总是不大于或不小于其父节点的值；
  2. 堆总是一棵完全二叉树。
  • 完全二叉树：在一颗二叉树中，若除最后一层外的其余层都是满的，并且最后一层要么是满的，要么在右边缺少连续若干节点，则此二叉树为完全二叉树（Complete Binary Tree）—— wiki。

（本瓜曾被拷问过这个点，大厂就是会考《数据结构》，别逃避，出来混迟早是要还的）。

链表

  • 循环列表（考点）
// 循环链表
function Node(element){
    this.element = element;
    this.prev = null;
    this.next = null;
}
function display(){
    var current = this.head;
    //检查头节点当循环到头节点时退出循环
    while(!(current.next == null) && !(current.next.element=='head')){
        print(current.next.element);
        current = current.next;
    }
}
function Llist(){
    this.head = new Node('head');
    this.head.next = this.head;
    this.find = find;
    this.insert = insert;
    this.display = display;
    this.findPrevious = findPrevious;
    this.remove = remove;
}

哈希

散列函数（英语：Hash function）又称散列算法、哈希函数。以 Key:Value 的方式存储数据。

哈希表最大的特点是可以快速定位到要查找的数据，查询的时间复杂度接近O(1)。本瓜建议大家可以把这里所有的数据结构的“增删改查”操作的时间复杂度都理一下，也是会被考的。

时间复杂度、空间复杂度

简单理解：

  1. 循环的次数写成 n 的表达式，就是时间复杂度。
  2. 申请的变量数量写成 n 的表达式，就是空间复杂度。

时间复杂度更多重要一点，常见的时间复杂度：O(1)、O(n)、O(logn)、O(n2)。本瓜小TIP：面试/笔试如果不知道怎么算，就在这里面猜吧。实在不行就答：O(n) ~ O(n2) 之间，大概率不会错。

树的遍历（广度、深度）

广度优先遍历（BFS）：

需要用到队列（Queue）来存储节点对象,队列的特点就是先进先出。示例

深度优先遍历（DFS）：

  1. 前序（根结点 -> 左子树 -> 右子树）
  2. 中序（左子树 -> 根结点 -> 右子树）
  3. 后序（左子树 -> 右子树 -> 根结点）

二、基础算法

递归思想

  • 著名的斐波那契数列，你要知道！
function result(){
    if(n==1||n==2){
        return 1
    }
    return reslt(n-2)+result(n-1)
}
  • 函数柯里化，你也要知道！

函数柯里化：是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。—— wiki

    // 普通方式
    var add1 = function(a, b, c){
        return a + b + c;
    }
    // 柯里化
    var add2 = function(a) {
        return function(b) {
            return function(c) {
                return a + b + c;
            }
        }
    }
    // demo
    var foo = function(x) {
        return function(y) {
            return x + y
        }
    }
    foo(3)(4)       // 7

这样处理参数，可以直接追加，而不需要初始传参就写完全。这里只是浅谈，更多请自行探索。

二分法

要求手写二分法，实在不行，能默写也可以啊！

// 二分法：先排序，再找目标
function binary_search(arr,target) {
    let min=0
    let max=arr.length-1
    while(min<=max){
    	let mid=Math.ceil((min+max)/2)
    	if(arr[mid]==target){
    		return mid
    	}else if(arr[mid]>target){
    		max=mid-1
    	}else if(arr[mid]

三、排序算法

排序是比较常用也比较重要的一块，此处并未全列出。仅强调快排和冒泡，会用双循环也行啊。

快速排序

// 快排：选取基准，比基准大的放右边，比基准小的放左边，然后两边用递归
function quickSort(arr, i, j) {
  if(i < j) {
    let left = i;
    let right = j;
    let pivot = arr[left];
    while(i < j) {
      while(arr[j] >= pivot && i < j) {  // 从后往前找比基准小的数
        j--;
      }
      if(i < j) {
        arr[i++] = arr[j];
      }
      while(arr[i] <= pivot && i < j) {  // 从前往后找比基准大的数
        i++;
      }
      if(i < j) {
        arr[j--] = arr[i];
      }
    }
    arr[i] = pivot;
    quickSort(arr, left, i-1);
    quickSort(arr, i+1, right);
    return arr;
  }
}

冒泡排序

// 冒泡：双层循环
    var arr=[10,20,50,100,40,200];
    for(var i=0;iarr[j+1]){
            var temp=arr[j]
            arr[j]=arr[j+1]
            arr[j+1]=temp
        }
    }
    }
    console.log(arr)

四、进阶算法

双指针

看到“有序”和“数组”。立刻把双指针法调度进你的大脑内存。普通双指针走不通，立刻想对撞指针！

示例：合并两个有序数组（双指针解法）

示例: 输入:
nums1 = [1,2,3,0,0,0], m = 3
nums2 = [2,5,6], n = 3
输出: [1,2,2,3,5,6]

/**
 * @param {number[]} nums1
 * @param {number} m
 * @param {number[]} nums2
 * @param {number} n
 * @return {void} Do not return anything, modify nums1 in-place instead.
 */
const merge = function(nums1, m, nums2, n) {
    // 初始化两个指针的指向，初始化 nums1 尾部索引k
    let i = m - 1, j = n - 1, k = m + n - 1
    // 当两个数组都没遍历完时，指针同步移动
    while(i >= 0 && j >= 0) {
        // 取较大的值，从末尾往前填补
        if(nums1[i] >= nums2[j]) {
            nums1[k] = nums1[i] 
            i-- 
            k--
        } else {
            nums1[k] = nums2[j] 
            j-- 
            k--
        }
    }
    
    // nums2 留下的情况，特殊处理一下 
    while(j>=0) {
        nums1[k] = nums2[j]  
        k-- 
        j--
    }
};

高级！

动态规划

动态规划的思想就是把一个大的问题进行拆分，细分成一个个小的子问题，且能够从这些小的子问题的解当中推导出原问题的解。

同时需要满足以下两个重要性质才能进行动态规划:

  1. 最优子结构性
  2. 子问题重叠性质

动态规划实例：斐波拉契数列（上文有提到）

斐波拉契数列：采用递归，虽然代码很简洁，但是明显随着次数的增加，导致递归树增长的非常庞大，耗时较久。

用动态规划实现斐波拉契数列，代码如下

    function feiBoLaQie(n) {
        //创建一个数组，用于存放斐波拉契数组的数值
        let val = [];
        //将数组初始化，将数组的每一项都置为0
        for(let i =0 ;i<=n;i++){
            val[i] = 0;
        }
        if (n==1 || n==2){
            return 1;
        } else{
            val[1] = 1;
            val[2] = 2;
            for (let j =3; j<=n;j++){
                val[j] = val[j-1] + val[j-2];
            }
        }
        return val[n-1];
    }
    console.log(feiBoLaQie(40));//102334155

通过数组 val 中保存了中间结果， 如果要计算的斐波那契数是 1 或者 2， 那么 if 语句会返回 1。 否则，数值 1 和 2 将被保存在 val 数组中 1 和 2 的位置。

循环将会从 3 到输入的参数之间进行遍历， 将数组的每个元素赋值为前两个元素之和， 循环结束， 数组的最后一个元素值即为最终计算得到的斐波那契数值， 这个数值也将作为函数的返回值。

动态规划解决速度更快。

  • 参考阅读
  • 更多动态规划示例

贪心算法

贪心算法遵循一种近似解决问题的技术，期盼通过每个阶段的局部最优选择（当前最好的解），从而达到全局的最优（全局最优解）。

注：贪心得到结果是一个可以接受的解，不一定总是得到最优的解。

示例：最少硬币找零问题

是给出要找零的钱数，以及可以用硬币的额度数量，找出有多少种找零方法。
如：美国面额硬币有：1，5，10，25
我们给36美分的零钱，看能得怎样的结果？

function MinCoinChange(coins){
    var coins = coins;
    var cache = {};
    this.makeChange = function(amount){
        var change = [], total = 0;
        for(var i = coins.length; i >= 0; i--){
            var coin = coins[i];
            while(total + coin <= amount){
                change.push(coin);
                total += coin;
            }
        }
        return change;
    }
}
var minCoinChange = new MinCoinChange([1, 5, 10, 25]);
minCoinChange.makeChange(36);
//[25, 10, 1] 即一个25美分、一个10美分、一个1美分

串联五：
web 安全你知道那些？

一图胜万言
串联高频面试问题，触类旁通，一通百通！_第22张图片

  • 原创脑图，转载请说明出处

串联知识点：跨域、XSS（跨站脚本攻击）、CRFS（跨站请求伪造）、SQL 注入、DNS 劫持、HTTP 劫持。

串联记忆：三跨两劫持一注入

一、跨域

跨域定义

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

跨域限制 是浏览器的一种保护机制，若跨域，则：

  1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。
  2. 无法接触非同源网页的 DOM。
  3. 无法向非同源地址发送 AJAX 请求

跨域解决

跨域解决：

  1. JSONP；
  2. CORS（跨域资源分享）；
// 普通跨域请求：只需服务器端设置 Access-Control-Allow-Origin。
// 带cookie跨域请求：前后端都需要进行设置。

// 如前端在 axios 中设置
axios.defaults.withCredentials = true
  1. vue项目 设置 proxy 代理；
  2. nginx 代理；
  3. 设置document.domain解决无法读取非同源网页的 Cookie问题；
  4. 跨文档通信 API：window.postMessage()；

二、XSS

XSS 原理

XSS的原理是WEB应用程序混淆了用户提交的数据和JS脚本的代码边界，导致浏览器把用户的输入当成了JS代码来执行。XSS的攻击对象是浏览器一端的普通用户。

示例：

">



  您搜索的关键词是：<%= getParameter("keyword") %>

当浏览器请求

http://xxx/search?keyword=">

恶意代码，就会其执行

反射型 XSS

存储型 XSS 的攻击步骤：

  1. 攻击者将恶意代码提交到目标网站的数据库中。
  2. 用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。
  3. 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
  4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。

存储型 XSS

反射型 XSS 的攻击步骤：

  1. 攻击者构造出特殊的 URL，其中包含恶意代码。
  2. 用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。
  3. 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。
  4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库里，反射型 XSS 的恶意代码存在 URL 里。

DOM型 XSS

DOM 型 XSS 的攻击步骤：

  1. 攻击者构造出特殊的 URL，其中包含恶意代码。
  2. 用户打开带有恶意代码的 URL。
  3. 用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。
  4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。

XSS 防御

  1. 输入过滤，不要相信任何客户端的输入；
  2. 对 HTML 做充分转义；
  3. 设置 HTTP-only：禁止 JavaScript 读取某些敏感 Cookie，攻击者完成 XSS 注入后也无法窃取此 Cookie。
  4. 验证码：防止脚本冒充用户提交危险操作。
  5. 谨慎使用：.innerHTML、.outerHTML、document.write()；

三、CSRF

CSRF 原理

跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

曾在 09 年发生了著名的“谷歌邮箱窃取”事件，利用的就是 “CSRF”。

主要流程：

  1. 受害者登录a.com，并保留了登录凭证（Cookie）。
  2. 攻击者引诱受害者访问了b.com。
  3. b.com 向 a.com 发送了一个请求：a.com/act=xx。浏览器会默认携带a.com的Cookie。
  4. a.com接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求。
  5. a.com以受害者的名义执行了act=xx。
  6. 攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让a.com执行了自己定义的操作。

注：攻击者无法直接窃取到用户的信息（Cookie，Header，网站内容等），仅仅是冒用 Cookie 中的信息。

这告诉我们冲浪的时候不能随便点链接，是有风险哒。

CSRF 防御

防御策略：

  1. 自动防御策略：同源检测（Origin 和 Referer 验证）。
  2. 主动防御措施：Token验证 或者 双重Cookie验证 以及配合Samesite Cookie。
  3. 保证页面的幂等性，后端接口不要在GET页面中做用户操作。

四、SQL 注入

SQL 注入原理

Sql 注入攻击是通过将恶意的 Sql 查询或添加语句插入到应用的输入参数中，再在后台 Sql 服务器上解析执行进行的攻击，它目前黑客对数据库进行攻击的最常用手段之一。

SQL 注入防御

防御：用sql语句预编译和绑定变量，是防御sql注入的最佳方法。还可以通过严格检查参数的数据类型的方式来防御。

五、DNS 劫持

DNS 劫持原理

DNS劫持又称域名劫持，是指在劫持的网络范围内拦截域名解析的请求，分析请求的域名，把审查范围以外的请求放行，否则返回假的IP地址或者什么都不做使请求失去响应，其效果就是对特定的网络不能访问或访问的是假网址。其实本质就是对DNS解析服务器做手脚

DNS 劫持防御

解决办法：

DNS的劫持过程是通过攻击运营商的解析服务器来达到目的。我们可以不用运营商的DNS解析而使用自己的解析服务器或者是提前在自己的App中将解析好的域名以IP的形式发出去就可以绕过运营商DNS解析，这样一来也避免了DNS劫持的问题。

六、HTTP 劫持

HTTP 劫持原理

在运营商的路由器节点上，设置协议检测，一旦发现是HTTP请求，而且是html类型请求，则拦截进行恶意处理。
常见有两种：

  1. 类似DNS劫持返回302让用户浏览器跳转到另外的地址。(钓鱼网站就是这么干)
  2. 在服务器返回的HTML数据中插入js或dom节点（广告）。（常见）

HTTP 劫持防御

防御方法：

  1. 使用HTTPS；
  2. 使用禁止转码申明；
  3. 在开发的网页中加入代码过滤：用 js 检查所有的外链是否属于白名单；
  4. 联系运营商；

这一 part 更多的是概念上的东西，不求完全记住，但是也要大致上能说一下。咱老话说的好：知之为知之 不知为不知，面试官在非关键性的问题上是不做严格要求的，千万别满嘴跑火车或者直接说不知道，这是两个极端，都不可取。

小结

显然，前端面试“串联”问题不仅局限以上，本瓜会继续按照这个“串联联想”的思路去整理，不断去打破体系、形成体系（自己给自己挖的天坑呐）。期待在这个反复的过程中找寻真理的痕迹！

如果你对此文有更多想法（持续完善中），或是想与本瓜同行，可以加 Ifuckinghigh，期待更多交流 ~

我是掘金安东尼，一个会持续输出的个人站长。

你可能感兴趣的:(面试,javascript)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • python八股文面试题分享及解析(1) Shawn________ python
    #1.'''a=1b=2不用中间变量交换a和b'''#1.a=1b=2a,b=b,aprint(a)print(b)结果：21#2.ll=[]foriinrange(3):ll.append({'num':i})print(11)结果:#[{'num':0},{'num':1},{'num':2}]#3.kk=[]a={'num':0}foriinrange(3):#0,12#可变类型，不仅仅改变
  • MYSQL面试系列-04 king01299 面试mysql面试
    MYSQL面试系列-0417.关于redolog和binlog的刷盘机制、redolog、undolog作用、GTID是做什么的？innodb_flush_log_at_trx_commit及sync_binlog参数意义双117.1innodb_flush_log_at_trx_commit该变量定义了InnoDB在每次事务提交时，如何处理未刷入（flush）的重做日志信息（redolog）。它
  • Kafka 消息丢失如何处理？ 架构文摘JGWZ 学习
    今天给大家分享一个在面试中经常遇到的问题：Kafka消息丢失该如何处理？这个问题啊，看似简单，其实里面藏着很多“套路”。来，咱们先讲一个面试的“真实”案例。面试官问：“Kafka消息丢失如何处理？”小明一听，反问：“你是怎么发现消息丢失了？”面试官顿时一愣，沉默了片刻后，可能有点不耐烦，说道：“这个你不用管，反正现在发现消息丢失了，你就说如何处理。”小明一头雾水：“问题是都不知道怎么丢的，处理起来
  • 每日算法&面试题，大厂特训二十八天——第二十天（树） 肥学 ⚡算法题⚡面试题每日精进java算法数据结构
    目录标题导读算法特训二十八天面试题点击直接资料领取导读肥友们为了更好的去帮助新同学适应算法和面试题，最近我们开始进行专项突击一步一步来。上一期我们完成了动态规划二十一天现在我们进行下一项对各类算法进行二十八天的一个小总结。还在等什么快来一起肥学进行二十八天挑战吧！！特别介绍小白练手专栏，适合刚入手的新人欢迎订阅编程小白进阶python有趣练手项目里面包括了像《机器人尬聊》《恶搞程序》这样的有趣文章
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • 【华为OD技术面试真题 - 技术面】- python八股文真题题库（4) 算法大师 华为od面试python
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例：文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片（Slicing）操作**基本切片语法
  • 【华为OD技术面试真题 - 技术面】-测试八股文真题题库（1） 算法大师 华为od面试python算法前端
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.黑盒测试和白盒测试的区别2.假设我们公司现在开发一个类似于微信的软件1.0版本，现在要你测试这个功能：打开聊天窗口，输入文本，限制字数在200字以内。问你怎么提取测试点。功能测试性能测试安全性测试可用性测试跨平台兼容性测试网络环境测试3.接口测试的工具你了解哪些
  • 【华为OD技术面试真题精选 - 非技术题】 -HR面，综合面_华为od hr面 一个射手座的程序媛 程序员华为od面试职场和发展
    最后的话最近很多小伙伴找我要Linux学习资料，于是我翻箱倒柜，整理了一些优质资源，涵盖视频、电子书、PPT等共享给大家！资料预览给大家整理的视频资料：给大家整理的电子书资料：如果本文对你有帮助，欢迎点赞、收藏、转发给朋友，让我有持续创作的动力！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以点击这里获
  • 【华为OD技术面试真题 - 技术面】- python八股文真题题库（1） 算法大师 华为od面试python
    华为OD面试真题精选专栏：华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选1.数据预处理流程数据预处理的主要步骤工具和库2.介绍线性回归、逻辑回归模型线性回归（LinearRegression）模型形式：关键点：逻辑回归（LogisticRegression）模型形式：关键点：参数估计与评估：3.python浅拷贝及深拷贝浅拷贝（Shal
  • Java企业面试题3 马龙强_ java
    1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分
  • Java面试题精选：消息队列(二) 芒果不是芒 Java面试题精选javakafka
    一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会
  • 2019考研 | 西交大软件工程 笔者阿蓉
    本科背景：某北京211学校电子信息工程互联网开发工作两年录取结果：全日制软件工程学院分数：初试350+复试笔试80+面试85+总排名：100+从五月份开始脱产学习，我主要说一下专业课和复试还有我对非全的一些看法。【数学100+】张宇，张宇，张宇。跟着张宇学习，入门视频刷一遍，真题刷两遍，错题刷三遍。书刷N多遍。从视频开始学习，是最快的学习方法。5-7月份把主要是数学学好，8-9月份开始给自己每个周
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • Day_11 ROC_bird.. 算法
    面试题16.15.珠玑妙算-力扣（LeetCode）/***Note:Thereturnedarraymustbemalloced,assumecallercallsfree().*///下标和对应位置的值都一样，answer[0]+1,对应位置的值猜对了，但是下标不对，answer[1]+1int*masterMind(char*solution,char*guess,int*returnSiz
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 【从问题中去学习k8s】k8s中的常见面试题（夯实理论基础）（二十八） 向往风的男子 k8s学习kubernetes容器
    本站以分享各种运维经验和运维所需要的技能为主《python零基础入门》：python零基础入门学习《python运维脚本》：python运维脚本实践《shell》：shell学习《terraform》持续更新中：terraform_Aws学习零基础入门到最佳实战《k8》从问题中去学习k8s《docker学习》暂未更新《ceph学习》ceph日常问题解决分享《日志收集》ELK+各种中间件《运维日常》
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Java -jar 如何在后台运行项目 vincent_hahaha
    撸了今年阿里、头条和美团的面试，我有一个重要发现.......>>>说到运行jar包通常我们都会以下面的方式运行:java-jarspringboot-0.0.1-SNAPSHOT.jar这样运行的话会有一个问题，就是我们一关闭当前窗口就会停止运行项目，要想解决这个问题，就需要在后台运行。nohupjava-jarbabyshark-0.0.1-SNAPSHOT.jar >log.file 2>&
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • 【Death Note】网吧战神之7天爆肝渗透测试死亡笔记_sqlmap在默认情况下除了使用 char() 函数防止出现单引号 2401_84561374 程序员笔记
    网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！特殊服务端口2181zookeeper服务未授权访问
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 对于规范和实现，你会混淆吗？ yangshangchuan HotSpot
    昨晚和朋友聊天，喝了点咖啡，由于我经常喝茶，很长时间没喝咖啡了，所以失眠了，于是起床读JVM规范，读完后在朋友圈发了一条信息： JVM Run-Time Data Areas：The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So
  • android 网络 百合不是茶 网络
    android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来  方便查找   ,  服务器使用的是TomCat   服务器代码;  servlet的使用需要在xml中注册 package servlet; import java.io.IOException; import java.util.Arr
  • [读书笔记]读法拉第传 comsci 读书笔记
          1831年的时候,一年可以赚到1000英镑的人..应该很少的...       要成为一个科学家,没有足够的资金支持,很多实验都无法完成       但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......
  • 随机数的产生 沐刃青蛟 随机数
    c++中阐述随机数的方法有两种：   一是产生假随机数（不管操作多少次，所产生的数都不会改变）          这类随机数是使用了默认的种子值产生的，所以每次都是一样的。   //默认种子 for (int i = 0; i < 5; i++) { cout<<
  • PHP检测函数所在的文件名 IT独行者 PHP函数
    很简单的功能，用到PHP中的反射机制，具体使用的是ReflectionFunction类，可以获取指定函数所在PHP脚本中的具体位置。 创建引用脚本。 代码：   [php]   view plain copy // Filename: functions.php    <?php&nbs
  • 银行各系统功能简介 文强chu 金融
    银行各系统功能简介 　 业务系统 核心业务系统 业务功能包括：总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等 清分清算系统 以清算日期为准，将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用，按费用类型计算应收、应付金额，经过清算人员确认后上送核心系统完成结算的过程 国际结算系
  • Python学习1(pip django 安装以及第一个project) 小桔子 pythondjangopip
        最近开始学习python,要安装个pip的工具。听说这个工具很强大，安装了它，在安装第三方工具的话so easy!然后也下载了，按照别人给的教程开始安装，奶奶的怎么也安装不上！ 第一步：官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy! 第二部：解压这个压缩文件，会看到一个setup.p
  • php 数组 aichenglong PHP排序数组循环多维数组
    1 php中的创建数组 $product = array('tires','oil','spark');//array()实际上是语言结构而不  是函数 2 如果需要创建一个升序的排列的数字保存在一个数组中，可以使用range()函数来自动创建数组 $numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10 $numbers=range(1,10,
  • 安装python2.7 AILIKES python
    安装python2.7 1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz 2、复制解压 #mkdir -p /opt/usr/python #cp  /opt/soft/Python-2
  • java异常的处理探讨 百合不是茶 JAVA异常
    //java异常  /* 1，了解java 中的异常处理机制，有三种操作 a,声明异常  b,抛出异常  c,捕获异常 2，学会使用try-catch-finally来处理异常 3，学会如何声明异常和抛出异常 4，学会创建自己的异常   */   //2，学会使用try-catch-finally来处理异常  
  • getElementsByName实例 bijian1013 element
    实例1： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
  • 探索JUnit4扩展：Runner bijian1013 java单元测试JUnit
            参加敏捷培训时，教练提到Junit4的Runner和Rule，于是特上网查一下，发现很多都讲的太理论，或者是举的例子实在是太牵强。多搜索了几下，搜索到两篇我觉得写的非常好的文章。         文章地址：http://www.blogjava.net/jiangshachina/archive/20
  • [MongoDB学习笔记二]MongoDB副本集 bit1129 mongodb
    1. 副本集的特性   1)一台主服务器(Primary),多台从服务器(Secondary)   2)Primary挂了之后，从服务器自动完成从它们之中选举一台服务器作为主服务器，继续工作，这就解决了单点故障，因此，在这种情况下，MongoDB集群能够继续工作   3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来   2
  • 【Spark八十一】Hive in the spark assembly bit1129 assembly
    Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners: 1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)
  • Nginx问题定位之监控进程异常退出 ronin47
    nginx在运行过程中是否稳定，是否有异常退出过？这里总结几项平时会用到的小技巧。 1. 在error.log中查看是否有signal项，如果有，看看signal是多少。 比如，这是一个异常退出的情况： $grep signal error.log 2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s
  • No grammar constraints (DTD or XML schema).....两种解决方法 byalias xml
    方法一：常用方法   关闭XML验证 工具栏：windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。 方法二：（个人推荐） 添加 内容如下 <?xml version=
  • Netty源码学习-DefaultChannelPipeline bylijinnan netty
    package com.ljn.channel; /** * ChannelPipeline采用的是Intercepting Filter 模式 * 但由于用到两个双向链表和内部类，这个模式看起来不是那么明显，需要仔细查看调用过程才发现 * * 下面对ChannelPipeline作一个模拟，只模拟关键代码： */ public class Pipeline {
  • MYSQL数据库常用备份及恢复语句 chicony mysql
    备份MySQL数据库的命令，可以加选不同的参数选项来实现不同格式的要求。 mysqldump -h主机 -u用户名 -p密码 数据库名 > 文件 备份MySQL数据库为带删除表的格式，能够让该备份覆盖已有数据库而不需要手动删除原有数据库。 mysqldump -–add-drop-table -uusername -ppassword databasename > ba
  • 小白谈谈云计算--基于Google三大论文 CrazyMizzz Google云计算GFS
        之前在没有接触到云计算之前，只是对云计算有一点点模糊的概念，觉得这是一个很高大上的东西，似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧，并且在之前的一周里拜读了谷歌三大论文。不敢说理解，至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。     我先说说GFS   &n
  • hadoop 平衡空间设置方法 daizj hadoopbalancer
    在hdfs-site.xml中增加设置balance的带宽，默认只有1M： <property>   <name>dfs.balance.bandwidthPerSec</name>     <value>10485760</value>     <description&g
  • Eclipse程序员要掌握的常用快捷键 dcj3sjt126com 编程
      判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。 曾有人在豆瓣评 《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个 程序员图书列表，目的也就是通过读书，让程序员变懒。  程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可以那么勤奋，每天都孜孜不倦得
  • Android学习之路 dcj3sjt126com Android学习
    转自：http://blog.csdn.net/ryantang03/article/details/6901459 以前有J2EE基础，接触JAVA也有两三年的时间了，上手Android并不困难，思维上稍微转变一下就可以很快适应。以前做的都是WEB项目，现今体验移动终端项目，让我越来越觉得移动互联网应用是未来的主宰。 下面说说我学习Android的感受，我学Android首先是看MARS的视
  • java 遍历Map的四种方法 eksliang javaHashMapjava 遍历Map的四种方法
    转载请出自出处： http://eksliang.iteye.com/blog/2059996 package com.ickes; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; /** * 遍历Map的四种方式
  • 【精典】数据库相关相关 gengzg 数据库
    package C3P0; import java.sql.Connection; import java.sql.SQLException; import java.beans.PropertyVetoException; import com.mchange.v2.c3p0.ComboPooledDataSource; public class DBPool{
  • 自动补全 huyana_town 自动补全
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo
  • jquery在线预览PDF文件，打开PDF文件 天梯梦 jquery
    最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。   核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
  • ViewPager刷新单个页面的方法 lovelease androidviewpagertag刷新
      使用ViewPager做滑动切换图片的效果时，如果图片是从网络下载的，那么再子线程中下载完图片时我们会使用handler通知UI线程，然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新，但是viewpager不同于listview，你会发现单纯的调用notifyDataSetChanged()并不能刷新页面
  • 利用按位取反（~）从复合枚举值里清除枚举值 草料场 enum
    以 C# 中的 System.Drawing.FontStyle 为例。   如果需要同时有多种效果， 如：“粗体”和“下划线”的效果，可以用按位或（|） FontStyle style = FontStyle.Bold | FontStyle.Underline;   如果需要去除 style 里的某一种效果，
  • Linux系统新手学习的11点建议 刘星宇 编程工作linux脚本
    　　随着Linux应用的扩展许多朋友开始接触Linux，根据学习Windwos的经验往往有一些茫然的感觉：不知从何处开始学起。这里介绍学习Linux的一些建议。 　　一、从基础开始：常常有些朋友在Linux论坛问一些问题，不过，其中大多数的问题都是很基础的。例如：为什么我使用一个命令的时候，系统告诉我找不到该目录，我要如何限制使用者的权限等问题，这些问题其实都不是很难的，只要了解了 Linu
  • hibernate dao层应用之HibernateDaoSupport二次封装 wangzhezichuan DAOHibernate
    /** * <p>方法描述:sql语句查询 返回List<Class> </p> * <p>方法备注: Class 只能是自定义类 </p> * @param calzz * @param sql * @return * <p>创建人：王川</p> * <p>创建时间：Jul
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他