本節(jié)書摘來自華章計(jì)算機(jī)《Web前端開發(fā)最佳實(shí)踐》一書中的第1章，第1.2節(jié),作者:黨　建 更多章節(jié)內(nèi)容可以訪問云棲社區(qū)“華章計(jì)算機(jī)”公眾號(hào)查看。

1.2　Web前端開發(fā)現(xiàn)狀

前端開發(fā)雖然起步時(shí)間晚，但是發(fā)展勢(shì)頭迅猛，在各種新技術(shù)、新標(biāo)準(zhǔn)的推動(dòng)下，各大互聯(lián)網(wǎng)公司也開始重視Web產(chǎn)品的前端重構(gòu)與開發(fā)，如淘寶、騰訊、新浪、百度、搜狐等都對(duì)自己的網(wǎng)站進(jìn)行了重構(gòu)并同時(shí)使用了HTML5中的新特性。現(xiàn)在開發(fā)的Web新產(chǎn)品的頁面交互也越來越豐富，視覺效果也越來越絢麗。互聯(lián)網(wǎng)公司除了重視前端開發(fā)之外，還在積極推動(dòng)互聯(lián)網(wǎng)技術(shù)的發(fā)展，2001～2012年，騰訊、百度及奇虎360公司先后加入了萬維網(wǎng)聯(lián)盟（W3C），共同參與互聯(lián)網(wǎng)技術(shù)標(biāo)準(zhǔn)的研究和制定，促進(jìn)了國內(nèi)互聯(lián)網(wǎng)產(chǎn)業(yè)的發(fā)展。
在Web前端發(fā)展的過程中，瀏覽器的發(fā)展起著至關(guān)重要的作用。瀏覽器廠商在這場(chǎng)Web浪潮中表現(xiàn)突出，具體表現(xiàn)在瀏覽器的版本升級(jí)周期短、對(duì)前端標(biāo)準(zhǔn)的支持也越來越好、瀏覽器的性能也有大幅的提升等。IE瀏覽器也開始發(fā)力，最新發(fā)布的IE 10瀏覽器無論是標(biāo)準(zhǔn)的支持還是性能都表現(xiàn)突出。瀏覽器的快速發(fā)展使得低端的瀏覽器如IE 6、IE 7等快速退出市場(chǎng)。
下面看一下全球范圍內(nèi)瀏覽器的占有率情況。根據(jù)StatCounter的統(tǒng)計(jì)，2012年10月份，全球?yàn)g覽器占有率前5位的分別是Chrome、IE、Firefox、Safari及Opera，占有率分別為34.77%、32.08%、22.32%、7.81%和1.63%。按照瀏覽器的版本統(tǒng)計(jì)，在低端瀏覽器中，IE 8占有率為12%，IE 7的占有率僅為0.88%，IE 6的占有率則更低。
此外，移動(dòng)設(shè)備上的瀏覽器在整個(gè)瀏覽器占有率中上升速度很快。根據(jù)StatCounter的統(tǒng)計(jì)，Safari iPad在瀏覽器的占有率已經(jīng)達(dá)到了2.76%。目前移動(dòng)設(shè)備的普及率極高，用戶已經(jīng)逐漸習(xí)慣于通過移動(dòng)設(shè)備來瀏覽網(wǎng)頁。主流的移動(dòng)平臺(tái)主要為Android和iOS系統(tǒng)，對(duì)應(yīng)的瀏覽器都是以WebKit為核心的，性能和對(duì)標(biāo)準(zhǔn)的支持都不錯(cuò)。
以上介紹的是瀏覽器在全球范圍內(nèi)的占有率情況。從上面的統(tǒng)計(jì)可以看出，在全球范圍內(nèi)，低端瀏覽器的占有率已經(jīng)很低了，但國內(nèi)瀏覽器占有率的狀況則比較復(fù)雜，低端瀏覽器如IE 8、IE 7和IE 6等還占有不小的份額。根據(jù)StatCounter的統(tǒng)計(jì)，2012年10月份，國內(nèi)瀏覽器占有率前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%，低端瀏覽器依然占有“半壁江山”，而高級(jí)瀏覽器如Chrome、Safari、Firefox等占有率則很低。值得稱道的是，360安全瀏覽器和搜狗瀏覽器這兩款瀏覽器都是基于開源的瀏覽器內(nèi)核，對(duì)標(biāo)準(zhǔn)支持較好，性能表現(xiàn)突出。這兩款瀏覽器的占有率目前雖然不高，但發(fā)展勢(shì)頭迅猛，是推動(dòng)老舊瀏覽器退出市場(chǎng)的中堅(jiān)力量。
除各大互聯(lián)網(wǎng)公司和瀏覽器廠商的積極推動(dòng)外，Web前端開源社區(qū)的參與熱情也極為高漲。在著名的網(wǎng)絡(luò)代碼托管系統(tǒng)GitHub上，開源的項(xiàng)目仍然是以前端相關(guān)項(xiàng)目居多，按語言排名，前3位分別為JavaScript、Ruby和Python；按項(xiàng)目排名，靠前的大部分也是前端項(xiàng)目，如Prototype、Bootstrap、jQuery及相關(guān)插件等，具體內(nèi)容可參考GitHub官方網(wǎng)站。國內(nèi)的一些前端社區(qū)則發(fā)展較為緩慢，多是以推廣HTML5為主，靠一些酷炫的效果來吸引眼球，反而關(guān)注前端基礎(chǔ)的較少。國內(nèi)Web互聯(lián)網(wǎng)公司（如淘寶、百度、騰訊等）也有部分優(yōu)秀的開源前端框架，這些公司的前端技術(shù)分享氛圍不錯(cuò)。整體來講，國內(nèi)前端技術(shù)發(fā)展還是比較迅速的，也不乏頂級(jí)的前端技術(shù)人員，但普遍缺乏的是開放的心態(tài)和與國內(nèi)外同行交流的能力，國內(nèi)前端技術(shù)的發(fā)展任重道遠(yuǎn)。
Web前端整體技術(shù)的發(fā)展和前端工程師個(gè)人的能力是相輔相成的。目前，前端工程師很多是“半道出家”，一部分是從頁面UI開發(fā)轉(zhuǎn)行為Web前端開發(fā)的，一部分則是由后端工程師轉(zhuǎn)行而來，所以前端工程師普遍自學(xué)成才，并沒有受過足夠的專業(yè)訓(xùn)練，也缺乏實(shí)際的項(xiàng)目經(jīng)驗(yàn)。
除了以上這些Web前端開發(fā)的外在環(huán)境之外，Web前端在技術(shù)方面也存在著大量的挑戰(zhàn)，大量舊的網(wǎng)站需要重構(gòu)來提高網(wǎng)站用戶體驗(yàn)和性能等。這些網(wǎng)站的前端代碼普遍存在的問題有：代碼組織混亂，CSS代碼和JavaScript代碼混合在HTML代碼中；代碼的格式問題突出，不夠整潔；頁面布局隨意，HTML代碼不符合標(biāo)準(zhǔn)；網(wǎng)站整體性能差，還沒有意識(shí)到要去應(yīng)用諸如緩存、動(dòng)態(tài)加載、腳本壓縮、圖片壓縮等提高性能的技術(shù)。
此種狀況并非是個(gè)案，查看目前訪問量頗高的某網(wǎng)站的首頁源代碼，可以很直觀地看出其中不規(guī)范的內(nèi)容：頁面沒有body的閉合標(biāo)簽，頁面代碼縮進(jìn)隨意，頁面中大量使用內(nèi)聯(lián)樣式并且頁面中還在使用諸如< marquee >、< font >等標(biāo)準(zhǔn)不推薦的標(biāo)簽。以下是其中的代碼片段：

在這段代碼中，和標(biāo)簽已經(jīng)不再被W3C制定的標(biāo)準(zhǔn)推薦使用，所呈現(xiàn)的效果完全可以通過JavaScript代碼實(shí)現(xiàn)，并且實(shí)現(xiàn)的效果可以更好。標(biāo)簽完全可以通過CSS樣式代碼實(shí)現(xiàn)。
此外，此站點(diǎn)首頁HTML代碼中包含大量不必要的標(biāo)簽和多余的樣式設(shè)置，代碼的可讀性較差。再來看一段代碼：

<!—第一段代碼片段 --> <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/">關(guān)于我們</a> | <a href="./gljd/wzls/">網(wǎng)站 聲明</a><br /></div>

在上面的代碼段中，第一段代碼中的標(biāo)簽外的

標(biāo)簽是可以省略的，標(biāo)簽內(nèi)的width和height屬性可以統(tǒng)一通過CSS代碼設(shè)置，標(biāo)簽內(nèi)需要添加必要的alt屬性來說明圖片的信息。在第二段代碼中，依靠
標(biāo)簽來增大距離是不合語義的做法，應(yīng)該通過CSS樣式來設(shè)置。因此，`javascript
以上兩段HTML代碼至少可以簡(jiǎn)化為：








關(guān)于我們 | 網(wǎng)站聲明 另外，站點(diǎn)中的CSS樣式文件和JavaScript腳本文件，沒有任何文件被壓縮和合并。推薦的做法是分別壓縮合并樣式文件和腳本文件，在縮小文件大小的同時(shí)也減少了文件的HTTP請(qǐng)求次數(shù)，提高了性能。 綜合以上的這些信息，Web前端開發(fā)的現(xiàn)狀可以概括為：前端技術(shù)發(fā)展迅速，但起步較晚，基礎(chǔ)薄弱；前端工程師熱情高漲，但缺乏足夠技能培訓(xùn)，對(duì)代碼規(guī)范重視不足，對(duì)一些基礎(chǔ)原理的理解不夠深刻。

總結(jié)

以上是生活随笔為你收集整理的《Web前端开发最佳实践》——1.2　Web前端开发现状的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。