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) 最长不含重复字符的子字符串
二面
- 网络
- 输入url之后的过程 ?
- 你说 HTTPS 连接, HTTPS 是一种连接吗 ?
- 网络有哪几层 ?
- HTTP 是哪一层的 ?
- 建立的连接是什么连接 ?
- 短时间多次建立 TCP 连接每次都需要协商 TLS 秘钥吗?
- 为什么需要 DNS 解析 ?
- 地址栏直接用 IP 可以吗?
- 可以的话那为什么需要域名?
- 那像小程序这种不需要记忆的为什么要用域名, 而不是直接用 IP ?
- 怎么进行域名和 IP 的换绑 ?
- 那如果我就是不用换 IP, 前后端就都是固定的, 也有这种应用场景, 为什么还是需要域名 ?
- CSS
- div 在不知道宽高情况下水平垂直居中有哪些方法?
- flex
- absolute
- transform
- margin: auto
- 又问, 还有呢?
- div 在不知道宽高情况下水平垂直居中有哪些方法?
- 字体的颜色是什么 ? 这个 blue 是写在最后的, 没有影响吗?
<style> .blue { color: blue; } .green { color: green; } .orange { color: orange; } .red { color: red; } </style> <div style="orange red green blue">text</div>
页面解析
- 在 HTML, CSS 解析的过程中有哪些优化的地方 ?
- 在 CSSOM 建立的过程中,有没有一些全局的 API 是暴露出来可供调用的 ?
跨域发送 cookie
- 怎么做 ?
- 本地能读取到另一个网站的 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)))
三面
- 自我介绍
- 项目介绍
- 为啥找前端?
- 我看你们实验室是复杂建模与仿真,你的研究方向和前端可视化有关吗?
- 讲下原型链
- 事件循环
- HTTP状态码
- 设计模式
- 熟悉哪些?
- 工厂模式的应用场景?
- 发布订阅者模式和观察者模式的区别?
- JS 能表示的最大安全整数是多少?
- 为什么?
- 浮点数在计算机内部是怎么表示的?
- 框架
- 熟悉什么前端框架
- 讲一下对 Vue 的理解
- React 了解吗?
- 实习过吗?
- 算法
- 最长回文子串
- 时间复杂度是多少?
- 还有其他方法吗?讲了dp
- 最长回文子串
- 如果通过了的话,能来实习吗, 能实习多久?
- 手里有其他 offer 吗?
- 反问
- 每年两次绩效考核,和调薪以及升职挂钩
- 新人有导师带领,为期 4 个月左右