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

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

实现效果（guǒ）图是最基本的工作

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

与设计师的沟通和项目的参（cān）与

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

良好（hǎo）的页（yè）面结构

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

关于（yú） hack

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

优美的（de）代码（mǎ）

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

无障碍页面开发

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

保障效率

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

针对服务器的优化

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

拥（yōng）抱（bào） HTML5

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

Stay Hungry， Stay Foolish

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