前端进击笔记第一节 前端基础知识体系

你好，我是被删（贝珊），或许你曾读过我的一些文章，或许你还未曾听说过我，我先简单介绍下自己。

我大学毕业去了华为，后转入腾讯，前后加入了企鹅电竞、微信支付和腾讯文档等多个业务团队，现如今在腾讯文档 Alloyteam 团队，负责核心模块的项目架构、技术方案设计等研发工作。

我特别喜欢分享，也常常会对自身工作进行阶段性思考和总结，并通过文字的形式沉淀下来。去年收到一个赞赏，对方给我打赏的同时，附了一段话：

“抱歉只有这点钱，今年没有找到工作，但是很喜欢您的文章。”

很感谢，很感动，却又很难过。最近几年，前端领域的变化可谓翻天覆地，我们从最简单开始写页面，到如今的工程化、服务端、客户端等领域，也都渐渐出现了前端开发的踪影。很多前端开发在认真埋头干活，再抬头的时候却发现自己所了解的前端，早已变了样。

不仅如此，又由于业务简单、工作内容局限等问题，很多前端开发即使把所有前端开发技术中的知识点都学习一遍，最终依然会因为工作繁忙、实践的缺失等情况只停留于“看过”的层面，工作陷入困境。

如何破局，快速进阶？

这些年来，我面试过各式各样的应届生和社招人员，最大的感受是：准备充分的应届生在面试过程中反而表现更好。

原因也很好理解，大多数公司对应届生的要求是基础不差、能干好学，即使缺乏项目实践经验，影响也不会很大。

但对于工作 1~3 年的前端开发，不仅要可以熟练使用各种前端框架、工具库，还要知其原理，能够举一反三。

但就我面试的大多数人来说，在被问及框架和工具的实现原理、在怎样的场景下该如何选择等问题时，大都缺乏自身的理解与想法。

这也是职场人普遍面临的常态：他们在日常工作中更倾向于解决问题，却很少去深度思考，比如问题“为什么”会产生。

但试想，对于一些工具的使用，大多数应届生都可以通过官方文档或百度来快速学习，如果我们还只关注完成工作内容本身，那么几年后，我们的竞争优势在哪里？

因此，我想从过来人的角度，给初中级前端同学提供两个建议。

1. 掌握前端核心专业知识，深入了解常见解决方案

打好基础，打好基础，打好基础！没有基础，进阶毫无可能。

我之前碰到过的一个例子很能说明这个问题。有一天，某个团队突然接到不少用户反馈小程序很卡很慢，其中，刚进团队的一个小伙二话不说，直接拿出常见的前端性能优化套装，一项项地比对，测试各种机型的首屏耗时、页面渲染和交互响应速度，等等，但却没有发现重点原因。

当他咨询自己的导师时，却发现导师打开了小程序开发工具一顿分析操作，不到半小时就定位了卡顿问题并解决了。

原来由于双线程的设计，小程序在setData的时候，如果过于频繁且数据量较大，就会造成卡顿，而这些问题都可以通过小程序开发工具提供的体验评分功能来发现。

你看，如果没有深入了解过小程序本身的设计原理，对它的认知只停留在前端 Web 开发中，就压根不会想到是小程序本身设计导致的性能问题。

掌握前端核心专业知识，你才能胸有成竹，快速分析定位问题，并结合项目本身给出解决方案。

2. 跳出技术执行，靠近业务搞项目

纵然我们具备完善的前端专业知识体系，如果无法应用和落地到项目中，那就是空口白话。

特别是想要进阶中高级前端开发时，足够的项目经验，独立完成技术选型、项目设计和管理等能力，以及推动方案落地和执行，就是重点了。

比如，小李接手了一个快速上线 H5 活动页面配置平台的任务，他对活动页面和自定义配置都有较丰富的开发经验，因此花一天时间就给出了这个平台的技术方案。

老板也觉得不错，然后追了一句：需要给你多少人力，可以在两周内上线这个平台？小李愣了，他平时都只关注技术，很少关注项目上线的过程是怎样的，一时有点进退两难。

最后小李决定尝试一下。但开发期间由于团队分工不明确、协作不顺畅、代码风格不一致、Bug 较多等问题，导致项目多次返工，在全员加班的情况下，依然延期了一周才上线。所以，我们在日常开发过程中，也不能只局限于专业知识，也得学会如何管理和搭建项目。

现阶段中、高级的前端开发，项目设计和管理经验更是必不可少。所以要想进阶，你得知道如何从 0 开始搭建前端项目、如何进行技术调研和选型、如何提升项目中各个阶段的开发效率，以及如何通过项目复盘而不断优化自身的项目管理经验。

课程设计

为了让你快速掌握前端核心专业知识和项目经验，我在设计课程时，主要围这两大块来讲的。

专业知识篇：核心基础。HTML、CSS、JavaScript 和浏览器作为前端最最最最核心的基础，看似简单，但很多前端开发对它们的理解不够深入。在这里，我会带你重新梳理其中的关键点，比如 JavaScript 代码是如何被执行的，比如网络请求的过程，以及浏览器页面的加载和渲染流程是怎样的，这个过程中浏览器内部是如何协作完成的，等等。

这些内容对于帮你夯实前端开发的语言和技能，以及深入理解其中的设计、机制和原理，非常有帮助。

专业知识篇：能力进阶。在掌握了核心基础内容后，我会带你了解前端开发中经常用到的工具和框架，并深入讲解它们的实现原理。同时，我还会介绍一些实用的开发技巧和思维，帮助你提升开发效率、编写出更具可读性和维护性的代码。

最后，我还会用一个实战项目来让你实学实用前面的开发技巧。这样你才会融会贯通，在开发时事半功倍，更重要的是，你在未来遇到业务问题时想到更优解。

项目经验篇：技术方案选型。这部分我会介绍一些前端项目中经常遇到的技术方案，比如应用状态管理、路由管理、监控体系搭建等。沉淀了足够的技术方案进行对比，你更能结合自身项目找到最优解。

其次，我还会教你如何进行前端技术调研，让你具备独立设计方案并落地实现的能力，从而帮助团队解决现有问题，更好地体现自身价值。

项目经验篇：项目设计与管理。当你作为一个项目的 Owner 去推动项目从搭建到上线时，你还需要了解如何进行前端项目的设计、搭建、开发，以及保证项目顺利上线。同时，我还会介绍在大型的项目中、多人的协作中，存在的一些问题和解决方案。掌握了这些解决方案和技能之后，你可以提升自己在项目中的 Owner 意识和重要性。

整个体系顺下来，我针对前端开发者的痛点问题，梳理了必备的基础知识和技术方案，以及工作中需要掌握的技能和思考方式，希望我的经验能够为你成为前端高手助力。

讲师寄语

互联网时代，不管是生活还是工作都在飞速发展。如果将计算机领域比作一棵树，那么前端开发则是处于树的尖端，与外界（用户）的距离最近，也最容易受到外界的影响而发生变化。

未来的很长一段时间内，前端领域依然会不断地进行技术更新和知识迭代。为了适应这样频繁的变化，我们需要在不断学习的过程中，编织出自己的知识网络体系，牢牢抓住核心，才能无畏狂风暴雨，站在顶端尽情展示前端技术的魅力，展现个人能力。

希望在未来，我们都可以成为更好的自己，加油！

---

在正式进入课程之前，我先结合前端面试考察，以关键知识点和问题的方式帮你厘清前端需要掌握的知识体系，这样你在学习的过程中就可以有个完整的知识框架。

这篇课前导读的主要目的在于给你梳理知识体系，所以不会提供面试问题的具体答案和详细内容描述。你可以通过学习后续课时来找出答案，也可以针对提到的知识点和问题去进行深入学习和发散，或者是在留言区进行提问和交流，从而补齐自己缺失的知识和技能。

首先，我们来看前端面试过程中核心基础的知识领域，包括三大块内容：

• 前端三件套 HTML/CSS/JavaScript；

• 与 JavaScript 运行环境相关的浏览器和 Node.js；

• 前端开发通用领域、网络、安全、算法和计算机通用知识。

下面，我们就开始逐一梳理核心知识点吧！

HTML 与 CSS

对于 HTML，面试官很多时候会考察 DOM 元素相关的问题，包括 DOM 操作、事件冒泡/委托、虚拟 DOM 设计等内容。

因此，关于 HTML 的内容更多是结合浏览器机制一起考察。

其中，DOM 操作与性能问题、事件委托以及浏览器中对