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

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

实现效果图是最（zuì）基（jī）本的工作

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

与（yǔ）设计师的（de）沟（gōu）通和项目的参与

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

良好的页面结构

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

关（guān）于 hack

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

优美的代码

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

无障碍页（yè）面开发（fā）

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

保障效（xiào）率

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

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

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

拥抱 HTML5

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

Stay Hungry， Stay Foolish

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