Web开发人员常犯的10个错误

说到开发一个运行在现代网络中的网站：Web开发人员须要选择虚拟主机平台和底层数据存储，准备编写HTML、CSS和JavaScript用的工具，要有设计执行方式，以及一些可用的JavaScript库/框架。在将任务分解为这几步以后，接下来要作的就简单多了，能够去网上找文章，浏览论坛，看看那些能提供更好的Web体验提示的示例。

然而无论是走哪条路，犯错倒是每个开发人员都不可避免的。虽然有些错误与某一个具体的行为相关，但有些错误倒是全部Web开发人员都须要面对的挑战。所以，经过研究，体验和观察，我总结了Web开发人员常犯的10个错误——以及如何避免这些错误。

如下要点没有特定的顺序。

1）写一些过期的HTML

错误：早期的互联网比起咱们如今，标记的选择要少得多。然而，旧习难改，如今不少开发人员写的HTML就好像还身处20世纪同样。举例来讲，咱们使用<table>元素用于布局，当其余特定语义标签更适合的时候使用<span>或<div>元素，在当前HTML标准不受支持的时候使用<center>或<font>标签，在页面上间隔项目，若是有大量&nbsp;字符实体的话。

影响：听从这种过期的HTML规则可能会致使标记过于复杂，结果是在不一样的浏览器中发生不一样的行为。并且没有了改进浏览器的动力，由于没有必要更新到最新的浏览器，如Microsoft Edge，哪怕是Internet Explorer版本（十一、十、9）也变得没有必要。

如何避免：中止使用<table>元素用于内容布局，限制使用<table>元素来显示表格数据。例如能够去whatwg.org了解当前可用的标记选项。使用HTML去描述内容是什么，而不是说明内容如何展示。对于如何显示内容，请使用CSS（http://www.w3.org/Style/CSS/）。

2）“明明在个人浏览器中是可行的……”

错误：开发人员每每会偏心某一个特定的浏览器，或者特别讨厌某一个，可能主要是由于对测试网页视图有所偏见。也有多是由于从网上找到的代码示例不能保证会如何呈如今其余浏览器中。此外，一些浏览器对风格有不一样的默认值。

影响：以某一个浏览器为中心写的网站，在其余浏览器中显示时，其质量将会不好。

如何避免：在开发过程当中，在全部浏览器和版本中测试网页是不切实际的。不过，每隔一段时间，在多个浏览器中检查网站的样子不失为一个好方法。如今，无论你偏好的是什么平台，总有免费的工具可用：免费的虚拟机、网站扫描仪。如http://browsershots.org/和https://www.browserstack.com/show网站能够给出页面如何呈如今多个浏览器/版本/平台中的快照。Visual Studio等工具还能够调用多个浏览器，来显示你正在工做的单一页面。当涉及到CSS设计时，能够参考在meyerweb.com中所示的那样“重置”全部的默认值。

若是你的网站正在使用的CSS特性是专为某一浏览器特制的，那么注意它的引擎前缀，如-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

上面这些参考资料解说了引擎前缀的革新，以及你还能够点击这里——这个网站提供了一些如何摒弃引擎前缀的实用建议。

3）很差的格式

错误：提示用户提供信息（特别是在输入文本字段的时候），并假设数据会如预期接收。

影响：不少事情会（或者颇有可能将会）出错，当咱们信任用户输入的时候。若是没法提供所需的数据，或接收到的数据不能与下面的数据模式兼容，页面可能会失败。更为严重的是，有的用户可能会故意违背网站的数据库，例如能够经过注入式攻击（见OWASP：Top 10 2013-A1-Injections）。

如何避免：你首先要作的事是确保用户清楚你须要什么类型的数据。好比说，若是你只说要地址，那用户不知道指的是单位，家庭仍是电子邮件的地址！除了要具体，还要充分利用如今的HTML提供的数据验证技术。无论数据在浏览器端是如何验证的，确保它始终也在服务器端验证。不要让一个串接的T-SQL语句使用来自于用户输入的，各个字段的类型没有通过确认的数据。

4）臃肿的响应结果

错误：页面充满了许多高品质的图形和/或图片，这些图形和/或图片借助img元素的高度和宽度属性按比例缩小。来自于页面连接的文件，如CSS和JavaScript，很大。源HTML标记也多是没必要要的复杂和全面。

影响：彻底渲染页面的时间是如此之久，以至于一些用户放弃了，或者甚至于直接不耐烦地从新请求整个页面。在某些状况下，若是页面处理等待过久，会出现错误。

如何避免：不要抱有如今互联网接入愈来愈快的侥幸心态——从而容许臃肿的场景。相反，要将从浏览器到你的网站的来回当为一种成本。图像是网页臃肿的主要罪犯。为了最大限度地减小图像成本，减轻页面加载的压力，能够试试如下三个技巧：

一、问问你本身：“这些图形真的有必要吗？”删除不须要的图片。

二、使用例如Shrink O’Matic或RIOT的工具来减小图像文件大小。

三、预加载图像。这不会提升初始下载的成本，但可让网站其余页面图像加载速度更快。

另外一种减小成本的方式是压缩CSS和JavaScript连接文件。有不少的工具，如Minify CSS和Minify JS都能帮你作到。

5）建立所谓“应该能行”的代码

错误：不管是JavaScript，仍是在服务器上运行的代码，开发人员都须要测试并确认它是否能够正常工做，而不是在部署了以后，就认为它应该就能从一而终地运行。

影响：不通过适当错误检查的网站就是对最终用户耍流氓。不只会极大地影响用户体验，并且其错误消息内容的类型可能会给黑客线索来渗透这个站点。

如何避免：是人都会犯错，这个哲理一样适用于编码。使用JavaScript，必定要实施好的技术来防止并抓住错误。虽然这篇文章描绘了用JavaScript编码Windows应用程序，可是大部分的内容也适用于web开发，许多提示都很不错！另外一种能让代码变得可靠又能在将来变化中存活下来的方法是单元测试。

若是咱们够仔细，那么就能捕捉到服务器端的代码失败，而不被用户发现。只显示必要的信息，而且必定要确保设置友好的错误页面，如HTTP 404s。

6）写分叉代码

错误：本着支持全部浏览器和版本的崇高理念，开发人员立志建立可对任意可能状况做出回应的代码。代码中if语句成堆，全部方向都有分叉。

影响：随着浏览器新版本的更新，代码文件会变得愈来愈笨拙和难以管理。

如何避免：实现代码的功能检测和浏览器/版本检测。功能检测技术不只能够显著减小代码量，还更易于阅读和管理。不妨考虑使用如Modernizr这样的库，不只有助于功能检测，还能自动帮助提供不能跟上HTML5和CSS3速度的旧版浏览器的反馈支持。

7）非响应式设计

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

影响：当在移动设备或在很是大的屏幕查看网站时，用户体验要么很难看到页面的重要方面，要么甚至要时刻注意着不导航至其余网页。

如何避免：响应式的思惟方式。在网站中使用响应式设计。这里有一些关于这方面的实用教程，包括响应式图片，还有一个很是受欢迎的库，那就是Bootstrap。

8）制做无心义的页面

错误：制做面向公众内容的网页才是有用的，毫不能不提供关于搜索引擎的任何线索。没有实现可访问性功能。

影响：若是不能让搜索引擎发现网页，那么，可能会只有少许或根本没有访问。

如何避免：使用SEO（搜索引擎优化）和HTML的支持可访问性。关于SEO，必定要添加标签以提供有意义的网页关键字和描述。 About Tech就写得很好，能够借鉴。为了能有更好的可访问性功能体验，请对每个img和area标签提供一个alt="your image description" 属性。更多建议请见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开发人员能够避免不少让其余人饱受煎熬的挫折。咱们不只须要认可错误，还应该清楚错误的影响，并采起措施避免错误，这样才能有更好的开发表现——并有信心完成任务！