说到开发一个运行在现代网络中的网站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版本11、10、9也变得没有必要。

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

2“明明在我的浏览器中是可行的……”

错误开发人员往往会偏爱某一个特定的浏览器或者特别讨厌某一个可能主要是因为对测试网页视图有所偏见。也有可能是因为从网上找到的代码示例不能保证会如何呈现在其他浏览器中。此外一些浏览器对风格有不同的默认值。

影响以某一个浏览器为中心写的网站在其他浏览器中显示时其质量将会很差。

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

如果你的网站正在使用的CSS特性是专为某一浏览器特制的那么注意它的引擎前缀如-webkit--moz--ms-。对于行业在这方面的发展趋势指导那么可以阅读以下参考

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

3不好的格式

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

影响很多事情会或者很有可能将会出错当我们信任用户输入的时候。如果无法提供所需的数据或接收到的数据不能与下面的数据模式兼容页面可 能会失败。更为严重的是有的用户可能会故意违背网站的数据库例如可以通过注入式***见OWASPTop 10 2013-A1-Injections。

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

4臃肿的响应结果

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

影响完全渲染页面的时间是如此之久以致于一些用户放弃了或者甚至于直接不耐烦地重新请求整个页面。在某些情况下如果页面处理等待太久会出现错误。

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

  1. 问问你自己“这些图形真的有必要吗”删除不需要的图片。

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

  3. 预加载图像。这不会提高初始下载的成本但可以让网站其他页面图像加载速度更快。

另一种减少成本的方式是压缩CSS和JavaScript链接文件。有很多的工具如Minify CSSMinify 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 p_w_picpath description" 属性。更多建议请见About Tech。你也可以在Cynthia Says测试公共网页看它是否兼容Section 508。

9网站过多刷新

错误创建的网站需要为每一个互动而全面刷新页面。

影响类似于页面臃肿参见4页面加载时间的性能会受到影响。用户体验缺乏流畅性并且每次互动都可能导致网页短暂或长时间的复位。

如何避免快速避免这种情况的一个方法就是通过测定回发到服务器的内容是否是真正需要的。例如当不依赖服务器端资源的时候客户端脚本可用于提 供直接结果。你也可以应用AJAX技术或进一步使用单页的应用程序“SPA”方法。流行的JavaScript库/框架如JQuery、 KnockoutJS和AngularJS能让这些方法的采用变得容易得多。

10做了太多的无用功

错误开发人员花了很长的时间来创建web内容。大量的时间花在了重复的任务上或者自己敲代码写了很多。

影响初始网站的发布和后续的更新时间过于冗长。如果其他开发人员也在在做同样的工作却用了更少的时间和精力那么你的开发价值显然就低了。手动劳动很容易出现错误而排除故障错误需要更多的时间。

如何避免探索你的选择。在开发的每一个阶段考虑使用新的工具和新的流程技术。例如你目前使用的代码编辑器相比Sublime TextVisual Studio如何不管你使用的是什么样的代码编辑器你最近有好好钻研它的功能吗也许只投入稍稍一点时间去仔细阅读文档就可以发现做事的新方法为今后节省一个又一个小时的时间。例如在这篇文章中扩展Visual Studio可以为web开发人员提高生产效率。

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

你也可以通过实现流程自动化以减少时间和错误。这方面的例子是使用Grunt工具例如它的自动化功能可以减小文件见第4点。另一个例子是Bower可以协助管理库/框架参见第9点。

至于web服务器本身在例如Microsoft Azure Web Apps的帮助下你可以快速创建一个网站几乎所有的开发场景都可以很轻轻松松地规模化到你的业务中

总结

通过识别这些常见的错误web开发人员可以避免很多让其他人饱受煎熬的挫折。我们不仅需要承认错误还应该清楚错误的影响并采取措施避免错误这样才能有更好的开发表现——并有信心完成任务

译文链接http://www.codeceo.com/article/10-mistakes-web-developer-make.html
英文原文10 Common Mistakes Web Developers Make