美团前端面试题(附答案)

这篇博客深入探讨前端面试中的常见问题,涵盖CDN的工作原理,DNS解析过程,Object.is的实现,Promise.all与Promise.race的使用场景,以及Vue路由守卫、浏览器缓存、数据类型判断等核心概念,帮助读者巩固前端知识。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

CDN的原理

CDN和DNS有着密不可分的联系,先来看一下DNS的解析域名过程,在浏览器输入的解析过程如下:
(1) 检查浏览器缓存
(2)检查操作系统缓存,常见的如hosts文件
(3)检查路由器缓存
(4)如果前几步都没没找到,会向ISP(网络服务提供商)的LDNS服务器查询
(5)如果LDNS服务器没找到,会向根域名服务器(Root Server)请求解析,分为以下几步:

  • 根服务器返回顶级域名(TLD)服务器如.com.cn.org等的地址,该例子中会返回.com的地址
  • 接着向顶级域名服务器发送请求,然后会返回次级域名(SLD)服务器的地址,本例子会返回.test的地址
  • 接着向次级域名服务器发送请求,然后会返回通过域名查询到的目标IP,本例子会返回www.test.com的地址
  • Local DNS Server会缓存结果,并返回给用户,缓存在系统中
    前端进阶面试题详细解答
    CDN的工作原理: (1)用户未使用CDN缓存资源的过程:
  1. 浏览器通过DNS对域名进行解析(就是上面的DNS解析过程),依次得到此域名对应的IP地址
  2. 浏览器根据得到的IP地址,向域名的服务主机发送数据请求
  3. 服务器向浏览器返回响应数据

(2)用户使用CDN缓存资源的过程:

  1. 对于点击的数据的URL,经过本地DNS系统的解析,发现该URL对应的是一个CDN专用的DNS服务器,DNS系统就会将域名解析权交给CNAME指向的CDN专用的DNS服务器。
  2. CND专用DNS服务器将CND的全局负载均衡设备IP地址返回给用户
  3. 用户向CDN的全局负载均衡设备发起数据请求
  4. CDN的全局负载均衡设备根据用户的IP地址,以及用户请求的内容URL,选择一台用户所属区域的区域负载均衡设备,告诉用户向这台设备发起请求
  5. 区域负载均衡设备选择一台合适的缓存服务器来提供服务,将该缓存服务器的IP地址返回给全局负载均衡设备
  6. 全局负载均衡设备把服务器的IP地址返回给用户
  7. 用户向该缓存服务器发起请求,缓存服务器响应用户的请求,将用户所需内容发送至用户终端。

如果缓存服务器没有用户想要的内容,那么缓存服务器就会向它的上一级缓存服务器请求内容,以此类推,直到获取到需要的资源。最后如果还是没有,就会回到自己的服务器去获取资源。

CNAME(意为:别名):在域名解析中,实际上解析出来的指定域名对应的IP地址,或者该域名的一个CNAME,然后再根据这个CNAME来查找对应的IP地址。

Object.is 实现

题目描述:

Object.is不会转换被比较的两个值的类型,这点和===更为相似,他们之间也存在一些区别。
    1. NaN在===中是不相等的,而在Object.is中是相等的
    2. +0-0===中是相等的,而在Object.is中是不相等的

实现代码如下:

Object.is = function (x, y) {
   
  if (x === y) {
   
    // 当前情况下,只有一种情况是特殊的,即 +0 -0
    // 如果 x !== 0,则返回true
    // 如果 x === 0,则需要判断+0和-0,则可以直接使用 1/+0 === Infinity 和 1/-0 === -Infinity来进行判断
    return x !== 0 || 1 / x === 1 / y;
  }

  // x !== y 的情况下,只需要判断是否为NaN,如果x!==x,则说明x是NaN,同理y也一样
  // x和y同时为NaN时,返回true
  return x !== x && y !== y;
};

Promise.all和Promise.race的区别的使用场景

(1)Promise.all Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值

Promise.all中传入的是数组,返回的也是是数组,并且会将进行映射,传入的promise对象返回的值是按照顺序在数组中排列的,但是注意的是他们执行的顺序并不是按照顺序的,除非可迭代对象为空。

需要注意,Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的,这样当遇到发送多个请求并根据请求顺序获取和使用数据的场景,就可以使用Promise.all来解决。

(2)Promise.race

顾名思义,Promse.race就是赛跑的意思,意思就是说,Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。当要做一件事,超过多长时间就不做了,可以用这个方法来解决:

Promise.race([promise1,timeOutPromise(5000)]).then(res=>{
   })

代码输出结果

var F = function() {
   };
Object.prototype.a = function() {
   
  console.log('a');
};
Function.prototype.b = function() {
   
  console.log('b');
}
var f = new F(
百度外包前端面试题红绿灯是一个经典的异步编程问题。题目要求红灯每隔3秒亮一次,绿灯每隔1秒亮一次,黄灯每隔2秒亮一次,并且三个灯需要交替重复亮灯。 题目给出的代码只完成了一次流程,即红灯亮一次,黄灯亮一次,绿灯亮一次。但题目要求的是交替重复亮灯,所以需要对代码进行修改。 可以使用回调函数的方式来实现交替重复亮灯。首先定义一个任务函数`task`,该函数接收三个参数:计时器时间、灯的颜色和回调函数。在`task`函数内部使用`setTimeout`函数来设置定时器,在定时器的回调函数中判断当前灯的颜色并执行相应的操作,然后调用回调函数。在回调函数中再次调用`task`函数来实现循环调用。 具体实现如下: ```javascript const task = (timer, light, callback) => { setTimeout(() => { if (light === 'red') { red() } else if (light === 'green') { green() } else if (light === 'yellow') { yellow() } callback() }, timer) } task(3000, 'red', () => { task(1000, 'green', () => { task(2000, 'yellow', () => { task(3000, 'red', Function.prototype) }) }) }) ``` 上述代码实现了红绿灯的交替重复亮灯,首先通过调用`task`函数来启动红灯,然后在红灯的回调函数中调用`task`函数启动绿灯,再在绿灯的回调函数中调用`task`函数启动黄灯,最后在黄灯的回调函数中再次调用`task`函数启动红灯,从而实现了红绿灯的交替重复亮灯。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [美团前端一面必会手写面试题汇总](https://blog.youkuaiyun.com/helloworld1024fd/article/details/127582853)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值