本节书摘来自华章计算机《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 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> | 网站
声明
<br />
</div>
在上面的代码段中，第一段代码中的标签外的
标签来增大距离是不合语义的做法，应该通过CSS样式来设置。因此，```javascript
以上两段HTML代码至少可以简化为：
<!—第一段代码片段 -->
<!—第二段代码片段 -->
