《Web前端开发最佳实践》——1.2 Web前端开发现状-阿里云开发者社区

开发者社区> 华章出版社> 正文

《Web前端开发最佳实践》——1.2 Web前端开发现状

简介:

本节书摘来自华章计算机《Web前端开发最佳实践》一书中的第1章,第1.2节,作者:党 建 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

1.2 Web前端开发现状

前端开发虽然起步时间晚,但是发展势头迅猛,在各种新技术、新标准的推动下,各大互联网公司也开始重视Web产品的前端重构与开发,如淘宝、腾讯、新浪、百度、搜狐等都对自己的网站进行了重构并同时使用了HTML5中的新特性。现在开发的Web新产品的页面交互也越来越丰富,视觉效果也越来越绚丽。互联网公司除了重视前端开发之外,还在积极推动互联网技术的发展,2001~2012年,腾讯、百度及奇虎360公司先后加入了万维网联盟(W3C),共同参与互联网技术标准的研究和制定,促进了国内互联网产业的发展。
在Web前端发展的过程中,浏览器的发展起着至关重要的作用。浏览器厂商在这场Web浪潮中表现突出,具体表现在浏览器的版本升级周期短、对前端标准的支持也越来越好、浏览器的性能也有大幅的提升等。IE浏览器也开始发力,最新发布的IE 10浏览器无论是标准的支持还是性能都表现突出。浏览器的快速发展使得低端的浏览器如IE 6、IE 7等快速退出市场。
下面看一下全球范围内浏览器的占有率情况。根据StatCounter的统计,2012年10月份,全球浏览器占有率前5位的分别是Chrome、IE、Firefox、Safari及Opera,占有率分别为34.77%、32.08%、22.32%、7.81%和1.63%。按照浏览器的版本统计,在低端浏览器中,IE 8占有率为12%,IE 7的占有率仅为0.88%,IE 6的占有率则更低。
此外,移动设备上的浏览器在整个浏览器占有率中上升速度很快。根据StatCounter的统计,Safari iPad在浏览器的占有率已经达到了2.76%。目前移动设备的普及率极高,用户已经逐渐习惯于通过移动设备来浏览网页。主流的移动平台主要为Android和iOS系统,对应的浏览器都是以WebKit为核心的,性能和对标准的支持都不错。
以上介绍的是浏览器在全球范围内的占有率情况。从上面的统计可以看出,在全球范围内,低端浏览器的占有率已经很低了,但国内浏览器占有率的状况则比较复杂,低端浏览器如IE 8、IE 7和IE 6等还占有不小的份额。根据StatCounter的统计,2012年10月份,国内浏览器占有率前5位分别为IE 8、
IE 9、IE 6、搜狗浏览器和360安全浏览器,占有率分别为48.7%、14.09%、8.29%、5.74%和2.72%。其中低端浏览器IE 8、IE 7和IE 6的总占有率大约为58%,低端浏览器依然占有“半壁江山”,而高级浏览器如Chrome、Safari、Firefox等占有率则很低。值得称道的是,360安全浏览器和搜狗浏览器这两款浏览器都是基于开源的浏览器内核,对标准支持较好,性能表现突出。这两款浏览器的占有率目前虽然不高,但发展势头迅猛,是推动老旧浏览器退出市场的中坚力量。
除各大互联网公司和浏览器厂商的积极推动外,Web前端开源社区的参与热情也极为高涨。在著名的网络代码托管系统GitHub上,开源的项目仍然是以前端相关项目居多,按语言排名,前3位分别为JavaScript、Ruby和Python;按项目排名,靠前的大部分也是前端项目,如Prototype、Bootstrap、jQuery及相关插件等,具体内容可参考GitHub官方网站。国内的一些前端社区则发展较为缓慢,多是以推广HTML5为主,靠一些酷炫的效果来吸引眼球,反而关注前端基础的较少。国内Web互联网公司(如淘宝、百度、腾讯等)也有部分优秀的开源前端框架,这些公司的前端技术分享氛围不错。整体来讲,国内前端技术发展还是比较迅速的,也不乏顶级的前端技术人员,但普遍缺乏的是开放的心态和与国内外同行交流的能力,国内前端技术的发展任重道远。
Web前端整体技术的发展和前端工程师个人的能力是相辅相成的。目前,前端工程师很多是“半道出家”,一部分是从页面UI开发转行为Web前端开发的,一部分则是由后端工程师转行而来,所以前端工程师普遍自学成才,并没有受过足够的专业训练,也缺乏实际的项目经验。
除了以上这些Web前端开发的外在环境之外,Web前端在技术方面也存在着大量的挑战,大量旧的网站需要重构来提高网站用户体验和性能等。这些网站的前端代码普遍存在的问题有:代码组织混乱,CSS代码和JavaScript代码混合在HTML代码中;代码的格式问题突出,不够整洁;页面布局随意,HTML代码不符合标准;网站整体性能差,还没有意识到要去应用诸如缓存、动态加载、脚本压缩、图片压缩等提高性能的技术。
此种状况并非是个案,查看目前访问量颇高的某网站的首页源代码,可以很直观地看出其中不规范的内容:页面没有body的闭合标签,页面代码缩进随意,页面中大量使用内联样式并且页面中还在使用诸如< marquee >、< font >等标准不推荐的标签。以下是其中的代码片段:


0a790e2961b4228f52d31481bb36ac239ada1645

在这段代码中,和标签已经不再被W3C制定的标准推荐使用,所呈现的效果完全可以通过JavaScript代码实现,并且实现的效果可以更好。标签完全可以通过CSS样式代码实现。
此外,此站点首页HTML代码中包含大量不必要的标签和多余的样式设置,代码的可读性较差。再来看一段代码:

<!—第一段代码片段 -->
<div id="slideshow">
  <div class="current"><img src="./images/pic011.gif" width="189" height="176" />
</div>
  <div><img src="./images/pic012.gif" width="188" height="176" /></div>
  <div><img src="./images/pic013.gif" width="188" height="176" /></div>
</div>
<!—第二段代码片段 -->
<div><br/>
    <a href="./gljd/gywm/">关于我们</a>  |  <a href="./gljd/wzls/">网站
声明</a>
    <br />

     </div>

在上面的代码段中,第一段代码中的标签外的

标签是可以省略的,标签内的width和height属性可以统一通过CSS代码设置,标签内需要添加必要的alt属性来说明图片的信息。在第二段代码中,依靠
标签来增大距离是不合语义的做法,应该通过CSS样式来设置。因此,`javascript
以上两段HTML代码至少可以简化为:


img info
img info
img info



关于我们 | 网站声明

另外,站点中的CSS样式文件和JavaScript脚本文件,没有任何文件被压缩和合并。推荐的做法是分别压缩合并样式文件和脚本文件,在缩小文件大小的同时也减少了文件的HTTP请求次数,提高了性能。
综合以上的这些信息,Web前端开发的现状可以概括为:前端技术发展迅速,但起步较晚,基础薄弱;前端工程师热情高涨,但缺乏足够技能培训,对代码规范重视不足,对一些基础原理的理解不够深刻。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:

华章出版社

官方博客
官网链接