但凡从事互联网的人基（jī）本都会写几行 html，用过 Word 的人用 Dreamweaver 也能做出（chū）规整的页面，所以大部分人会（huì）很（hěn）自（zì）然地认为“页面的开发没什么（me）技（jì）术含量，很简单”。不仅有这种普遍的认知，对从业（yè）者来说也有很多疑（yí）惑（huò）：做页面前端实现，没问题；兼容性，小 case；图（tú）片（piàn）集成，一直都在用……还（hái）能有什么（me）问题？瓶颈（jǐng）啊（ā）、天（tiān）花板啊、转型啊、出路啊就（jiù）在从业（yè）者中广泛讨论。是不是真的没什么问题了呢（ne）？网易邮箱前端技术（shù）中心也设立好几年（nián）了，似乎有着（zhe）讨论不完的话题，也经常会有一些新的想（xiǎng）法让大家为之一振（zhèn）。那么页面开发还有哪些要（yào）求，还要做些什么，这里面的水有多深，让我们舀舀看。
在不同的时期对（duì）页（yè）面前（qián）端（duān）的（de）看法似乎是多变（biàn）的。在互联网早期的（de）时候，小车还（hái）是比房子贵的，烧（shāo）饼和粉丝（sī）还只是用来吃的，菊花（huā）还（hái）只是用（yòng）来（lái）泡（pào）茶（chá）的。那时的（de）页面设计风格相（xiàng）对单一，对应的页面需求（qiú）比较简单，并且当时的浏览器也（yě）基本是 IE6 的天（tiān）下，javascript 也只是网页特效（xiào）的代名词，HTML 页面本身没有引起太多人的关注，似乎只要能用 div 甚至 table 加（jiā） css 辅助把图片定好位，把页（yè）面内容（róng）预留好就 OK 了，并且这种观念（niàn）存在了（le）很长（zhǎng）一（yī）段时间。随着（zhe）页面内（nèi）容（róng）的丰富，设计（jì）风（fēng）格（gé）的发（fā）展（zhǎn），交互复杂性的增（zēng）加，AJAX 的（de）应（yīng）用，浏览器的更新换代，又让大家重新对最基本（běn）的页面本身重（chóng）视起来。然后热议的就是浏览（lǎn）器的兼容性，碰到问题最热衷的就是满（mǎn）网络搜索 hack，顺便再骂骂 IE6、7……当这（zhè）些都做一遍后，似乎（hū）又遇到了瓶颈，又开始寻找（zhǎo）出路。我们就从这个阶段（duàn）开始（shǐ）说（shuō）起（qǐ）。
实（shí）现（xiàn）效果图是最基（jī）本（běn）的工作
把视觉稿（gǎo）通过页面代（dài）码的方（fāng）式表现出（chū）来包含（hán）了两个基本诉求：1.能（néng）够真实（shí）反映视（shì）觉稿；2.能够通过（guò）浏览器（qì）的兼（jiān）容。这两个诉求的达成需要我们（men）有追求细（xì）节的态（tài）度（dù）和一定的页（yè）面功（gōng）底，能完成这两个内（nèi）容就（jiù）可以（yǐ）初步进入页面前端的从（cóng）业者行列了，但这就代表着我（wǒ）们可以胜任页面开发的工作了？不（bú），才刚刚（gāng）开（kāi）始！
与设计师（shī）的沟通和项（xiàng）目的参与
沟（gōu）通很（hěn）重要。先（xiān）抛出几个问题：我们（men）有没有（yǒu）和设（shè）计师（shī）探讨过某些效果（guǒ）对低端浏览器渲（xuàn）染效率影响比较大？有没有（yǒu）探讨过部分效果可以用 CSS3 实现从（cóng）而使得结构更加简洁清晰？有没有（yǒu）在（zài）代码和视觉中寻追（zhuī）求过平衡（héng）？页面前端的开（kāi）发向基本用户（hù），编写（xiě）的代码也直接（jiē）作用在浏览器上，我们有（yǒu）义务对页面的稳定（dìng）性和渲染效率负责（zé）。我们也经常（cháng）碰到项目在总体进度压（yā）力下导致的设计与页面前端开发同步（bù）进行，这时更（gèng）有必要尽（jìn）量（liàng）多地获取项目信（xìn）息，了（le）解（jiě）我们（men）还（hái）要做些什么，这些可（kě）以帮助我们充分考虑重用和框架拓展。
良好的（de）页面（miàn）结构
页（yè）面结构的编写好比盖房的地基建设，其好坏会直接影（yǐng）响到 CSS 代码的质量、js 开发、后（hòu）台开发还会影响到以后的页面拓展、迭（dié）代和页（yè）面调整（zhěng）。拿到视觉稿后，不要（yào）忙（máng）着动手开始，多观察（chá）思考。先分（fèn）析布（bù）局（jú），划分框架（jià），然（rán）后规划结构，编写代码。特别（bié）在大型项目中，合理（lǐ）使用模块化的开发不论从整体进行还是（shì）拓展维护都有相当大的好处（chù）。
关于 hack
很多同学在页面开发时上网搜索最多的就是 hack 了，是否我们完全要依赖 hack 来实现（xiàn）页（yè）面兼容性，答案是否定的。大家（jiā）经常（cháng）比喻 IE6 向我们（men）撒（sā）了一个谎，结果我们要再撒（sā）一百个（gè）谎来圆这（zhè）个谎。不否认 IE6 经常让我们口（kǒu）吐鲜（xiān）血，但不（bú）代表我们用更多的（de）“谎言”来弥补就可以心（xīn）安理得。大部分（fèn）情况下可以通（tōng）过变换思路（lù）调整 HTML 结构，或使（shǐ）用一些虽然无法解释但相（xiàng）对安全的 css 来（lái）干掉 hack。谁都无法预计使用 hack 什么时候会让我们栽一个大跟头。比如触发 layout 或 position:relative 就可以（yǐ）帮助解决很多 IE6 的（de）问题。
优美的代码（mǎ）
现（xiàn）在很多 web 项目功（gōng）能复（fù）杂，代码规（guī）模（mó）也会变得很庞大，如（rú）何更好地进行协（xié）同（tóng）开发和维护（hù）是（shì）我们面临的一个（gè）问题（tí）。需要考虑完善统一（yī）的规划，还有要（yào）养成良好的代码开发（fā）习惯才会在（zài）面（miàn）临（lín）各种（zhǒng）情况时游刃有余。翻（fān）阅页面代码，看到合理的标签（qiān）使用、良好的注释、清晰的代码结（jié）构、用意（yì）准确的 css 不仅犹如欣赏一（yī）个艺术品（pǐn），更（gèng）为下（xià）游开发和协同开发降低了（le）不（bú）小的沟通成本，我们有什么理由不去这（zhè）么（me）做呢？举个反（fǎn）面（miàn）例子：div 滥用（yòng）是现在比较典型的一个问题（tí）。数数看自己使用的（de）标签有多（duō）少（shǎo）个呢？不同的语义（yì）都该（gāi）使用对应的标签代码（mǎ），特别是 HTML5 提供了更（gèng）丰富的语（yǔ）义（yì）化标（biāo）签，它们都苦苦（kǔ）地在等待战场上的冲锋号，让我们去解放它们（men）吧！
无（wú）障碍页面开发
可（kě）访问性（xìng）与易用性是（shì）非常（cháng）主观（guān）且人性化的东西。普通人看上去上完（wán）美呈现的页面在特殊群体中不一定（dìng）显得那么贴心（xīn）。当盲（máng）人用读屏软件在页面某个区域内（nèi）陷入（rù）循环时，我们应该感到内疚。只能说目（mù）前国内的网站对此的重视程度还远远不够，这就（jiù）需要我们共同（tóng）努力，让更多的人感受（shòu）到我们（men）的（de）热情。
保障效（xiào）率
作为项目开发中比较靠前（qián）的一环，页面开（kāi）发可能需要尽早完成为项目争取时间（jiān），这就需要（yào）我们尽（jìn）可能地提高效率（lǜ）。“工欲善（shàn）其事，必先（xiān）利其器（qì）”，除了实战经（jīng）验和代码习惯的形成（chéng）可以（yǐ）帮助我们提高效（xiào）率外，想要提高对自己开发的进度掌（zhǎng）控能力，还（hái）有很多辅助工具可以帮助我们进行页（yè）面开发。比如（rú）使（shǐ）用 Less 或（huò） Sass 可以帮助我（wǒ）们拓展和组织 CSS，大大提高 CSS 的编写效率（lǜ）增加（jiā）了可维护（hù）性。比如可以通过 zen coding 的自（zì）动自（zì）动完（wán）成和自（zì）定义（yì）代码块让你可以剑指（zhǐ）如飞。甚至还见过（guò）通过（guò）自定义输入法的（de）代码块关键字来提升（shēng）开（kāi）发速度的。多多发（fā）掘一定会找到最合适自己使（shǐ）用的工具。
针对服务器的（de）优化（huà）
页面（miàn）开发也需要了（le）解服（fú）务（wù）器（qì）的优化，尽量减小服（fú）务器负担。比如 css sprite 就是一个典型减小服务器请求数的例子。在（zài）网易邮箱（xiāng）的页面（miàn）前端开（kāi）发（fā）中大家（jiā）不停地在（zài）做着各种优化，比（bǐ）如一（yī）直在寻求文件大（dà）小与服务器请求（qiú）数的平（píng）衡（héng）；为了（le）尽可（kě）能（néng）提高（gāo）缓存利用率采用了补（bǔ）丁升级；对（duì） class 名进行了混淆压缩避免命名过（guò）长（zhǎng）的冗余（yú）；应（yīng）用（yòng） base64 减少请求数量等等措（cuò）施（shī）。这些都是（shì）综（zōng）合（hé）权衡的结果（guǒ），需（xū）要考（kǎo）虑各个（gè）方面整（zhěng）体（tǐ）优化。因为当（dāng）页面访问量达到一定的数（shù）量（liàng）级时，再小的一点优化都会达（dá）到可（kě）观的效果，再小的问（wèn）题都可能会形成巨大的灾（zāi）难。
拥抱 HTML5
这（zhè）是（shì）一个（gè）充（chōng）满机会的时代，HTML5时代的来临伴随着移动互联网的兴起创造（zào）了更大的机（jī）会，还有太多的东西值得我们去学习去发现（xiàn）。 HTML5 提供了丰富的 JS API 接（jiē）口（kǒu），需（xū）要我们去（qù）研究；CSS3的绚丽（lì）吸引了足（zú）够多的（de）眼球，需要我们去研究（jiū）；移动设备上如何开（kāi）发更加适配（pèi）的页面，需（xū）要我们去研究（jiū）……
Stay Hungry， Stay Foolish
水是越舀越多了，却（què）发现原来下面还深不见底，上面的内容越（yuè）是深入研（yán）究就越会发现更多（duō）山川需要翻越。保持饥饿状（zhuàng）态，用眼睛去努（nǔ）力（lì）发现发掘（jué），不断丰富（fù）技能才（cái）能（néng）找到定位，突（tū）破瓶颈，正所谓“唯（wéi）有高屋建瓴方可水（shuǐ）到（dào）渠成”。形成（chéng）本文（wén）是因（yīn）为之前和同（tóng）行讨论到（dào）瓶颈的问题，想给（gěi）自己，给页面前端的同学（xué）一起找找定位（wèi），梳理一下（xià）思（sī）路。拿苹（píng）果 CEO 在斯（sī）坦（tǎn）福演讲的一句话“Stay Hungry， Stay Foolish”和大家共勉。
|
