关于前端:美团前端面试题附答案

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();
f.a();
f.b();
F.a();
F.b()

输入后果：

a
Uncaught TypeError: f.b is not a function
a
b

解析：

1. f 并不是 Function 的实例，因为它原本就不是构造函数，调用的是 Function 原型链上的相干属性和办法，只能拜访到 Object 原型链。所以 f.a() 输入 a，而 f.b() 就报错了。
2. F 是个构造函数，而 F 是构造函数 Function 的一个实例。因为 F instanceof Object === true，F instanceof Function === true，由此能够得出结论：F 是 Object 和 Function 两个的实例，即 F 能拜访到 a，也能拜访到 b。所以 F.a() 输入 a，F.b() 输入 b。

数据类型判断

typeof 能够正确辨认：Undefined、Boolean、Number、String、Symbol、Function 等类型的数据，然而对于其余的都会认为是 object，比方 Null、Date 等，所以通过 typeof 来判断数据类型会不精确。然而能够应用 Object.prototype.toString 实现。

function typeOf(obj) {-   let res = Object.prototype.toString.call(obj).split(' ')[1]
-   res = res.substring(0, res.length - 1).toLowerCase()
-   return res
// 更好的写法
+   return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()}
typeOf([])        // 'array'
typeOf({})        // 'object'
typeOf(new Date)  // 'date'

Vue 路由守卫有哪些，怎么设置，应用场景等

罕用的两个路由守卫：router.beforeEach 和 router.afterEach

每个守卫办法接管三个参数：to: Route: 行将要进入的指标 路由对象

from: Route: 以后导航正要来到的路由

next: Function: 肯定要调用该办法来 resolve 这个钩子。在我的项目中，个别在 beforeEach 这个钩子函数中进行路由跳转的一些信息判断。判断是否登录，是否拿到对应的路由权限等等。

为什么须要浏览器缓存？

对于浏览器的缓存，次要针对的是前端的动态资源，最好的成果就是，在发动申请之后，拉取相应的动态资源，并保留在本地。如果服务器的动态资源没有更新，那么在下次申请的时候，就间接从本地读取即可，如果服务器的动态资源曾经更新，那么咱们再次申请的时候，就到服务器拉取新的资源，并保留在本地。这样就大大的缩小了申请的次数，进步了网站的性能。这就要用到浏览器的缓存策略了。

所谓的 浏览器缓存 指的是浏览器将用户申请过的动态资源，存储到电脑本地磁盘中，当浏览器再次拜访时，就能够间接从本地加载，不须要再去服务端申请了。

应用浏览器缓存，有以下长处：

• 缩小了服务器的累赘，进步了网站的性能
• 放慢了客户端网页的加载速度
• 缩小了多余网络数据传输

深浅拷贝

浅拷贝：只思考对象类型。

function shallowCopy(obj) {if (typeof obj !== 'object') return

    let newObj = obj instanceof Array ? [] : {}
    for (let key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] = obj[key]
        }
    }
    return newObj
}

简略版深拷贝：只思考一般对象属性，不思考内置对象和函数。

function deepClone(obj) {if (typeof obj !== 'object') return;
    var newObj = obj instanceof Array ? [] : {};
    for (var key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key];
        }
    }
    return newObj;
}

简单版深克隆：基于简略版的根底上，还思考了内置对象比方 Date、RegExp 等对象和函数以及解决了循环援用的问题。

const isObject = (target) => (typeof target === "object" || typeof target === "function") && target !== null;

function deepClone(target, map = new WeakMap()) {if (map.get(target)) {return target;}
    // 获取以后值的构造函数：获取它的类型
    let constructor = target.constructor;
    // 检测以后对象 target 是否与正则、日期格局对象匹配
    if (/^(RegExp|Date)$/i.test(constructor.name)) {// 创立一个新的非凡对象 (正则类 / 日期类) 的实例
        return new constructor(target);  
    }
    if (isObject(target)) {map.set(target, true);  // 为循环援用的对象做标记
        const cloneTarget = Array.isArray(target) ? [] : {};
        for (let prop in target) {if (target.hasOwnProperty(prop)) {cloneTarget[prop] = deepClone(target[prop], map);
            }
        }
        return cloneTarget;
    } else {return target;}
}

label 的作用是什么？如何应用？

label 标签来定义表单控件的关系：当用户抉择 label 标签时，浏览器会主动将焦点转到和 label 标签相干的表单控件上。

• 应用办法 1：

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>

• 应用办法 2：

<label>Date:<input type="text"/></label>

什么是 JavaScript 中的包装类型？

在 JavaScript 中，根本类型是没有属性和办法的，然而为了便于操作根本类型的值，在调用根本类型的属性或办法时 JavaScript 会在后盾隐式地将根本类型的值转换为对象，如：

const a = "abc";
a.length; // 3
a.toUpperCase(); // "ABC"

在拜访 'abc'.length 时，JavaScript 将 'abc' 在后盾转换成 String('abc')，而后再拜访其length 属性。

JavaScript 也能够应用 Object 函数显式地将根本类型转换为包装类型：

var a = 'abc'
Object(a) // String {"abc"}

也能够应用 valueOf 办法将包装类型倒转成根本类型：

var a = 'abc'
var b = Object(a)
var c = b.valueOf() // 'abc'

看看如下代码会打印出什么：

var a = new Boolean(false);
if (!a) {console.log( "Oops"); // never runs
}

答案是什么都不会打印，因为尽管包裹的根本类型是 false，然而false 被包裹成包装类型后就成了对象，所以其非值为false，所以循环体中的内容不会运行。

setInterval 模仿 setTimeout

形容 ：应用setInterval 模仿实现 setTimeout 的性能。

思路 ：setTimeout 的个性是在指定的工夫内只执行一次，咱们只有在 setInterval 外部执行 callback 之后，把定时器关掉即可。

实现：

const mySetTimeout = (fn, time) => {
    let timer = null;
    timer = setInterval(() => {
        // 敞开定时器，保障只执行一次 fn，也就达到了 setTimeout 的成果了
        clearInterval(timer);
        fn();}, time);
    // 返回用于敞开定时器的办法
    return () => clearInterval(timer);
}

// 测试
const cancel = mySetTimeout(() => {console.log(1);
}, 1000);  
// 一秒后打印 1

如果一个构造函数，bind 了一个对象，用这个构造函数创立出的实例会继承这个对象的属性吗？为什么？

不会继承，因为依据 this 绑定四大规定，new 绑定的优先级高于 bind 显示绑定，通过 new 进行结构函数调用时，会创立一个新对象，这个新对象会代替 bind 的对象绑定，作为此函数的 this，并且在此函数没有返回对象的状况下，返回这个新建的对象

说一下 vue3.0 你理解多少?

 <!-- 响应式原理的扭转 Vue3.x 应用 Proxy 取代 Vue2.x 版本的 Object.defineProperty -->
 <!-- 组件选项申明形式 Vue3.x 应用 Composition API setup 是 Vue3.x 新增的一个选项，他
    是组件内应用 Composition API 的入口 -->
 <!-- 模板语法变动 slot 具名插槽语法 自定义指令 v-model 降级 -->
 <!-- 其它方面的更改 Suspense 反对 Fragment(多个根节点) 和 Protal (在 dom 其余局部渲染组建内容)组件
     针对一些非凡的场景做了解决。基于 treeshaking 优化，提供了更多的内置性能。-->

组件之间的传值有几种形式

1、父传子
2、子传父
3、eventbus
4、ref/$refs
5、$parent/$children
6、$attrs/$listeners
7、依赖注入(provide/inject)

懒加载的实现原理

图片的加载是由 src 引起的，当对 src 赋值时，浏览器就会申请图片资源。依据这个原理，咱们应用 HTML5 的 data-xxx 属性来贮存图片的门路，在须要加载图片的时候，将 data-xxx 中图片的门路赋值给src，这样就实现了图片的按需加载，即懒加载。

留神：data-xxx 中的 xxx 能够自定义，这里咱们应用 data-src 来定义。

懒加载的实现重点在于确定用户须要加载哪张图片，在浏览器中，可视区域内的资源就是用户须要的资源。所以当图片呈现在可视区域时，获取图片的实在地址并赋值给图片即可。

应用原生 JavaScript 实现懒加载：

知识点：

（1）window.innerHeight 是浏览器可视区的高度

（2）document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动的过的间隔

（3）imgs.offsetTop 是元素顶部间隔文档顶部的高度（包含滚动条的间隔）

（4）图片加载条件：img.offsetTop < window.innerHeight + document.body.scrollTop;

图示： 代码实现：

<div class="container">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
     <img src="loading.gif"  data-src="pic.png">
</div>
<script>
var imgs = document.querySelectorAll('img');
function lozyLoad(){
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        var winHeight= window.innerHeight;
        for(var i=0;i < imgs.length;i++){if(imgs[i].offsetTop < scrollTop + winHeight ){imgs[i].src = imgs[i].getAttribute('data-src');
            }
        }
    }
  window.onscroll = lozyLoad();
</script>

CSS 中可继承与不可继承属性有哪些

一、无继承性的属性

1. display：规定元素应该生成的框的类型
2. 文本属性：
3. vertical-align：垂直文本对齐
4. text-decoration：规定增加到文本的装璜
5. text-shadow：文本暗影成果
6. white-space：空白符的解决
7. unicode-bidi：设置文本的方向
8. 盒子模型的属性：width、height、margin、border、padding
9. 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment
10. 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index
11. 生成内容属性：content、counter-reset、counter-increment
12. 轮廓款式属性：outline-style、outline-width、outline-color、outline
13. 页面款式属性：size、page-break-before、page-break-after
14. 声音款式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

二、有继承性的属性

1. 字体系列属性
2. font-family：字体系列

• font-weight：字体的粗细
• font-size：字体的大小
• font-style：字体的格调
• 文本系列属性
• text-indent：文本缩进
• text-align：文本程度对齐
• line-height：行高
• word-spacing：单词之间的间距
• letter-spacing：中文或者字母之间的间距
• text-transform：管制文本大小写（就是 uppercase、lowercase、capitalize 这三个）
• color：文本色彩
• 元素可见性
• visibility：管制元素显示暗藏
• 列表布局属性
• list-style：列表格调，包含 list-style-type、list-style-image 等
• 光标属性
• cursor：光标显示为何种状态