【前端】2024.09.23-美团-一面面经

1.前端基础

1.垂直居中布局

2.浏览器存储

3.浏览器缓存强制缓存&协商缓存，

extra: etag会挂在哪个字段上

If-None-Match：浏览器在请求资源时，会将上一次请求时服务器返回的ETag值作为请求头的一部分发送给服务器

4.跨域&解决方案(常见的都要说出来)

5.浏览器循环机制，执行代码

6.js变量提升，执行代码

7.箭头函数相对普通函数的性能

8.async...await相对promise

2.简单输出

1 考察js循环执行机制

JavaScript 复制代码

console.log('script start'); 

setTimeout(function() {
  console.log('setTimeout'); 
}, 0);

new Promise((res,rej)=> {
 console.log('promise') 
 rej()
}).then(function() {
  console.log('promise1');
}).catch(function(){
  return 1;
}).then(function() {
  console.log('promise2'); 
});

console.log('script end');

2.考察js变量提升&原型链

JavaScript 复制代码

function Foo() {
    getName = function () { console.log(1); };
    return this;
}
Foo.getName = function () { console.log(2);};
Foo.prototype.getName = function () { console.log(3);};
var getName = function () { console.log(4);};
function getName() { console.log(5);}

//请写出以下输出结果：
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

3.项目

项目亮点、难点、有收益的点；小程序做的活动页还是什么

4.算法

力扣88-合并两个有序数组

JavaScript 复制代码

/**
 * 力扣88
 */

var merge = function(nums1, m, nums2, n) {
    let p = m - 1, q = n - 1, tail = m + n - 1;
    while (p > -1 || q > -1) {
        if (p === -1) {
            nums1[tail--] = nums2[q--];
        }
        else if (q === -1) {
            nums1[tail--] = nums1[p--];
        }
        else if (nums1[p] < nums2[q]) {
            nums1[tail--] = nums2[q--];
        }
        else {
            nums1[tail--] = nums1[p--];
        }
    }
}

// nums1 = [1,2,3,0,0,0], m = 3, nums2 = [2,5,6], n = 3
nums1 = [1,2,3,0,0,0], m = 3, nums2 = [4,5,6], n = 3
merge(nums1, m, nums2, n);
console.log(nums1);