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

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

实现效果图是（shì）最基本的工作（zuò）

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

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

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

良好的页面（miàn）结构

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

关（guān）于 hack

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

优美的代码

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

无障碍页（yè）面开发

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

保障效率

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

针（zhēn）对服务器（qì）的优化

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

拥（yōng）抱 HTML5

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

Stay Hungry， Stay Foolish

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