《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 等标准不推荐的标签。以下是其中的代码片段：

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

 !—第一段代码片段 -- 

 div id="slideshow" 

 div 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代码至少可以简化为：








关于我们 | 网站声明

另外，站点中的CSS样式文件和JavaScript脚本文件，没有任何文件被压缩和合并。推荐的做法是分别压缩合并样式文件和脚本文件，在缩小文件大小的同时也减少了文件的HTTP请求次数，提高了性能。

综合以上的这些信息，Web前端开发的现状可以概括为：前端技术发展迅速，但起步较晚，基础薄弱；前端工程师热情高涨，但缺乏足够技能培训，对代码规范重视不足，对一些基础原理的理解不够深刻。

【web前端开发】HTML知识点超详细总结 网页是构成网站的基本元素，是承载各种网站应用的平台.网页通常是指HTML格式的文件 文件扩展名为.html或.htm 它通过浏览器来阅读 HTML不是一种编程语言,而是一种标记语言.
【web前端开发】CSS最常用的11种选择器 CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
【web前端开发】CSS背景相关内容 背景颜色，属性名:background-color，取值:表示颜色的取值都可以填写,如:rgb。注意点:背景颜色默认是透明的，背景颜色不影响盒子的大小，实用技巧:在平时使用一些盒子时,可以给盒子设置背景颜色,这样可以看清盒子的大小和位置。
【web前端开发】超详细讲解CSS盒子模型 所有HTML元素可以看作盒子,CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。