# 如何搞定所有 Web 前端面试题
TIP
工作能力 ≠ 面试能力，面试之前刻意练习，强化训练。聚焦前端面试必考的刚需内容，掌握解决面试题的思路、技巧与方法论。
汇总了 2023 年企业最新的高频面试题和答案解析方法论，持续更新 ......
# 一、方法论总结
首先要清楚
企业对于工程师能力要求，自身能力素养及面试招聘流程
# 1、企业招聘工程师的三个级别
面试考察方向
基层工程师：基础知识扎实
高级工程师：更扎实的基础知识 + 项目经验
架构师：解决方案能力
# 2、基础知识的重要性
基本功
工程师的自我修养：基础知识
扎实的基础以便于让我们高效的学习新技术
# 3、Web 前端常见的面试流程
# 4、先来体验几个基础的面试题
说说你能想到什么 ？
（1）
typeof能判断哪些类型 ？（2）何时使用
===，何时使用==?（3）
window.onload和DOMContentLoaded的区别 ？（4）JS 创建 10 个
<a>标签，点击的时候弹出对应的序号 ？（5）手写节流
throttle、防抖debounce（6）Promise 解决了什么问题 ？
# 5、先不用着急回答这些题目 ，先来思考下 ！
思考
拿到一个面试，你第一时间能看的是什么 ？
如何看待网上搜索出来的永远做不完的题海 ？
如何对待接下来遇到的所有面试题 ？
# 6、那么，如何搞定所有面试题 ？
All
拿到一个面试题，第一时间看到 不应该是题目本身，而应该是 -> 考点 才对
面对题海 -> 以不变应万变
题目可变、考点不变，考点不变、考点不变，考点的范围会变
如何对待接下来的面试题：从题目到知识点，再到题目，不一样的题目一样的考点
# 7、分析面试题考察的知识点，梳理知识框架
如下思考思路，总结方法论：
typeof 能判断的类型 ？
- 考点：JS 变量类型
何时使用 ===，何时使用 == ?
- 考点：强制类型转换
window.onload 和 DOMContentLoaded 的区别 ？
- 考点：页面加载渲染过程
JS 创建 10 个
<a>标签，点击的时候弹出对应的序号 ？- 考点：JS 作用域
手写节流 throttle 、防抖 debounce
- 考点：性能、体验优化
Promise 解决了什么问题 ？
- 考点：JS 异步
你发现没 ？
就简单的几个题目是不是就涵盖很多类型的知识，复习起来是不是就更有效率了呢 ？
基本上是，每做一个面试题，就能搞定一类面试题
# 8、理清思路，总结刷面试题的方法论：
总结
- 拿到题目之后 -> 反推考点 -> 把考点整理出来，然后再去解决问题
- 这样子，每做一个经典面试题，就能搞定一类面试题 ，不然永远有做不完的面试题，也没效率
按以下步骤整理自己的面试题库，100%面霸级别，这样的基础知识也会更扎实
- 题目
- 考察知识点
- 解答
# 二、HTML/HTML5 面试题
按方法论归类
HTML 标签部分相对简单些，面试中，考察占比的点相对少一些 ，以下两个点是比较常考
1、 如何理解 HTML 语义化 ？
2、默认情况下，哪些 HTML 标签是块级元素，哪些是内联元素 ？
# 三、CSS/CSS3 面试题
按方法论归类
一般都会从整个 CSS 知识模块出发来设计面试题 ，考点如下几个方面
- 布局
- 定位
- 图文样式
- 响应式
- CSS 画图形
- CSS3 动画
- CSS 属性相关
- CSS 综合应用
# 1、CSS 布局
经典面试题
1、盒子模型的宽度如何计算 ？
2、margin 纵向重叠问题 ？
3、margin 负值问题
4、BFC 理解和应用
5、float 布局的问题，手写 clearfix
6、flex 画色
7、Grid 布局
# 2、CSS 定位
# 3、CSS 画图形
# 4、CSS 响应式布局
# 四、JavaScript+ES6 经典面试题
总结
JS+ES6 核心部分按方法论归类
- 数据类型和变量
- 闭包 、作用域
- 原型原型链
- 继承
- 数组
- Promise 与 async await
- this 和 执行上下文
- ajax 与 axios
- 对象
- DOM 与 事件
- 事件循环
- ES6 相关
- 函数
- 综合题
- 相关概念
- 防抖与节流，垃圾回收
- 手写代码面试题
- TypeScript
# 1、考点一：JS 基础 - 变量类型和计算
部分经典面试题：
1、值类型和引用类型的区别 ？
2、手写 JS 深拷贝
3、变量计算：类型转换会有哪些坑 ？
4、变量类型相关的
5、typeof 能判断哪些类型
6、何时使用
===何时使用==
更多变量类型和计算 相关面试题，可补充 ......
变量类型和计算 知识点：
- 值类型 VS 引用类型，堆栈模型，深拷贝
- typeof 运算符
- 类型转换，truly 和 falsely 变量
# 2、考点二：JS 基础 - 原型和原型链
部分经典面试题：
1、原型的考点和相关面试题
2、如何用 class 实现继承 ？
3、如何理解 JS 原型（隐式原型和显示原型）
4、instanceof 是基于原型链实现的 ？
5、如何准确判断一个变量是不是数组 ？
6、手写一个简易的 jQuery，考虑插件和拓展性
7、class 的原型本质，怎么理解 ？
更多原型和原型链 相关面试题，待补充 ......
原型和原型链 知识点：
- class 和 继承 ，结合手写 jQuery 的示例来理解
- instanceof
- 原型和原型链的 图示 和 执行规则
# 3、考点三：JS 基础 - 作用域和闭包
部分经典面试题：
1、什么是作用域？什么是自由变量 ？
2、什么是闭包？实际开发中，闭包会用在哪里 ？
3、this 有几种赋值情况 ？有哪些不同的应用场景，如何取值 ？
4、作用域相关的面试题
5、原型中的 this
6、手写 bind 函数
更多作用域和闭包 相关面试题，待补充 ......
作用域和闭包 知识点
- 作用域和自由变量
- 闭包：两种常见的方式 & 自由变量查找规则
- this
# 4、考点四：JS 基础 - 异步和单线程
部分经典面试题：
1、异步和同步有何不同 ？
2、前端异步的应用场景有哪些 ？
3、promise 的基本使用，手写用 Promise 加载一张图片
更多异步 相关面试题，待补充 ......
异步和单线程 知识点
- 单线程和异步，异步和同步的区别
- 前端异步的应用场景：网络请求 & 定时任务
- Promise 解决 callback hell
# 5、JS WebAPI - DOM 经典面试题
按方法论归类
JS WebAPI 这部分的内容是从 JS 基础过渡过来的：
JS 基础知识，规定语法（ECMA 262 标准）
JS Web API ，网页操作的 API （W3C 标准）
前者是后者的基础，两者结合才能有真正实际应用
JS 基础知识包括：
变量类型和计算，原型原型链，作用域和闭包 等
JS WebAPI 基础知识包括：
DOM、BOM、事件绑定、Ajax，存储
# 重点注意：
WARNING
随着 Vue 和 React 框架的广泛应用，封装了 DOM 操作
因此我们在日常开发中几乎接触不到 DOM 操作，自己也不会去手写 DOM 操作，而且框架本身也建议不要手写 DOM 操作，公司也不会允许手写 DOM，除非有特殊情况下才会手写。
但 DOM 操作一直都会是前端工程师的基础、必备知识
只会 Vue 而不懂 DOM 操作的前端程序员，不会长久
这里，我想说两句 ：
我们拒绝最后只成为了 Vue 工程师 或 React 工程师，被框架绑架了
因为，技术迭代更新很快，能持续火 5 到 10 年以上的框架都会很少，很容易被其他的框架替代，但本质都是不变的。
不要被工具或框架限制了自己的能力和知识边界
这是一个优秀的工程必备的基本素养
# DOM 相关经典面试题
TIP
1、DOM 是哪种数据结构 ？
2、DOM 操作的常用 API
3、attr 和 property 的区别 ？
4、一次性插入多个 DOM 节点，考虑性能，怎么办 ？
更多 DOM 相关面试题，待补充 ......
DOM 考察知识点：
- DOM 的本质
- DOM 的节点操作
- DOM 的结构操作
- DOM 的性能
# 6、JS WebAPI - BOM 经典面试题
按方法论归类
关于 BOM 要考的内容不多
- 1、如何识别浏览的类型 ？
- 2、分析拆解 URL 的各个部分
更多 BOM 相关面试题，待补充 ......
BOM 考察的知识点：
- navigator
- history
- screen
- location
# 7、JS WebAPI - 事件 经典面试题
按方法论归类
- 1、编写一个通用的事件监听函数 ？
- 2、描述事件冒泡的流程
- 3、无限下拉的图片列表，如何监听每个图的点击 ？
更多事件相关面试题，待补充 ......
事件考察的知识点：
- 事件绑定
- 事件冒泡
- 事件代理
# 8、JS WebAPI - Ajax 经典面试题
按方法论归类
- 1、手写一个建议的 Ajax
- 2、跨域常用的实现方式
- 3、实际项目中 ajax 的常用插件，优缺点
更多 AJax 相关面试题，待补充 ......
Ajax 考察的知识点：
- XMLHttpRequest
- 状态码
- 跨域：同源策略，跨域解决方案
# 9、存储与节流防抖 经典面试题
按方法论归类
- 1、描述 cookie、localStorage、sessionStorage 的区别
- 2、手写防抖 debounce
- 3、手写节流 throttle
更多 存储 相关面试题，待补充 ......
存储考察的知识点：
- cookie
- localStorage 和 sessionStorage
- 防抖 debounce 和 节流 throttle
# 五、前端进阶高频面试题
# 六、Vue/React 框架，项目高频面试题
按方法论归类
- Vue 基础
- Vue 生命周期
- Vue 响应式
- 组件
- DOM
- 路由
- Vue2、Vue3
- 综合应用
- 项目相关
- webpack
- Vite
- Node
- React
- 微前端
# 七、全栈相关面试题
# 八、面试技巧
先说两句
技术行业是最公平的 ！说白了，就是有实力，就能拿高薪
但同时，学习也要有方法，面试也需要一些技巧 ！
关于简历：
简洁明了，突出个人技能和项目经验 （便于面试官做简历筛选）
如果你是应届生写一页就好，如果两三年的社招生大概两页就好，不要长篇大论
可以把个人博客、开源作品放在简历中（但，博客要有内容）
不要造假，保证能力上的真实性（斟酌用词，如：精通 XXXX）
# 九、面试过程中注意事项
WARNING
1、如何看待加班 ？根据个人的现状
2、千万不要挑战面试官，反考面试官
3、学会给面试官惊喜 ，证明你能想到的更多，做的更多，但也不要太多了
4、如果遇到不会的问题，说出你知道的部分即可，但别岔开话题
5、谈谈你的缺点 ？ 这个问题肯定不能直接说缺点
- 比如：可以说一下我对 Vue 的底层源码还了解不够深入，最近正在补课学习呢
- 既是缺点也是优点，表现出自己积极上进的态度很重要
后续
持续更新 ....
大厂最新技术学习分享群
微信扫一扫进群，获取资料
X