关于javascript:2022秋招前端面试题五附答案

实现一个扇形

用 CSS 实现扇形的思路和三角形基本一致，就是多了一个圆角的款式，实现一个 90°的扇形：

div{
    border: 100px solid transparent;
    width: 0;
    heigt: 0;
    border-radius: 100px;
    border-top-color: red;
}
复制代码

数组有哪些原生办法？

• 数组和字符串的转换方法：toString()、toLocalString()、join() 其中 join() 办法能够指定转换为字符串时的分隔符。
• 数组尾部操作的办法 pop() 和 push()，push 办法能够传入多个参数。
• 数组首部操作的办法 shift() 和 unshift() 重排序的办法 reverse() 和 sort()，sort() 办法能够传入一个函数来进行比拟，传入前后两个值，如果返回值为负数，则替换两个参数的地位。
• 数组连贯的办法 concat()，返回的是拼接好的数组，不影响原数组。
• 数组截取方法 slice()，用于截取数组中的一部分返回，不影响原数组。
• 数组插入方法 splice()，影响原数组查找特定项的索引的办法，indexOf() 和 lastIndexOf() 迭代办法 every()、some()、filter()、map() 和 forEach() 办法
• 数组归并办法 reduce() 和 reduceRight() 办法

HTTP 和 HTTPS 协定的区别

HTTP 和 HTTPS 协定的次要区别如下：

• HTTPS 协定须要 CA 证书，费用较高；而 HTTP 协定不须要；
• HTTP 协定是超文本传输协定，信息是明文传输的，HTTPS 则是具备安全性的 SSL 加密传输协定；
• 应用不同的连贯形式，端口也不同，HTTP 协定端口是 80，HTTPS 协定端口是 443；
• HTTP 协定连贯很简略，是无状态的；HTTPS 协定是有 SSL 和 HTTP 协定构建的可进行加密传输、身份认证的网络协议，比 HTTP 更加平安。

DNS 协定是什么

概念：DNS 是域名零碎 (Domain Name System) 的缩写，提供的是一种主机名到 IP 地址的转换服务，就是咱们常说的域名零碎。它是一个由分层的 DNS 服务器组成的分布式数据库，是定义了主机如何查问这个分布式数据库的形式的应用层协定。可能使人更不便的拜访互联网，而不必去记住可能被机器间接读取的 IP 数串。

作用：将域名解析为 IP 地址，客户端向 DNS 服务器（DNS 服务器有本人的 IP 地址）发送域名查问申请，DNS 服务器告知客户机 Web 服务器的 IP 地址。

HTTPS是如何保障平安的？

先了解两个概念：

• 对称加密：即通信的双⽅都使⽤同⼀个秘钥进⾏加解密，对称加密尽管很简略性能也好，然而⽆法解决⾸次把秘钥发给对⽅的问题，很容易被⿊客拦挡秘钥。
• ⾮对称加密：
• 私钥 + 公钥 = 密钥对
• 即⽤私钥加密的数据, 只有对应的公钥能力解密, ⽤公钥加密的数据, 只有对应的私钥能力解密
• 因为通信双⽅的⼿⾥都有⼀套⾃⼰的密钥对, 通信之前双⽅会先把⾃⼰的公钥都先发给对⽅
• 而后对⽅再拿着这个公钥来加密数据响应给对⽅, 等到到了对⽅那⾥, 对⽅再⽤⾃⼰的私钥进⾏解密

⾮对称加密尽管安全性更⾼，然而带来的问题就是速度很慢，影响性能。

解决⽅案：

联合两种加密⽅式，将对称加密的密钥使⽤⾮对称加密的公钥进⾏加密，而后发送进来，接管⽅使⽤私钥进⾏解密失去对称加密的密钥，而后双⽅能够使⽤对称加密来进⾏沟通。

此时⼜带来⼀个问题，两头⼈问题：
如果此时在客户端和服务器之间存在⼀个两头⼈, 这个两头⼈只须要把本来双⽅通信互发的公钥, 换成⾃⼰的公钥, 这样两头⼈就能够轻松解密通信双⽅所发送的所有数据。

所以这个时候须要⼀个平安的第三⽅颁发证书（CA），证实身份的身份，防⽌被两头⼈攻打。证书中包含：签发者、证书⽤途、使⽤者公钥、使⽤者私钥、使⽤者的 HASH 算法、证书到期工夫等。

然而问题来了，如果两头⼈篡改了证书，那么身份证明是不是就⽆效了？这个证实就⽩买了，这个时候须要⼀个新的技术，数字签名。

数字签名就是⽤ CA ⾃带的 HASH 算法对证书的内容进⾏ HASH 失去⼀个摘要，再⽤ CA 的私钥加密，最终组成数字签名。当别⼈把他的证书发过来的时候, 我再⽤同样的 Hash 算法, 再次⽣成音讯摘要，而后⽤ CA 的公钥对数字签名解密, 失去 CA 创立的音讯摘要, 两者⼀⽐, 就晓得两头有没有被⼈篡改了。这个时候就能最⼤水平保障通信的平安了。

DNS 残缺的查问过程

DNS 服务器解析域名的过程：

• 首先会在 浏览器的缓存 中查找对应的 IP 地址，如果查找到间接返回，若找不到持续下一步
• 将申请发送给 本地 DNS 服务器，在本地域名服务器缓存中查问，如果查找到，就间接将查找后果返回，若找不到持续下一步
• 本地 DNS 服务器向 根域名服务器 发送申请，根域名服务器会返回一个所查问域的顶级域名服务器地址
• 本地 DNS 服务器向 顶级域名服务器 发送申请，承受申请的服务器查问本人的缓存，如果有记录，就返回查问后果，如果没有就返回相干的下一级的权威域名服务器的地址
• 本地 DNS 服务器向 权威域名服务器 发送申请，域名服务器返回对应的后果
• 本地 DNS 服务器将返回后果保留在缓存中，便于下次应用
• 本地 DNS 服务器将返回后果返回给浏览器

比方要查问 IP 地址，首先会在浏览器的缓存中查找是否有该域名的缓存，如果不存在就将申请发送到本地的 DNS 服务器中，本地 DNS 服务器会判断是否存在该域名的缓存，如果不存在，则向根域名服务器发送一个申请，根域名服务器返回负责 .com 的顶级域名服务器的 IP 地址的列表。而后本地 DNS 服务器再向其中一个负责 .com 的顶级域名服务器发送一个申请，负责 .com 的顶级域名服务器返回负责 .baidu 的权威域名服务器的 IP 地址列表。而后本地 DNS 服务器再向其中一个权威域名服务器发送一个申请，最初权威域名服务器返回一个对应的主机名的 IP 地址列表。

HTTP 协定的长处和毛病

HTTP 是超文本传输协定，它定义了客户端和服务器之间替换报文的格局和形式，默认应用 80 端口。它应用 TCP 作为传输层协定，保障了数据传输的可靠性。

HTTP 协定具备以下 长处：

• 反对客户端 / 服务器模式
• 简略疾速：客户向服务器申请服务时，只需传送申请办法和门路。因为 HTTP 协定简略，使得 HTTP 服务器的程序规模小，因此通信速度很快。
• 无连贯：无连贯就是限度每次连贯只解决一个申请。服务器解决完客户的申请，并收到客户的应答后，即断开连接，采纳这种形式能够节俭传输工夫。
• 无状态：HTTP 协定是无状态协定，这里的状态是指通信过程的上下文信息。短少状态意味着如果后续解决须要后面的信息，则它必须重传，这样可能会导致每次连贯传送的数据量增大。另一方面，在服务器不须要先前信息时它的应答就比拟快。
• 灵便：HTTP 容许传输任意类型的数据对象。正在传输的类型由 Content-Type 加以标记。

HTTP 协定具备以下 毛病：

• 无状态： HTTP 是一个无状态的协定，HTTP 服务器不会保留对于客户的任何信息。
• 明文传输： 协定中的报文应用的是文本模式，这就间接裸露给外界，不平安。
• 不平安

（1）通信应用明文（不加密），内容可能会被窃听；
（2）不验证通信方的身份，因而有可能遭逢假装；
（3）无奈证实报文的完整性，所以有可能已遭篡改；

ajax、axios、fetch 的区别

（1）AJAX Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创立交互式网页利用的网页开发技术。它是一种在无需从新加载整个网页的状况下，可能更新局部网页的技术。通过在后盾与服务器进行大量数据交换，Ajax 能够使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某局部进行更新。传统的网页（不应用 Ajax）如果须要更新内容，必须重载整个网页页面。其毛病如下：

• 自身是针对 MVC 编程，不合乎前端 MVVM 的浪潮
• 基于原生 XHR 开发，XHR 自身的架构不清晰
• 不合乎关注拆散（Separation of Concerns）的准则
• 配置和调用形式十分凌乱，而且基于事件的异步模型不敌对。

（2）Fetch fetch 号称是 AJAX 的替代品，是在 ES6 呈现的，应用了 ES6 中的 promise 对象。Fetch 是基于 promise 设计的。Fetch 的代码构造比起 ajax 简略多。fetch 不是 ajax 的进一步封装，而是原生 js，没有应用 XMLHttpRequest 对象。

fetch 的长处：

• 语法简洁，更加语义化
• 基于规范 Promise 实现，反对 async/await
• 更加底层，提供的 API 丰盛（request, response）
• 脱离了 XHR，是 ES 标准里新的实现形式

fetch 的毛病：

• fetch 只对网络申请报错，对 400，500 都当做胜利的申请，服务器返回 400，500 错误码时并不会 reject，只有网络谬误这些导致申请不能实现时，fetch 才会被 reject。
• fetch 默认不会带 cookie，须要增加配置项：fetch(url, {credentials: ‘include’})
• fetch 不反对 abort，不反对超时管制，应用 setTimeout 及 Promise.reject 的实现的超时管制并不能阻止申请过程持续在后盾运行，造成了流量的节约
• fetch 没有方法原生监测申请的进度，而 XHR 能够

（3）Axios Axios 是一种基于 Promise 封装的 HTTP 客户端，其特点如下：

• 浏览器端发动 XMLHttpRequests 申请
• node 端发动 http 申请
• 反对 Promise API
• 监听申请和返回
• 对申请和返回进行转化
• 勾销申请
• 主动转换 json 数据
• 客户端反对抵挡 XSRF 攻打

HTTP 状态码

状态码的类别：

1. 2XX (Success 胜利状态码)

状态码 2XX 示意申请被失常解决了。

（1）200 OK

200 OK 示意客户端发来的申请被服务器端失常解决了。

（2）204 No Content

该状态码示意客户端发送的申请曾经在服务器端失常解决了，然而没有返回的内容，响应报文中不蕴含实体的主体局部。个别在只须要从客户端往服务器端发送信息，而服务器端不须要往客户端发送内容时应用。

（3）206 Partial Content

该状态码示意客户端进行了范畴申请，而服务器端执行了这部分的 GET 申请。响应报文中蕴含由 Content-Range 指定范畴的实体内容。

2. 3XX (Redirection 重定向状态码)

3XX 响应结果表明浏览器须要执行某些非凡的解决以正确处理申请。

（1）301 Moved Permanently

永恒重定向。 该状态码示意申请的资源曾经被调配了新的 URI，当前应应用资源指定的 URI。新的 URI 会在 HTTP 响应头中的 Location 首部字段指定。若用户曾经把原来的 URI 保留为书签，此时会依照 Location 中新的 URI 从新保留该书签。同时，搜索引擎在抓取新内容的同时也将旧的网址替换为重定向之后的网址。

应用场景：

• 当咱们想换个域名，旧的域名不再应用时，用户拜访旧域名时用 301 就重定向到新的域名。其实也是通知搜索引擎收录的域名须要对新的域名进行收录。
• 在搜索引擎的搜寻后果中呈现了不带 www 的域名，而带 www 的域名却没有收录，这个时候能够用 301 重定向来通知搜索引擎咱们指标的域名是哪一个。

（2）302 Found

长期重定向。 该状态码示意申请的资源被调配到了新的 URI，心愿用户（本次）能应用新的 URI 拜访资源。和 301 Moved Permanently 状态码类似，然而 302 代表的资源不是被永恒重定向，只是长期性质的。也就是说已挪动的资源对应的 URI 未来还有可能产生扭转。若用户把 URI 保留成书签，但不会像 301 状态码呈现时那样去更新书签，而是仍旧保留返回 302 状态码的页面对应的 URI。同时，搜索引擎会抓取新的内容而保留旧的网址。因为服务器返回 302 代码，搜索引擎认为新的网址只是临时的。

应用场景：

• 当咱们在做流动时，登录到首页主动重定向，进入流动页面。
• 未登陆的用户拜访用户核心重定向到登录页面。
• 拜访 404 页面从新定向到首页。

（3）303 See Other

该状态码示意因为申请对应的资源存在着另一个 URI，应应用 GET 办法定向获取申请的资源。
303 状态码和 302 Found 状态码有着类似的性能，然而 303 状态码明确示意客户端该当采纳 GET 办法获取资源。

303 状态码通常作为 PUT 或 POST 操作的返回后果，它示意重定向链接指向的不是新上传的资源，而是另外一个页面，比方音讯确认页面或上传进度页面。而申请重定向页面的办法要总是应用 GET。

留神：

• 当 301、302、303 响应状态码返回时，简直所有的浏览器都会把 POST 改成 GET，并删除申请报文内的主体，之后申请会再次主动发送。
• 301、302 规范是禁止将 POST 办法变成 GET 办法的，但理论大家都会这么做。

（4）304 Not Modified

浏览器缓存相干。 该状态码示意客户端发送附带条件的申请时，服务器端容许申请拜访资源，但未满足条件的状况。304 状态码返回时，不蕴含任何响应的主体局部。304 尽管被划分在 3XX 类别中，然而和重定向没有关系。

带条件的申请（Http 条件申请）：应用 Get 办法 申请，申请报文中蕴含（if-match、if-none-match、if-modified-since、if-unmodified-since、if-range）中任意首部。

状态码 304 并不是一种谬误，而是通知客户端有缓存，间接应用缓存中的数据。返回页面的只有头部信息，是没有内容局部的，这样在肯定水平上进步了网页的性能。

（5）307 Temporary Redirect

307 示意长期重定向。 该状态码与 302 Found 有着雷同含意，只管 302 规范禁止 POST 变成 GET，然而理论应用时还是这样做了。

307 会恪守浏览器规范，不会从 POST 变成 GET。然而对于解决申请的行为时，不同浏览器还是会呈现不同的状况。标准要求浏览器持续向 Location 的地址 POST 内容。标准要求浏览器持续向 Location 的地址 POST 内容。

3. 4XX (Client Error 客户端谬误状态码)

4XX 的响应结果表明客户端是产生谬误的起因所在。

（1）400 Bad Request

该状态码示意申请报文中存在语法错误。当谬误产生时，需批改申请的内容后再次发送申请。另外，浏览器会像 200 OK 一样看待该状态码。

（2）401 Unauthorized

该状态码示意发送的申请须要有通过 HTTP 认证 (BASIC 认证、DIGEST 认证) 的认证信息。若之前已进行过一次申请，则示意用户认证失败

返回含有 401 的响应必须蕴含一个实用于被申请资源的 WWW-Authenticate 首部用以质询 (challenge) 用户信息。当浏览器首次接管到 401 响应，会弹出认证用的对话窗口。

以下状况会呈现 401：

• 401.1 – 登录失败。
• 401.2 – 服务器配置导致登录失败。
• 401.3 – 因为 ACL 对资源的限度而未取得受权。
• 401.4 – 筛选器受权失败。
• 401.5 – ISAPI/CGI 应用程序受权失败。
• 401.7 – 拜访被 Web 服务器上的 URL 受权策略回绝。这个错误代码为 IIS 6.0 所专用。

（3）403 Forbidden

该状态码表明申请资源的拜访被服务器回绝了，服务器端没有必要给出具体理由，然而能够在响应报文实体的主体中进行阐明。进入该状态后，不能再持续进行验证。该拜访是永恒禁止的，并且与应用逻辑密切相关。

IIS 定义了许多不同的 403 谬误，它们指明更为具体的谬误起因：

• 403.1 – 执行拜访被禁止。
• 403.2 – 读拜访被禁止。
• 403.3 – 写访问被禁止。
• 403.4 – 要求 SSL。
• 403.5 – 要求 SSL 128。
• 403.6 – IP 地址被回绝。
• 403.7 – 要求客户端证书。
• 403.8 – 站点拜访被回绝。
• 403.9 – 用户数过多。
• 403.10 – 配置有效。
• 403.11 – 明码更改。
• 403.12 – 回绝拜访映射表。
• 403.13 – 客户端证书被撤消。
• 403.14 – 回绝目录列表。
• 403.15 – 超出客户端拜访许可。
• 403.16 – 客户端证书不受信赖或有效。
• 403.17 – 客户端证书已过期或尚未失效
• 403.18 – 在以后的应用程序池中不能执行所申请的 URL。这个错误代码为 IIS 6.0 所专用。
• 403.19 – 不能为这个应用程序池中的客户端执行 CGI。这个错误代码为 IIS 6.0 所专用。
• 403.20 – Passport 登录失败。这个错误代码为 IIS 6.0 所专用。

（4）404 Not Found

该状态码表明服务器上无奈找到申请的资源。除此之外，也能够在服务器端拒绝请求且不想阐明理由时应用。
以下状况会呈现 404：

• 404.0 -（无）– 没有找到文件或目录。
• 404.1 – 无奈在所申请的端口上拜访 Web 站点。
• 404.2 – Web 服务扩大锁定策略阻止本申请。
• 404.3 – MIME 映射策略阻止本申请。

（5）405 Method Not Allowed

该状态码示意客户端申请的办法尽管能被服务器辨认，然而服务器禁止应用该办法。GET 和 HEAD 办法，服务器应该总是容许客户端进行拜访。客户端能够通过 OPTIONS 办法（预检）来查看服务器容许的拜访办法, 如下

Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
复制代码

4. 5XX (Server Error 服务器谬误状态码)

5XX 的响应结果表明服务器自身产生谬误.

（1）500 Internal Server Error

该状态码表明服务器端在执行申请时产生了谬误。也有可能是 Web 利用存在的 bug 或某些长期的故障。

（2）502 Bad Gateway

该状态码表明表演网关或代理角色的服务器，从上游服务器中接管到的响应是有效的。留神，502 谬误通常不是客户端可能修复的，而是须要由途经的 Web 服务器或者代理服务器对其进行修复。以下状况会呈现 502：

• 502.1 – CGI（通用网关接口）应用程序超时。
• 502.2 – CGI（通用网关接口）应用程序出错。

（3）503 Service Unavailable

该状态码表明服务器临时处于超负载或正在进行停机保护，当初无奈解决申请。如果当时得悉解除以上情况须要的工夫，最好写入 RetryAfter 首部字段再返回给客户端。

应用场景：

• 服务器停机保护时，被动用 503 响应申请；
• nginx 设置限速，超过限速，会返回 503。

（4）504 Gateway Timeout

该状态码示意网关或者代理的服务器无奈在规定的工夫内取得想要的响应。他是 HTTP 1.1 中新退出的。

应用场景：代码执行工夫超时，或者产生了死循环。

5. 总结

（1）2XX 胜利

• 200 OK，示意从客户端发来的申请在服务器端被正确处理
• 204 No content，示意申请胜利，但响应报文不含实体的主体局部
• 205 Reset Content，示意申请胜利，但响应报文不含实体的主体局部，然而与 204 响应不同在于要求申请方重置内容
• 206 Partial Content，进行范畴申请

（2）3XX 重定向

• 301 moved permanently，永久性重定向，示意资源已被调配了新的 URL
• 302 found，临时性重定向，示意资源长期被调配了新的 URL
• 303 see other，示意资源存在着另一个 URL，应应用 GET 办法获取资源
• 304 not modified，示意服务器容许拜访资源，但因产生申请未满足条件的状况
• 307 temporary redirect，长期重定向，和 302 含意相似，然而冀望客户端放弃申请办法不变向新的地址发出请求

（3）4XX 客户端谬误

• 400 bad request，申请报文存在语法错误
• 401 unauthorized，示意发送的申请须要有通过 HTTP 认证的认证信息
• 403 forbidden，示意对申请资源的拜访被服务器回绝
• 404 not found，示意在服务器上没有找到申请的资源

（4）5XX 服务器谬误

• 500 internal sever error，示意服务器端在执行申请时产生了谬误
• 501 Not Implemented，示意服务器不反对以后申请所须要的某个性能
• 503 service unavailable，表明服务器临时处于超负载或正在停机保护，无奈解决申请

UDP 协定为什么不牢靠？

UDP 在传输数据之前不须要先建设连贯，远地主机的运输层在接管到 UDP 报文后，不须要确认，提供不牢靠交付。总结就以下四点：

• 不保障音讯交付：不确认，不重传，无超时
• 不保障交付程序：不设置包序号，不重排，不会产生队首阻塞
• 不跟踪连贯状态：不用建设连贯或重启状态机
• 不进行拥塞管制：不内置客户端或网络反馈机制

即时通讯的实现：短轮询、长轮询、SSE 和 WebSocket 间的区别？

短轮询和长轮询的目标都是用于实现客户端和服务器端的一个即时通讯。

短轮询的基本思路： 浏览器每隔一段时间向浏览器发送 http 申请，服务器端在收到申请后，不管是否有数据更新，都间接进行响应。这种形式实现的即时通信，实质上还是浏览器发送申请，服务器承受申请的一个过程，通过让客户端一直的进行申请，使得客户端可能模仿实时地收到服务器端的数据的变动。这种形式的长处是比较简单，易于了解。毛病是这种形式因为须要一直的建设 http 连贯，重大节约了服务器端和客户端的资源。当用户减少时，服务器端的压力就会变大，这是很不合理的。

长轮询的基本思路： 首先由客户端向服务器发动申请，当服务器收到客户端发来的申请后，服务器端不会间接进行响应，而是先将这个申请挂起，而后判断服务器端数据是否有更新。如果有更新，则进行响应，如果始终没有数据，则达到肯定的工夫限度才返回。客户端 JavaScript 响应处理函数会在解决完服务器返回的信息后，再次发出请求，从新建设连贯。长轮询和短轮询比起来，它的长处是显著缩小了很多不必要的 http 申请次数，相比之下节约了资源。长轮询的毛病在于，连贯挂起也会导致资源的节约。

SSE 的根本思维： 服务器应用流信息向服务器推送信息。严格地说，http 协定无奈做到服务器被动推送信息。然而，有一种变通方法，就是服务器向客户端申明，接下来要发送的是流信息。也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过去。这时，客户端不会敞开连贯，会始终等着服务器发过来的新的数据流，视频播放就是这样的例子。SSE 就是利用这种机制，应用流信息向浏览器推送信息。它基于 http 协定，目前除了 IE/Edge，其余浏览器都反对。它绝对于后面两种形式来说，不须要建设过多的 http 申请，相比之下节约了资源。

WebSocket 是 HTML5 定义的一个新协定议，与传统的 http 协定不同，该协定容许由服务器被动的向客户端推送信息。应用 WebSocket 协定的毛病是在服务器端的配置比较复杂。WebSocket 是一个全双工的协定，也就是通信单方是平等的，能够互相发送音讯，而 SSE 的形式是单向通信的，只能由服务器端向客户端推送信息，如果客户端须要发送信息就是属于下一个 http 申请了。

下面的四个通信协议，前三个都是基于 HTTP 协定的。

对于这四种即便通信协议，从性能的角度来看：WebSocket > 长连贯（SEE）> 长轮询 > 短轮询 然而，咱们如果思考浏览器的兼容性问题，程序就恰恰相反了： 短轮询 > 长轮询 > 长连贯（SEE）> WebSocket 所以，还是要依据具体的应用场景来判断应用哪种形式。

HTTP 状态码 304 是多好还是少好

服务器为了进步网站访问速度，对之前拜访的局部页面指定缓存机制，当客户端在此对这些页面进行申请，服务器会依据缓存内容判断页面与之前是否雷同，若雷同便间接返回 304，此时客户端调用缓存内容，不用进行二次下载。

状态码 304 不应该认为是一种谬误，而是对客户端 有缓存状况下 服务端的一种响应。

搜索引擎蜘蛛会更加青眼内容源更新频繁的网站。通过特定工夫内对网站抓取返回的状态码来调节对该网站的抓取频次。若网站在肯定工夫内始终处于 304 的状态，那么蜘蛛可能会升高对网站的抓取次数。相同，若网站变动的频率十分之快，每次抓取都能获取新内容，那么与日俱增，的回访率也会进步。

产生较多 304 状态码的起因：

• 页面更新周期长或不更新
• 纯动态页面或强制生成动态 html

304 状态码呈现过多会造成以下问题：

• 网站快照进行；
• 收录缩小；
• 权重降落。

常见的位运算符有哪些？其计算规定是什么？

古代计算机中数据都是以二进制的模式存储的，即 0、1 两种状态，计算机对二进制数据进行的运算加减乘除等都是叫位运算，行将符号位独特参加运算的运算。

常见的位运算有以下几种：

1. 按位与运算符（&）

定义： 加入运算的两个数据 按二进制位 进行“与”运算。运算规定：

0 & 0 = 0  
0 & 1 = 0  
1 & 0 = 0  
1 & 1 = 1
复制代码

总结：两位同时为 1，后果才为 1，否则后果为 0。
例如：3&5 即：

0000 0011 
   0000 0101 
 = 0000 0001
复制代码

因而 3&5 的值为 1。
留神：正数按补码模式加入按位与运算。

用处：

（1）判断奇偶

只有依据最未位是 0 还是 1 来决定，为 0 就是偶数，为 1 就是奇数。因而能够用 if ((i & 1) == 0) 代替 if (i % 2 == 0) 来判断 a 是不是偶数。

（2）清零

如果想将一个单元清零，即便其全副二进制位为 0，只有与一个各位都为零的数值相与，后果为零。

2. 按位或运算符（|）

定义： 加入运算的两个对象按二进制位进行“或”运算。

运算规定：

0 | 0 = 0
0 | 1 = 1  
1 | 0 = 1  
1 | 1 = 1
复制代码

总结：加入运算的两个对象只有有一个为 1，其值为 1。
例如：3| 5 即：

0000 0011
  0000 0101 
= 0000 0111
复制代码

因而，3| 5 的值为 7。
留神：正数按补码模式加入按位或运算。

3. 异或运算符（^）

定义： 加入运算的两个数据按二进制位进行“异或”运算。

运算规定：

0 ^ 0 = 0  
0 ^ 1 = 1  
1 ^ 0 = 1  
1 ^ 1 = 0
复制代码

总结：加入运算的两个对象，如果两个相应位雷同为 0，相异为 1。
例如：3| 5 即：

0000 0011
  0000 0101 
= 0000 0110
复制代码

因而，3^5 的值为 6。
异或运算的性质:

• 交换律：(a^b)^c == a^(b^c)
• 结合律：(a + b)^c == a^b + b^c
• 对于任何数 x，都有 x^x=0，x^0=x
• 自反性: a^b^b=a^0=a;

4. 取反运算符 (~)

定义： 加入运算的一个数据按二进制进行“取反”运算。

运算规定：

~ 1 = 0~ 0 = 1
复制代码

总结：对一个二进制数按位取反，行将 0 变 1，1 变 0。
例如：~6 即：

0000 0110= 1111 1001
复制代码

在计算机中，负数用原码示意，正数应用补码存储，首先看最高位，最高位 1 示意正数，0 示意负数。此计算机二进制码为正数，最高位为符号位。
当发现按位取反为正数时，就 间接取其补码，变为十进制：

0000 0110   = 1111 1001 反码：1000 0110 补码：1000 0111
复制代码

因而，~6 的值为 -7。

5. 左移运算符（<<）

定义： 将一个运算对象的各二进制位全副左移若干位，右边的二进制位抛弃，左边补 0。
设 a=1010 1110，a = a<< 2 将 a 的二进制位左移 2 位、右补 0，即得 a =1011 1000。
若左移时舍弃的高位不蕴含 1，则每左移一位，相当于该数乘以 2。

6. 右移运算符（>>）

定义： 将一个数的各二进制位全副右移若干位，负数左补 0，正数左补 1，左边抛弃。
例如：a=a>>2 将 a 的二进制位右移 2 位，左补 0 或者 左补 1 得看被移数是正还是负。
操作数每右移一位，相当于该数除以 2。

7. 原码、补码、反码

下面提到了补码、反码等常识，这里就补充一下。
计算机中的 有符号数 有三种示意办法，即原码、反码和补码。三种示意办法均有符号位和数值位两局部，符号位都是用 0 示意“正”，用 1 示意“负”，而数值位，三种示意办法各不相同。

（1）原码

原码就是一个数的二进制数。例如：10 的原码为 0000 1010

（2）反码

• 负数的反码与原码雷同，如：10 反码为 0000 1010
• 正数的反码为除符号位，按位取反，即 0 变 1，1 变 0。

例如：-10

原码：1000 1010
反码：1111 0101
复制代码

（3）补码

• 负数的补码与原码雷同，如：10 补码为 0000 1010
• 正数的补码是原码除符号位外的所有位取反即 0 变 1，1 变 0，而后加 1，也就是反码加 1。

例如：-10

原码：1000 1010
反码：1111 0101
补码：1111 0110
复制代码

说一下怎么取出数组最多的一项？

// 我这里只是一个示例
const d = {};
let ary = ['赵', '钱', '孙', '孙', '李', '周', '李', '周', '周', '李'];
ary.forEach(k => !d[k] ? d[k] = 1 : d[k]++);
const result = Object.keys(d).sort((a, b) => d[b] - d[a]).filter((k, i, l) => d[k] === d[l[0]]);
console.log(result)
复制代码

Promise 是什么?

Promise 是异步编程的一种解决方案：从语法上讲，promise 是一个对象，从它能够获取异步操作的音讯；从本意上讲，它是承诺，承诺它过一段时间会给你一个后果。promise 有三种状态：pending(期待态)，fulfiled(胜利态)，rejected(失败态)；状态一旦扭转，就不会再变。发明 promise 实例后，它会立刻执行。

const PENDING = "pending";
const RESOLVED = "resolved";
const REJECTED = "rejected";

function MyPromise(fn) {
  // 保留初始化状态
  var self = this;

  // 初始化状态
  this.state = PENDING;

  // 用于保留 resolve 或者 rejected 传入的值
  this.value = null;

  // 用于保留 resolve 的回调函数
  this.resolvedCallbacks = [];

  // 用于保留 reject 的回调函数
  this.rejectedCallbacks = [];

  // 状态转变为 resolved 办法
  function resolve(value) {
    // 判断传入元素是否为 Promise 值，如果是，则状态扭转必须期待前一个状态扭转后再进行扭转
    if (value instanceof MyPromise) {return value.then(resolve, reject);
    }

    // 保障代码的执行程序为本轮事件循环的开端
    setTimeout(() => {
      // 只有状态为 pending 时能力转变，if (self.state === PENDING) {
        // 批改状态
        self.state = RESOLVED;

        // 设置传入的值
        self.value = value;

        // 执行回调函数
        self.resolvedCallbacks.forEach(callback => {callback(value);
        });
      }
    }, 0);
  }

  // 状态转变为 rejected 办法
  function reject(value) {
    // 保障代码的执行程序为本轮事件循环的开端
    setTimeout(() => {
      // 只有状态为 pending 时能力转变
      if (self.state === PENDING) {
        // 批改状态
        self.state = REJECTED;

        // 设置传入的值
        self.value = value;

        // 执行回调函数
        self.rejectedCallbacks.forEach(callback => {callback(value);
        });
      }
    }, 0);
  }

  // 将两个办法传入函数执行
  try {fn(resolve, reject);
  } catch (e) {
    // 遇到谬误时，捕捉谬误，执行 reject 函数
    reject(e);
  }
}

MyPromise.prototype.then = function(onResolved, onRejected) {
  // 首先判断两个参数是否为函数类型，因为这两个参数是可选参数
  onResolved =
    typeof onResolved === "function"
      ? onResolved
      : function(value) {return value;};

  onRejected =
    typeof onRejected === "function"
      ? onRejected
      : function(error) {throw error;};

  // 如果是期待状态，则将函数退出对应列表中
  if (this.state === PENDING) {this.resolvedCallbacks.push(onResolved);
    this.rejectedCallbacks.push(onRejected);
  }

  // 如果状态曾经凝固，则间接执行对应状态的函数

  if (this.state === RESOLVED) {onResolved(this.value);
  }

  if (this.state === REJECTED) {onRejected(this.value);
  }
};
复制代码

for…in 和 for…of 的区别

for…of 是 ES6 新增的遍历形式，容许遍历一个含有 iterator 接口的数据结构（数组、对象等）并且返回各项的值，和 ES3 中的 for…in 的区别如下

• for…of 遍历获取的是对象的键值，for…in 获取的是对象的键名；
• for… in 会遍历对象的整个原型链，性能十分差不举荐应用，而 for … of 只遍历以后对象不会遍历原型链；
• 对于数组的遍历，for…in 会返回数组中所有可枚举的属性(包含原型链上可枚举的属性)，for…of 只返回数组的下标对应的属性值；

总结： for…in 循环次要是为了遍历对象而生，不适用于遍历数组；for…of 循环能够用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象。

解释性语言和编译型语言的区别

（1）解释型语言
应用专门的解释器对源程序逐行解释成特定平台的机器码并立刻执行。是代码在执行时才被解释器一行行动静翻译和执行，而不是在执行之前就实现翻译。解释型语言不须要当时编译，其间接将源代码解释成机器码并立刻执行，所以只有某一平台提供了相应的解释器即可运行该程序。其特点总结如下

• 解释型语言每次运行都须要将源代码解释称机器码并执行，效率较低；
• 只有平台提供相应的解释器，就能够运行源代码，所以能够不便源程序移植；
• JavaScript、Python 等属于解释型语言。

（2）编译型语言
应用专门的编译器，针对特定的平台，将高级语言源代码一次性的编译成可被该平台硬件执行的机器码，并包装成该平台所能辨认的可执行性程序的格局。在编译型语言写的程序执行之前，须要一个专门的编译过程，把源代码编译成机器语言的文件，如 exe 格局的文件，当前要再运行时，间接应用编译后果即可，如间接运行 exe 文件。因为只需编译一次，当前运行时不须要编译，所以编译型语言执行效率高。其特点总结如下：

• 一次性的编译成平台相干的机器语言文件，运行时脱离开发环境，运行效率高；
• 与特定平台相干，个别无奈移植到其余平台；
• C、C++ 等属于编译型语言。

两者次要区别在于： 前者源程序编译后即可在该平台运行，后者是在运行期间才编译。所以前者运行速度快，后者跨平台性好。

Vue 的生命周期是什么 每个钩子外面具体做了什么事件

Vue 实例有⼀个残缺的⽣命周期，也就是从开始创立、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是 Vue 的⽣命周期。1、beforeCreate（创立前）：数据观测和初始化事件还未开始，此时 data 的响应式追踪、event/watcher 都还没有被设置，也就是说不能拜访到 data、computed、watch、methods 上的办法和数据。2、created（创立后）：实例创立实现，实例上配置的 options 包含 data、computed、watch、methods 等都配置实现，然而此时渲染得节点还未挂载到 DOM，所以不能拜访到 `$el` 属性。3、beforeMount（挂载前）：在挂载开始之前被调用，相干的 render 函数首次被调用。实例已实现以下的配置：编译模板，把 data 外面的数据和模板生成 html。此时还没有挂载 html 到页面上。4、mounted（挂载后）：在 el 被新创建的 vm.$el 替换，并挂载到实例下来之后调用。实例已实现以下的配置：用下面编译好的 html 内容替换 el 属性指向的 DOM 对象。实现模板中的 html 渲染到 html 页面中。此过程中进行 ajax 交互。5、beforeUpdate（更新前）：响应式数据更新时调用，此时尽管响应式数据更新了，然而对应的实在 DOM 还没有被渲染。6、updated（更新后）：在因为数据更改导致的虚构 DOM 从新渲染和打补丁之后调用。此时 DOM 曾经依据响应式数据的变动更新了。调用时，组件 DOM 曾经更新，所以能够执行依赖于 DOM 的操作。然而在大多数状况下，应该防止在此期间更改状态，因为这可能会导致更新有限循环。该钩子在服务器端渲染期间不被调用。7、beforeDestroy（销毁前）：实例销毁之前调用。这一步，实例依然齐全可用，`this` 仍能获取到实例。8、destroyed（销毁后）：实例销毁后调用，调用后，Vue 实例批示的所有货色都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务端渲染期间不被调用。另外还有 `keep-alive` 独有的生命周期，别离为 `activated` 和 `deactivated`。用 `keep-alive` 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 `deactivated` 钩子函数，命中缓存渲染后会执行 `activated` 钩子函数。复制代码