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

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

实现效果图是最基（jī）本的工（gōng）作

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

与设计师的沟通和项目的参与

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

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

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

关于 hack

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

优美的代码

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

无（wú）障碍页面开发（fā）

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

保障（zhàng）效率

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

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

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

拥（yōng）抱 HTML5

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

Stay Hungry， Stay Foolish

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