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

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

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

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

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

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

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

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

关于 hack

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

优美的代码

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

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

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

保障（zhàng）效率

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

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

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

拥抱（bào） HTML5

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

Stay Hungry， Stay Foolish

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