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

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

实（shí）现效果图是最基（jī）本的工作

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

与设计师的沟通和项（xiàng）目的参与

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

良好的页面结构

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

关于 hack

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

优美的代码

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

无（wú）障碍页面开发

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

保（bǎo）障效率

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

针对服务器的优（yōu）化

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

拥抱 HTML5

这是一个充满机会的时（shí）代，HTML5时（shí）代的来临伴随着移动（dòng）互联网的（de）兴起创造了更大的机会（huì），还有太多的东西值得我们去学（xué）习（xí）去发现。 HTML5 提供了丰富的 JS API 接口（kǒu），需要我们去研究（jiū）；CSS3的绚丽吸引了（le）足够多的眼球（qiú），需要我（wǒ）们去研究；移动设备上如何开发更加适配的页面，需要我们（men）去研究……

Stay Hungry， Stay Foolish

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