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

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

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

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

与设计师的（de）沟通和（hé）项目的参与

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

良好的页面结构

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

关于 hack

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

优美的代（dài）码

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

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

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

保障效率

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

针对服务（wù）器的优化（huà）

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

拥抱 HTML5

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

Stay Hungry， Stay Foolish

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