2022届字节校招前端面经(电商业务,已OC)

非常感谢牛客网上各路大神的面经分享, 现面试结束, 也把自己的面经放出来和大家分享下,有需要内推的童鞋也可以私信我, 或者邮箱联系我 1442704671@qq.com

一面

项目介绍
DNS
递归查询和迭代查询
CSS 选择器优先级
cookie session 区别
Content-Type 有哪些
事件流 event.target 和 event.currenttarget
同源，跨域，解决方法？
复杂请求返回的状态码是什么？如果复杂请求被拒绝后，再次发送会怎么样？
从ES6往后了解哪些新特性?
箭头函数有什么特性? 能对箭头函数使用 new 吗? 为什么？
Map Set 区别? Map 和 WeakMap 区别 ?
垃圾回收机制？
var let const 区别
作用域有哪些？
Symbol 有什么特性？
可迭代接口怎么实现的？
ES6往后，除了可迭代接口还出现了什么新的接口？

CSS 阅读题

<!DOCTYPE html>
<html>
<head>
<style>
 .box {
   width: 10px;
   height: 10px;
   border: 1px solid red;
   margin: 2px;
   padding: 2px;
   background: blue;
 }

 #borderBox {
   box-sizing: border-box;
 }

 #contentBox {
   box-sizing: content-box;
 }
</style>
</head>
<body>
<div>请问下面两个 div 元素，蓝***域的宽高各是多少像素？</div>
<div id="borderBox" class="box"></div>
<div id="contentBox" class="box"></div>
</body>
</html>

代码阅读

new Promise((resolve, reject) => {
reject(1);
})
.catch((err) => {
console.log(err);
})
.then(
(v) => {
 console.log(v);
},
(k) => {
 console.log(k);
}
);
// 结果：
// 1
// undefined

将函数改写为Promise的形式, 其中 request(id) 的返回值是一个 Promise 对象

async function renderPage(id) {
try {
  const data = await request(id);
  if (data.code === 0) {
      renderUI(data);
  } else {
      uploadError(data);
      toast(‘服务器错误’);
  }
} catch (err) {
  uploadError(err);
  toast(‘渲染错误’);
}
}

算法
a) 路径总和
b) 最长不含重复字符的子字符串

二面

网络
1. 输入url之后的过程 ?
2. 你说 HTTPS 连接, HTTPS 是一种连接吗 ?
3. 网络有哪几层 ?
4. HTTP 是哪一层的 ?
5. 建立的连接是什么连接 ?
6. 短时间多次建立 TCP 连接每次都需要协商 TLS 秘钥吗?
7. 为什么需要 DNS 解析 ?
8. 地址栏直接用 IP 可以吗?
9. 可以的话那为什么需要域名?
10. 那像小程序这种不需要记忆的为什么要用域名, 而不是直接用 IP ?
11. 怎么进行域名和 IP 的换绑 ?
12. 那如果我就是不用换 IP, 前后端就都是固定的, 也有这种应用场景, 为什么还是需要域名 ?
CSS
1. div 在不知道宽高情况下水平垂直居中有哪些方法?
  1. flex
  2. absolute
    1. transform
    2. margin: auto
  3. 又问, 还有呢?
字体的颜色是什么 ? 这个 blue 是写在最后的，没有影响吗？

<style>
.blue {
    color: blue;
}
.green {
    color: green;
}
.orange {
    color: orange; 
}
.red {
    color: red;
}
</style>
<div style="orange red green blue">text</div>

页面解析
1. 在 HTML, CSS 解析的过程中有哪些优化的地方？
2. 在 CSSOM 建立的过程中，有没有一些全局的 API 是暴露出来可供调用的？
跨域发送 cookie
1. 怎么做 ?
2. 本地能读取到另一个网站的 cookie 吗 ?

输出题
a) 箭头函数

let A = () => {
console.log(1);
}
new A() // error

b) 作用域

var a = 0;
function A() {
this.a = 1;
return this;
}
A.a = 2;
A.prototype = {
a: 3,
setA(value) {
this.a = value;
return this;
},
};
console.log(new A().a); // 1
console.log(A().a); // 1
console.log(a); // 1
console.log(new A().setA(10).a); // 10
console.log(A().setA(10).a); // error

算法

已知数组 a=[1,[2,[3,[4,null]]]]
实现数组 b=[4,[3,[2,[1,null]]]]
考虑n级嵌套的情况


 /* 法一：遍历取出来，再拼接 */
 function reverse(array) {
    let tmp = [];
    let arr = array;
    while( Array.isArray(arr[1]) ) {
        tmp.push(arr[0])
        arr = arr[1];
        if (arr[1] === null){
            tmp.push(arr[0])
            break;
        }
    }
    let ans = [tmp[0], null];
    for (let i=1; i<tmp.length; i++) {
        ans = [tmp[i], ans]
    }
    return ans;
}
/* 法二：原地翻转，记录每个数组在堆中的位置 */
function reverse(arr) {
  let tmp = [];
  let t = arr;
  while (t !== null) {
    tmp.push(t);
    t = t[1];
  }
  let i = 0,
    j = tmp.length - 1;
  while (i < j) {
    [tmp[i][0], tmp[j][0]] = [tmp[j][0], tmp[i][0]];
    i++;
    j--;
  }
  return arr;
}
--------- 测试 ---------
let a = [1,[2,[3,[4,[5, null]]]]]
print(JSON.stringify(reverse(a)))