一位优秀的“网站前端工程师”带来的价值

不知不觉在北京已经从事 WEB 互联网前端开发工作已经三年有余，同时也发现很多公司甚至是多数以互联网站为主要业务的公司都没有“网站前端工程师”这个职位。通常这些公司更多是由设计美工加若干程序员就完全负责了网站的开发，需求通常由老板或投资者甚至是公司各个部门的经理们如：销售经理 客服经理 等等提出，然后由设计美工负责设计给老板看过没问题后自己排成页面然后交给程序员添加数据和 JS 代码。当然我其实可以理解对于这些公司来说即使没有 前端工程师 一样可以按照自己的意思把网站做出来，况且这个职位往往成本要高的多，但当我仔细列出这笔帐之后可能会让你的看法有所改观……

什么是前端工程师：

互联网前端工程师或 WEB 前端开发工程师，虽然是从网页制作演变而来但名称上有很明显的时代或版本特征，网页制作可能是 Web 1.0 时代的产物那时网站多为静态的 HTML 页面用户使用网站的行为也以浏览为主 2005 年以后互联网进入 Web 2.0 时代各种拥有类似桌面应用的 Web App 大量出现如 Gmail GoogleReader 等等网站的前端与交互由此发生了翻天覆地的变化，网页不再只是呈现单一的文字和图片，各种富媒体让网页的内容更加生动而软件化的交互形式为用户提供了更好的使用体验，这些都是基于多种前端技术紧密协作实现的。

前端开发工程师，简单的说就是将设计师的图稿变成在浏览器里真真正正呈现的 HTML 页面供用户点击操作交互，这个工作可以简单到用 Photoshop Fireworks 点几下鼠标直接导出页面；也可以复杂到考虑每个标签的语义，整体的性能，浏览器的兼容，用户的交互，搜索引擎的优化等等等等；技能的基本要求是熟练使用图形图像处理工具，精通 HTML CSS JavaScript 前端语言，最好了解一种服务器端语言如 PHP 等等；这就是为什麽我题目写的是一位 优秀的网站前端工程师 带来的价值，但寻找一位优秀的网站前端工程师相当困难，因为前端的几种技术都是入门易深入难的，多数人很容易上手但精通很困难再加上公司的不重视等等原因导致前端工程师水平差异较大从而普遍待遇较低，进而更多人不愿意去学习需要多种技术相辅的前端开发，因为可以花更少的精力学习一门后端程序然后，就等着恶心循环吧……

一个公司反面教材：

举一个我朋友所在公司的例子，该公司还算有点规模老总的目标是打造一个某某行业的门户网站，负责网站开发的部门有 8 名服务器端开发人员和 3 名网页设计美工，每位设计负责一个栏目的页面设计，然后交给销售经理过目审核（这点最戏剧）后独立完成 HTML 静态页面，最后交给程序开发人员嵌套 JS 和服务器端程序，且先不说没有前端开发工程师一个以互联网产品为主业的公司居然没有一个合格的互联网产品经理而是由销售部经理来提各种需求其直接结果就是：我觉得某某网站的某某功能很好用我们要加一个另外某某网站的动画很漂亮我们也要用……

网站前端工程师这个职位在绝大多数公司甚至是多数以互联网业务的公司里面都没有设置，从设计稿图纸到静态页面的工作通常由设计美工负责，但绝大多数美工都更倾向于设计方向对于 HTML + CSS 通常只能实现而对于语义规范标准化、浏览器兼容、网页性能、搜索引擎优化等等内容并不具备优势更不用说对于交互非常重要的 JavaScript 则通常交给后端程序员，但多数网站后端程序员通常都不会把 JS 当作是一门真正的程序语言来看待，更不用说使用 JS 去控制 DOM 和 CSS 这需要更多前端的控制能力，需要什么效果从网上搜一段直接粘贴到页面里，而这将直接导致各种问题隐患叠加。

前端工程师的价值：

我们知道互联网产品在用户体验上有两个非常重要的基本要求即 交互 和 速度 当然还有设计和其他的要素暂不在本文讨论范围内，然后我就针对这两点简单分析一下优秀前端工程师所带来的价值：

交互：对于互联网产品来说用户首先所接触到的就是前端页面而不是服务器端冷冰冰的程序，任你有再强大的功能如果用户操作使用起来非常复杂肯定留不住用户。最贴切的例子就是拥有全球最多访问量的 Google 谷歌搜索引擎，谷歌在全球有成千上万台服务器集群但前端也仅仅是一个简简单单的文本搜索框，再者就是目前众多类似于桌面应用的 WEB 应用之所以能够营造良好的用户交互体验很大程度上依赖于 JS HTML CSS 三种技术的紧密结合如 AJAX 技术而整个交互过程中我们需要服务器端提供一定格式的数据即可，更多的是依靠优秀的前端工程师多年的经验和对于这三种技术的结合应用，当然这并不是故意去贬低服务器端的重要性谁离开谁肯定都不能成功，正是这种 把复杂留给自己 把简单留给用户 的交互模式为优秀的互联网产品赢得了用户和价值，在国内互联网产品严重同质化的时候任何对于用户体验和交互所做的努力都将使你的产品大大超越对手；

速度：长期以来我的很多客户都存在一种误解即网站要想提速会从这些方面考虑：服务器端代码优化（代码）增加服务器配置（硬件）购买分布式网络（网络）等等；但就我个人目前的经验来说这些做法对于超过 99% 的网站来说收效甚微：就代码和硬件上来说除非是极其复杂的应用型网站否则单程序和数据库对于网站速度的影响并不大因为多数门户网站通常都已经静态化了；至于网速我们目前仍旧困扰在“最后一公里”还有“运营商互通”问题上即使服务器端有 1TB 的带宽对于绝大多数用户也只有 80Kbps 所以作用甚微。但如果是从前端代码优化就可以很容易起到事半功倍的效果，据本文结尾来自 涂雅 的一篇分析报告称，开心网（KaiXin.com）首页可以压缩精简将近 300KB 仅仅一个简单的首页这 300KB 每年可为开心网节省 5-8 万人民币的流量费用想想开心网有多少个这样的页面。与其一些企业把大量的钱花在购买大服务器高带宽和 CDN 分布式网络流量上不如花点小钱请一位优秀的 WEB 前端工程师，因为你的服务器再快带宽再高用户的带宽是不变的，如果超过用户的带宽上线任何努力都是毫无意义的；

其他：当然除了交互和速度以外互联网前端开发工程师还可以为你带来很多附加的价值其中最为吸引的就是 SEO 搜索引擎优化，对于网站用户首先接触的是前端页面搜索引擎也不例外，没有经验的美工会大量使用 DIV 或 TABLE 标签排版导致整个页面内容没有主次轻重之分，你可以模拟搜索引擎爬虫在禁用 CSS 和 JS 之后如果看起来一塌糊涂没有主次那么对搜索引擎来说也是如此，一名优秀的网站前端工程师需要考虑到每一个 HTML 标签的语义合理的使用 Hx 标签 ul ol dl 标签等等让你的页面即使禁用 CSS 也能保持良好的结构，同样是两栏的页面将重要的内容放到页面靠上的位置，准备参与交互的页面元素如何放置可以结构最优化，甚至是浏览器对于 CSS 渲染性能的考虑等等，这些小的细节累加起来将对网站整体起着重要的作用。

我们知道将近 3 亿用户的世界第一大 SNS 社交网站 facebook 所有的设计师被要求编写 HTML CSS 甚至是 PHP 等代码，设计师往往在简化方面做的过头而服务器端工程师往往会在功能上做的过头，我们需要一个角色来实现必须的衔接如同内存之于 CPU 和硬盘，在 facebook 会给与设计师充裕的时间来编写代码 facebook 认为：拥有一个能写代码的设计师能够了解细节并快速执行在 Design at Facebook 一文中作者曾多次提到 facebook 要确保每个设计师具有足够的技术来编写代码，这里提到的设计师其实都是具备优秀的前端开发能力，但这样的设计师寻找起来无异于大海捞针……

如何找到优秀的前端工程师：

大公司可以有具备优秀前端开发能力的顶级设计师可以有专门用于用户体验的 UE UI 部门；而小公司的话考虑到成本可以没有这些，也行会请一些经验并不丰富的美工甚至后端程序员，但请尽可能请一位优秀的前端开发工程师，这样可以为你的网站省下非常高的费用，减少带宽和服务器，甚至是节省数个后端程序员。当然 WEB 互联网前端工程师同时也是最不容易找到合适人选的职位，要想寻找到真正优秀的前端工程师，首先要求负责面试及招聘的主管对前端非常的精通，但目前很多主管都是服务器端技术出身，而后端人员往往会轻视或者忽略前端的工作，文章后面附带了一份前端工程师的面试题目及如何寻找优秀的程序员的文章，考察的非常详细希望能给负责面试的主管一些启发……

推荐阅读：

如何寻找优秀的程序员 from SteveHanov

两个重要而又容易被忽视的角色 from 涂雅

开心网网站分析报告 from 涂雅

一份前端工程师面试题目 from 贺敏

其实一个简单的道理：无论服务端的硬件多么强大速度多么快捷，前端用户的性能是你无法改变的，前端用户的带宽是你无法改变的，前端用户的眼光是你无法改变的，前端就是要善于解决这“最后一公里”的问题……