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

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

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

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

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

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

良好的页面结构

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

关于 hack

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

优美的代码

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

无障碍（ài）页面（miàn）开（kāi）发

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

保（bǎo）障效（xiào）率

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

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

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

拥抱（bào） HTML5

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

Stay Hungry， Stay Foolish

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