网页技术的兴衰演变

我常给刚为人父母的朋友和家人一个建议：当你觉得一切尽在掌握时，一切都会改变。刚适应喂奶、换尿布和规律小睡，就该添加辅食、如厕训练和整夜睡眠了。等这些搞定，又到了上幼儿园和告别午睡的时候。循环往复，无休无止。

如今从事设计和开发的我们也是如此。我在网页领域工作近三十年，见证了理念、技巧和技术的周期性兴衰。每当开发者和设计师找到稳定节奏，总会有新理念或技术出现，颠覆一切，重塑我们的世界。

发展历程（#section2）

我在90年代中期创建了第一个网站。那时的网页设计和开发毫无规范可言。除了单栏布局，我们使用表格元素，常靠单像素间隔GIF填充空单元格。用大量字体标签嵌套来设置文本样式，可选字体只有三四种：Arial、Courier或Times New Roman。1996年Verdana和Georgia发布时，我们欢呼雀跃，因为选择几乎翻倍。唯一安全的颜色是216种“网页安全色”。少数交互元素（如联系表单、留言簿和计数器）大多由CGI脚本（当时主要用Perl编写）驱动。要实现独特外观，需要大量 hack。交互通常仅限于特定页面。

Web标准的诞生（#section3）

世纪之交，新周期开始。布满表格布局和字体标签的臃肿代码逐渐衰落，Web标准兴起。CSS等新技术得到浏览器厂商、开发者和设计师更广泛采用。这一转变并非偶然或一夜之间发生。它需要W3C与浏览器供应商积极互动，以及Web Standards Project等组织的大力推广。A List Apart和Jeffrey Zeldman的《Web标准设计》等书籍在教导开发者和设计师标准的重要性、实施方法及向组织推广方面发挥了关键作用。渐进增强等方法引入了内容应适用于所有浏览器的理念——更先进的浏览器可获得额外增强。同时，CSS Zen Garden等网站展示了CSS与坚实语义HTML结构结合的强大和多样。

PHP、Java和.NET等服务器端语言取代Perl成为主流后端处理器，cgi-bin被扔进垃圾箱。随着这些更好的服务器端工具出现，第一个Web应用程序时代到来，从内容管理系统（尤其是博客领域的Blogger、Grey Matter、Movable Type和WordPress）开始。2000年代中期，AJAX为前端和后端之间的异步交互打开了大门。突然之间，页面无需重新加载即可更新内容。Prototype、YUI和jQuery等JavaScript框架涌现，帮助开发者在标准支持水平参差不齐的浏览器间构建更可靠的客户端交互。图像替换等技术让巧妙的设计师和开发者显示自选字体。Flash等技术使添加动画、游戏甚至更多交互成为可能。

这些新技术、标准和方法以多种方式重振了行业。随着设计师和开发者探索更多样化的样式和布局，网页设计蓬勃发展。但我们仍然依赖大量hack。早期CSS在基本布局和文本样式方面比基于表格的布局有很大改进，但当时的局限性意味着设计师和开发者仍严重依赖图像实现复杂形状（如圆角或斜角）和瓷砖背景实现全长列外观（以及其他hack）。复杂布局需要各种嵌套浮动或绝对定位（或两者兼用）。Flash和图像替换自定义字体是改变五大字体的良好开端，但两种hack都带来了可访问性和性能问题。JavaScript库让任何人都能轻松为页面添加交互，但代价是简单网站的下载大小增加两倍甚至四倍。

作为软件平台的Web（#section4）

前端和后端之间的共生关系持续改善，引领了现代Web应用程序的当前时代。扩展的服务器端编程语言（不断增长至包括Ruby、Python、Go等）和React、Vue、Angular等新前端工具，使我们能够在Web上构建功能全面的软件。伴随这些工具而来的还有协作版本控制、构建自动化和共享包库等。曾经主要是链接文档的环境变成了无限可能的领域。

同时，移动设备功能越来越强大，让我们口袋中就有互联网接入。移动应用程序和响应式设计为随时随地的新交互提供了机会。

功能强大的移动设备和强大的开发工具相结合，促进了社交媒体和其他集中式工具的发展，供人们连接和消费。随着在Twitter、Facebook甚至Slack上直接与他人联系变得越来越容易和普遍，对托管个人网站的需求减弱。社交媒体提供了全球范围的连接，随之而来的是好坏参半的影响。

想更详细了解发展历程及其他改进方法？Jeremy Keith写了《时间与Web》。或查看Web Design Museum的“网页设计历史时间线”。Neal Agarwal还通过“互联网文物”进行了有趣之旅。

当前现状（#section5）

过去几年，感觉我们开始达到另一个重要转折点。随着社交媒体平台分裂和衰落，人们对拥有自己内容的兴趣再次增长。制作网站的方法多种多样，从托管纯HTML文件的经典可靠方法，到静态网站生成器，再到各种内容管理系统。社交媒体的分裂也带来成本：我们失去了发现和连接的关键基础设施。Webmentions、RSS、ActivityPub和IndieWeb的其他工具可以有所帮助，但它们仍然相对实施不足，对不太极客的人来说难以使用。我们可以构建出色的个人网站并定期添加内容，但如果没有发现和连接，有时感觉就像在虚空中呐喊。

浏览器对CSS、JavaScript和Web组件等其他标准的支持加速，尤其是通过Interop等努力。新技术在比以前短得多的时间内获得全面支持。我经常了解新功能并检查其浏览器支持，结果发现覆盖率已超过80%。如今，使用新技术的障碍通常不是浏览器支持，而是设计师和开发者学习可用内容及采用速度的限制。

今天，通过几个命令和几行代码，我们可以原型化几乎任何想法。我们现在拥有的所有工具使开始新事物比以往任何时候都更容易。但这些框架在初始交付中可能节省的前期成本，最终会随着升级和维护它们成为技术债务的一部分而到期。

如果我们依赖第三方框架，采用新标准有时可能需要更长时间，因为我们可能必须等待这些框架采用这些标准。这些曾经让我们更快采用新技术的框架，现在反而成了障碍。这些框架通常还带来性能成本，迫使用户等待脚本加载才能阅读或与页面交互。当脚本失败时（无论是由于代码问题、网络问题还是其他环境因素），通常没有替代方案，留给用户空白或损坏的页面。

未来方向（#section6）

今天的hack有助于塑造明天的标准。暂时拥抱hack以推动现在前进并没有本质错误。只有当我们不愿承认它们是hack或犹豫替换时，问题才会出现。那么，我们能做些什么来创造我们想要的Web未来？

为长远构建。优化性能、可访问性和用户体验。权衡那些对开发者友好的工具的成本。它们可能让你今天的工作更轻松，但它们如何影响其他一切？对用户的成本是什么？对未来的开发者？对标准采用？有时便利可能值得。有时只是你习惯的hack。有时它阻碍你获得更好的选择。

从标准开始。标准随时间不断演变，但浏览器在继续支持旧标准方面做得非常好。第三方框架并不总是如此。即使用90年代最hack的HTML构建的网站今天仍然运行良好。使用框架构建的网站即使在几年后也不总是如此。

精心设计。无论你的技艺是代码、像素还是流程，考虑每个决策的影响。许多现代工具的便利性代价是不总是理解导致其设计的底层决策，也不总是考虑这些决策可能产生的影响。与其盲目“快速行动打破常规”，不如利用现代工具节省的时间更仔细地考虑和深思熟虑地设计。

不断学习。如果你不断学习，你也在成长。有时可能难以 pinpoint 什么值得学习，什么只是今天的hack。你可能最终专注于明年无关紧要的东西，即使你只专注于学习标准。（记得XHTML吗？）但不断学习在你的大脑中打开新的连接，有一天学习的hack可能有助于另一天的不同实验。

玩耍、实验和变得古怪！我们构建的这个Web是终极实验。它是历史上最大的人类努力，但我们每个人都可以在其中创建自己的小天地。勇敢尝试新事物。为想法构建游乐场。在你自己的疯狂科学实验室进行古怪实验。创办自己的小企业。从来没有一个更赋能的地方来发挥创造力、冒险和探索我们的能力。

分享和放大。当你实验、玩耍和学习时，分享对你有用的东西。在你自己的网站上写作，在你喜欢的社交媒体上发布，或在TikTok上大喊。为A List Apart写点东西！但也要花时间放大他人：找到新声音，向他们学习，分享他们教给你的东西。

前进与创造（#section7）

作为Web（及更远）的设计者和开发者，我们每天都有责任构建未来，无论是个人网站、数十亿人使用的社交媒体工具，还是介于两者之间的任何东西。让我们将我们的价值观注入我们创造的事物中，让Web对每个人来说都变得更好。创造只有你独特资格制作的东西。然后分享它，改进它，重制它，或制作新东西。学习。创造。分享。成长。冲洗并重复。每次你认为掌握了Web，一切都会改变。

本文原载于A List Apart，作者Ste Grainer，探讨了Web技术的演进历程及未来展望。