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

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

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

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

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

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

良（liáng）好的页面结构

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

关（guān）于 hack

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

优美的代（dài）码

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

无障碍页面开发

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

保（bǎo）障效率（lǜ）

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

针对服务器的优化

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

拥抱 HTML5

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

Stay Hungry， Stay Foolish

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