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

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

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

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

与设（shè）计师（shī）的沟通和项目的参与

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

良好（hǎo）的（de）页面结（jié）构

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

关于 hack

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

优美的代码

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

无障碍页面开（kāi）发（fā）

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

保障效率

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

针对（duì）服务器的优化（huà）

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

拥抱 HTML5

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

Stay Hungry， Stay Foolish

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