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

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

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

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

与（yǔ）设计师的沟通（tōng）和项目的参与

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

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

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

关（guān）于 hack

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

优美的代码

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

无障（zhàng）碍页面开发

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

保障效率

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

针对服务器的优（yōu）化

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

拥抱 HTML5

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

Stay Hungry， Stay Foolish

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