三十多次面试的前端面经汇总

说在最前

是面经汇总,也是笔记,在这里不会给到每一个问题的答案,
一来自己查文档看书才能更加理解知识点,二来我要是说错了多尴尬。。。
如果某个点你觉得有问题或者你觉得需要被更正或补充,欢迎留言一起讨论~~

自我介绍

211本,自动化专业,年初开始转行,耕耘前端差不多半年(大佬勿喷QAQ
无国奖无竞赛无论文,你懂的,就半年能有个锤子
使用的框架为Vue,开发过小项目和微信小程序,项目经验不太够,优势估计只有书看得多
北京小厂实习过俩月
秋招叫得出名的互联网厂除了阿里我都投了,阿里我是真滴不敢投
九月到现在陆陆续续面了近三十多次
拿到了几个offer,美团开出了开发中档的薪资
最后决定加入美团(全体起立!把饿了么给我卸了!

推荐几本书籍

一开始的复习以看技术博客、面经为主,没有形成自己的知识体系,且对概念的理解浮于表面,拉得很
后来看了几本书才勉强顶得住面试
《JavaScript高级程序设计(第四版)》经典红宝书不用我多说了8
《你不知道的JavaScript》分为上中下
《深入理解es6》关于es6的看阮一峰老师的入门教程也行
《JavaScript忍者秘籍》
《你不知道的JavaScript》
当然我的意思并不是让你全部读完,而是在看面经遇到不熟悉的知识点时去书上查找相应的章节有针对性的看
你可能会问为什么全是JS的,好问题
我也才意识到。。。
我css挺拉垮的,没啥好的建议,感觉主要靠实践,希望css好的朋友推荐一哈学习方法

有朋友问到了计算机网络,我的学习方法是看书看网课
一开始看的书是《图解HTTP》《图解TCP/IP》,只适合作为入门,没有讲得很深入。
后来配合《计算机网络 自顶向下方法》看哈工大的网课,b站上就有。这本书真的很不错,翻开就困了。
神书,很深入,看不动。我后来沿袭了一贯的学习方法:配合面经针对性地看,效果还不错。

面经

HTML
html这标签语言真的基本没问啥
  • 对语义化标签的理解 - 让人更可读,让机器更可读(利于SEO)
  • meta标签 - 问得多一点

CSS
  • flex布局,容器的属性,项目的属性 - 阮一峰老师的两篇文档,给我看!
  • 实现两栏(左固定 右自适应)/三栏(左右固定 中间自适应)布局
  • 常见伪元素、伪类,越多越好
  • 垂直水平居中方法,越多越好
  • 八种定位属性的具体含义 - static relative fixed absolute sticky inherit initial unset
  • 选择器和优先级,权重- 这里继承优先级最低,那么哪些属性可继承?
  • 回流重绘的概念、触发条件,避免回流重绘的操作,flush队列,display:none触发的是哪一个,visibility:hidden呢
  • 两种盒子模型
  • BFC(块级格式上下文)的概念,触发条件,渲染规则,应用场景
  • 移动端适配 - 这里涉及到的东西可就多了:媒体查询,viewport,em/rem,vw/vh

JavaScript
考察的更多的还是es6,什么let/const,数组对象的新方法,解构赋值,箭头函数,promise,async,generator,set,map之类的
  • 数据类型,原始类型和引用类型,存储方式(堆、栈),判断数据类型的三种方法
  • 知道哪些数组的方法 - 红宝书上超多个方法,过一遍
  • null和undefined的不同,为什么 == 结果是true,而 === 结果是false
  • 闭包的概念,使用场景,缺点 - 我最认同《你不知道的JavaScript》里写的当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。是一种现象。
  • 原型链
  • var let const 的不同 - 概念的不同,变量提升,暂时性死区,顶层对象
  • 箭头函数和普通函数的区别,this的问题,为什么不能用作构造函数
  • promise - 为什么我就写了一个单词,因为我promise不太熟(。
  • this的问题 - 永远指向最后调用它的函数(es5),call/apply/bind改变指向(es6)
  • new 实例化一个对象 / new一个对象时发生了什么?四个步骤
  • 防抖节流的使用,区别,手写
  • 继承的方法
  • Eventloop,可以顺便说一下浏览器渲染进程,哪些是宏任务微任务 - 经典看代码写输出
  • 事件流,事件代理解决的问题
  • 深浅拷贝的区别,如何解决循环引用,手写实现 - https://segmentfault.com/a/1190000020255831经典好文!不得不看!
  • load 和 DOMContentLoaded(DOM Ready)的区别 - 看红宝书
  • 引用script标签时涉及到的defer async
  • BOM:window location navigator - 解析url会用到location对象
  • JSBridge的原理及使用 - 因为我实习做的是APP内嵌页,涉及到与客户端通信
Vue
经常有面试官问我看过源码没,您好,没有(学习时间太短了,来不及嘛),所以面经笔记没有涉及到源码部分
顺便各位,读源码有什么建议吗,嗯看真是难下手
  • 单页应用的优缺点
  • computed 和 watch 的区别
  • v-for 和 v-if 的区别
  • 双向绑定的原理,哪些操作不会触发视图更新 - Vue3使用了proxy来代替传统的双向绑定
  • 组件通信的方法,父子、隔代、兄弟,如果能再说说Vuex就更不错了
  • nextTick是干嘛的
  • vue-router,history hash 的区别,需不需要后端配置,守卫,路由钩子
  • 写一个通用组件需要考虑哪些问题

计算机网络 浏览器
  • HTTP相关,请求头响应头构成,HTTP0.9/1.0/1.1/2 各版本的区别,默认端口80
  • HTTPS相关,与HTTP区别,默认端口443
  • 状态码 1XX - 5XX,背就完事了
  • get / post 的区别
  • TCP / IP,OSI 七层模型 - 物理层 数据链路层 网络层 传输层 会话层 表示层 应用层
  • 跨域相关,同源策略,跨域办法 - jsonp以及缺点 / webSocket协议 / CORS以及分类,预检请求
  • 进程线程的概念
  • 从输入URL到浏览器完成页面渲染发生了什么 - 被问烂了,越详细越好。这里又有web优化问题
  • 强缓存,协商缓存 - 相关的头部、状态码
  • cookie、session、localStorage、sessionStorage
  • 安全问题,XSS、CSRF概念,出现的场景,解决的办法 - XSS:CSP、HttpOnly Cookie;CSRF: samesite、Referer Check、Anti-CSRF-Token

手写
  • new 实例化一个对象 / new一个对象时发生了什么
  • 继承
  • 防抖节流
  • 实现call、apply、bind
  • 数组去重
  • 深浅拷贝
  • 事件代理
  • vue双向绑定

其他
下面这些是我了解过并写在简历上的,所以被问了
  • webpack,常用loader、plugin,如何配置
  • 常用的 git 命令
  • linux基本指令
  • css预处理器相关,sass/less/postcss
  • 使用 postman 来干啥
  • vim基本指令

写在末尾

对于技术面试其实还有一个很重要的东西,也就是数据结构与算法
这个就需要多刷题,github 上也有很多题解,自己多看多写,我这里就不提供面经了

有问题可以私信我

祝愿所有人都能在秋招或春招收获自己心仪的 offer
以上


#校招##腾讯##美团##华为##字节跳动##前端工程师#
全部评论
楼主小哥,指出一个地方,文中的计算机网络第五条。TCP/IP是四层协议,分别是应用层、运输层、网际层、网络接口层。OSI才是七层。
1 回复 分享
发布于 2020-12-08 16:20
楼主优秀
点赞 回复 分享
发布于 2020-11-01 14:11
牛的
点赞 回复 分享
发布于 2020-11-01 15:33
太强了,像师姐学习!
点赞 回复 分享
发布于 2020-11-01 18:16
确实很强,收录在我的面经小程序上了
点赞 回复 分享
发布于 2020-11-01 22:25
厉害,收藏了,感谢
点赞 回复 分享
发布于 2020-11-01 22:53
经历神似,看的书单也神似
点赞 回复 分享
发布于 2020-11-01 23:31
数据结构跟算法要看啥书
点赞 回复 分享
发布于 2020-11-02 06:42
点赞 回复 分享
发布于 2020-11-02 09:35
点赞 回复 分享
发布于 2020-11-02 17:02
非常感谢同学分享的优质面经,所以为了感谢同学对牛客社区的贡献与支持, 特别赠送同学100元京东卡一张~ 只要把面经链接放到面经知识汇总专场下面,就可以领奖品了哟! 技术专场:https://www.nowcoder.com/discuss/447528
点赞 回复 分享
发布于 2020-11-02 17:27
学习一波,太强了
点赞 回复 分享
发布于 2020-11-03 17:59
好优秀,美团同事走起😜
点赞 回复 分享
发布于 2020-11-05 14:33
哈哈哈,哈工大的网课,俺们那本自顶向下方法真的是一看就困😅😣
点赞 回复 分享
发布于 2020-11-05 16:06
清晰的规划和执行力 牛的
点赞 回复 分享
发布于 2020-12-09 23:55
我天,可太谢谢楼主啦,好细心😁
点赞 回复 分享
发布于 2020-12-28 23:03

相关推荐

11-07 13:31
怀化学院 Java
勇敢牛牛不怕难:又疯一个
点赞 评论 收藏
分享
Hello_WordN:咱就是说,除了生命其他都是小事,希望面试官平安,希望各位平时也多注意安全
点赞 评论 收藏
分享
评论
78
504
分享
牛客网
牛客企业服务