前端工程师的价值在哪？

前端⼯程师的价值在哪？
前⾔
会写出这篇是因为我⼀个朋友在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 以后，坏的跟好的⽹站差在：
1. ⼀个坏的⽹站可能会在不同装置上跑版，好的⽹站不会
2. ⼀个坏的⽹站载⼊时间可能是10 秒，好的⽹站只要1 秒
3. ⼀个坏的⽹站开场动画很lag，好的⽹站超级顺
当然，如果你再仔细⼀点列还可以列出更多，我这边先简单列出三点，但是就可以看到⼀些端倪了。

前端是设计稿跟「现实」的桥梁
⼀个⽹站的画⾯「应该长得怎样」，是设计师的事。

可是⽹站「实际长得怎样」，就是前端⼯程师的事情了。

因为这就是前端⼯程师的⼯作内容嘛，负责把画⾯显⽰出来。

所以前端⼯程师的价值之⼀在于：「你对于设计稿的还原度有多⾼」，你该怎么利⽤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去检视效能以及如何优化。

⽹页载⼊速度怎么会那么慢呢？这边先假设「载⼊速度」指的是「下载速度」好了，慢的原因有两个：
1. Request 下载数量太多
2. Request 回覆时间太久
也就是下载速度快慢跟下载数量的问题，针对下载速度，有价值的⼯程师可以提出很多建议，例如说利⽤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，不需要特别优化⽹页，也不⽤考虑在各个载具上的情况，只要在⾃⼰电脑跟同事电脑上⾯可以看就差不多了，所以⾃然会很疑惑前端的价值到底在哪。

就如同我前⾯提过的，对于不同⼈、不同场合可能会有不同的价值。

⽽这篇⽂章在讨论的是「专业分⼯底下的前端⼯程师」的价值。