【字节社招】1年经验的前端面经记录
简介：今天给大家分享一篇1年前端的社招面经，作者是去年毕业，今年3、4月在北京看新的工作机会，目前已上岸字节。
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~
今天给大家分享一篇1年前端的社招面经，作者是去年毕业，今年3、4月在北京看新的工作机会，目前已上岸字节。
个人情况：2021.6 毕业，本次面试为社招，坐标北京；技术栈主要是 Vue，所以 Vue 相关被问的多一些，React 很少；
记录一下最近遇到的面试题，按照面试题目的类型，做个归类划分：
CSS相关：
各种选择器的优先级，看代码说出最后的样式结果 怎么开启动画加速，底层原理是什么
JS 相关：
基础的概念，像原型链、作用域链、闭包、变量提升等等都有问到 this 指向、原型链、宏任务微任务，看代码说输出，具体代码没有保存 为什么数组长度能任意变化 函数的 name 属性，看代码说输出，name 属性能手动修改吗
function a(){}
a.name // "a"
const a = function(){}
a.name // ES5中为"", ES6 中为 "a"
window.a = function(){}
a.name // ES5中为"a", ES6 中为 ""
const a = function b(){}
a.name // "b"
window.a = function b(){}
a.name // "b"
// 修改
a.name = '1111'
a.name // 不变，还是"b"
new 的过程中发生了什么，实现一个简单的 new，注意顺序 ES6 默认开启尾递归优化，其原理是什么，为什么能优化 用 ES5 实现 const 实现一个有节流效果的轮询函数 实现一个类，其实例可以链式调用，它有一个 sleep 方法，可以 sleep 一段时间后再后续调用
const boy = new PlayBoy('Tom')
boy.sayHi().sleep(1000).play('王者').sleep(2000).play('跳一跳')
// 输出
// 大家好我是Tom
// 1s 之后
// 我在玩王者
// 2s 之后
// 我在玩跳一跳
async/await 的错误怎么捕获 实现 Promise.all 实现 Promise.race 函数 实现一个能顺利执行 next 中间件的函数：函数柯里化
/**
* 实现一个组合compose的方法，使其可以正确调用每个中间件
*
* 规定中间件写法：
* function(val, next) {
* // 前置操作
* next(val + 1); // 触发下一个中间件
* // 后续操作
* }
*/
function compose(...middlewares) {
}
function add1(x, next) {
console.log('add1 before');
next(x + 1);
console.log('add1 after');
}
function add2(x, next) {
console.log('add2 before');
next(x + 2);
console.log('add2 after');
}
function output(x){
console.log('output:', x)
}
const input = 0;
compose(add1, add2, (output) => {
console.log('output:', output);
})(input);
/**
* 输出:
*
* add1 before
* add2 before
* output: 3
* add2 after
* add1 after
*/
框架相关：
虚拟 DOM 的好处：函数式编程模式、多端渲染 Vue 的插件机制，底层原理是什么 Vue2 和 Vue3 响应式实现上的区别，为什么要改动 写一个 Vue 输入框组件，有防抖功能，并处理父子组件传参 Vuex 基本要素，actions 和 mutations 的区别，actions 是直接修改状态吗 Vue router 路由守卫的钩子和使用场景 Vue nextTick 的用法和底层实现原理 Vue3 的优化点有哪些 Vue3 移除了 .native 事件修饰符，我们怎么去写原生事件？ Vue 中 computed 的设计动机以及底层实现 Vue 模板是如何编译的 Vue router 底层原理，不同模式的区别，history 路由刷新页面 404 的原因和解决方法 Vue 项目中的 Model 层设计 Vuex 中的变量打包之后存在哪里？和全局作用域中的变量有什么区别 Vue 中 CSS scoped 的原理 Vue 中 keep-alive 的实现原理，内部使用的缓存算法是什么，缓存的是什么 $set 的使用场景
打包工具相关：
webpack treeShaking的原理是什么？ webpack babel 配置：语法层面的和 API 层面的 webpack loader 和 plugin 实现原理 webpack 生命周期，让你实现一系列的生命周期怎么实现 webpack 打包过程 webpack 有哪些可优化的地方（构建速度和包体积），具体怎么优化
网络相关：
经典面试题：输入 URL 之后发生了什么，HTML 文件中 CSS 文件和 JS 文件的加载顺序，会阻塞页面渲染吗 DNS 查询过程 websocket 的好处，怎么建立连接，心跳机制怎么做，错误怎么处理 webRTC 和 WebAssembly 了解吗 websocket 和 轮询的区别 postMessage 有哪些使用场景？ cookie 的有效时间设置为 0 会怎么样 PUT 方法的优点，什么时候用 PUT HTTP2 的改进点 HTTP3 使用的传输层协议是什么，怎么保证可靠性 HTTPS 为什么是安全的？
算法题：
整体而言，字节的三轮面试的考察范围很广，难度也稍微有点大。
原理性的题目比较多，css和js的基础问的比较多，打包工具和计算机网络也考察的很深，还有4道 LeetCode 的原题，虽然都是简单或者中等难度的题目，但在面试过程中如果紧张还是不太容易想到最优解。
最后
《前端面试题宝典》经过近一年的迭代，现已推出 小程序 和 电脑版刷题网站 （https://fe.ecool.fun/），欢迎大家使用~
同时，我们还推出了面试辅导的增值服务，可以为大家提供 “简历指导” 和 “模拟面试” 服务，感兴趣的同学可以联系小助手（微信号：interview-fe）进行报名。
原文作者：程序媛小灰
原文地址：https://juejin.cn/post/7088883914005184525