020-39991468

快捷导航

# 业务咨询
电 话:020-39991468

张经理 / 18665606093

Email / service@2000new.com

Wechat

扫一扫添加顾问

Web开发人员在网站建设过程中经常犯的十种错误

来源:新际网络 发布时间:2021-04-17

  在开发一个运行于现代网络的网站时,Web开发人员需要选择虚拟主机平台和底层数据存储,准备编写HTML、CSS和JavaScript的工具,设计和执行方法,以及一些可用的JavaScript库/框架。任务分解成这些步骤后,接下来的工作就简单多了。您可以上网查找文章,浏览论坛,并查看可以为网络体验提供更好提示的示例。


a99924cec6dd35bb8.jpg


  但是,无论你走哪条路,每一个开发者犯错都是必然的。虽然有些错误与特定的行为有关,但有些错误是所有网络开发人员都需要面对的挑战。因此,通过研究、体验和观察,我总结了web开发人员经常犯的10个建站错误——以及如何避免这些错误。


  以下几点没有特别的顺序。


  1)写一些过时的HTML


  错误:与我们现在相比,早期的互联网对标签的选择更少。但是旧习惯很难改,现在很多开发人员写HTML就好像还在20世纪一样。比如我们使用元素进行布局,或者在其他特定的语义标签更合适的时候使用元素,或者在不支持当前的HTML标准的时候使用标签,如果有大量的字符实体,就在页面上空格项。


  影响:遵循这种过时的HTML规则可能会导致标记过于复杂,导致不同浏览器的行为不同。而且也没有动力去改进浏览器,因为没有必要更新到最新的浏览器,比如微软Edge,甚至连Internet  Explorer版本(11、10、9)都变得没有必要了。


  如何避免:停止使用元素进行内容布局,限制使用元素显示表格数据。例如,您可以去whatwg.org了解当前可用的标记选项。用HTML来描述内容是什么,而不是如何呈现的。


  2)“显然在我的浏览器里是可行的……”


  错误:开发人员倾向于偏爱某个特定的浏览器,或者讨厌某个特定的浏览器,可能是因为他们偏向于测试页面视图。也有可能是网上找到的代码示例无法保证它们在其他浏览器中的呈现方式。此外,一些浏览器对样式有不同的默认值。


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


  如何避免:在开发过程中测试所有浏览器和版本的网页是不切实际的。但是,偶尔在多个浏览器中查看一下网站的外观是个不错的方法。现在不管你喜欢什么平台,总有免费的工具可用:免费的虚拟机和网站扫描仪。例如,http://browsershots.org/和https://www.browserstack.com/show的网站可以提供页面如何在多个浏览器/版本/平台中呈现的快照。Visual  Studio等工具也可以调用多个浏览器来显示您正在处理的单个页面。当涉及到CSS设计时,你可以“重置”所有的默认值,如meyerweb.com所示。如果你的网站使用的是专门为某个浏览器设计的CSS特性,那么要注意它的引擎前缀,比如-webkit-、-moz-和-ms-。关于行业在这方面的发展趋势的指导,可以阅读以下参考文献:


  微软边缘开发博客:告别过去,第2:部分告别ActiveX,VBScript,附加事件


  怪癖:CSS厂商前缀被认为是有害的


  布鲁斯劳森:互联网浏览器支持-网络工具包-供应商前缀


  这些参考文献说明了引擎前缀的创新,也可以点击这里——。本网站提供了一些关于如何抛弃引擎前缀的实用建议。


  3)格式不正确


  错误:提示用户输入信息(尤其是输入文本字段时),并假设数据将按预期接收。


  影响:当我们信任用户输入时,很多事情会(或者很可能)出错。如果无法提供所需的数据,或者接收到的数据与以下数据模式不兼容,页面可能会失败。更严重的是,有些用户可能会故意侵犯网站数据库,例如通过注入式攻击(见OWASP:TOP  10 2013-A1-injects)。


  如何避免:你首先要做的是确保用户知道你需要什么样的数据。比如你只要求一个地址,用户不知道是指工作地址、家庭地址还是邮箱地址!除了具体,还要充分利用HTML提供的数据验证技术。无论数据在浏览器端如何验证,都要确保在服务器端验证。不要让串联的T-SQL语句使用来自用户输入的数据,并且每个字段的类型都没有得到确认。


  4)臃肿的响应结果


  错误:页面中充满了许多高质量的图形和/或图片,这些图形和/或图片是由img元素的高度和宽度属性缩小的。来自页面链接的文件,比如CSS和JavaScript,非常大。源HTML标签也可能不必要地复杂和全面。


  影响:完全渲染页面耗时太长,以至于部分用户放弃,甚至直接不耐烦地重新请求整个页面。在某些情况下,如果页面处理等待时间过长,就会出现错误。如何避免:不要有上网越来越快的侥幸心态,让场面臃肿。取而代之的是,把从浏览器到你的网站的往返旅程视为一种成本。图片是臃肿网页的主要罪犯。为了最大限度地降低图像成本和减少页面加载的压力,您可以尝试以下三种技术:


  扪心自问:“这些数字真的有必要吗?”删除不想要的图片。


  使用工具,如缩小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,一定要加标签,提供有意义的关键词和网页描述。关于Tech很好,可以借鉴。为了获得更好的可访问性体验,请为每个img和区域标签提供一个alt='您的图像描述'属性。有关更多建议,请参见关于技术。你也可以测试辛西娅赛德的公共网页,看看它是否与第508节兼容。


  9)网站刷新太多


  错误:创建的网站需要为每次交互全面刷新页面。


  影响:类似于臃肿的页面(见# 4),页面加载时间的性能会受到影响。用户体验缺乏流畅度,每一次交互都可能导致网页的短时间(或长时间)重置。


  如何避免:快速避免这种情况的一种方法是确定发送回服务器的内容是否真的需要。例如,当客户端脚本不依赖于服务器端资源时,它可以用来提供直接结果。也可以应用AJAX技术或者进一步使用单页应用“SPA”方法。流行的JavaScript库/框架,比如JQuery、KnockoutJS、AngularJS,可以让采用这些方法变得容易很多。


  10)做了太多无用的工作


  错误:开发人员创建web内容需要很长时间。很多时间花在重复的任务上,或者你自己写了很多代码。


  影响:最初的网站发布和后续更新耗时过长。如果其他开发人员都在做同样的工作,但是花费的时间和精力比较少,那么你的开发价值就明显低了。手工劳动容易出错,排除故障需要更多的时间。


  如何避免:探索你的选择。考虑在开发的每个阶段使用新的工具和新的过程技术。比如,你目前使用的代码编辑器和威震文字、Visual  Studio相比如何?不管你用什么样的代码编辑器,最近有没有好好研究它的功能?也许你可以通过花一点点时间仔细阅读文档,找到新的做事方法,节省一个又一个小时。例如,在本文中,扩展Visual  Studio可以提高web开发人员的工作效率。不要错过在线提供的帮助工具!例如,检查dev.modern.ie上的工具以简化测试(跨多个平台和设备)和故障排除。


  您还可以通过自动化流程来减少时间和错误。这方面的一个例子是使用咕噜工具,例如,它的自动化功能可以减少文件(见第4点)。另一个例子是Bower,它可以帮助管理库/框架(参见第9点)。


  至于web服务器本身?借助例如微软Azure  Web  Apps,您可以快速创建一个网站,几乎所有的开发场景都可以轻松地扩展到您的业务中!


  总结


  通过识别这些常见的错误,网络开发人员可以避免许多让他人遭受的挫折。我们不仅要承认错误,还要知道错误的影响,采取措施避免错误,这样才能有更好的开发业绩,有信心完成任务!


联系我们
  1. 咨询电话 咨询电话

    业务咨询:

    020-39991468

    服务监督:

    郭经理 18620727292
  2. 联络邮箱 联络邮箱

    业务邮箱

    service@2000new.com

    招聘邮箱

    hr@2000new.com
  3. 新际网络公司总部地址 总部中心
    广州市番禺区万博奥园国际中心2座1919室
  4. 新际网络 微信客服 微信沟通
    售前顾问

    扫一扫加售前顾问

返回顶部

电话咨询

在线咨询

留言预约

*新际020中心将尽快与您联系