2024 web 前端面试总结（内附面经），身为一个前端程序员Context都没弄明白

首先，基础知识一定要扎实。怎么样算扎实呢，举个例子吧，每个对象都有的 tostring 和 valueOf，谁能说出什么情况下触发哪一个

var obj = {}

console.log(obj);

console.log(+obj);

console.log(obj=={});

console.log(obj==={})

console.log(obj==‘test’)

console.log(obj===‘test’)

很多人只是过了一下，就比如别人整理的东西上面肯定不会说的特别详细，他只是给你个结论，所以你亲自试过吗？怎么试呢，其实很简单啊

var obj = {

toString:function(){

console.log(‘toString’)

return Object.prototype.toString.call(this)

},

valueOf:function(){

console.log(‘valueOf’)

return Object.prototype.valueOf.call(this)

}

}

alert(obj);

alert(+obj);

alert(obj=={});

alert(obj==={})

alert(obj==‘test’)

alert(obj===‘test’)

很简单就能测试出来什么时候用 valueOf 和 toString 了。

再比如数组哪些方法会改变原数组，哪些不会。其实这些书上都有，但是没有专门总结。因为总结不是书的事，书只负责教你知识，总结是你自己的事。一辈子不总结，一辈子都记不清。因为我也是从这种状态走过来的，所以希望大家学完一点东西以后总结一下，过段时间看一下。

如果你这两个都想的磕磕绊绊可能得看一下基础部分的内容。

网络

重点图解 http，极客时间的趣谈网络协议，博客

基础差不多了，还要看网络的东西，如果做开发的话，前后台都需要好好了解网络的知识。具体有 http，http 2.0，https，dns，cdn，tcp，缓存，跨域，安全，本地存储这些东西。前面那些计算机网络的东西可以通过图解 http 来做个大概的了解。这里想推荐极客时间的一门课程趣谈网络协议。如果有想试听的可以加我微信，通过我的链接购买的返利我也会返还给你，微信和链接放在最后。因为我之前也是特别头疼网络这方面的东西，不过听了以后就感觉好多了，甚至还能说下 quic 协议来装个逼。每天早上，中午晚上去学校实验室的路上听一下，反复听，这点东西听一个月就算弱智也能听会了。当然也要自己总结一下，因为有些讲的不是那么清楚，比如 https 的 pre-matser 那里，这就需要你自己去查一下。对于跨域，缓存，安全这些东西网上一找一大堆，我自己也整理过，所以也不是特别难，可能刚开始了解的不多，会觉得好难，其实看下来以后会觉得没那么难。这里特别要注意的就是 cookie 的一些属性，需要记一下。

html 和 css

css 权威指南 2、3、7、8、10 章，w3c，博客

html 首先要理解语义化，然后就是一些语义化的标签。语义化的好处，新增的一些特性。给你一个页面结构要能使用语义化标签准确还原。

css 这部分的话其实考的比较多的是一些实际的东西，但是首先基础你要知道。比如最基本的盒模型，还有一些 css3 新增的选择器，属性等。然后最经常的就是让你实现三栏两栏布局，所以基本的布局方式你也要了解吧。然后就是垂直居中，移动端适配等考的比较多。这些东西其实都是需要自己整理，然后一段时间复习一下。

ES6

重点 ES6 标准入门 2、3、7、11、14、16、18、19、22、23

ES6 重要且常用的特性基本都在这里面的，具体常问的有 let const，class，箭头函数，promise，async await，module 模块化。

算法

重点剑指 offer！！！

面试考的算法题 90% 都是剑指 offer 上面的，所以剑指 offer 也一定要好好刷，经常刷，刷完了继续刷。这样面试的时候 90% 以上的算法题就没有问题了。但是如果笔试想表现的好一点的话可能就得刷 leetcode 了。但是我觉得还是得首先把基础概念弄懂了再刷比较好，最近极客时间也新开了一门算法课。想报名的可以通过我的链接，加我微信，返利我也会返给你。当然，算法是长时间的事，就算不是为了面试也建议一段时间刷几题。

框架

博客，视频

框架方面虽然我暂时了解的不多，但是下半年也准备花时间在这上面还有 nodejs 上面。就算你不会，下面这几个问题你也要弄懂。

mvvm 和 mvc 的区别，双向绑定原理，虚拟 dom、diff 算法，spa 原理。

模块化、工程化

这一块的话 ES6 标准入门里面有，让后网上也很多，最主要的是自己实现一下，然后比较里面的不同。因为实验室技术比较落后，这方面的东西没有用过，所以我也只是通过简单的 demo 测试过他们中的一些区别，了解的也不是特别深。但是一定要亲自动手实现。这样才能加深自己对这方面的理解

这些东西你准备好的话，基本一面就没问题了。但是如果想进大厂的话，计算机基础，后台的东西你都要有所了解，因为大家能力都差不多，所以面试官最重视的还是你的基础。

总结

刚开始的时候肯定是看书，形成完整的知识体系。然后针对某些重点逐个攻破。最后的话可以看一些他人整理的资料，面经，查缺补漏，经常总结。这里面最重要的就是经常复习，有代码一定要写代码。最忌讳的就是看完就结束，不总结，不复习，这样知识留存率太低了，可能你暂时记下来了，但是过段时间就忘了。重要的函数要背下来，比如我经常每天隔几天写一下深拷贝，防抖节流，compose 函数，apply，bind，call 的实现等。这些常用的我觉得考到的可能比较大，并且能加深自己的理解。

当然了，通过写博客的形式来总结最好不过了，因为有人与你互动，所以能够提高你的学习积极性，但是需要注意版权的问题，从书上整理的内容如果大规模引用的话，最好标注出处。而且如果有面试官问到的话，经常写博客也是个加分项。接下来准备把计算机基础，算法，框架，nodejs 这些东西补一补。虽然秋招结束了，但是学习是一辈子的事情。

附：书单及面经

书单：JavaScript 高级程序设计，你不知道的 JavaScript 上中，ES6 标准入门，CSS 权威指南，DOM 编程艺术。（可选）JavaScript 忍者秘籍，高性能 JavaScript，深入浅出 nodejs，高效前端。

面经：2018 秋招前端面试总结

微信及链接：

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

Vue 编码基础

2.1.1. 组件规范

2.1.2. 模板中使用简单的表达式

2.1.3 指令都使用缩写形式

2.1.4 标签顺序保持一致

2.1.5 必须为 v-for 设置键值 key

2.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

.1.6 v-show 与 v-if 选择

2.1.7 script 标签内部结构顺序

2.1.8 Vue Router 规范

Vue 项目目录规范

2.2.1 基础

2.2.2 使用 Vue-cli 脚手架

2.2.3 目录说明

2.2.4注释说明

2.2.5 其他

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】