前端架构师听起来是个很冠冕堂皇的职位，在大多数程序员眼中，架构师一般从事后端开发，以Java或者C++为背景，往往什么技能都有，能解决业务中的各种问题。似乎架构师从来就跟前端没啥关系，事实真的是这样吗？读完这篇文章，会让你豁然开朗。

前端的含义

首先说一下我们的工作，前端的含义，前端来自于用户界面，是和用户接触的第一个地方，也是衡量一个项目产品质量的第一关。

什么是前端？

先从最早的 DOS 系统说起。那时候还没有前端的概念，大多数软件界面都是黑底白字，冷冰冰的控制台命令。结果，渐渐地，不只是用户，就连程序员也对现状不满意，开发了图形用户界面，让一些功能更容易操作。那时候的前端叫 GUI（ User ），还没有多端的概念，大部分都是基于操作系统开发的原生界面。

上图来自于经典的DOS系统软件DOS

随着互联网的发展，第一代浏览器（浏览器）的诞生以及随后IE系列浏览器的问世，“上网”二字逐渐走入了大多数用户的生活。直到现在浏览器盛行，国内各种浏览器百花齐放，主要为浏览器提供服务，实现各种特效的语言迎来了第一波春天。

上面的图片来自

到现在，前端已经逐渐被拆分成：

Web 前端（HTML+CSS+）、客户端前端（和 iOS）。

或者他是网页重构工程师，JS工程师，UI/UX，图片裁剪师等等。

说到底，这些都是为了前端服务的，说了这么多，前端的价值到底是什么？

前端的价值是什么？

第一点就是前端的本职工作，这是前端和后端在功能上的主要区别，也是前端岗位存在的原因。第二点不言而喻，前端如果做得好，对用户体验是有利的，如果后端的目标和价值体现在服务的高性能、高可用性、可扩展性和安全性，那么前端的价值就体现在“用户”二字上。

所以，作为一名合格的前端开发者，目标是让用户用起来舒服（开心）。因此，要想充分体现你的价值，你需要一步步完成以下步骤：

看完上面的内容，大家是不是有一种似曾相识的感觉？是不是有点像某招聘信息的京东广告？其实作为企业，招聘前端开发人员一定要能给企业带来价值，这也是你价值的体现。

但是我想说的是，这看似简单的三点，你真的理解了吗？第一点和第二点体现的是你的技术能力，完全取决于你的技术积累，第三点体现的是你的主动性。这部分可以发挥的地方很多，一个新人和工作经验丰富的人之间的差别可能就体现在这里，后面我们会详细讲。

不过我也想说，单纯的完成上面三个步骤只能说明你是一个合格的前端开发人员，距离成为一名架构师还有一定的距离。

前端价值实现真的很重要吗？

好了上面我们了解了前端的价值，而所有的前端开发者也还在努力的彰显自己的价值，但是让人疑惑的是，前端是有价值，但是这种价值真的很重要吗？

与非前端技术相比

对于一个成熟的产品业务来说，前端往往是很薄的一层，这一层给你的功能大多是页面的UI展示和用户交互。

前端虽然是产品和用户之间的第一道屏障，但这只是第一道屏障，后面可能还有十几道屏障，比如后端逻辑的人、底层数据库的人、网络安全的人、运维的人、大数据分析的人，又或者现在流行的机器学习相关的人，每个相关模块都有自己独立的技术体系，可以说是缺一不可。

所以，相比于前端之外的这些技术，前端其实并没有那么“你不可或缺”。也就是说，前端确实有价值，但是从全局来看，前端产生的价值并不是核心价值。

对产品业务的重要性

现在举一个比较实际的例子，对于前端开发，在一些一线互联网公司比如BAT等，这些公司非常重视前端开发，有自己的产品业务线，整个前端技术的氛围很好，能够利用前端技术不断的提升产品的用户体验。

但对于其他一些中小型公司或企业（相信各位也不全是BAT出身的），很多前端开发的技术含量并不是很高，尤其是一些toB业务，核心功能来自于后端，来自于数据库优化。或者一些亮点比较突出的AI功能产品，这些产品的核心竞争力甚至可能来自于硬件和算法。前端所扮演的角色，多是UI展示，数据可视化等。而且很多工作都是重复性劳动，有些甚至可能是后端开发人员兼职做的。

所以对于一个业务的重要性来说，前端体现价值的机会非常有限。

当然，我在这里说了这么多，并不是想传达前端已经不行了，你们要赶紧转行的意思，当然我们还要吃饭，这里想说的是，要时刻保持危机感，只有这种危机感，才能驱使我们不断钻研、不断进步，不断发展、不断前行。

先进的前端技术

在成为一名架构师之前，你需要有充足的技术储备，可能不仅仅局限于前端技术，当然这里我还是先介绍一下如何进阶一些前端技术。

性能优化

曾经在大公司工作过的同事应该都知道，性能优化是一个敲门砖，因为如果要衡量一个前端开发人员是否真正有经验，性能优化是一个分水岭。其相关流程主要涵盖：

从这些问题中可以衍生出各种值得深入研究的问题，从中也可以发现一些方法论的问题，所以性能优化是很重要的一点。当然这里就不讲具体的优化了，建议看《移动Web性能优化从入门到进阶》这篇文章。

理解框架

如果你想成为一名架构师，你不能仅仅停留在使用框架的API的层面。

对于目前最流行的三个前端框架Vue、和，掌握它们的基本使用是必须的，但也是最简单的。网上有各种课程，可以让刚毕业的实习生轻松入门，达到做项目的能力。那么，一个实习生就能做的需求，我为什么要选择你们呢？

所以，掌握框架的原理，理解其中的思想，并且能够举一反三，是和大多数前端程序员区分开来的关键。这里我会用 Vue 举几个例子，看看你是否真的掌握了它。

不妨尝试了解这些问题的根本，并尝试从源码中寻找答案。了解源码的同时，有助于理解框架本身，提高解决问题的能力，降低出现 Bug 的概率。

深入研究 Node.js

Node.js 是一个让前端工程师接触后端逻辑的强大工具，也给了我们抢后端工作的正当理由，但这里的 Node.js 并不单指后端逻辑的开发。比如现在的前端工程体系中，扮演重要角色的 vue-cli 等，又或者开发 PC 桌面程序的能力，都离不开 Node.js。下面举几个例子，大家可以从这几点尝试进阶：

和

它是基于 的图形规范，是一套 API，简单来说可以看成是 3D 版。当然，有些人可能觉得说这个方向有点偏颇，确实，对于大部分前端开发者来说，使用相关的 3D 处理技术和算法并不需要掌握复杂的算法或者数学知识，只需要学习 .js 就可以了。

但它可以为我们提供一些具体问题的解决方案。以下是几个例子：

上面的场景就像当你拿到这些需求的时候，如果你不了解或者没有概念，你可能根本就想不到这些技术方案去解决这些问题。所以，并不是你了解的有多透彻，而是作为架构师，你需要有一定的技术广度去拓宽你的技术栈，这会提高你解决问题的能力。

成为建筑师的道路

到这里，好像我们才刚刚进入正题。基础的进阶知识是你晋升高级前端的必要条件，但并不是你成为架构师的核心。俗话说，一专多能，先精通一专。前端知识的进阶才是架构师的突破口，所以你需要先明白一点：在掌握前端技术的同时，还需要学习前端技术之外的技能。只有跳出前端思维，才能看得更远。所以如果你想从高级前端人员进阶为架构师，那就看看下面的内容吧。

跨境

如果你只会写前端页面，无论你技术多么精通，也只能被称为 HTML 专家。真正的架构师需要具备跨界能力。随着技术不断进步，通过跳槽来升级技术架构的情况会越来越少见。架构层面的新变化会来自于自发的对工作内容和职责的重新定义，也就是这里说的边界。所以并不是说作为前端开发人员，你就不能做前端以外的事情了。你应该尝试超越边界去思考和解决问题。

页面打开时间是衡量前端优化的一个重要指标，我们会针对这个优化点总结出以下几个方面：

用户交互体验也是衡量前端优化的一个重要指标，我们来总结一下从哪些方面进行优化：

合理的跨界工作可以让架构师对业务整体有深入的理解，并针对各类问题提出非前端的解决方案。

尝试一下

技术是不断发展的，作为架构师，不断学习新技术非常重要。我这里说的尝试新事物，是指对技术保持一定的热情，不满足于现状。说白了就是要不断学习。

以上列出的新技能都可以从前端的角度去触发，并且可以不断深化。对每一项新技术保持求知欲对于架构师来说是必不可少的。

工具与平台建设

只会写代码的程序员只能被称为码农。

当技术到了一定程度，对业务的改善能力就会逐渐下降。所以我们不妨跳出技术本身，围绕业务去完善工具平台，去服务业务。作为架构师，一定要有这个能力。

说到工具平台，大家很快就能联想到自己团队的一些工具，这里我想跟大家讨论一下我们的工具体系应该如何规划和发展，以及可以进一步改进的地方。

为了使其更受欢迎，以下是一些工具平台的示例：

可以看出工具平台主要是围绕我们研发过程中的各个关键节点来构建的。综合起来我们可以称之为工程化。工程化是近几年非常流行的一个概念，也是前端非常明确的发展方向。其实工具平台完善的过程就是推进架构工程化的过程。

作为架构师，你需要有敏锐的嗅觉，了解这些节点。并在合适的时机打造一个改善业务的工具平台。当遇到重复性问题时，思考是否要开发一个自动化的工具平台来处理。这才是超越代码改善业务的解决方案。

流程和标准化

作为架构师，制定流程并规范化非常重要。不要小看规范的力量，它可以极大地提高开发效率。真正优秀的规范不会让用户感到束缚，反而可以帮助用户快速定位问题，提高效率。这里的规范可以总结为：

方法

所谓方法论可能比较抽象，这里的方法论主要是指在完成一个小需求或者承担一个大项目的具体实施过程中需要的方法和技巧。相信大家都看过《穹顶之下》这个视频，就是方法论的强烈体现。其实说白了就是做事情要有套路，这里举一个性能优化的例子。

在进行性能优化的时候，如何证明优化是有效的呢？我们可以使用“三明治规则”（这是我们自己起的名字）：

到此，我们有了优化前的数据，优化原理，优化后的数据，通过对比数据，我们很容易就能证明我们的优化是有效的，并且做出漂亮的总结，作为架构师，这是一个很好的树立威信的场景。

我们可以在此基础上拓展，再次迭代上述三个步骤。也就是说，我们在第一次优化时达到了效果，但经过进一步的调研后，可以再次进行优化。每一次优化都有数据支撑。这就是性能优化的方法论。

安全意识

这里为什么要单独讲安全呢？因为对于一个业务来说，安全是第一要素，就如同一个国家，安全稳定是一切发展的前提。一旦业务出现安全问题，可能瞬间血本无归，代价非常惨重。所以作为架构师，一定要保证业务的稳定性。可以总结出以下几点：

团队合作

没有完美的个人，但有完美的团队。

即使他是架构师，我相信他也不总是孤军奋战。一个优秀的产品事业总是诞生于团队，因此时刻与团队成员保持联系至关重要。这样的沟通不仅限于日常的短信或会议，甚至私人的团建活动也能帮助彼此了解。

所以团队合作的目的是让团队中每个人都清楚自己的责任，发挥自己的价值最大化。架构师有义务去维持这种合作。而对你的认可也是团队成员给你的。只有保持良好的氛围，团队成员才能信服。

最后我们来总结一下关于前端架构师的一些认识误区：

最后祝愿各位前端同仁们能够披荆斩棘，在架构师的道路上一路顺风！

分享前端好文，点亮 在看