关于如何完成相同任务的选择似乎无穷无尽：开发可在当今现代网络中运行的网站。 Web开发人员必须选择一个Web托管平台和基础数据存储，使用哪种工具编写HTML，CSS和JavaScript，如何实现设计以及要包括哪些潜在JavaScript库/框架。
缩小选择范围后，在线世界将充满文章，论坛和示例，这些文章，技巧和示例提供了改善网络体验的提示。 但是，无论走哪条路，所有开发人员都容易出错。 尽管某些错误与特定方法有关，但所有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 。
2. “它可以在我的浏览器中工作……”
错误 ：开发人员可能喜欢一种特定的浏览器，或者实际上是鄙视一种浏览器，并且可能主要考虑这种偏见来测试网页。 在网上找到的代码示例也有可能被编写而没有考虑它在其他浏览器中的呈现方式。 此外，某些浏览器的样式默认值也不同。
影响 ：在其他浏览器中显示时，编写以浏览器为中心的网站可能会导致质量很差。
如何避免 ：在开发过程中在每个浏览器和版本中测试网页都是不切实际的。 但是，定期检查您的网站在多种浏览器中的显示方式是一个很好的方法。 如今，无论您喜欢使用哪种平台，都可以使用免费的帮助工具： 免费的VM或站点扫描仪 。 诸如Browsershots或BrowserStack之类的网站显示有关给定页面如何在多个浏览器/版本/平台上呈现的快照。 诸如Visual Studio之类的工具还可以调用多个浏览器来显示您正在处理的单个页面。 使用CSS进行设计时，请考虑“重置”所有默认值，如meyerweb.com所示。
如果您的站点使用的是专门为浏览器创建CSS功能，请谨慎对待如何使用供应商前缀，例如-webkit- ，- -moz-或-ms- 。 对于这方面的行业趋势的指导，值得您花时间研究以下参考资料：
- Microsoft Edge开发博客： 摆脱过去，第2部分：向ActiveX，VBScript，attachEvent告别...
- QuirksMode.org：CSS 供应商前缀被认为是有害的
- Bruce Lawson： 在支持-webkit-供应商前缀的Internet Explorer上
尽管以上参考文献解释了偏离供应商前缀的原因以及原因，但该站点提供了有关如何解决此问题的实用建议。
3.格式错误
错误 ：提示用户提供任何信息（尤其是在输入文本字段时），并假定将按预期接收数据。
影响 ：当信任用户输入时，很多事情都会（而且很可能会出错）。 如果未提供所需的数据，或者接收到的数据与基础数据方案不兼容，则页面可能会失败。 更严重的是可能是通过注入攻击故意破坏了站点的数据库（请参阅OWASP：2013-A1-Injections排名前10位）。
如何避免 ：这里的第一点建议是确保用户清楚所要查找的数据类型。 如今，要求提供地址可能会导致公司，家庭甚至是电子邮件地址！ 除了具体说明之外，还可以利用本文中所见的当今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 AppsJavaScript编码，但是大多数主题也适用于Web开发，并且其中包含许多不错的技巧！ 帮助创建可靠的代码以适应将来的代码更改的另一种方法是单元测试 。
服务器端代码中的错误应该在用户没有看到任何讨厌的细节的情况下被发现。 仅显示必要的内容，并确保为HTTP 404之类的内容设置友好的错误页面。
6.编写分叉代码
错误 ：开发人员支持所有浏览器和所有版本的崇高观念，因此他们创建了代码来响应每种可能的情况。 该代码成为if语句的堆，在各种方向上进行分叉。
影响 ：随着新版本浏览器的更新，对代码文件的管理变得庞大且难以管理。 就像＃1中提到的那样，它变得越来越不必要 。
避免方法 ： 在代码中实现特征检测，而不是浏览器/版本检测。 功能检测技术大大减少了代码量，并且更易于阅读和管理。 考虑使用诸如Modernizr之类的库，该库不仅有助于功能检测，还可以自动为不支持HTML5或CSS3的旧版浏览器提供后备支持。
7.无响应的设计
错误 ：网站开发假定在与开发人员/设计人员相同的大小的监视器中进行查看。
影响 ：在移动设备或超大屏幕上查看网站时，用户体验会因无法查看页面的重要方面甚至阻止导航到其他页面而受到影响。
如何避免 ：反应敏捷。 在您的站点中使用响应式设计（请参阅Wikipedia或A List Apart文章 ）。 这是一些有关该主题的实用 教程 ，包括响应式图像 。 Bootstrap是准备在此区域中使用的非常受欢迎的库。
8.制作毫无意义的页面
错误 ：制作内容可能面向公众的面向公众的页面，但不会向搜索引擎提供任何提示。 辅助功能未实现。
影响 ：无法通过搜索引擎发现页面，因此页面访问很少或没有访问。 页面内容对于视力障碍的用户可能非常隐秘。
避免方法 ：使用SEO（搜索引擎优化）并支持HTML中的辅助功能。 关于SEO，请确保添加<meta>标记以为具有关键字和描述的页面提供含义。 在About Tech上可以找到很好的文章。 为了提供更好的可访问性体验，请确定在每个<img>或<area>标签中提供alt="your image description"属性。 当然，还有更多工作要做，可以在About Tech上调查更多建议。 您也可以在Cynthia Says上测试公共网页，以查看其是否符合508节的规定 。
9.生产站点太刷新
错误 ：创建一个网站，每次互动都需要刷新页面。
影响 ：类似于肿的页面（ 请参见错误4 ），页面加载时间的性能会受到影响。 用户体验缺乏流畅性，每次交互都可能导致页面短暂（或长时间）重置。
如何避免 ：一种避免这种情况的快速方法是确定是否确实需要发回服务器。 例如，当不依赖服务器端资源时，可以使用客户端脚本提供即时结果。 您还可以采用AJAX技术（ Wikipedia ）或使用单页应用程序“ SPA”（ Wikipedia ）进行更进一步的处理。 可以使用流行JavaScript库/框架来简化这些方法的采用，例如JQuery ， KnockoutJS和AngularJS 。
10.工作太多
错误 ：开发人员花费大量时间来创建Web内容。 时间可能会花在做重复的任务上，或者只是简单地打字。
影响：初始网站启动或后续更新的时间太长。 当其他开发人员似乎在更少的时间和更少的精力下进行可比的工作时，开发人员的价值就会降低。 体力劳动容易出错，而对错误进行故障排除会花费更多时间。
如何避免 ：探索您的选择。 考虑在开发的每个阶段使用新工具或新Craft.io技术。 例如，您当前的代码编辑器与Sublime Text或Visual Studio相比如何？ 无论您使用哪种代码编辑器，您最近是否都沉迷于其功能？ 也许您花费很少的时间仔细阅读文档，可能会揭示出一种新的方式来完成某项工作，从而节省了数小时的时间。 例如，注意如何扩展到Visual Studio可以提高生产力的Web开发人员，如在这个岗位 。
不要错过网上可用的工具！ 例如，在dev.modern.ie上签出工具以简化测试（跨多个平台和设备）和故障排除。
您还可以通过自动化流程来帮助减少时间和错误。 一个例子是使用诸如Grunt之类的工具，该工具可以使诸如文件缩小之类的事情自动化（ 请参见错误＃4 ）。 另一个例子是Bower ，它可以帮助管理库/框架（ 请参见错误9 ）。
Web服务器本身如何？ 借助Microsoft Azure Web Apps等服务 ，您可以为几乎可以轻松扩展您的业务的几乎所有开发方案快速创建一个网站！
摘要
通过识别常见错误，Web开发人员可以消除其他人已经忍受的挫败感。 承认不仅很重要，而且当我们了解错误的影响并采取措施避免错误时，我们可以创建适合我们偏好的开发流程，并充满信心地做到这一点！
使用JavaScript进行更多操作
本文是Microsoft技术福音专家开发的Web开发系列文章的一部分，内容涉及实用JavaScript学习，开源项目以及互操作性最佳实践，包括Microsoft Edge浏览器和新的EdgeHTML呈现引擎 。
我们鼓励您使用dev.modern.IE上的免费工具跨浏览器和设备进行测试，包括Microsoft Edge（Windows 10的默认浏览器）：
- 扫描您的站点以查找过期的库，布局问题和可访问性 。
- 在Mac，Linux和Windows上使用虚拟机 。
- 在您自己的设备上远程测试Microsoft Edge 。
- GitHub上的Coding Lab：跨浏览器测试和最佳实践 。
我们的工程师和宣传人员在Microsoft Edge和Web平台上进行了深入的技术学习：
- Microsoft Edge Web Summit 2015 （新浏览器，新支持的网络平台标准以及来自JavaScript社区的嘉宾演讲者会期待什么）
- 哇，我可以在Mac和Linux上测试Edge和IE！ （来自Rey Bango）
- 在不中断网络的情况下推进JavaScript （摘自Christian Heilmann）
- 使网络正常工作的边缘渲染引擎 （来自Jacob Rossi）
- 使用WebGL释放3D渲染 （来自David Catuhe，包括Vorlon.JS和BabylonJS项目）
- 托管的Web应用程序和Web平台创新 （来自Kevin Hill和Kiril Seksenov，包括ManifoldJS项目）
Web平台的更多免费跨平台工具和资源：
翻译自: https://code.tutsplus.com/articles/10-common-web-developer-mistakes--cms-24791
6433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
