作为前端开发人员您应该了解什么？

作为一名编程教练导师，我经常被问到很多关于网络的复杂性及其工作原理的问题。前几天，我被要求看一个网页，并解释它是如何工作的，如何加载和显示的。

说实话，我对其中涉及的一些更深层次的技术和流程感到困惑，这让我开始思考：作为一名前端开发人员，你应该了解什么，以及了解到什么程度？

我将稍微放松一下，分享一些我认为对于初出茅庐的前端开发者来说有用或必备的常见技能或知识领域。这些技能和知识领域正是我在寻找潜在团队成员时所看重的。

这是一篇很长的文章，因此这里有一些跳转链接可以帮助您：

• 特定技术技能
• 核心的、特定角色的技能
  • HTML
  • CSS
  • JavaScript
  • 可访问性
  • 性能优化
  • 布局、UI 模式和 UX
  • 调试和故障排除
  • 单元测试
• 更广泛的技能

特定技术技能

如今，越来越多的公司在招聘时更看重员工的适应性和文化契合度，而非核心技能、特定技能或小众技能。许多有远见的公司更青睐那些适应能力强、能够快速提升技能、善于与他人合作的人。

也就是说，如果您申请 AWS 平台的开发人员职位，并且对亚马逊的旗舰云服务器技术有深入的了解，那么您可能会具有优势。

可以理解的是，这给刚开始从事前端开发的人们带来了很大的压力，因为他们不确定在学习中应该把注意力集中在哪里——内容实在是太多了！

我的建议是，尽你所能地学习，抓住机会，专注于你感兴趣的事情。如果你喜欢 Kubernetes，那就学习它！如果你有兴趣为你的前端构建后端，可以试试 Mongo DB。如果你喜欢 React（虽然它本身严格来说不算一门“技术”），那就去尝试吧！

接触不同的技术、框架和平台不会对你造成任何伤害，但如果你真的有志在区块链世界工作，那么我会尽力学习尽可能多的有关这个方向的知识。

要记住的是，技术变化非常快，在职业生涯早期过早地投入其中可能会带来弊端。我建议你通过阅读一些优秀的介绍文章或其他媒体来获得一个扎实的、高层次的概述，比如谷歌这本很棒的 Kubernetes 漫画书。

核心的、特定角色的技能

作为一名前端开发人员，这才是你最核心的技能所在。那么，这些技能应该更细分、更具体，还是更通用、更广泛呢？

对我来说，答案是……视情况而定。

你可以深入研究和专攻的子主题有很多，无论是前端开发的基本支柱（HTML、CSS、JavaScript），还是性能或安全等更宏观的领域。当然，至少对安全和性能等方面有所了解是有益的，但市面上有很多开发人员在布局和 CSS 性能方面是真正的专家，他们的技能远超 JavaScript 技能。

在前端开发方面，以下列表将为您提供一套适用于您从事的任何前端角色的全面技能：

HTML——结构基础

HTML 是任何网页的构建块，它提供构造原始数据的功能，并提供称为DOM（文档对象模型）的接口来附加事件，并允许脚本访问和更新内容。

对 HTML 的良好理解包括能够识别正确工作所需的正确元素、结构布局的语义、可用的属性（对于可访问性很重要），以及至少了解 DOM 的工作原理及其用途。

CSS - 顶部的绘制

无需考虑 SASS 等预处理器，原始 CSS 就是涂抹在 HTML 蛋糕顶部的糖霜，使我们的结构化内容以特定方式呈现并以特定方式布局。

说到 CSS，了解几种实现相同目标的不同方法至关重要。例如，旧版浏览器不支持某些选择器或属性，因此了解如何使用不同的方法获取所需内容会很有帮助。

了解 CSS 的工作原理和时间，以及它如何与页面上的其他资源交互也很有帮助。例如，JavaScript 如何阻止 CSS 渲染，以及导入某些项目（例如字体）会对页面加载造成什么影响。

就基础知识而言，层叠样式表中的级联部分是许多开发人员最常犯的错误之一。熟悉级联的工作原理（即从父级到子级的属性），并了解特异性如何影响选择器，这样就能避免将来的麻烦。

此外，我还会研究更棘手的概念，例如 flexbox 或 CSS grid，如果没有扎实的理解基础，使用它们可能会相当令人困惑，并产生意想不到的布局。

最后，一些常见的布局问题，例如当所有子元素都浮动时，父元素会折叠。这将帮助你排查显示错误并解决它们！

JavaScript——行为控制器

JavaScript 应该负责管理页面的行为。它可以操作内容，并允许我们真正地与页面进行交互，超越 HTML（和 CSS）提供的有限控制。

然而，JavaScript 本身就是一个庞大的话题，很难知道该了解什么、推荐什么。

首先，充分理解OOP和SOLID原则至关重要，这不仅仅局限于 JavaScript，对于编程和开发而言也同样重要。JavaScript 的开发方式正变得越来越面向对象，其新版本提供了更多面向类的选项和强类型元素（然而，它仍然是一种非常松散、动态的语言）。

了解 JavaScript 的怪癖、它的数据结构和“this”的约定也将帮助您避免以后开发生涯中常见的陷阱。

如果我是初学者，我会专注于 ES6 的习惯和实践。学习这些新语言特性的工作原理，例如箭头函数和数组操作，以及如何以基于组件的模块化方式进行 JavaScript 开发。

另外，花点时间阅读一下CSSOM（DOM 的 CSS 版本）。JavaScript 正是在这里与我们的 CSS 层进行交互的。

最后，我当然会研究一下Promises 的fetch()范式和工作原理。如果你在现代前端开发中处理任何事情，你都会与 API 交互。当然，有些库可以为你抽象出很多这方面的知识，但了解这两个 JavaScript 核心概念的工作原理将有助于你理解异步代码的执行。

可访问性

这是一个日益热门的话题，但对于众多拥有不同无障碍需求的用户来说，它对 Web 生态系统至关重要。您无需精通所有无障碍功能的方方面面，但建议您在进行前端开发时，务必牢记包容性原则。

在实践中，这意味着了解不同的人如何访问您的网站/应用程序，并努力使其更容易在没有键盘的情况下导航；至少这意味着不要撤消 HTML 和浏览器默认提供的许多内置控件和可访问构造。

与其单独开设一个主题，不如将无障碍功能融入到最初的学习中。例如，如果你正在学习 HTML 表单，可以学习标签索引和默认 HTML 按钮如何帮助提升表单的无障碍性。

性能优化

再说一次，有些人几乎只专注于优化 Web 应用性能。你不需要达到那种程度的理解，但了解如何改进会很有帮助。

有大量的工具，无论是直接在 IDE 中（例如 Visual Studio）还是在浏览器中（例如 Google Chrome 的 Lighthouse），都可以帮助您发现代码中任何明显的阻碍或瓶颈，然后进行改进。

当然，如果您遵循像我自己对持续重构的想法那样的重构方法，那么您可以通过尽可能保持代码精简和轻量来在问题出现之前就避免许多问题。

这也需要对代码执行有更深的了解。你是否在一个 JavaScript 类中执行了太多不必要的循环？你的 CSS 样式表中是否使用了太多通用选择器 (*)？

了解构建和部署后步骤中可用的选项也很有帮助。您可以利用 CDN 来提供内容和资产吗？您是否在对应用程序和网站进行严格的压缩和生产构建？

布局、UI 设计模式和用户体验

好的，这是三个大主题，但我认为作为前端开发人员，您不需要成为其中任何一个主题的专家。

也就是说，你将在用户使用的区域工作，构建他们使用的界面。因此，至少对一些常见的布局方法以及一些流行的UI模式有一定的了解会很有帮助。

用户体验 (UX) 本身是一个巨大的领域，但如果您可以将设计和想法表达成线框，并将用户反馈转化为对代码的有意义的更改，那么它将大大有助于弥合部门和用户之间的差距。

调试和故障排除（技能和工具）

不管您是刚刚读完第一本开发教科书的第一页，还是已经做了 20 年的开发人员，事情都会出错、停止工作，或者出现一些让您摸不着头脑的奇怪现象。

成功调试的关键在于将问题缩小到代码中最局部的部分并进行修正。根据我的经验，这需要结合以下几个因素：根据预期和实际情况进行逆向思考；利用经验积累的知识库和“最可能的原因”；以及一些实用的工具，例如 IDE 中的工具或浏览器开发工具；最后，奥卡姆剃刀原则。

解决问题可能是一项无形的技能，但学习如何解决问题才是开发的根本所在。当这些解决方案本身导致问题时，学习如何分解并单步执行代码以找出问题所在至关重要。

...PS - 这几乎总是由缓存或拼写错误的变量名引起的：D

单元测试

这对团队来说是件好事，但了解一些关于如何测试、测试什么以及有哪些框架可以帮助你的常见概念也很重要。

单元测试可以提供帮助，它能表明您的代码按照您的预期运行，并且最近的任何更改都不会改变其他地方的功能。

表现出进行单元测试的意愿，以及对如何针对特定代码库进行单元测试的一些理解，将会大有帮助。

单元测试并没有太多硬性规定，但在前端领域，使用像 Jest 这样的框架时，我们倾向于关注基于用户的结果，而不是具体的代码执行。例如，我们可能想检查如果点击一个按钮（当然是在单元测试中模拟的），特定的 UI 元素是否会改变或更新？而不是“JavaScript 类中的这个特定方法是否被触发了？”。

更广泛的“软”技能

我要说的是，出于多种原因，我并不喜欢“软技能”这个词，而且我们整个行业对这个词的不安情绪也越来越强烈。

然而，在我们找到更好的标签之前（评论区帮帮我！），这很好地概括了那些适​​用于开发人员之外的技能类型或知识领域。这些技能或知识领域与特定的技术或开发人员的通用工具无关。它们可能只是构成良好生活技能的技能。

这些包括：

• 自信常常被误认为是迟钝或专横，但这仅仅意味着能够坚定且克制地表达自己的观点和想法。敢于表达自己的想法，并与他人分享你的想法，无论好坏。
• 沟通能力范围很广，指的是能够成功地向他人传达想法或观点。沟通可以是书面形式，也可以是通过视觉手段，例如线框图或草图。对于任何想从事前端开发等视觉领域工作的人来说，沟通能力都至关重要。
• 积极的态度以积极的态度看待问题，可以带来巨大的改变。这并不是说要坚持不懈地寻找哪怕是一丝好处，而是尽可能地关注积极的一面，并让事情顺利进行。人们喜欢与那些勇于尝试新事物的人共事，也喜欢与那些即使是平凡或不那么令人兴奋的任务也能以积极进取的态度来处理的人共事。
• 乐于助人的精神与积极乐观类似，善良乐于助人也会带来回报。每个人都有需要帮助的时候，包括你自己，所以在力所能及的时候伸出援手是明智之举。如果开发伙伴遇到困难，就伸出援手。如果需要别人伸出援手，事情进展会更快。
• 为了团队精神的利益不，你不必像个无脑的机器人或盲目的公司旅鼠，但你所做的选择和做出的决定都应该以团队为中心：这会让每个人的生活更轻松一些吗？它是否能帮助到更多人，而不仅仅是我自己，等等？在开发方面，你们都同舟共济，所以尽可能地为集体利益而努力是有益的。
• 批判性思维：能够以开放的心态和逻辑推理来看待情况或任务，这一点至关重要，尤其对于开发人员而言。将大问题分解成多个累积解决方案的能力，是我们工作的重要组成部分。
• 客观性：如果你能将自己和感受从情境中抽离出来，从旁观者、第三方的视角来看待问题，这有助于你判断自己所做的决定是源于自身观点还是根深蒂固的信念。客观性能帮助我们发现是否有其他可行的处理方式。
• 学习学习学习生活总是在发生，事物在发展，事物在变化。尤其是在科技行业。如果你不热爱学习新事物（不仅仅是为了学习而学习），你很快就会落后。能够在新的挑战中找到乐趣，并享受与时俱进的领域变化，有助于为集体带来新想法，并解决各种问题。

你的 爱知识？

我曾见过面试官探究应聘者对浏览器的了解程度以及网页在页面上物理呈现的复杂细节，有时这感觉有点不公平或“陷阱”。

我的意思是，你不必知道汽车是如何在物理上转化发动机中小爆炸的，就能专业地驾驶它。这就是“视情况而定”的由来：你大概会认为机械师应该知道发动机的工作原理，不是吗？

但话说回来，要达到什么程度呢？你能指望同一个机械师准确理解每个活塞在特定时刻需要注入多少燃油吗？你能指望他能解释刹车工作原理背后的物理原理吗？

或许不是……

抛开比喻，回到前端和浏览器，你的知识洞应该有多深？

对我来说，我认为对网页渲染的主要参与者（DOM、CSSOM 和 JavaScript）以及它们各自扮演的不同角色有广泛的了解是有益的。能够将一个大问题分解成多个小问题，并以简洁、文档齐全且经过充分测试的方式解决这些问题，对我来说比从二进制层面了解浏览器如何渲染页面更为重要。

话虽如此，一切都取决于级别和经验。如果你是高级开发人员，你可能会在某些方面拥有更丰富的经验，并且能够在这些基础知识的基础上，逐步积累更高级的知识。

您的“前端开发人员应该知道的事情”清单上有什么？

如果我遗漏了什么或者您的列表是什么样的，请告诉我。