Web开发人员常犯的10个错误
说到开发1个运行在现代网络中的网站：Web开发人员需要选择虚拟主机平台和底层数据存储，准备编写HTML、CSS和JavaScript用的工具，要有设计履行方式，和1些可用的JavaScript库/框架。在将任务分解为这几步以后，接下来要做的就简单多了，可以去网上找文章，阅读论坛，看看那些能提供更好的Web体验提示的示例。
但是不论是走哪条路，出错却是每个开发人员都不可避免的。虽然有些毛病与某1个具体的行动相干，但有些毛病却是所有Web开发人员都需要面对的挑战。因此，通过研究，体验和视察，我总结了Web开发人员常犯的10个毛病――和如何避免这些毛病。
以下要点没有特定的顺序。
1）写1些过时的HTML
毛病：初期的互联网比起我们现在，标记的选择要少很多。但是，旧习难改，现在很多开发人员写的HTML就好像还身处20世纪1样。举例来讲，我们使用元素用于布局，当其他特定语义标签更合适的时候使用或
影响：遵从这类过时的HTML规则可能会致使标记过于复杂，结果是在不同的阅读器中产生不同的行动。而且没有了改进阅读器的动力，由于没有必要更新到最新的阅读器，如Microsoft Edge，哪怕是Internet Explorer版本（11、10、9）也变得没有必要。
如何避免：停止使用
2）“明明在我的阅读器中是可行的……”
毛病：开发人员常常会偏爱某1个特定的阅读器，或特别讨厌某1个，可能主要是由于对测试网页视图有所偏见。也有多是由于从网上找到的代码示例不能保证会如何显现在其他阅读器中。另外，1些阅读器对风格有不同的默许值。
影响：以某1个阅读器为中心写的网站，在其他阅读器中显示时，其质量将会很差。
如何避免：在开发进程中，在所有阅读器和版本中测试网页是不切实际的。不过，每隔1段时间，在多个阅读器中检查网站的模样不失为1个好方法。现在，不管你偏好的是甚么平台，总有免费的工具可用：免费的虚拟机、网站扫描仪。如http://browsershots.org/和https://www.browserstack.com/show网站可以给出页面如何显现在多个阅读器/版本/平台中的快照。Visual Studio等工具还可以调用多个阅读器，来显示你正在工作的单1页面。当触及到CSS设计时，可以参考在meyerweb.com中所示的那样“重置”所有的默许值。
如果你的网站正在使用的CSS特性是专为某1阅读器特制的，那末注意它的引擎前缀，如-webkit-，-moz-和-ms-。对行业在这方面的发展趋势指点，那末可以浏览以下参考：
- ?Microsoft Edge开发博客：A break from the past, part 2: Saying goodbye to ActiveX, VBScript, attachEvent
- ?QuirksMode.org：CSS vendor prefixes considered harmful
- Bruce Lawson： On Internet Explorer supporting -webkit- vendor prefixes
上面这些参考资料解说了引擎前缀的革新，和你还可以点击这里――这个网站提供了1些如何摒弃引擎前缀的实用建议。
3）不好的格式
毛病：提示用户提供信息（特别是在输入文本字段的时候），并假定数据会如预期接收。
影响：很多事情会（或很有可能将会）出错，当我们信任用户输入的时候。如果没法提供所需的数据，或接收到的数据不能与下面的数据模式兼容，页面可能会失败。更加严重的是，有的用户可能会故意背背网站的数据库，例如可以通过注入式攻击（见OWASP：Top 10 2013-A1-Injections）。
如何避免：你首先要做的事是确保用户清楚你需要甚么类型的数据。比如说，如果你只说要地址，那用户不知道指的是单位，家庭还是电子邮件的地址！除要具体，还要充分利用现在的HTML提供的数据验证技术。不管数据在阅读器端是如何验证的，确保它始终也在服务器端验证。不要让1个串接的T-SQL语句使用来自于用户输入的，各个字段的类型没有经过确认的数据。
4）臃肿的响应结果
毛病：页面充满了许多高品质的图形和/或图片，这些图形和/或图片借助img元素的高度和宽度属性按比例缩小。来自于页面链接的文件，如CSS和JavaScript，很大。源HTML标记也多是没必要要的复杂和全面。
影响：完全渲染页面的时间是如此之久，以致于1些用户放弃了，或乃至于直接不耐烦地重新要求全部页面。在某些情况下，如果页面处理等待太久，会出现毛病。
如何避免：不要抱有现在互联网接入愈来愈快的侥幸心态――从而允许臃肿的场景。相反，要将从阅读器到你的网站的来回当为1种本钱。图象是网页臃肿的主要罪犯。为了最大限度地减少图象本钱，减轻页面加载的压力，可以试试以下3个技能：
- 问问你自己：“这些图形真的有必要吗？”删除不需要的图片。
- 使用例如Shrink O’Matic或RIOT的工具来减少图象文件大小。
- 预加载图象。这不会提高初始下载的本钱，但可让网站其他页面图象加载速度更快。
另外一种减少本钱的方式是紧缩CSS和JavaScript链接文件。有很多的工具，如Minify CSS和Minify JS都能帮你做到。
5）创建所谓“应当能行”的代码
毛病：不管是JavaScript，还是在服务器上运行的代码，开发人员都需要测试并确认它是不是可以正常工作，而不是在部署了以后，就认为它应当就可以从1而终地运行。
影响：不经过适当毛病检查的网站就是对终究用户耍流氓。不但会极大地影响用户体验，而且其毛病消息内容的类型可能会给黑客线索来渗透这个站点。
如何避免：是人都会出错，这个哲理一样适用于编码。使用JavaScript，1定要实行好的技术来避免并捉住毛病。虽然这篇文章描绘了用JavaScript编码Windows利用程序，但是大部份的内容也适用于web开发，许多提示都很不错！另外一种能让代码变得可靠又能在未来变化中存活下来的方法是单元测试。
如果我们够仔细，那末就可以捕捉到服务器真个代码失败，而不被用户发现。只显示必要的信息，并且1定要确保设置友好的毛病页面，如HTTP 404s。
6）写分叉代码
毛病：本着支持所有阅读器和版本的崇高理念，开发人员立志创建可对任意可能情况作出回应的代码。代码中if语句成堆，所有方向都有分叉。
影响：随着阅读器新版本的更新，代码文件会变得愈来愈笨拙和难以管理。
如何避免：实现代码的功能检测和阅读器/版本检测。功能检测技术不但可以显著减少代码量，还更容易于浏览和管理。无妨斟酌使用如Modernizr这样的库，不但有助于功能检测，还能自动帮助提供不能跟上HTML5和CSS3速度的旧版阅读器的反馈支持。
7）非响应式设计
毛病：假定开发/设计人员在相同尺寸的显示器上开发网站。
影响：当在移动装备或在非常大的屏幕查看网站时，用户体验要末很难看到页面的重要方面，要末乃至要时刻注意着不导航至其他网页。
如何避免：响应式的思惟方式。在网站中使用响应式设计。这里有1些关于这方面的实用教程，包括响应式图片，还有1个非常受欢迎的库，那就是Bootstrap。
8）制作无意义的页面
毛病：制作面向公众内容的网页才是有用的，绝不能不提供关于搜索引擎的任何线索。没有实现可访问性功能。
影响：如果不能让搜索引擎发现网页，那末，可能会只有少许或根本没有访问。
如何避免：使用SEO（搜索引擎优化）和HTML的支持可访问性。关于SEO，1定要添加标签以提供成心义的网页关键字和描写。 About Tech就写得很好，可以鉴戒。为了能有更好的可访问性功能体验，请对每个img和area标签提供1个alt="your image description" 属性。更多建议请见About Tech。你也能够在Cynthia Says测试公共网页，看它是不是兼容Section 508。
9）网站过量刷新
毛病：创建的网站需要为每个互动而全面刷新页面。
影响：类似于页面臃肿（参见＃4），页面加载时间的性能会遭到影响。用户体验缺少流畅性，并且每次互动都可能致使网页短暂（或长时间）的复位。
如何避免：快速避免这类情况的1个方法就是，通过测定回发到服务器的内容是不是是真正需要的。例如，当不依赖服务器端资源的时候，客户端脚本可用于提供直接结果。你也能够利用AJAX技术或进1步使用单页的利用程序“SPA”方法。流行的JavaScript库/框架，如JQuery、KnockoutJS和AngularJS，能让这些方法的采取变得容易很多。
10）做了太多的无用功
毛病：开发人员花了很长的时间来创建web内容。大量的时间花在了重复的任务上，或自己敲代码写了很多。
影响：初始网站的发布和后续的更新时间过于冗杂。如果其他开发人员也在在做一样的工作，却用了更少的时间和精力，那末你的开发价值明显就低了。手动劳动很容易出现毛病，而排除故障毛病需要更多的时间。
如何避免：探索你的选择。在开发的每个阶段斟酌使用新的工具和新的流程技术。例如，你目前使用的代码编辑器相比Sublime Text和Visual Studio，如何？不管你使用的是甚么样的代码编辑器，你最近有好好研究它的功能吗？或许只投入稍稍1点时间去仔细浏览文档，就能够发现做事的新方法，为今后节省1个又1个小时的时间。例如，在这篇文章中，扩大Visual Studio可以为web开发人员提高生产效力。
不要错过网上可用的帮助工具！例如，检查在dev.modern.ie上的工具以简化测试（跨多个平台和装备）和排除故障。
你也能够通过实现流程自动化以减少时间和毛病。这方面的例子是使用Grunt工具，例如它的自动化功能可以减小文件（见第4点）。另外一个例子是Bower，可以协助管理库/框架（参见第9点）。
至于web服务器本身？在例如Microsoft Azure Web Apps的帮助下，你可以快速创建1个网站，几近所有的开发场景都可以很轻轻松松地范围化到你的业务中！
总结
通过辨认这些常见的毛病，web开发人员可以免很多让其他人饱受煎熬的挫折。我们不但需要承认毛病，还应当清楚毛病的影响，并采取措施避免毛病，这样才能有更好的开发表现――并有信心完成任务！
上一篇 C++网络通信库性能大比拼
下一篇 JSP文件下载（不使用jar包）