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

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

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

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

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

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

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

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

关于 hack

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

优美（měi）的代码

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

无（wú）障碍页面开发

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

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

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

针对服务器的优化

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

拥抱（bào） HTML5

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

Stay Hungry， Stay Foolish

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