2022年前端面试收集

cdn 的好处是什么？它的原理有了解过吗？

没有CDN网站的工作原理:

用户在自己的浏览器中输入要访问的网站域名。
浏览器向本地DNS服务器请求对该域名的解析。
本地DNS服务器中如果缓存有这个域名的解析结果，则直接响应用户的解析请求。
本地DNS服务器中如果没有关于这个域名的解析结果的缓存，则以递归或迭代方式向整个DNS系统请求解析，获得应答后将结果反馈给浏览器。
浏览器得到域名解析结果，就是该域名相应的服务设备的IP地址。
浏览器向服务器请求内容。
服务器将用户请求内容传送给浏览器。

CDN工作原理:

当用户点击网站页面上的内容URL，经过本地DNS系统解析，DNS系统会最终将域名的解析权交给CNAME指向的CDN专用DNS服务器。
CDN的DNS服务器将CDN的全局负载均衡设备IP地址返回用户。
用户向CDN的全局负载均衡设备发起内容URL访问请求。
CDN全局负载均衡设备根据用户IP地址，以及用户请求的内容URL，选择一台用户所属区域的区域负载均衡设备，告诉用户向这台设备发起请求。
区域负载均衡设备会为用户选择一台合适的缓存服务器提供服务，选择的依据包括：根据用户IP地址，判断哪一台服务器距用户最近；根据用户所请求的URL中携带的内容名称，判断哪一台服务器上有用户所需内容；查询各个服务器当前的负载情况，判断哪一台服务器尚有服务能力。基于以上这些条件的综合分析之后，区域负载均衡设备会向全局负载均衡设备返回一台缓存服务器的IP地址。
全局负载均衡设备把服务器的IP地址返回给用户。
用户向缓存服务器发起请求，缓存服务器响应用户请求，将用户所需内容传送到用户终端。如果这台缓存服务器上并没有用户想要的内容，而区域均衡设备依然将它分配给了用户，那么这台服务器就要向它的上一级缓存服务器请求内容，直至追溯到网站的源服务器将内容拉到本地。

好处:

解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度和成功率。
尽可能的减少资源在转发、传输、链路抖动等情况下顺利保障信息的连贯性。
实现跨运营商、跨地域的全网覆盖
CDN的负载均衡和分布式存储技术，可以加强网站的可靠性，相当无无形中给你的网站添加了一把保护伞，应对绝大部分的互联网攻击事件。防攻击系统也能避免网站遭到恶意攻击。
当某个服务器发生意外故障时，系统将会调用其他临近的健康服务器节点进行服务，进而提供接近100%的可靠性，这就让你的网站可以做到永不宕机。
使用CDN加速可以实现网站的全国铺设，你根本不用考虑购买服务器与后续的托管运维，服务器之间镜像同步，也不用为了管理维护技术人员而烦恼，节省了人力、精力和财力。

webpack 如何将某些指定的包使用cdn加载？

webpack.config.js 中配置 externals 属性指定哪些包是从 CDN 引入，而不是把它打包，最后在 html 中引入这个cdn链接。
一般我们在工程化中，开发环境下我们可能不需要cdn引入，所以我们会动态配置，这种情况我们就需要使用到HtmlWebpackPlugin来动态写入这个cdn链接。

什么是正向代理？什么是反向代理？ webpackDevserver 是正向代理还是反向代理？

正向代理（forward proxy）：是一个位于客户端和目标服务器之间的服务器(代理服务器)，为了从目标服务器取得内容，客户端向代理服务器发送一个请求并指定目标，然后代理服务器向目标服务器转交请求并将获得的内容返回给客户端。这种代理其实在生活中是比较常见的，比如访问外国网站技术，其用到的就是代理技术。这种代理方式： pc 端是清楚的知道代理服务器和目标服务器的。

所以，正向代理，其实是”代理服务器”代理了”客户端”，去和”目标服务器”进行交互。

正向代理的用途:

突破访问限制
提高访问速度
隐藏客户端真实IP

反向代理（reverse proxy）：是指以代理服务器来接受internet上的连接请求，然后将请求转发给内部网络上的服务器，并将从服务器上得到的结果返回给internet上请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。对于常用的场景，就是我们在Web开发中用到的负载均衡服务器，客户端发送请求到负载均衡服务器上，负载均衡服务器再把请求转发给一台真正的服务器来执行，再把执行结果返回给客户端。例如（webpackDevserver中的代理），这种代理方式： pc端不知道真正的服务器的存在

所以，反向代理，其实是”代理服务器”代理了”目标服务器”，去和”客户端”进行交互。

反向代理的用途：

隐藏服务器真实IP
负载均衡
提高访问速度
提供安全保障（应用层防火墙）

正向代理和反向代理的区别：

虽然正向代理服务器和反向代理服务器所处的位置都是客户端和真实服务器之间，所做的事情也都是把客户端的请求转发给服务器，再把服务器的响应转发给客户端，但是二者之间还是有一定的差异的。

正向代理其实是客户端的代理，帮助客户端访问其无法访问的服务器资源。反向代理则是服务器的代理，帮助服务器做负载均衡，安全防护等。
正向代理一般是客户端架设的，比如在自己的机器上安装一个代理软件。而反向代理一般是服务器架设的，比如在自己的机器集群中部署一个反向代理服务器。
正向代理中，服务器不知道真正的客户端到底是谁，以为访问自己的就是真实的客户端。而在反向代理中，客户端不知道真正的服务器是谁，以为自己访问的就是真实的服务器。
正向代理和反向代理的作用和目的不同。正向代理主要是用来解决访问限制问题。而反向代理则是提供负载均衡、安全防护等作用。二者均能提高访问速度。

求数组中的最大差值。

// 方式一 使用 Math 函数。思路： 找到数组中最大值和最小值 , 返回他们的差值
function outputMaxPrice(array) {
    const item1 = Math.max.apply(null, array)
    const item2 = Math.min.apply(null, array)
    return item1 - item2
}

const a = outputMaxPrice([1, 2, 64, 5])

// 方式二   定义两个变量，分别存贮最大值和最小值
const getMaxProfit = function(arr) {
    let maxNum = arr[0];
    let minNum = arr[0];

    for (let i = 0; i < arr.length; i++) {
        if (arr[i] > maxNum) {
            maxNum = arr[i];
        }

        if (arr[i] < minNum) {
            minNum = arr[i];
        }
    }
    return maxNum - minNum;
}
getMaxProfit([1, 2, 64, 5]) // 62

preload 和 prefetch 是什么？它们之间有什么区别？

preload 是一个声明式 fetch，可以强制浏览器在不阻塞 document 的 onload 事件的情况下请求资源。preload 顾名思义就是一种预加载的方式，它通过声明向浏览器声明一个需要提交加载的资源，当资源真正被使用的时候立即执行，就无需等待网络的消耗。
prefetch 告诉浏览器这个资源将来可能需要，但是什么时间加载这个资源是由浏览器来决定的。若能预测到用户的行为，比如懒加载，点击到其它页面等则相当于提前预加载了需要的资源

面试题

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议，转载请注明出处！

vue3面试题下一篇