前端开发人员常犯的5个错误,你是否也中枪了?

什么是前端开发?

说简单点前端开发可以说成是做网站。这里可以扩展到一个知识点,什么是C/S和B/S , 记得应该是之前有 人在群里面问过。

C/S:这不过是英文的缩写而已,也就是Client/Server。明白了吧?也就是开发的是服务器,客户端模式,这种模式下用户必须要安装客户端软件才能够使用系统的功能,而一旦有更新,用户必须重新下载客户端。 就跟那啥我们玩的LOL、我们想玩就得下载个客户端。每次还得自己下载更新。如果是JAVA的话就可以做线上的东西,比如网页游戏,直接玩就是了。不需要你更新。

web开发的是B/S,也就是Browser/Server,浏览器/服务器模式则无需客户端软件,只要客户端安装Web浏览器就能够使用系统功能,而系统的更新也只需要管理员替换服务器文件就可以实现,无需用户去下载客户端。

通过标题,我们可以简单的理解为,做网站的程序员经常犯的5种错误。然而不管是走哪条路,不管你是不是web工程师。犯错是每一个开发人员都不可避免的。虽然有些错误与某一个具体的行为相关,但有些错误却是所有Web开发人员都需要面对的挑战。

第一个错误:《做了太多的无用功》

为什么是说是做了太多的无用功呢?因为没有找到办法,本来有地铁的,你偏不去找,偏要去挤公交,这能怪谁啊? 也就是说,很多人程序员在做网站的时候,花了很长的时间来创建WEB的内容,大量的时间都花在了重复的任务上,或者自己敲代码去了。

有句话说的很好,工欲善其事必先利其器。很多程序员可能不大重注工具的利用和选择,认为一直用的就是很好的。如果其他开发人员也在在做同样的工作,用了更少的时间和精力就把网站开发出来了,而你却磨蹭半天,那么你的开发价值显然就低了。手动劳动很容易出现错误,而排除故障错误需要更多的时间。如果你是老板,你会怎么选择?

如何避免这个错误呢?其实也很简单,在开发的每一个阶段考虑使用新的工具和新的流程技术。比如,你目前使用的代码编辑器相比Sublime Text和Visual Studio,如何?不管你使用的是什么样的代码编辑器,你最近有好好钻研它的功能吗?也许只投入稍稍一点时间去仔细阅读文档,就可以发现做事的新方法,为今后节省一个又一个小时的时间,不要错过网上可用的帮助工具!例如,检查在dev.modern.ie上的工具以简化测试(跨多个平台和设备)以及排除故障,你也可以通过实现流程自动化以减少时间和错误。

第二个错误:《制作无意义的页面》

做网站之前,首先我们要明白这个网站的作用是什么,老板希望得到的是什么。既然做网站,肯定是要展示给大众看的,也就是说,如果你的网页搜索引擎都没办法找到,拿来还有多大意义?

如何有效的避免这个错误呢?当然是使用SEO和HTML的支持可访问性了。关于SEO,一定要添加标签以提供有意义的网页关键字和描述。也就是标签优化,为了能有更好的可访问性功能体验,那么就需要对每一个img和area标签提供一个alt=" description" 属性。

第三个错误:《写一些过时的HTML》

早期的互联网比起我们现在,标签的选择要少得多。然而,旧习难改,现在很多开发人员写的HTML就好像还身处20世纪一样。简单来说就是,使用

元素用于布局。当其他特定语义标签更适合的时候使用
元素,在当前HTML标准不受支持的时候使用
标签,在页面上间隔项目,如果有大量 字符实体。遵从这种过时的HTML规则可能会导致标记过于复杂,结果是在不同的浏览器中发生不同的行为。

这种错误可能没太多了,但是也难免会遇到,解决办法就是停止使用

元素用于内容布局,限制使用
元素来显示表格数据。使用HTML去描述内容是什么,而不是说明内容如何展现。

第四个错误:《响应式设计》

所谓的响应式网站设计(自适应网站设计),用最通俗的语言来讲,就是通过一个唯一的网址,唯一的一份网站内容,唯一的一份网站代码,通过CSS3媒体查询方式,可以在多种浏览器设备上进行一致的浏览。响应式站点设计的目的是期望网页设计和网页编码能够对用户的操作行为和环境进行合理的响应,而这种响应应建立在用户的浏览器屏幕大小、操作平台等。

随着移动互联网的到来,拥有一个可以适应多种屏幕分辨率的网站建设就显得尤为重要了。你上公交要玩手机吧?做 地铁要玩手机吧?很多东西手机都能实现了。你愿意拿着手机逛别人网站的时候拉又拉在屏幕上比划半天? 据ComScore在2012年的调查发现,2009年全世界仅有8亿部移动互联网用户,而到2015,有19亿移动互联网用户,而相比较而言,桌面互联网用户从2009到2015年只会增加2亿左右,增幅远远低于移动互联网的普及度。

这个呢,我们可以发现很多网站都已经支持响应式了,计算没有响应式的设计,也会有带有手机网站或者啥的,这是也是一种解决办法,但是呢,本来一个网站就能实现的,为什么要做2个网站呢?所以。我们还是得有响应式的思维方式。在网站中使用响应式设计。这里有一些关于这方面的实用教程,包括响应式图片,还有一个非常受欢迎的库,那就是Bootstrap。

第五个错误:《臃肿的响应结果》

为什么说是臃肿的响应结果呢?大家都逛过网站吧?不管你逛得是大网站还是小网站,你一进去就等个几分钟才看到网站内容你高不高兴?你买个东西,看个图片要刷新10次你还买不买?所谓的臃肿的响应结果就是因为页面充满了许多高品质的图形和/或图片,这些图形和/或图片借助img元素的高度和宽度属性按比例缩小。来自于页面链接的文件,如CSS和JavaScript,很大等。

对于这个问题呢,有很多种办法去解决。总之呢不要抱有现在互联网接入越来越快的侥幸心态——从而允许臃肿的场景。相反,我们要将从浏览器到你的网站的来回当为一种成本。图像是网页臃肿的主要罪犯。为了最大限度地减少图像成本,减轻页面加载的压力,可以试试以下三种办法:

第一种就是:“该留的留,该滚得滚”,删除不需要的图片。

或者使用使用Shrink O’Matic或RIOT的工具来减少图像文件大小。但是呢,图像文件是减小了,但是呢,是不是原来的配方,和是不是原来的味道我就不知了。

第二种就是:预加载图像。这不会提高初始下载的成本,但可以让网站其他页面图像加载速度更快。

最后一种就是:减少成本的方式是压缩CSS和JavaScript链接文件。有很多的工具,如Minify CSS和Minify JS都可以。

当然了。每个人都会犯错误,每个人的错误都是不一样的。上面这些只是自己经常遇到的,要说完整的话是没办法写完整的。如果你们又遇到什么其他的错误的话,就给大家一起分享分享吧!!!