Web 开发者常犯的 10 个错误

J. Michael Palermo IV

4.24/5 (9投票s)

2015年9月11日

CPOL

12分钟阅读

27585

我想分享一个我整理的列表，其中包含了我看到的 Web 开发者常犯的十个错误——以及如何避免它们。

在当今现代 Web 开发中，完成同一任务的方法似乎有无限的选择。Web 开发者需要选择一个 Web 托管平台和底层数据存储，使用哪些工具来编写 HTML、CSS 和 JavaScript，如何实现设计，以及包含哪些潜在的 JavaScript 库/框架。一旦选择缩小，网上充斥着提供提升 Web 体验技巧的文章、论坛和示例。然而，无论采取哪种路径，所有开发者都可能犯错。尽管有些错误与特定的方法相关，但所有 Web 开发者都面临着共同的挑战。因此，通过研究、经验和近期观察，我想分享一个我整理的列表，其中包含了我看到的 Web 开发者常犯的十个错误——以及如何避免它们。

以下列表的顺序不分先后。

1) 编写过时的 HTML

错误：互联网早期，标记语言的选择远不如现在多。然而，旧习惯难以改变，许多人仍然按照 20 世纪的方式编写 HTML。例如，使用 `<table>` 元素进行布局，在其他语义标签更合适的情况下使用 `<span>` 或 `<div>` 元素，或者使用当前 HTML 标准不支持的标签，如 `<center>` 或 `<font>`，或者使用大量的 ` ` 实体来分隔页面上的项目。

影响：编写过时的 HTML 会导致标记过度复杂，在不同浏览器中表现不一致。而且，在像 Microsoft Edge 这样的较新的现代浏览器，甚至早期版本的 Internet Explorer（11、10、9）中，这都是不必要的。

如何避免：停止使用 `<table>` 元素进行内容布局，将其使用限制在显示表格数据。熟悉当前可用的标记选项，例如在 whatwg.org 上看到的。使用 HTML 来描述内容是什么，而不是如何显示。要正确显示内容，请使用 CSS（http://www.w3.org/Style/CSS/）。

2) “在我的浏览器上能用……”

错误：开发者可能偏爱某个特定的浏览器，或者非常讨厌某个浏览器，并在测试网页时主要带有这种偏见。在线找到的代码示例也可能没有考虑到它在其他浏览器中的渲染效果。此外，一些浏览器对样式的默认值有所不同。

影响：编写以某个浏览器为中心的网站，在其他浏览器上显示时质量可能会非常差。

如何避免：在开发过程中，不可能测试所有浏览器和版本。然而，在固定的时间间隔内检查网站在多个浏览器中的外观是一个好方法。如今，无论您偏爱哪个平台，都可以获得免费工具的帮助：免费虚拟机，站点扫描器。像 http://browsershots.org/ 或 https://www.browserstack.com/ 这样的网站可以显示给定页面在多种浏览器/版本/平台上的渲染快照。像 Visual Studio 这样的工具也可以调用多个浏览器来显示您正在处理的单个页面。在设计 CSS 时，请考虑“重置”所有默认样式，正如在 meyerweb.com 上所示。

如果您的网站使用了任何特定于某个浏览器的 CSS 功能，请谨慎处理供应商前缀，如 -webkit-、-moz- 或 -ms-。为了获得这方面的行业趋势指导，您应该仔细研究以下参考资料：

Microsoft Edge Dev Blog：告别过去，第二部分：告别 ActiveX、VBScript、attachEvent…
QuirksMode.org：CSS 供应商前缀的危害
Bruce Lawson：关于 Internet Explorer 支持 -webkit- 供应商前缀

虽然上述参考资料解释了摆脱供应商前缀的趋势和原因，但这个网站提供了关于如何处理当前情况的实用建议。

3) 表单设计不当

错误：要求用户提供任何信息（尤其是在文本字段中输入时），并假设数据将按预期接收。

影响：当信任用户输入时，很多事情（很可能）会出错。如果没有提供所需的数据，或者接收到的数据与底层数据模式不兼容，页面可能会失败。更严重的是，网站数据库可能会被故意破坏，例如通过注入攻击（参见 OWASP：2013-A1-注入）。

如何避免：这里的第一个建议是确保清楚地告诉用户您需要什么类型的数据。如今，询问地址可能会得到业务地址、家庭地址，甚至电子邮件地址！除了具体说明外，还要利用当今 HTML 中可用的数据验证技术，如这篇文章所示。无论数据是如何在浏览器端验证的，都要确保它也始终在服务器端进行验证。切勿在未经确认每个字段都是所需数据类型的情况下，允许将连接的 T-SQL 语句使用用户输入的数据。

4) 响应体过大

错误：页面充满了许多高质量的图形和/或图片，通过 `<img>` 元素的 height 和 width 属性进行缩放。页面链接的文件，如 CSS 和 JavaScript，体积很大。源 HTML 标记也可能不必要地复杂和冗长。

影响：页面完全渲染所需的时间会变长，以至于一些用户放弃或不耐烦地重新请求整个页面。在某些情况下，如果页面处理等待时间过长，会出现错误。

如何避免：不要持“互联网接入速度越来越快”的心态，从而允许过大的内容。相反，将浏览器与您的网站之间往返的任何内容都视为一种成本。页面体积过大的主要罪魁祸首是图像。为了最小化减慢页面加载速度的图像成本，请尝试以下三个技巧：

问问自己：“我的所有图形绝对必要吗？” 如果不是，请删除不必要的图像。您可以在此扫描您的网站，获取有关压缩哪些图像的建议。
使用 Shrink O'Matic 或 RIOT 等工具来最小化图像文件大小。
预加载图像。这不会改善初始下载的成本，但可以使网站上使用这些图像的其他页面加载得更快。有关技巧，请参见这篇文章。

另一种减少成本的方法是最小化链接的 CSS 和 JavaScript 文件。有很多工具可以帮助您完成这项工作，例如 Minify CSS 和 Minify JS。

在结束这个话题之前，请努力跟上 HTML 的最新进展（*参见错误 #1*），并在使用 HTML 中的 `<style>` 或 `<script>` 标签时保持判断力。

5) 编写“应该”能工作的代码

错误：无论是 JavaScript 还是服务器端代码，开发者都已测试并确认其能正常工作，因此认为部署后也应该能正常工作。代码执行时没有错误处理，因为在开发者测试时它工作正常。

影响：没有适当错误检查的网站可能会以丑陋的方式将错误暴露给最终用户。这不仅会严重影响用户体验，错误消息的内容还可能为黑客提供入侵网站的线索。

如何避免：人非圣贤，孰能无过，将这种哲学应用到编码中。对于 JavaScript，请确保采用良好的技术来防止错误并捕获它们。尽管这篇文章讨论的是 Windows 应用的 JavaScript 编码，但大多数主题也适用于 Web 开发，并且包含许多好的技巧！另一个有助于创建稳健代码并能经受未来代码更改的辅助工具是单元测试（参见 http://en.wikipedia.org/wiki/Unit_testing）。

服务器端代码的故障应该被捕获，而不会让用户看到任何技术细节。只显示必要的信息，并确保为 HTTP 404 等情况设置友好的错误页面（参见 http://en.wikipedia.org/wiki/HTTP_404）。

6) 编写分支代码

错误：出于支持所有浏览器和版本的良好意愿，开发者会为每种可能的情况创建代码。代码变成了一堆 `if` 语句，朝着各种方向分支。

影响：随着新浏览器版本的更新，管理代码文件变得臃肿且难以管理。而且，正如 #1 所述，这越来越不必要。

如何避免：在代码中实现功能检测，而不是浏览器/版本检测。功能检测技术不仅大大减少了代码量，而且更容易阅读和管理。考虑使用像 Modernizr 这样的库，它不仅有助于功能检测，还可以自动为不支持 HTML5 或 CSS3 的旧浏览器提供回退支持。

7) 设计不响应式

错误：网站开发假设在与开发/设计人员相同的显示器尺寸上进行查看。

影响：在移动设备或非常大的屏幕上查看网站时，用户体验会受到影响，要么无法看到页面的重要部分，要么甚至无法导航到其他页面。

如何避免：思考响应式。在您的网站中使用响应式设计（维基百科）或（A List Apart 文章）。这里有一些关于它的实用教程，包括响应式图片。一个在该领域非常有用的流行库是 Bootstrap。

8) 创建无意义的页面

错误：创建面向公众的页面，提供可能非常有用的内容，但没有向搜索引擎提供任何提示。未实现可访问性功能。

影响：页面不易被搜索引擎发现，因此访问量很少或没有。页面内容对视力障碍的用户来说可能非常晦涩。

如何避免：使用 SEO（搜索引擎优化）并在 HTML 中支持可访问性。关于 SEO，请确保添加 `<meta>` 标签，通过关键字和描述为页面提供含义。关于这方面的一个好文章可以在 About Tech 上找到。为了提供更好的可访问性体验，请务必在每个 `<img>` 或 `<area>` 标签中提供 `alt="您的图片描述"` 属性。当然，还有更多工作要做，可以在 About Tech 上进一步研究建议。您还可以使用 Cynthia Says 测试公共网页，以查看其是否符合 Section 508。

9) 创建过于“刷新”的站点

错误：创建需要每次交互都完全刷新页面的站点。

影响：与页面过大（*参见错误 #4*）类似，页面加载时间性能会受到影响。用户体验缺乏流畅性，每次交互都可能导致页面短暂（或长时间）重置。

如何避免：避免这种情况的一个快速方法是确定是否确实需要回发到服务器。例如，当没有服务器端资源依赖性时，可以使用客户端脚本来提供即时结果。您还可以采用 AJAX 技术（维基百科）或进一步采用单页应用“SPA”（维基百科）的方法。流行的 JavaScript 库/框架可用于更轻松地采用这些方法，例如 JQuery、KnockoutJS 和 AngularJS。

10) 工作过度

错误：开发者花费很长时间来创建 Web 内容。时间可能花费在重复性任务上，或者仅仅是大量输入。

影响：初始网站上线或后续更新的时间过长。当其他开发者的工作看起来与此类似，但花费的时间和精力更少时，开发者的价值就会降低。人工劳动容易出错，而排查错误则需要更多时间。

如何避免：探索您的选择。在开发的每个阶段考虑使用新工具或新流程技术。例如，您的当前代码编辑器与 Sublime Text 或 Visual Studio 相比如何？无论您使用什么代码编辑器，您最近是否深入研究过它的功能？也许花少量时间浏览文档就能发现一种新的做事方式，从而节省大量时间。例如，注意 Visual Studio 的扩展如何提高 Web 开发者的生产力，如这篇帖子所示。

不要错过网络上可用的工具！例如，查看 dev.modern.ie 上的工具，以简化跨多个平台和设备的测试和故障排除。

您还可以通过自动化流程来帮助减少时间和错误。一个例子是使用像 Grunt 这样的工具，它可以自动化诸如文件最小化（*参见错误 #4*）之类的任务。另一个例子是 Bower，它可以帮助管理库/框架（*参见错误 #9*）。

Web 服务器本身呢？借助 Microsoft Azure Web Apps 等服务，您可以快速为几乎任何开发场景创建网站，并且可以轻松地随业务扩展！

摘要

通过识别常见的错误，Web 开发者可以消除许多他人已经经历过的挫败感。我们不仅要认识到这些错误，还要了解错误的后果并采取措施避免它们，这样我们就可以创建一个符合自己偏好的开发流程——并充满信心地完成！