从面试角度了解前端基础知识体系

目录

前端专业知识相关面试考察点

HTML 与 CSS

Javascript

网络相关

浏览器相关

安全相关

算法与数据结构

计算机通用知识

前端项目经验相关面试考察点

前端框架与工具库

Node.js 与服务端

性能优化

前端工程化

开发效率提升

监控、灰度与发布

多人协作

结束语

---

这两年大裁员过后，带来了一系列的人员变动，常常面临着不受宠的被辞退了，能干的人跑了，剩下的人在努力维护着项目。于是乎老板们才发现人好像又不够了，然后又开始各种招人。机会一直都有，重要的还是得努力提升自己的能力，才能在这场战斗中存活下来。

前端开发中相对基础的一些内容，主要围绕着 HTML/CSS/Javascript 和浏览器等相关。这些基础知识的掌握是必须的，但有些时候在工作中未必会用到。例如有些项目前后端部署在一起，并不会存在跨域一说，那么可能在开发过程中不会遇到浏览器请求跨域和解决方案相关问题。除了通过不断地学习和在项目中练习，或许从面试的角度来补齐相应的专业知识，可以给我们带来更大的动力。

本文的内容包括：

• 前端专业知识相关面试考察点
• 前端项目经验相关面试考察点

前端专业知识相关面试考察点

首先我们会针对前端开发相关来介绍需要掌握的一些知识，内容会包括 Javascript、HTML 与 CSS、网络相关、浏览器相关、安全相关、算法和计算机通用知识。

由于篇幅关系，下面会以关键知识点和问题的方式进行描述，并不会提供具体的答案和详细的内容描述。因此，大家可以针对提到的知识点和问题去进行深入学习和发散，也可以去网上搜一些相关的题目，结合大家的答案去尝试进行理解和解答。

HTML 与 CSS

关于 HTML 的内容会较少单独地问，更多是结合浏览器机制等一起考察：

• DOM 操作是否会带来性能问题
• 事件冒泡/事件委托

关于 CSS，也有以下的一些考察点：

• 介绍盒子模型
• 内联元素与块状元素、display
• 文档流的理解：static/relative/absolute/fixed等
• 元素堆叠：z-index与position的作用关系
• Flex 布局方式的理解和使用
• Grid 布局方式的理解和使用
• BFC 的优点和缺点
• CSS 动画考察：关键帧、animate、transition等

很多时候，面试官也会通过让候选人编码实现某些样式/元素的方式，来考察候选人对 CSS 的掌握程度，其中布局（居中、对齐等）会比较容易考察到。
 

Javascript

前端最基础的技能包括 Javascript、CSS 和 HTML，尤其是新人比较容易遇到这方面的考察。对于 Javascript 会问到多一些，通常包括：

考察范围	具体问题
对单线程 Javascript 的理解	单线程来源 Web Workers 和 Service Workers 的理解
异步事件机制	为什么使用异步事件机制 在实际使用中异步事件可能会导致什么问题 关于setTimeout、setInterval的时间精确性
对 EventLoop 的理解	介绍浏览器的 EventLoop 宏任务（MacroTask）和微任务（MicroTask）的区别 setTimeout、Promise、async/await在不同浏览器的执行顺序
Javascript 的原型和继承	如何理解 Javascript 中的“一切皆对象” 如何创建一个对象 proto与prototype的区别
作用域与闭包	请描述以下代码的执行输出内容（考察作用域） 什么场景需要使用闭包 闭包的缺陷
this与执行上下文	简单描述this在不同场景下的指向 apply/<