但凡从事互联网的人基本都会（huì）写几行 html，用过 Word 的人用 Dreamweaver 也能做出规整的页面，所以大部分人会很自然地认为“页面（miàn）的开发没什么技术含量，很简单（dān）”。不仅有这种（zhǒng）普遍（biàn）的认知，对从业者来说也有很多疑惑：做（zuò）页（yè）面前端实现，没问题（tí）；兼容性，小 case；图片集成，一直都在用……还能有什么（me）问（wèn）题？瓶（píng）颈啊、天花（huā）板（bǎn）啊、转型啊、出路啊就在从（cóng）业者中广（guǎng）泛讨论。是不（bú）是（shì）真的没什么问题（tí）了呢？网易邮箱前（qián）端技术中心也设（shè）立好几年了，似乎（hū）有着讨论不（bú）完的话题，也经常会有一（yī）些新的想法让（ràng）大家（jiā）为之一振。那么页（yè）面开（kāi）发还有哪些要（yào）求，还要做些什么，这里面的水有多深，让我（wǒ）们舀舀（yǎo）看。

在不同（tóng）的时期对页（yè）面前端（duān）的看法似乎是多变（biàn）的。在（zài）互联网早期的（de）时（shí）候，小车还是比房子贵的，烧饼和粉（fěn）丝还只是用来吃的，菊花（huā）还只是用来泡茶的（de）。那时的页面设计风格相对单一，对应的页（yè）面需求比较简单，并且当时的浏览器（qì）也基本（běn）是 IE6 的天下，javascript 也只（zhī）是网页特效的代（dài）名词（cí），HTML 页面本身没有引起太多人的关注，似（sì）乎只要能用 div 甚至 table 加 css 辅助把图片定（dìng）好位，把页面内容（róng）预留好就（jiù） OK 了，并（bìng）且这种（zhǒng）观念存（cún）在了很长（zhǎng）一（yī）段（duàn）时间。随着页面内（nèi）容的丰（fēng）富，设计风格的发展，交互复（fù）杂性（xìng）的增加（jiā），AJAX 的应用，浏览器（qì）的更新换代，又让（ràng）大（dà）家重新对最基本的页面本身重视起来。然后热议（yì）的（de）就（jiù）是（shì）浏览器的兼容性，碰到问题（tí）最热衷的就是满网络搜索 hack，顺便（biàn）再骂骂 IE6、7……当这些都做一遍后（hòu），似乎又遇到了瓶颈，又开始寻找（zhǎo）出（chū）路。我们就（jiù）从这个（gè）阶段开始说起。

实现效（xiào）果图（tú）是（shì）最基本的工作

把视觉稿（gǎo）通过页面代码的方式表现（xiàn）出来（lái）包含（hán）了两个基（jī）本诉求：1.能够真实反（fǎn）映视觉稿；2.能够通过（guò）浏（liú）览（lǎn）器的兼（jiān）容。这两个诉求（qiú）的（de）达成需要我们有追（zhuī）求细节的态度（dù）和一定的页面功底，能完（wán）成这两个内容就可以初步进入（rù）页面前端（duān）的从业者行列（liè）了，但这就代表着我们可以胜任（rèn）页面开发的工作了？不，才刚刚（gāng）开（kāi）始（shǐ）！

与设计师（shī）的沟通（tōng）和项目的参与

沟通（tōng）很重要（yào）。先抛出（chū）几个（gè）问题：我们有没（méi）有（yǒu）和设计师探讨过某些效果对低端（duān）浏览器（qì）渲染效（xiào）率影响（xiǎng）比（bǐ）较大？有没有探（tàn）讨过部（bù）分（fèn）效果（guǒ）可以用（yòng） CSS3 实现从而使得结构（gòu）更加简洁清晰？有没有（yǒu）在代（dài）码和视觉（jiào）中寻追求过平衡？页（yè）面前端的开发向基本用户，编写的代码也直接（jiē）作用（yòng）在浏（liú）览器上，我们有义务对页面的稳定性和渲染（rǎn）效（xiào）率（lǜ）负责。我（wǒ）们（men）也经常碰到项目在总体进度压力下导致的设计与页面（miàn）前端开发同步进行，这时更（gèng）有（yǒu）必要尽（jìn）量（liàng）多（duō）地获（huò）取项目（mù）信息，了解我们还要（yào）做些什么，这些可（kě）以帮（bāng）助（zhù）我们（men）充分考虑重用（yòng）和框架拓展。

良好的页面结构

页（yè）面结构的编写好比（bǐ）盖房（fáng）的（de）地基（jī）建设，其好坏（huài）会直接影响到 CSS 代（dài）码（mǎ）的质量、js 开发、后台开发（fā）还会（huì）影响（xiǎng）到以后的页面拓（tuò）展、迭（dié）代和页面调整。拿到视觉稿后（hòu），不要忙（máng）着动手开（kāi）始，多观察思考。先分析布局（jú），划（huá）分框架，然后规划结构，编写代码。特别在大型项目中（zhōng），合理使用模块化的（de）开发不论从（cóng）整体（tǐ）进行（háng）还是（shì）拓展维护都（dōu）有（yǒu）相当大的好处。

关于 hack

很多同学（xué）在页面开发时（shí）上网搜索（suǒ）最多的就是 hack 了，是否（fǒu）我（wǒ）们完（wán）全要（yào）依赖 hack 来实现页面（miàn）兼容性，答案是否定的。大（dà）家（jiā）经常比喻 IE6 向我（wǒ）们撒了（le）一个谎，结果（guǒ）我们要再撒一百个谎来圆这（zhè）个谎。不（bú）否（fǒu）认 IE6 经常让我们（men）口吐（tǔ）鲜（xiān）血（xuè），但不代表我（wǒ）们用更多的“谎言”来（lái）弥（mí）补就可以心安理得。大部（bù）分情况下（xià）可以通过变换思（sī）路调整 HTML 结构，或使用一些虽（suī）然（rán）无（wú）法（fǎ）解释但相（xiàng）对安全的（de） css 来（lái）干掉 hack。谁都无（wú）法（fǎ）预计使用 hack 什么时候会让我们栽一个大跟头。比（bǐ）如（rú）触发 layout 或 position:relative 就可（kě）以帮（bāng）助解决很多（duō） IE6 的问题（tí）。

优美的（de）代码

现在很多 web 项（xiàng）目（mù）功（gōng）能（néng）复（fù）杂（zá），代码规模（mó）也（yě）会变得很（hěn）庞大（dà），如何更好地进行协同开发和维护是（shì）我们（men）面临（lín）的一个问题（tí）。需要考虑完善统一的规（guī）划（huá），还有要养成良好的代码开发习惯（guàn）才会在面临各（gè）种情况时游刃有余。翻阅页面代码，看（kàn）到合理的标签使用、良好的注释、清晰（xī）的代（dài）码结构、用意准确的 css 不仅犹如欣赏一个（gè）艺术品（pǐn），更为下游开发（fā）和协同开发降（jiàng）低了不小的沟（gōu）通成本，我们有什么理（lǐ）由（yóu）不去（qù）这么做呢？举个反（fǎn）面例（lì）子（zǐ）：div 滥用是（shì）现在比（bǐ）较典（diǎn）型（xíng）的一个问题。数数看自己使（shǐ）用的标（biāo）签（qiān）有多少个呢？不（bú）同的语义都该使用对应的标签代码，特（tè）别是 HTML5 提供了更丰富的（de）语义化标（biāo）签，它们都苦苦地（dì）在等待战场（chǎng）上的冲锋号，让我（wǒ）们去解放（fàng）它们吧（ba）！

无障碍页（yè）面开发

可访（fǎng）问性与易（yì）用性是非常主观（guān）且人性（xìng）化的（de）东（dōng）西（xī）。普通人看（kàn）上去（qù）上完美呈现的页面在特殊（shū）群体中不一定显（xiǎn）得那么贴心。当盲人用读屏（píng）软（ruǎn）件（jiàn）在页面某个区（qū）域（yù）内陷入循环时，我们应该感到内疚。只（zhī）能说（shuō）目（mù）前国（guó）内的网站对此的重视（shì）程度还远远不够，这就需要我们共同努力，让（ràng）更多的人感受到我们的热情。

保障效率

作为项目开（kāi）发中比较靠前的一环，页面开发（fā）可能需要尽早完成为项（xiàng）目争取时间，这就需要我们（men）尽可（kě）能地提高效率（lǜ）。“工（gōng）欲（yù）善其事，必先利其器”，除了实战经验和代（dài）码习惯的形成（chéng）可以帮助我们提（tí）高效（xiào）率外，想要提高（gāo）对自己（jǐ）开发的进（jìn）度掌（zhǎng）控能（néng）力，还有很多辅助工具可以帮助我们进行（háng）页面开发（fā）。比如使（shǐ）用（yòng） Less 或 Sass 可以帮助我（wǒ）们拓（tuò）展和（hé）组织（zhī） CSS，大大提（tí）高 CSS 的（de）编写效率增（zēng）加了可维护性。比如可以通过 zen coding 的自动自（zì）动完成和自（zì）定义代码块让（ràng）你可以剑指如飞。甚（shèn）至还见过通过（guò）自（zì）定（dìng）义（yì）输入（rù）法的代码块关（guān）键字来提升（shēng）开发速度（dù）的（de）。多多（duō）发掘一定会找到最合（hé）适自己使用的工具。

针对服务器的优化

页面开（kāi）发也需（xū）要（yào）了解（jiě）服务器的优化（huà），尽量减小服务器负（fù）担。比如 css sprite 就是一（yī）个典型减小服务（wù）器请求数的例子。在网易邮箱的（de）页面前端开发中（zhōng）大家（jiā）不停地在（zài）做着各种优化（huà），比（bǐ）如（rú）一直（zhí）在寻求文件大小（xiǎo）与服务器请求数的平衡；为了尽可能提高缓存（cún）利（lì）用率（lǜ）采用（yòng）了补丁升级；对 class 名进行了混淆压（yā）缩避免（miǎn）命名（míng）过长的冗（rǒng）余；应用 base64 减少请（qǐng）求数量（liàng）等等措施（shī）。这些都是综合（hé）权衡的结果，需（xū）要考虑各个方面（miàn）整体（tǐ）优化。因为当页面访（fǎng）问量（liàng）达到（dào）一定的（de）数量级（jí）时，再（zài）小的一点优化（huà）都会达到可（kě）观的效（xiào）果，再（zài）小（xiǎo）的问题都可能会（huì）形成（chéng）巨大的灾难。

拥（yōng）抱 HTML5

这（zhè）是（shì）一（yī）个充（chōng）满机会的时代，HTML5时代的（de）来临（lín）伴随着（zhe）移动互联网的兴（xìng）起（qǐ）创造了更（gèng）大的机会，还（hái）有太多（duō）的（de）东西值得我们去学习去发现。 HTML5 提供了丰富的 JS API 接口，需要我们去研究；CSS3的绚（xuàn）丽吸引了足够多的（de）眼（yǎn）球（qiú），需要我们去研究；移动（dòng）设备上如何开发更加适配的（de）页面，需要我们去研究……

Stay Hungry， Stay Foolish

水是越舀越多了，却（què）发现原来（lái）下面还（hái）深不见底，上面的内容越是（shì）深入研究（jiū）就越会发现更多山川需要翻越。保持饥饿状态，用眼睛去努力发（fā）现发（fā）掘，不断丰富技能才能（néng）找到定（dìng）位（wèi），突破瓶颈，正所谓（wèi）“唯有高屋建瓴方可水到渠（qú）成”。形成本文是因（yīn）为之前（qián）和同行（háng）讨论到瓶颈的问题，想给自己，给页（yè）面前端（duān）的同学一起（qǐ）找找定位，梳理一下思路。拿苹果 CEO 在斯（sī）坦福演讲的一句话（huà）“Stay Hungry， Stay Foolish”和大家共勉。