一(yī)、HTTP請(qǐng)求數(shù)的(≠∑de)權衡

1、為(wèi)什(shén)麽要(yào)關心h&∏∏ttp請(qǐng)求？

當浏覽器(qì)向Web服務器(qì)發出請(qǐng)求時(sh​ ≥®í)，它向服務器(qì)傳遞了(le)一(yī≥♣)個(gè)數(shù)據塊，也(yě)就(jiù)♦¶≤‌是(shì)請(qǐng)求信息。在用(yòng)戶打開(kāi)一(yī)個£$<"(gè)頁面的(de)初初，包括等待時(shí)間(jiān)、請(♣‍↑qǐng)求時(shí)間(jiān)、建立響應時(s‍∏hí)間(jiān)、渲染時(shí)間(jiā₹πn)……，都(dōu)是(shì)消耗在前端的"Ω₹(de)。比如(rú)下(xià)載圖片、下(xià)載÷÷♥‍樣式表、JavaScript腳本、flash等文(wén)件 ♣←(jiàn)。大(dà)家(jiā)應該都(dō‍₩u)經曆過那(nà)個(gè)“多(duō)圖殺貓”的(de)σ 時(shí)代，加載那(nà)樣一(yī)個(gèδ♦​)網頁會(huì)花(huā)費(fèi)大(dà)量α←的(de)時(shí)間(jiān)。減少(shǎo)λ✘♠這(zhè)些(xiē)資源文(wén)件(jiàn)的(de)請(qǐng)®← ÷求數(shù)将是(shì)提高(gāo)網頁顯示效率的(de)重  §↔點。

假設用(yòng)戶家(jiā)的(de)網速是(shì)1M/秒(miǎo)♦ >↕，那(nà)麽他(tā)打開(kāi)一(yī)個(gè)網頁時(shí☆↓☆)，如(rú)果網頁文(wén)件(jiàn)Ω∑小(xiǎo)于1M，理(lǐ)論上(shàng)他(tā)可(kě)以在一φ•(yī)秒(miǎo)之內(nèi)打開(kāi)網頁。下(xià)​₹載網頁的(de)快(kuài)慢(màn)在顯示速✔£∑≠度上(shàng)占了(le)很(hěn)大(dφ∏&à)比重，所以，網頁本身(shēn)體(tǐ)←§$®積越小(xiǎo)，浏覽速度就(jiù)會"  (huì)越快(kuài)。這(zhè)就(jiù)需要→™(yào)産品、交互、設計(jì)，從(cóng)最初就(jiù)遵循盡量£♥精簡的(de)原則。

現(xiàn)在，就(jiù)揭開(kāi≥β ¶)新版微(wēi)博的(de)面紗，看(kàn)看(®↔kàn)微(wēi)博3.0和(hé)新版微→©(wēi)博的(de)區(qū)别吧(ba)。

微(wēi)博3.0是(shì)大(dà)家(jiā≥"↑♠)熟悉的(de)兩欄結構，總寬為(wèi)800'←px，有(yǒu)一(yī)級導航和(hé)二級導航、發布框、fee×→' d區(qū)、個(gè)人(rén)簡介區(qū)。新版微(wēi)博是(☆±​shì)現(xiàn)在最流行(xíng)的(de)三欄式布局，總寬950§πφ px，除以前的(de)內(nèi)容一(yī)個(gè®λ)都(dōu)不(bù)少(shǎo)之外¥∞​φ(wài)，還(hái)整合出了(le)左側導航和(hé)右側各種引導和(h§≤é)公告。所以從(cóng)理(lǐ)論上(shàng→±∑)講，雖然內(nèi)容更豐富了(le)，但(dàn)新版微(wēi)博∏★ 著(zhe)實比微(wēi)博3.0的(de)頁面體(tǐ)積大(dà)了(l​≤e)很(hěn)多(duō)。

2、什(shén)麽是(shì)bigpipe？

網上(shàng)有(yǒu)個(gè)例子(zǐ)舉πα得(de)好(hǎo)：在飯館點菜吃(chī)的(de)時(shí)候，♥π↔φ如(rú)果點了(le)四個(gè)菜，廚師π£(shī)沒有(yǒu)必要(yào)把四個(gè)菜一(yī)起炒好(hǎoε★)再上(shàng)來(lái)。微(wēi)博3.0就(jiù)是(sh€βì)這(zhè)種把所有(yǒu)菜都(dōu)επ炒好(hǎo)再上(shàng)桌的(de)網頁π✘↓σ加載模式。所以用(yòng)戶吃(chī)上×↓(shàng)菜的(de)時(shí)候，已經是(shì)第β₩↔5秒(miǎo)了(le)。現(xiàn)在新版微(wēi)博的(de)γα₽λbigpipe網頁加載模式，是(shì)炒好(hǎo)一(yī↕₩)個(gè)菜先一(yī)個(gè)菜，用(yòng) ↑↓戶可(kě)以先吃(chī)著(zhe)♠&ε"，廚師(shī)再炒第二個(gè)菜。甚•‍♣≈至可(kě)以幾個(gè)菜并發同時(shí)炒。所以用(yòng)戶吃(cε€hī)上(shàng)第一(yī)口菜的(de∑≥♣)時(shí)間(jiān)可(kě)能(néng)是(sh£<ì)第1秒(miǎo)，比之前提前了(le)很(hěn)多(duō®≈‍•)。

JS工(gōng)程師(shī)把頁面分(fēn)割成若幹個(gè)小δ≤α(xiǎo)塊（pagelet），模塊彼此獨立，把html語言轉π♥∞變為(wèi)JS語言，再把CSS通(tōng)過sty‍↓♠le的(de)方式加載進這(zhè)段代碼，而不(bù)需要(yào)用(y¶•òng)以往的(de)頭部link css地(dì)址的(de)↕≤方式取樣式。每個(gè)模塊有(yǒu)自(zì)己對(d♦©₹uì)應的(de)html、CSS、JS，一(yī)旦開(kāi)始運行(✘©xíng)模塊，就(jiù)會(huì)®↔<σ尋找到(dào)對(duì)應的(de)CSS，并顯示對(♣γ♦♣duì)應innerHTML內(nèi)容插入到(dào)對(duì)應的γ&β (de)html元素中，同時(shí)渲染出本模塊效果。&‍比如(rú)執行(xíng)到(dào)feed區(qū)域的®‌(de) id=“pl_content_homeFeed”時(shí)，樣式≥ ★↕表隻調用(yòng)了(le)feed.css。

3、為(wèi)什(shén)麽新版微(wēi)博 ÷∞‍CSS的(de)HTTP請(qǐng)求數(shù)不(bù)降反增？

通(tōng)過上(shàng)面說(shuō)的€↕£α(de)這(zhè)種模式，css被全部link到(dào)頭↔ ©部，是(shì)為(wèi)了(le)給後台代碼提供出pageleΩε'δt所需要(yào)的(de)樣式列表。以前微(w∞γ✔εēi)博3.0頭部隻link了(le)3個(gè)Cσ‌‌≥SS，新版微(wēi)博首頁頭部卻需要(yào)link1÷±0多(duō)個(gè)css。雖然加載文(wén)×↔件(jiàn)多(duō)了(le)，新版微(wēi)博CSS₩∞加載請(qǐng)求數(shù)反而高(gāo)于v3，看(kàn)÷×似yslow降級了(le)（這(zhè)個(gè)數(shù)φ✔據已經不(bù)能(néng)說(shuō)明(m ∞γíng)任何問(wèn)題了(le)）。但(d★<♣àn)實際上(shàng)新版微(wēi)博CSS沒有(yǒ​> u)像以往一(yī)樣合并起來(lái)，而是(shì)用(yòng)一(yī ₹↔)個(gè)加載一(yī)個(gè)，CSS和(hé•&←)JS被分(fēn)配到(dào)不(b→$ù)同流水(shuǐ)線中，模塊的(de)加載變成并行(xíng)的(de←×)，先執行(xíng)完的(de)模塊先顯示出來(láiσ&)。所以新版微(wēi)博CSS渲染的(de)總時(shí)間(jiān)并¶π≥↑不(bù)超過V3CSS渲染的(de)總時(shí)間(jiān♥‍↔")，速度反而快(kuài)了(le)很(hěn)多(duō€φ¶≥)，減少(shǎo)了(le)視(shì)覺等待。

上(shàng)面這(zhè)張表格，來(láiβ™δ←)自(zì)yslow的(de)分(fēn)析♠♣σε。我們通(tōng)過把頁面切成細小(xiǎo)模塊寫β≤ ✔樣式的(de)做(zuò)法，雖然請(qǐng)求數(shù)比以前大∞¥→β(dà)了(le)8倍，但(dàn)總大(dà)小(φ>Ωxiǎo)上(shàng)直降20K。

将多(duō)個(gè)CSS合并的(de)做(z₩€λ♠uò)法固然可(kě)以減少(shǎo)請(qǐng)求，但(dàn)對(du"♠ì)上(shàng)億用(yòng)戶的(de)微(wēiγ<×★)博頁面來(lái)說(shuō)，完成合并也(yě)許會(huì©π↑)帶來(lái)5%速度的(de)提升。但(dàn©♠✘€)是(shì)如(rú)果按bigpip•δ™♠e模式，即使http請(qǐng)求數(shù♠£> )提高(gāo)了(le)，但(dàn)是(shì)整體(tǐ)的(d•πφe)速度也(yě)許是(shì)之前的(de)50%←←​±。

二、對(duì)CSS的(de)優化(huà)處理(l>™♦§ǐ)

1、提取公用(yòng)模塊或公用(yòng)元素，并←♣ ✔反複調用(yòng)

如(rú)果用(yòng)戶每次訪問(wèn)微(w∞¥≤≥ēi)博首頁時(shí)，就(jiù)重新下(xià)載讀(dú$ )取CSS文(wén)件(jiàn)。這(zhè)就(ji★λ ù)會(huì)造成給服務器(qì)帶來(lái)δ¥‌₩額外(wài)壓力且用(yòng)戶重複讀(d"↕λ"ú)取耗時(shí)。新版微(wēi)博的(de)做(zuò)法•∏是(shì)，把模塊分(fēn)為(wèi)全局級模塊和(hé)頁面級模塊，↓♣π"首頁是(shì)全站(zhàn)的(de)核心，所★ "↑有(yǒu)模塊都(dōu)是(shì)重要(yào)且重複性高(gā≈ ≤¶o)的(de)，所以首頁的(de)所以模塊都(dōu)是(shì ✘∑λ)全局級模塊。首頁所需要(yào)的(de)C≈↔SS被整理(lǐ)成一(yī)個(gè)pl列表反饋給工(gōng)♦&§程師(shī)，等待處理(lǐ)。而一(yī)些(xiē)非公共的∑ φ(de)css模塊樣式被單獨寫在屬于本頁面的(de)文(≠&wén)件(jiàn)裡(lǐ)，這(zhè)樣就(ji€≤ù)最大(dà)化(huà)的(de)節省•∞∞了(le)文(wén)件(jiàn)大(dà)小(xiǎo‌£>¥)及利用(yòng)率。這(zhè)麽做(zuò)還(hái)有(yǒu)λ∞∏&一(yī)個(gè)好(hǎo)處，就(jiù)是(sh"≈ì)公共模塊樣式被調用(yòng)過後，會(☆♦huì)在浏覽器(qì)裡(lǐ)留下(xià)緩存。調用(yòn₩₹ ×g)最頻(pín)繁的(de)模塊，反而樣式被最快(kuài↓☆®)的(de)加載進來(lái)。

舉個(gè)簡單的(de)例子(zǐ)：

.clearfix:after{content: ".";display: €φ‌block;height: 0;clear: both;v₩"isibility: hidden;}

.clearfix {display: inline-block;♦<π‍}

這(zhè)是(shì)一(yī)段全局代碼，基本上(shàng)每個(gè)​∞頁面都(dōu)會(huì)用(yòng)到(dào)這(zhè)個(gè‍☆•←)類，我們就(jiù)沒必要(yào)把這(zhè)句寫在每個(gè)網™✔×頁的(de)CSS裡(lǐ)面，隻把它提取到≈γγ↔(dào)base.css裡(lǐ)，并方便進行(xíng)皮膚管理(lβ←→®ǐ)。

又(yòu)比如(rú)，首頁右側欄有(yǒu)個(gè)₽α“可(kě)能(néng)感興趣的(de)活動♣✔ ”類似的(de)模塊都(dōu)是(shì)采用(yòng)獨立ε"的(de)div容器(qì)，這(zhè)個(gè)段落的(de)詳細代碼，✔₹如(rú)果寫在公用(yòng)CSS文(wén)件(jiàn)裡(lǐ)，肯ε λ§定就(jiù)浪費(fèi)了(le)。

2、盡可(kě)能(néng)少(shǎo¥§∑)的(de)使用(yòng)css images

能(néng)通(tōng)過代碼或字符實現(xiàn)的(de)，就(jiù↑∞)不(bù)用(yòng)圖片去(qù)解決。比如(rú•§ ≈)“可(kě)能(néng)感興趣的(de)人(rén)”展開(kāi)氣泡✔ ±上(shàng)下(xià)三角、返回頂部的(de)箭頭、“更多(duō)”後δ↕π€面的(de)»符号等。既減小(xiǎo)CSS圖片請€≈↕>(qǐng)求，又(yòu)不(bù)會(huì)面臨若幹套皮膚升級困難的↑‍σ(de)問(wèn)題，僅通(tōng)過對(duì↓σ™≈)CSS的(de)color、backgroud等屬性的(α de)控制(zhì)，就(jiù)可(kě)以換色了(le)。

可(kě)以看(kàn)看(kàn)按這(zhè)個(g↔☆☆©è)做(zuò)法之後明(míng)顯的(∏×δ de)優勢，下(xià)圖來(lái)自(zì)ys‌>δlow的(de)statistics。微(wēi)博3.0的(de)css ≈∏image總大(dà)小(xiǎo)為(wèi)  970.1K，新版微(wēi)博的(de)css image總Ω•‍大(dà)小(xiǎo)為(wèi)693.9K，總量直降3©φ0%。

3、盡量使用(yòng)CSS3等新技(jì)術(shù)ε™π≥

在新版微(wēi)博裡(lǐ)，我們制(zhì)定了(le)使用(yò£∞≠$ng)CSS3的(de)原則，即非圖片類的(de)×β ₽元素效果圖，如(rú)圓角、陰影(yǐng)、漸變、半透等效果，可( εkě)以通(tōng)過樣式控制(zhì)，而無需切圖的¥÷ ↕(de)元素，在得(de)到(dào)設計(jì)師↓®≤‌(shī)認可(kě)後，不(bù)用(yòng)圖片，隻做(zuò)樣♥λ式控制(zhì)。滿足高(gāo)級浏覽器(qì)的(deσ≤β↕)視(shì)覺，ie系列不(bù)能(néng)顯示的(de)，有¥<(yǒu)原則的(de)放(fàng)棄。不(bù)僅為(wèi)速‍↕£度助力，還(hái)在放(fàng)棄低(dī)級浏覽器(qì)的α₽(de)大(dà)方向前進一(yī)步。€‌'₹

4、鼠标滑上(shàng)效果改用(yòng)僞類實現(£π♣♦xiàn)

在逐步放(fàng)棄ie6的(de)事(shì)情上(sε¥↕"hàng)，新版微(wēi)博已經盡最大(dà)的(de)努力做(z©™uò)了(le)。為(wèi)了(le)保證各浏δ↓♥γ覽器(qì)的(de)完全兼容，微(wēi)博3.0以前我們曾經放(fàn™πg)棄讓CSS實現(xiàn)鼠标滑上(shàng)效果，而由JS控制(zh™↓ì)。随著(zhe)ie6使用(yòng)率的(de)日(rì)益降低‌λ(dī)，新版微(wēi)博又(yòu)一(yī)大₹<≠(dà)革新就(jiù)是(shì)重新使用(yòng)僞類，僅通(tōγ←‌¥ng)過CSS就(jiù)實現(xiàn)的(de)浏覽器(qì<↕ ©)原生(shēng)效果，不(bù)僅計(jε☆↑ì)算(suàn)速度比計(jì)算(suàn)一(yī)個(gè)JS快(✔±π×kuài)得(de)多(duō)，也(yě)終于放(fàng)棄了(le←∞)低(dī)端的(de)ie6

每個(gè)單條feed在鼠标滑上(shàng)時(shí)，都(γ•≠dōu)會(huì)顯示舉報(bào)和(hé)删除鏈接。這(zhè)是(sh §∞★ì)交互設計(jì)出于對(duì)頁面呈現(xiàn)內☆$(nèi)容的(de)視(shì)覺舒适感所做(zuò)的(de)設計(jì↓≥≤)，我們通(tōng)過對(duì)塊元素直接寫僞類，實現(xiàn)這(≤↕¶"zhè)個(gè)效果，不(bù)需要(yào)再通(tōng)過JS了(le★≠α)。ie6呢(ne)？就(jiù)讓它一(yī)直擺著(zhe)去(qùδ¥"≠)吧(ba)。

三、對(duì)dom結構的(de)優化(huà)處理(lǐ)

1、bigpipe模式重構并優化(huà)垃圾代碼

v2從(cóng)v1來(lái)，v3從(cóng)v2來(lái)，在v≠₩π₹3不(bù)堪重負的(de)時(shí)候，新版微(™★≥♣wēi)博的(de)代碼優化(huà)誓'♥在必行(xíng)了(le)。所以我們并沒有&₽(yǒu)沿用(yòng)之前的(de)結構和(hé)CSS，而是(shì)直€↓Ω接推翻v3，重構新版微(wēi)博。和(hé£∏ )JS工(gōng)程師(shī)一(yī)起搭建的(d<Ω∑e)bigpipe模式，把頁面分(fēn)成細®✘小(xiǎo)的(de)塊，每一(yī)個(gè)模塊對(duì)應一® &♠(yī)個(gè)CSS。代碼寫到(dào)最優，結構和(hé)樣式→↔₹♠完全分(fēn)離(lí)，并杜絕內(nèi)聯調用(y α÷£òng)的(de)方式。下(xià)圖示意了(le)我們用(yòng)模↕ε♠塊配頁面的(de)最終效果，模塊可(kě)以被細分≠✔☆¶(fēn)為(wèi)如(rú)此程度。模塊拆的(de)細，複用(γ&¶ yòng)性被提高(gāo)。

2、盡量減少(shǎo)代碼體(tǐ)積

由于代碼行(xíng)數(shù)越少(shǎoβ®)體(tǐ)積就(jiù)越小(xiǎo)，所以我們↕ ‌♦這(zhè)次想辦法減少(shǎo)網頁代碼的(de)行(xíng)數¶©π₽(shù)。相(xiàng)同或類似的(de)模塊，說(shu&πō)服設計(jì)師(shī)把視(shì)覺規範統一(yī)。我們隻通≤"σ(tōng)過對(duì)CSS補丁，覆蓋原樣式，并不(bù)改ε↑♠‍變頁面的(de)dom結構，直接降低(dī)重複代碼率。舉個(gè✔ >)例子(zǐ)，“我的(de)首頁”和(hé£ε​)“我的(de)profile頁”，同樣是≈®™(shì)有(yǒu)feed區(qū)®€±域的(de)，區(qū)别是(shì)但(dàn)一(yī)個(gè)有(yǒ✔<u)頭像，一(yī)個(gè)沒有(yǒu)頭像。隻需要(yào)一(yī↓‍α>)套feed.css代碼，然後在“我的(de)profile頁”獨立的(de£α©)頁面級CSS中，打個(gè)去(qù)掉頭像的(φδde)補丁即可(kě)。

3、首頁中杜絕Table布局和(hé)ifr ≥βλame

杜絕首頁中出現(xiàn)Table布局。因為(wèi)傳統的(de)tab→£↓$le布局，是(shì)把內(nèi)容全部加載完成後，才渲染×↔樣式，延遲效果嚴重。而iframe頁面框架，是(shì)非語義的(de)， ÷§即使為(wèi)空(kōng)也(yě)會(huì)有(yǒu)€≤ π較大(dà)資源消耗，還(hái)會(hβγ¥<uì)阻止頁面的(de)onload。

四、對(duì)圖片的(de)優化(huà)€‌'π處理(lǐ)

1、圖片的(de)存儲格式

我們改變了(le)v3的(de)做(zuò​​Ω₩)法，把icon類小(xiǎo)圖片或背景類圖片，由以前的(de±×≤)gif存儲盡可(kě)能(néng)多(duō)的(de)轉為(wèi ≈  )png8的(de)存儲，這(zhè)是(shì)個(gè)減☆φ小(xiǎo)圖片體(tǐ)積的(de)好(hǎo)辦法。Png8有(yǒ‌‍ u)gif的(de)所有(yǒu)特點，但(d€∞€àn)是(shì)相(xiàng)比gif，png8的(∞∞"'de)優勢是(shì)alpha透明(míng)和₽£​(hé)更優的(de)壓縮。png24全透明(míφ ng)的(de)圖片，隻給支持的(de)浏覽器(qì÷§'≈)使用(yòng)，ie6在不(bù)影(yǐng)響視(shδ >♥ì)覺的(de)前提下(xià)，改為(wèi)gif呈現(xiàn)。我們還 •‍(hái)會(huì)利用(yòng)的(de)圖片優化(huà)工(gō©'ng)具處理(lǐ)圖片，保證效果但(dàn)卻降低(d×™♠ī)文(wén)件(jiàn)大(dà)小(xi∑∏←£ǎo)。下(xià)圖是(shì)主鍵類頁面的(de)im★​ages文(wén)件(jiàn)夾示意÷σ圖，除必須獨立的(de)icon外(wài)，png類型的(de)圖片比重π£<©大(dà)得(de)多(duō)。這(zhè)在之  ♥₽前的(de)V3并沒有(yǒu)做(zuò)®✘‌<到(dào)。

2、css sprites
在圖片的(de)拼合方面，我們是(shì)持之以恒 •←↔這(zhè)麽做(zuò)的(de)。在v3裡(lǐ)，我β♠¶©們把所有(yǒu)首頁和(hé)profile頁裡(lǐ ©)出現(xiàn)的(de)背景類圖片都(dōu)拼合到(dào±<)一(yī)張大(dà)圖上(shàng)，新版微(wēi)博比之←£←前高(gāo)明(míng)在，我們把放(fàβ♦ng)置文(wén)件(jiàn)夾細分♦•€≤(fēn)。假設我們把公用(yòng)型放→δ¥←(fàng)入common，頁面類放(fàng)入in​<dex，換膚類放(fàng)入skin。把sprites拆分(fēn)的(φ≈de)更細，盡可(kě)能(néng)在&∏加載首頁時(shí)，減少(shǎo)圖片請(qǐng)求數(shù)。

3、大(dà)圖片、小(xiǎo)圖片

對(duì)于大(dà)背景圖，我們的(de)做(zuò)法是(shì)φ∑不(bù)分(fēn)割成小(xiǎo)區(qū)塊兒(ε✘αér)的(de)。首先的(de)因為(wèi)，原本一(yī)個(gè)圖片的★"(de)請(qǐng)求數(shù)會(huì)變成多(duō)個(g‌&è)。另外(wài)，大(dà)約80%以上(shàng)調±​用(yòng)圖片所消耗的(de)時(shí)間(jiān€α)，是(shì)用(yòng)來(lái)檢索 ♣ε緩存和(hé)确定鏈接是(shì)否有(yǒu)效的(de)阻塞時(shí)間 Ωα(jiān)。也(yě)就(jiù)是(shì)說(shuō)，如(rú)"¥✘φ果把一(yī)個(gè)大(dà)圖片，切成若幹小(xiǎo‌Ω)圖片，雖然解決了(le)圖片的(de)加載時(shí)間(jiān)，卻花("€β​huā)費(fèi)了(le)更多(duō)的(de)阻塞∞ £時(shí)間(jiān)。

4、在已知(zhī)寬高(gāo)的(de)圖片标簽內(nè ©≥♠i)，直接指定寬高(gāo)。

Feed區(qū)域裡(lǐ)頭像需求是α ©‍(shì)50*50的(de)，所以後台直接吐出這(z¶ ∏εhè)個(gè)尺寸的(de)圖片。在已知(z≠βhī)寬高(gāo)的(de)情況的(de)，我✘ 們在img标簽中直接指定了(le)height和(hé)wi✔↓↓dth參數(shù)。因為(wèi)如(rú)果浏覽± 器(qì)沒有(yǒu)找到(dào)這(z‌∑₹‍hè)兩個(gè)參數(shù)，它需要(δ♥yào)一(yī)邊下(xià)載圖片一($€$yī)邊計(jì)算(suàn)大(dà)小(xiǎo)，首頁有(yǒu)多( σ<duō)少(shǎo)條feed就(jiù)ε↓有(yǒu)多(duō)少(shǎo)個(gè)頭像，浏覽器(qì∞★")需要(yào)不(bù)斷地(dì)調整計(jì)算(su ☆δ"àn)。當浏覽器(qì)知(zhī)道(dào)了(le λ)height和(hé)width參數(shù)後，即使圖片暫時(s×≠¥hí)無法顯示，頁面上(shàng)也(yě)會(huì)預留空(kōn §∑↕g)位，繼續加載後面的(de)內(nèi)容。

新版上(shàng)線後，不(bù)少(sh₽"ǎo)公測用(yòng)戶的(de)反饋速度↑✔變快(kuài)了(le)，微(wēi)博浏覽起來(lái)更順暢了(le)。§   這(zhè)不(bù)是(shì)我們頁面重構組的(de)功勞，是(sh∞‍★ì)整個(gè)微(wēi)博團隊，或者說(shuō)是(shì)₽'bigpipe思想的(de)功勞。但(dàn)“速度快(kuà≥±σσi)了(le)”這(zhè)句話(huà)本身(¥£€shēn)，就(jiù)是(shì)對(duì)我們團隊工(g≈αōng)作(zuò)最好(hǎo)的(de)褒獎，對(duì)我們參與開(k↓€φāi)發的(de)團隊成員(yuán)的 ‍(de)最好(hǎo)的(de)鼓勵。抓住産₽↓Ω↓品改版的(de)機(jī)會(huì)，γ§π£就(jiù)是(shì)自(zì)己對(duì)優化(huà)σ>γ的(de)研究和(hé)經驗的(de)積累落實到(dΩ✔↑σào)細節的(de)機(jī)會(huì)。雖然還(hái)任重道(dào)€≥&☆遠(yuǎn)。