如何搞定所有 Web 前端面试题

您所在的位置：网站首页 › 前端安全问题面试 › 如何搞定所有 Web 前端面试题

如何搞定所有 Web 前端面试题

2024-06-15 09:46| 来源: 网络整理| 查看: 265

# 如何搞定所有 Web 前端面试题

TIP

工作能力 ≠ 面试能力，面试之前刻意练习，强化训练。聚焦前端面试必考的刚需内容，掌握解决面试题的思路、技巧与方法论。

汇总了 2023 年企业最新的高频面试题和答案解析方法论，持续更新 ......

# 一、方法论总结

首先要清楚

企业对于工程师能力要求，自身能力素养及面试招聘流程

# 1、企业招聘工程师的三个级别

面试考察方向

基层工程师：基础知识扎实

高级工程师：更扎实的基础知识 + 项目经验

架构师：解决方案能力

# 2、基础知识的重要性

基本功

工程师的自我修养：基础知识

扎实的基础以便于让我们高效的学习新技术

# 3、Web 前端常见的面试流程

# 4、先来体验几个基础的面试题

说说你能想到什么？

（1）typeof 能判断哪些类型？

（2）何时使用 === ，何时使用 == ?

（3）window.onload 和 DOMContentLoaded 的区别？

（4）JS 创建 10 个标签，点击的时候弹出对应的序号？

（5）手写节流 throttle 、防抖 debounce

（6）Promise 解决了什么问题？

# 5、先不用着急回答这些题目，先来思考下！

思考

拿到一个面试，你第一时间能看的是什么？

如何看待网上搜索出来的永远做不完的题海？

如何对待接下来遇到的所有面试题？

# 6、那么，如何搞定所有面试题？

All

拿到一个面试题，第一时间看到 不应该是题目本身，而应该是 -> 考点才对

面对题海 -> 以不变应万变

题目可变、考点不变，考点不变、考点不变，考点的范围会变

如何对待接下来的面试题：从题目到知识点，再到题目，不一样的题目一样的考点

# 7、分析面试题考察的知识点，梳理知识框架

如下思考思路，总结方法论：

typeof 能判断的类型？

考点：JS 变量类型

何时使用 ===，何时使用 == ?

考点：强制类型转换

window.onload 和 DOMContentLoaded 的区别？

考点：页面加载渲染过程

JS 创建 10 个标签，点击的时候弹出对应的序号？

考点：JS 作用域

手写节流 throttle 、防抖 debounce

考点：性能、体验优化

Promise 解决了什么问题？

考点：JS 异步

你发现没？

就简单的几个题目是不是就涵盖很多类型的知识，复习起来是不是就更有效率了呢？

基本上是，每做一个面试题，就能搞定一类面试题

# 8、理清思路，总结刷面试题的方法论：

总结

拿到题目之后 -> 反推考点 -> 把考点整理出来，然后再去解决问题这样子，每做一个经典面试题，就能搞定一类面试题，不然永远有做不完的面试题，也没效率

按以下步骤整理自己的面试题库，100%面霸级别，这样的基础知识也会更扎实

题目考察知识点解答 # 二、HTML/HTML5 面试题

按方法论归类

HTML 标签部分相对简单些，面试中，考察占比的点相对少一些，以下两个点是比较常考

1、如何理解 HTML 语义化？

2、默认情况下，哪些 HTML 标签是块级元素，哪些是内联元素？

更多 HTML/HTML5 相关面试题 ...... 👆

# 三、CSS/CSS3 面试题

按方法论归类

一般都会从整个 CSS 知识模块出发来设计面试题，考点如下几个方面

布局定位图文样式响应式 CSS 画图形 CSS3 动画 CSS 属性相关 CSS 综合应用

更多 CSS/CSS3 相关面试题 ...... 👆

# 1、CSS 布局

经典面试题

1、盒子模型的宽度如何计算？

2、margin 纵向重叠问题？

3、margin 负值问题

4、BFC 理解和应用

5、float 布局的问题，手写 clearfix

6、flex 画色

7、Grid 布局

更多 CSS 布局相关面试题 ...... 👆

# 2、CSS 定位

经典面试题

1、absolute 和 relative 分别依据什么去定位？

2、居中对齐有哪些实现方式？

更多 CSS 定位相关面试题 ...... 👆

# 3、CSS 画图形

经典面试题

1、CSS 画一个三角形

2、CSS 如何画一个梯形

更多 CSS 画图形相关面试题 ...... 👆

# 4、CSS 响应式布局

经典面试题

1、rem 是什么？

2、如何实现响应式？常用的方案有哪些？

更多 CSS 响应式相关面试题 ...... 👆

# 四、JavaScript+ES6 经典面试题

总结

JS+ES6 核心部分按方法论归类

数据类型和变量闭包、作用域原型原型链继承数组 Promise 与 async await this 和执行上下文 ajax 与 axios 对象 DOM 与事件事件循环 ES6 相关函数综合题相关概念防抖与节流，垃圾回收手写代码面试题 TypeScript

详细的 JS+ES6 面试题 ...... 👆

# 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 # 五、前端进阶高频面试题

按方法论归类

浏览器进程和线程网络传输 HTTP/HTTPS 性能优化前端安全综合

更多前端进阶重难点面试题 ......

# 六、Vue/React 框架，项目高频面试题

按方法论归类

Vue 基础 Vue 生命周期 Vue 响应式组件 DOM 路由 Vue2、Vue3 综合应用项目相关 webpack Vite Node React 微前端

更多 Vue/React 框架重难点面试题 ......

# 七、全栈相关面试题

按方法论归类

Node 基础面试题 Node 高级面试题其他 ......

更多 Web 全栈相关面试题 ......

# 八、面试技巧

先说两句

技术行业是最公平的！说白了，就是有实力，就能拿高薪

但同时，学习也要有方法，面试也需要一些技巧！

关于简历：

简洁明了，突出个人技能和项目经验（便于面试官做简历筛选）

如果你是应届生写一页就好，如果两三年的社招生大概两页就好，不要长篇大论

可以把个人博客、开源作品放在简历中（但，博客要有内容）

不要造假，保证能力上的真实性（斟酌用词，如：精通 XXXX）

# 九、面试过程中注意事项

WARNING

1、如何看待加班？根据个人的现状

2、千万不要挑战面试官，反考面试官

3、学会给面试官惊喜，证明你能想到的更多，做的更多，但也不要太多了

4、如果遇到不会的问题，说出你知道的部分即可，但别岔开话题

5、谈谈你的缺点？这个问题肯定不能直接说缺点

比如：可以说一下我对 Vue 的底层源码还了解不够深入，最近正在补课学习呢既是缺点也是优点，表现出自己积极上进的态度很重要

后续

持续更新 ....

上次更新时间: 6/8/2023, 9:23:17 PM

大厂最新技术学习分享群

微信扫一扫进群，获取资料

【本文地址】

如何搞定所有 Web 前端面试题

如何搞定所有 Web 前端面试题

今日新闻

推荐新闻