面试题总结一

http 状态码及作用 ？

• 常用状态码：

  101：切换协议，服务器根据客户端请求切换协议，只能切换到更高级的协议；

  200：请求成功状态，一般用于GET与POST请求；

  301：永久重定向，请求的资源被永久重定向到新的url中，浏览器也会自动定向到新url页面；

  302：临时重定向，请求资源临时被重定向，客户端使用原有url；

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

  403：服务器拒绝执行客户端的请求，禁止用户访问，没有访问权限；

  404：客户端错误，服务器无法找到页面资源；

  500： 服务器内部错误，无法完成请求；

•   状态码大全：https://www.runoob.com/http/http-status-codes.html

 

浏览器缓存方法及优先级？

     按失效策略分类：（强制缓存 > 对比缓存）

     了解详细可参考：

             https://juejin.im/post/5c22ee806fb9a049fb43b2c5?utm_source=gold_browser_extension#heading-1

             https://juejin.im/post/5b3da02551882519eb6573e2

• 强制缓存（也叫强缓存，当客户端请求后，会先访问缓存数据库看缓存是否存在。如果存在则直接返回；不存在则请求真的服务器，响应后再写入缓存数据库。减少请求数，是提升最大的缓存策略。优先级： Cache-control > Expires）

       Expires（HTTP 1.0 的字段，在响应消息头中，设置这个字段之后，就可以告诉浏览器，在未过期之前不需要再次请求。）：

       表示缓存到期时间，是一个绝对的时间 (当前时间+缓存时间)，如：

Expires: Thu, 10 Nov 2017 08:45:11 GMT 

        缺点：

            1、由于是绝对时间，用户可能会将客户端本地的时间进行修改，而导致浏览器判断缓存失效，重新请求该资源。此外，即使不考虑自信修改，时差或者误差等因素也可能造成客户端与服务端的时间不一致，致使缓存失效。

             2、写法太复杂了。表示时间的字符串多个空格，少个字母，都会导致非法属性从而设置失效。

          

      Cache-Control（HTTP 1.1 的字段，相当于Expires升级版，表示资源缓存的最大有效时间，在该时间内，客户端不需要向服务器发送请求）：

      这两者的区别就是前者是绝对时间，而后者是相对时间。如：

Cache-control: max-age=2592000

      Cache-control 字段完整的参数列表可以查看：MDN

 

• 对比缓存（也叫协商缓存，当强制缓存失效 “超过规定时间” 时，就需要使用对比缓存，由服务器决定缓存内容是否失效。优先级： Etag > Last-Modified）

       Last-Modified & If-Modified-Since（浏览器会将值和内容记录在缓存数据库中，下一次请求相同资源时，浏览器会从缓存中找出“不确定是否过期的”缓存，在请求头中将上次的 Last-Modified 的值写入到请求头的 If-Modified-Since 字段。利用值与字段进行对比：相等则表示未修改，响应304；反之则表示修改了，响应200，返回数据）：

       服务器通过 Last-Modified 字段告知客户端，资源最后一次被修改的时间，如：

Last-Modified: Mon, 10 Nov 2018 09:10:11 GMT

       缺点：

             1、如果资源更新的速度是秒以下单位，那么该缓存是不能被使用的，因为它的时间单位最低是秒。

             2、如果文件是通过服务器动态生成的，那么该方法的更新时间永远是生成的时间，尽管文件可能没有变化，所以起不到缓存的作用。

 

        Etag & If-None-Match（为解决Last-Modified & If-Modified-Since缺陷，出现的一组新字段 Etag 和 If-None-Match）：

        Etag 存储的是文件的特殊标识(一般都是 hash 生成的)，服务器存储着文件的 Etag 字段。之后的流程和 Last-Modified 一致，只是 Last-Modified 字段和它所表示的更新时间改变成了 Etag 字段和它所表示的文件 hash，把 If-Modified-Since 变成了 If-None-Match。服务器同样进行比较，命中返回 304, 不命中返回新资源和 200。

 

 

要减少 https 的请求，https 为什么慢 ？ 

     https 比 不需要加密的 http 要慢得多：

http 耗时 = TCP握手
https 耗时 = TCP握手 + SSL握手（https 也叫 SSL 延迟）

     TCP 握手（22毫秒）：客户端首先发送SYN数据包，然后服务器发送SYN+ACK数据包，最后客户端发送ACK数据包，接下来就可以发送内容了。这三个数据包的发送过程，叫做TCP握手。

     SSL 握手（64毫秒）

     由此可见 在建立连接的阶段，htpps 请求比 http 请求要长3倍的时间，具体数字取决于CPU的快慢。如果是对安全性要求不高的情况下，为了提高网页性能，建议不要采用保密强度很高的数字证书，不然会导致SSL握手的耗时延长。

      解决方法：https://blog.csdn.net/weixin_41451859/article/details/107492308 

http2 与 http1 有什么区别 ？

     http1：

         1、头信息采用文本格式（ASCII编码），数据体可以是文本也可以是二进制； 

         2、线程阻塞，同一时间同一域名的请求有数量限制，超过限制请求会被阻塞；

         3、浏览器与服务器只能保持短暂的连接，浏览器每次请求都需要与服务器建立 TCP 连接（ TCP 连接需三次握手导致成本高），服务器完成请求后断开TCP连接，服务器不跟踪每个客户也不记录历史请求。（解决方法：添加头信息，Connection: keep-alive）

  

      http2（现阶段必须使用https，保护网站的数据安全）：

          1、头信息和数据体都采用二进制格式； （解析更高效）

          2、完全多路复用，可同时发送多个请求或回应，不需要按照顺序一一对应，避免阻塞。（解决阻塞问题，与 http1 最重要的区别）

          3、报头压缩，对于相同的头部，不需再通过请求发送，只需发送一次；（降低开销） 

          4、服务器推送，提升首屏加载速度，允许 Web 服务器在收到浏览器的请求之前，提前发送一些资源给客户端。

 

click DOM 节点的 inner 与 outer 的执行机制，考查事件冒泡与事件捕获 （看试题给结果，分析过程）。

• 直接 DOM 绑定事件：<div οnclick=”test()”>xx</div> …
• JS 中 onclick 绑定：xxx.onclick = test （在 addEventListener 第三个参数控制开始阶段，true 为捕捉阶段开始，false 则跳过捕捉阶段，从冒泡开始）
• 通过事件添加绑定：addEventListener(xxx, ‘click’, test)

      DOM 事件流有三个阶段：

           事件捕捉：事件从最顶层元素开始，逐次进入dom内部，最后到达目标元素，依次执行绑定在其上的事件；

           事件目标：检测机制到达目标元素，按事件注册顺序执行绑定在目标元素上的事件；

           事件冒泡：事件从最里层（目标元素）开始，往父级、body、document、window，逐级向上延申；

for 循环中的 var 、let 与 const 区别，比如 for( const i = 0; i< 3; i++ ){ console.log(i); } 会输出什么结果 ？（看试题给结果，分析过程）。

      var：函数级作用域，定义变量，子域可访问父域，父域不可访问子域；

// 一秒后 输出三次：3

for( var i = 0; i < 3; i++ ) { 
   setTimeout(() => {
      console.log(i); 
   }, 1000)
}

      let：块级作用域，定义变量，外界不可访问；

// 一秒后 输出三次，分别是：0 1 2

for( let i = 0; i < 3; i++ ) { 
   setTimeout(() => {
      console.log(i); 
   }, 1000)
}

      const：常量，不可被改变，改变即报错；

// 输出一次：0
// i++ 时会报错
// 常量值不可改变

for( const i = 0; i < 3; i++ ) { 
   console.log(i); 
}