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

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

实现效果图（tú）是（shì）最基本（běn）的工作（zuò）

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

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

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

良（liáng）好（hǎo）的页面结（jié）构

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

关（guān）于 hack

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

优美的代码（mǎ）

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

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

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

保障效率

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

针（zhēn）对服（fú）务器的优化

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

拥抱 HTML5

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

Stay Hungry， Stay Foolish

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