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

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

实现效果图（tú）是最基本（běn）的工（gōng）作

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

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

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

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

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

关于（yú） hack

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

优美的代码

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

无障碍页面（miàn）开发

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

保障效率

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

针对服务器（qì）的（de）优化

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

拥抱 HTML5

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

Stay Hungry， Stay Foolish

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