前言

会写出这篇是因为我一个朋友在Front-End Developers Taiwan里面问了这个问题，完整原文如下：

诚心请问：前端工程师的价值在哪？
我是很想走前端、视觉、美感的人。但是一边在路上，一边却不自主的质疑着这些东西的价值在哪？

比方说前端就是一些画面、表单，boostrap套一下或是用Material UI套一下，就变成RWD。不够的东西再自己用css手刻一下。
但大都时候不就是个画面吗？就算很丑好像也没什么人在意。”功能有出来、资料是对的就好了。”

目前我想到的是像D3.js 这种视觉呈现，是后端做不出来的东西。除了这个还有其他价值吗？

这是我想到的价值：

(1)做画面、用RWD，让各个装置都能有对应画面
(2)如果载入时间太久，前端有责任透过微调，让它的载入时间变短。
(3)像D3.js那一类的视觉呈现。

其实这个问题真的很有趣，因为从这个问题就可以看出大家对前端工程师的定义似乎都不太一样，而这种根本性的差异也会导致答案不一样。

以我说浅不浅说深不深的前端经验来看，我认为前端工程师的价值可以区分为两种，一种是核心价值、另外一种是附加价值。

附加价值

先从附加价值开始谈起，这部分的价值属于「跟其他职位的人沟通的专业度」。

首先，设计绝对不是前端工程师的核心价值，那是设计师的。使用者体验也不是前端工程师的核心价值，那是使用者体验设计师的。

可是前端工程师如果有设计的sense 或是有UX 的sense，那当然是很不错的一件事情，跟这两个职位的人沟通起来也会比较流畅。

因此，我把这种价值称为「附加价值」，而不是「核心价值」。

可能有人会问说：「可是有些公司的前端工程师还包设计包UX 欸」，没错，但那是因为公司期望用一到两个人的薪水聘到可以做三个人事情的强者，可是这种意义之下的前端工程师不在我这篇文章的讨论范畴内。

这篇文章的前端工程师指的是「专门做前端」的工程师，意思就是不会要你去画设计稿，也不会要你去弄一些有的没的。

或者说得更清楚一点，就是在专业分工之下会有的前端工程师。在这种状况下，设计稿会由设计师来负责，UX 也会有专门的人来负责，产品规格会有PM 来负责，后端会有后端工程师来负责。

这就是我说的前端只专门做前端，其他领域他可以给建议、可以一起参与讨论，但通常不太会有决定权。

核心价值之一：工程师的价值

在前端工程师的核心价值里面，也会包含两种价值，因为前端工程师这个职位本来就是：前端+工程师两个名词组合起来的。所以有一部分是工程师的价值，另一个部分是前端的价值。

我们先来谈谈第一个部分：工程师的价值。要知道哪些是工程师的价值，而哪些又是前端的价值，只要把同样的命题套用到「后端工程师」或是其他职位的工程师上面，看适不适用就对了。

例如说：「要选择哪一套Framework」这个问题，无论是前端工程师还是后端工程师都会碰到，所以显然是工程师的价值。

但如果是：「要针对哪些浏览器做优化」，这个就显然只跟前端有关（因为后端也碰不到浏览器），所以会归类到前端的价值。

核心价值之二：前端的价值

把附加价值跟工程师的价值谈完以后，终于可以来谈谈只专属于前端的价值了。

要知道前端工程师的价值在哪，可以用一个很简单的问题来做区分：

一个好的网站跟一个坏的网站差在哪里？

如果我们可以列的出差别，就知道前端工程师的价值体现在哪里了。

但请注意这个差别并不是画面美观的差别，画面美观与否是设计师的事情，在这边要先假设两个网页都是按照设计师的要求一模模一样样刻出来的。

而这也不会是网站好不好用的问题，「这按钮太小按不到」、「这结帐流程太冗长」，这些都是UX 的事情，在这边先假设公司有一个UX desinger 专门在做这些。

排除掉UI 跟UX 以后，坏的跟好的网站差在：

当然，如果你再仔细一点列还可以列出更多，我这边先简单列出三点，但是就可以看到一些端倪了。

前端是设计稿跟「现实」的桥梁

一个网站的画面「应该长得怎样」，是设计师的事。可是网站「实际长得怎样」，就是前端工程师的事情了。因为这就是前端工程师的工作内容嘛，负责把画面显示出来。

所以前端工程师的价值之一在于：「你对于设计稿的还原度有多高」，你该怎么利用html、CSS与JavaScript，把原本只是一张张图片的设计稿，转成在浏览器上面可以看到的介面？

除此之外，既然你是负责画面显示，就代表所有的载具你都应该要顾虑到，像是平板电脑、手机等等，必须保证在各个装置上看到的网页都跟设计师的设计稿长得一模一样。

这难不难？靠北超级难啊！光是单位的选择你可能就要思考很久了，px、pt、em、rem、vw、vh、vmin，要用哪一种才能保证在各个装置上看到的大小是差不多的？

还要考虑的是浏览器兼容性，有可能一个网页在Chrome 上看起来水当当，在IE 上变成美丁美当，整个惨不忍睹。所以厉害的前端工程师知道各个浏览器之间的差异性，会尽可能确保在每一个浏览器上面看到的都是一样的画面。

这难不难？这也靠北难啊，每一个浏览器的实作都不同，有些很好用的CSS 属性在某些浏览器上面就是没有，你能怎么办？

而且不要忘了，在这个hybrid app 横行的年代，你要支援的载具多了iOS 跟Android 的Webview，又是两个麻烦的东西。

这其实就像是专业的设计师在设计Logo 的时候，需要考虑到Logo 在各个地方的呈现，不只是网页、文书，也有可能出现在衣服、杯子等等的东西上面，必须要一并考虑进去，设计出各个场景都能够使用的Logo。

前端既然是设计跟现实的桥梁，就代表也必须跟设计师沟通，在理想跟现实之间取得平衡。例如说设计师今天想要做一个超级酷炫的开场动画，你也觉得这个超屌的啦做出来一定很猛，可是设计师跟你说他要用Flash。

◢▆▅▄▃-崩╰(〒皿〒)╯溃-▃▄▅▆◣

大家都知道Flash 已经是一个快死掉的东西了，浏览器慢慢在抛弃它，放上去之后说不定只有两成的人看得到你屌炸天的开场动画。那怎么办呢？一个专业的前端工程师会建议设计师可以用HTML5 来做动画，至少支援度会比Flash 要来得高。

或者说如果动画没有很复杂，专业的前端也要有能力用JavaScript 或者是CSS Animation 做出来。

可是做出来是一回事，效能又是一回事，说不定CSS 刻出来的动画只有惨不忍睹的20 fps，那怎么办？当然就是前端工程师要去调整，要去知道为什么这边会消耗那么大的资源，要知道该怎么样去优化。

例如说要用transition的话就要知道同样是让元素左移50px，transform: translateX(-50x)比left: 0px快得多，或是backface-visibility: hidden跟transform: translate3d也都对增进效能可能有帮助。也要知道有will-change这个属性可以用。

那如果最后还是不行怎么办？就要站在专业的立场跟设计师说：「虽然我也很喜欢这动画，但这个目前在网页上真的不可能实现」之类的话。

好，讲了这么多，要表达的重点就是前端工程师的价值在于：「确保网站最大化的还原设计稿，并且在各个载具上的观看体验一致」。

效能优化

上面有提到说：一个坏的网站载入时间可能是10 秒，好的网站只要1 秒。

身为一个专业的前端工程师，你必须知道怎么样去调整网页的效能，让它更快render、更快载入。这边推荐给大家一堂Google的课：Website Performance Optimization，修了保证你物超所值，里面介绍到怎么利用Chrome devtool去检视效能以及如何优化。

网页载入速度怎么会那么慢呢？这边先假设「载入速度」指的是「下载速度」好了，慢的原因有两个：

也就是下载速度快慢跟下载数量的问题，针对下载速度，有价值的工程师可以提出很多建议，例如说利用Cache把图片存起来，下一次就可以大幅缩短下载时间，或者是利用CDN储存图片，速度也会变得比较快。或是会跟你说有Resource Hints可以用，也可以多少缩短一些时间。

那针对下载数量的问题，就可以考虑用CSS Sprites 把图片集中在一起，或者是用Base64 直接把图片写在CSS 里面，就可以省一个Request（但也要注意会增加档案大小）。

讲到图片，有价值的前端应该也会知道jpg、png、svg、gif 的异同以及应该用在哪里，甚至是尝试比较新的webp 格式，这些也都是调整网页效能的一部分。

所以在这个部分，前端工程师的价值就在于：「如何使网页载入的速度变快、效能变好」。

这些也是我认为前端最困难但也是最有价值的一部分。因为这方面的优化是永无止尽的，永远都可以想尽办法让你的网站变得再快一点点。而且时间优化了，有时候其他部分（程式码可读性、部署的难易度）却被牺牲了，这也是很值得思考的一个点。

你确定这些有价值？

有些价值是因人而异的，要看对象而定。

对一人当三人用的小公司来说，谁管你网页从2 秒变1 秒，Request 从20 个变15 个，他们只管你能不能在最短的时间内自己画设计稿、自己切版、自己把整个网站做完，让他们好跟客户交代。

在这种公司里做前端，你的价值当然又会变得不一样，价值取决于你能够多快的把案子完成。但是我上面也说了，这种类型的前端工程师不是本文章所讨论的范围。

效能优化有价值吗？当然有价值，尤其是你把规模放大的时候。

例如说我小时候年轻不懂事，js 跟css 都不压缩直接放上去，我们假设压缩之后总共少了10kb 好了，如果你的网页一天有1 万个不重复浏览，就代表你一天节省的流量大约是100 MB，一个月就大概节省了3 GB！

听起来满多的吧！那如果像是脸书这种大公司，我们就假设一天有一千万个不重复访客好了，就算只有压缩1 kb，整体流量也少了10GB。当你把规模放大的时候，很多细节都会变得重要起来。

「魔鬼就藏在细节里」，这句话是我最喜欢的至理名言之一，你去观察很多专业跟业余的差别，就会发现一样都可以把事情完成，但价值却体现在这些细节里。

业余的前端可以完成一个网页，载入速度普通、乍看之下不跑版，一切都看似平常，可是专业的却能把载入速度加快一倍，并且保证在各个装置上面观看都有最佳的体验。

总结

来总结一下，我认为前端工程师「独有」的价值如下：

1.确保网站最大化的还原设计稿，并且在各个载具上的观看体验一致
2.如何使网页载入的速度变快、效能变好

至于那些什么画面美不美观、使用者体验好不好，我都觉得不是前端工程师真正的价值所在（所以我把它归类在附加价值，但确实也是价值的一种）。在一个专业分工的地方，那些都会有其他人帮你做掉，前端只要专注在上面这两点就好。

最后拉回开头的原po 的问题，我认为这跟所处的环境有关。在他那边的环境，前端只需要套套bootstrap，不需要特别优化网页，也不用考虑在各个载具上的情况，只要在自己电脑跟同事电脑上面可以看就差不多了，所以自然会很疑惑前端的价值到底在哪。

就如同我前面提过的，对于不同人、不同场合可能会有不同的价值。而这篇文章在讨论的是「专业分工底下的前端工程师」的价值。

原文发表于Logdown