本篇內(nèi)容介紹了“Web前端技術(shù)有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供依蘭網(wǎng)站建設(shè)、依蘭做網(wǎng)站、依蘭網(wǎng)站設(shè)計(jì)、依蘭網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、依蘭企業(yè)網(wǎng)站模板建站服務(wù)，10多年依蘭做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

Web前端技術(shù)的范圍

1. 編程語(yǔ)言/技術(shù)（HTML，JavaScript，CSS等）

2. 跨瀏覽器兼容性/支持（JS Framework，CSS Library）

3. 網(wǎng)絡(luò)傳輸性能（并行下載，帶寬利用率）

4. 瀏覽器渲染時(shí)間/性能（TTI即用戶(hù)可交互前等待時(shí)間，JS執(zhí)行性能）

個(gè)人感覺(jué)，F(xiàn)acebook無(wú)疑又成為了技術(shù)上的明星，在大家還在感慨其對(duì)于PHP的重大改進(jìn)HipHop(Blocked inside China mainland)的時(shí)候，今年Facebook又在前端技術(shù)方面給大家?guī)?lái)了驚喜。

Facebook面臨的問(wèn)題

500M（Million）注冊(cè)用戶(hù)，50%每天至少訪問(wèn)一次，用戶(hù)平均每日在線時(shí)間為5小時(shí)25分鐘。帶寬及服務(wù)器壓力均很大。

Facebook的解決方案

Quickling

Facebook提出了一個(gè)新名詞Ajaxify，顧名思義，就是將傳統(tǒng)的POST/GET轉(zhuǎn)換為Ajax請(qǐng)求。優(yōu)點(diǎn)顯而易見(jiàn)，首先減少了不必要的HTML傳輸，只請(qǐng)求和渲染頁(yè)面需要更新的部分，這就相應(yīng)減少了所需傳輸?shù)膬?nèi)容加快了內(nèi)容送達(dá)至用戶(hù)的時(shí)間。并且也減少了服務(wù)端對(duì)HTML的不必要的渲染。Facebook也提到了可以減少session的重復(fù)load/unload。

使用Ajax也許不是什么新鮮的新聞，大家拒絕這項(xiàng)技術(shù)的原因可能很大程度基于SEO的需求。解決方案也很簡(jiǎn)單，將Ajax只是作為提高用戶(hù)體驗(yàn)的手段，而不是瀏覽網(wǎng)站必須的方法，即可解決SEO的問(wèn)題（P.S. Facebook不需要SEO）。

整套方案包括：Link Controller, HistoryManager, BootLoader, Busy Indicator, CSS Unloading, Permanent link support, Resetting timer functions。這些方案本身沒(méi)有什么特殊的，大部分都可以顧名思義，需要解釋一下的可能是link controller，其含義是將標(biāo)準(zhǔn)的HTML LINK請(qǐng)求轉(zhuǎn)換為Ajax請(qǐng)求（通過(guò)綁定click事件）。Facebook的可貴之處是提供了這一整套完整的解決方案，***程度上保證了網(wǎng)站的可用性。

效果：

提高了10%-30%的網(wǎng)站傳輸時(shí)間，并提高了20%-30%的服務(wù)端頁(yè)面渲染速度。

使用范圍：

45%的Facebook頁(yè)面使用了此項(xiàng)技術(shù)。

PageCache

簡(jiǎn)單的說(shuō)，就是將訪問(wèn)過(guò)的頁(yè)面緩存在客戶(hù)端。但我們知道，作為Facebook這樣交互性很強(qiáng)的網(wǎng)站，需要保障用戶(hù)能盡早的獲得更新后的信息，而不是給用戶(hù)展示一個(gè)毫無(wú)意義的過(guò)期頁(yè)面。

Facebook設(shè)計(jì)了一個(gè)框架來(lái)識(shí)別一個(gè)頁(yè)面是否來(lái)自于緩存（猜測(cè)：頁(yè)面***加載完畢后將所有Ajax的Callback和Result緩存在本地。Facebook頁(yè)面是基于Ajax獲取頁(yè)面內(nèi)容），若來(lái)自于緩存，通過(guò)Ajax來(lái)更新所需更新的模塊（猜測(cè)：通過(guò)JavaScript預(yù)先定義本頁(yè)面所需更新的div Id及對(duì)應(yīng)的callback handler，并在頁(yè)面下載時(shí)同時(shí)下載下來(lái)）。

其提到了三種更新類(lèi)型：增量更新，用戶(hù)復(fù)寫(xiě)（例如用戶(hù)在頁(yè)面上回復(fù)了一則評(píng)論）及跨頁(yè)更新（例如在消息詳細(xì)頁(yè)面將一則消息標(biāo)識(shí)為已讀，需將首頁(yè)的未讀消息數(shù)進(jìn)行更新）。核心思路還是依據(jù)Ajax進(jìn)行更新。具體思路為：

增量更新：只要頁(yè)面來(lái)自于緩存，即更新所有預(yù)定義的需增量更新的模塊。

用戶(hù)復(fù)寫(xiě)：通過(guò)HistoryManager記錄用戶(hù)操作并在cache頁(yè)面讀取后重放所有被標(biāo)記為“replayable”的操作。

跨頁(yè)更新：通過(guò)服務(wù)端Database API發(fā)送信號(hào)至客戶(hù)端將過(guò)期緩存標(biāo)識(shí)為invalid（不清楚如何實(shí)現(xiàn)。也許是DB端提供一個(gè)開(kāi)放的webservice，客戶(hù)端通過(guò)Ajax持續(xù)訪問(wèn)此API來(lái)獲得此信息）。獲得了緩存過(guò)期信號(hào)后，通過(guò)Ajax更新需要更新的信息。

Facebook順帶提到了一個(gè)更新Ajax內(nèi)容避免頁(yè)面變化/閃爍的小技巧，就是先將需更新的地方設(shè)置為blank，而非直接更新其內(nèi)容。

效果：

加速了10倍的網(wǎng)站響應(yīng)時(shí)間并節(jié)約了20%的服務(wù)端頁(yè)面渲染成本。

BigPipe

此項(xiàng)技術(shù)通過(guò)將頁(yè)面分割為各個(gè)Pagelets的方式，將整張頁(yè)面的獲取/渲染變成了并行的方式（感覺(jué)非常像iframe sets，但Facebook使用Ajax實(shí)現(xiàn)。）。此項(xiàng)技術(shù)是Quickling和PageCache的基石。此技術(shù)包含了服務(wù)端/客戶(hù)端兩方面，在前后端均打破了以往頁(yè)面的渲染形式。

實(shí)現(xiàn)細(xì)節(jié)：

Pagelet的Response為JSON格式，包括id,css,js,content,onload等屬性及相應(yīng)內(nèi)容，收到后會(huì)通過(guò)預(yù)定義好的JS function來(lái)進(jìn)行渲染。

Pagelet提供的高級(jí)功能：Pagelet的繼承，Phased Rendering（猜測(cè)：依據(jù)規(guī)則渲染，也就是依據(jù)Pagelet的Response進(jìn)行渲染），跨Pagelet依賴(lài)（數(shù)據(jù)依賴(lài)，顯示依賴(lài)，JS依賴(lài)）。

BigPipe的三種模式：

◆一次渲染模式：即普通模式，支持搜索引擎，用來(lái)支持那些不支持JS的客戶(hù)端。

◆管線模式：即并行模式，并行請(qǐng)求，并即時(shí)渲染。

◆并行模式：并行請(qǐng)求，但在獲得所有請(qǐng)求的結(jié)果后再渲染。

效果：

提高了2倍的頁(yè)面響應(yīng)時(shí)間。

擴(kuò)展閱讀：世界***的PHP站點(diǎn) Facebook后臺(tái)技術(shù)探秘

YouTube面臨的問(wèn)題

每天2Billion的訪問(wèn)。每分鐘上傳35小時(shí)的內(nèi)容?？蒠ouTube需要即時(shí)播放視頻！越快越好。

YouTube解決方案

1. 將JavaScript引用位置從頁(yè)首移至頁(yè)尾。

2. 直接嵌入Flash Player（YouTube之前使用JS來(lái)加載Flash Player）。通過(guò)頁(yè)尾的JS來(lái)判斷客戶(hù)端的Flash版本（或不支持Flash），來(lái)替換預(yù)先嵌入的Flash Player或內(nèi)容（如果需要的話），用來(lái)支持特定的客戶(hù)群。

效果：頁(yè)面渲染時(shí)間從～400ms降低為～200ms。Flash播放時(shí)間從～1200ms降低為～1100ms。

3. 預(yù)加載視頻連接： 通過(guò)使用JavaScript創(chuàng)建Image引用視頻內(nèi)容來(lái)與解析DNS并預(yù)開(kāi)啟一個(gè)connection供之后使用。

效果：建立視頻連接的總時(shí)間從～260ms降低為～180ms。

4. 提供簡(jiǎn)化版：這個(gè)很無(wú)聊，就是提供一個(gè)簡(jiǎn)版。

效果：頁(yè)面加載時(shí)間從～1750ms降低為～1100ms。

5. UIX Widget系統(tǒng)：延遲加載非關(guān)鍵內(nèi)容。其實(shí)整段沒(méi)什么新意，大部分省略，無(wú)非是通過(guò)Ajax在頁(yè)面渲染完后再來(lái)動(dòng)態(tài)加載非關(guān)鍵內(nèi)容。比較特別的是利用JS的事件冒泡，在最上層用一個(gè)handler來(lái)處理各種事件（優(yōu)點(diǎn)不詳。。也許只是代碼比較簡(jiǎn)潔集中吧），通過(guò)CSS來(lái)標(biāo)識(shí)和識(shí)別對(duì)應(yīng)的handler。

Yahoo Mail

Yahoo如何構(gòu)建下一代的Mail系統(tǒng)？答案就是通過(guò)YUI3。Yahoo的技術(shù)絕對(duì)是***的，其已經(jīng)將Web前端技術(shù)發(fā)展到一個(gè)非常成熟的地步，照顧到Web的方方面面（數(shù)據(jù)壓縮，模塊化，高效CSS，非阻礙式JavaScript加載，靜態(tài)內(nèi)容提供，利用瀏覽器Cache等等），所以也鮮有創(chuàng)新了。某種程度上來(lái)說(shuō)，F(xiàn)acebook的一些所謂創(chuàng)新也不過(guò)是后知后覺(jué)，Yahoo早已考慮并實(shí)現(xiàn)了這些方案，只是也許不是那么有針對(duì)性而已。

Baidu

感覺(jué)整體傾向于組織結(jié)構(gòu)介紹及一些比較過(guò)時(shí)的內(nèi)容。

Taobao

還在討論一些何時(shí)使用Ajax，何時(shí)不使用的問(wèn)題。

相反的，淘寶的精益測(cè)試倒是引起了我的興趣，出自微軟的淘寶員工鶴云講述了淘寶是如何進(jìn)行CI（持續(xù)集成）的。有一些經(jīng)驗(yàn)例如代碼覆蓋率測(cè)試也給人一些啟發(fā)。

“Web前端技術(shù)有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！