資訊專欄INFORMATION COLUMN
摘要：百度首頁(yè)秒開(kāi)我們打開(kāi)手機(jī)端看百度首頁(yè)，搜索框，新聞，圖片，標(biāo)簽秒開(kāi)那他是怎么做到呢靜態(tài)文件放置百度首頁(yè)是沒(méi)有外鏈的，，代碼在上線之前都編譯到了里緩存對(duì)于一些頁(yè)面不變的靜態(tài)文件，例如如果有些不變的，就會(huì)把它存到本地，例如，可以通過(guò)對(duì)標(biāo)簽添加一
百度首頁(yè)秒開(kāi)
我們打開(kāi)手機(jī)端看百度首頁(yè)，搜索框，新聞，圖片，tab標(biāo)簽... 秒開(kāi)... 那他是怎么做到呢？
靜態(tài)文件放置
百度首頁(yè)是沒(méi)有外鏈的，js，css代碼在上線之前都編譯到了html里
緩存
對(duì)于一些頁(yè)面不變的靜態(tài)文件，例如html/css/javascript如果有些不變的，就會(huì)把它存到本地，例如localStorage，可以通過(guò)對(duì)標(biāo)簽添加一些屬性data-local="aaa",來(lái)標(biāo)識(shí)內(nèi)容，等到，再次加載的時(shí)候，就從localStorage中找到對(duì)應(yīng)的內(nèi)容，進(jìn)行渲染
存： ?。?
外鏈
如果都存本地的話，那手機(jī)內(nèi)存會(huì)暴，所以有些靜態(tài)文件又通過(guò)一個(gè)借口返回，通過(guò)外鏈一些靜態(tài)資源和本地存的資源減少了頁(yè)面加載的時(shí)間，但是問(wèn)題又來(lái)了，如果請(qǐng)求的資源不同于本地存的，那豈不又炸了...
所以，會(huì)給每個(gè)文件以自己的內(nèi)容生成的版本號(hào)為戳，標(biāo)識(shí)自己的唯一性，每次服務(wù)端返回頁(yè)面時(shí)，會(huì)把當(dāng)前在服務(wù)器上的所有靜態(tài)文件版本號(hào)，返給前端，首屏加載完成后，會(huì)用這些版本號(hào)與local中進(jìn)行一一比較，如果發(fā)現(xiàn)不一致，就發(fā)起一個(gè)合并請(qǐng)求，這樣可以保證每個(gè)文件的緩存與版本迭代，同時(shí)，避免了過(guò)多的外鏈。
緩存Dom
不變的數(shù)據(jù)，例如dom就緩存，render樹(shù)基本不發(fā)生變化就進(jìn)行緩存，對(duì)于可變的就不能緩存
使用iconfont
如果有很多icon圖標(biāo)我們最好使用iconfont，節(jié)省一些資源
卡片的異步加載與緩存
首屏顯示幾個(gè)卡片，等到下拉的時(shí)候在加載更多的卡片
不在首屏的就要異步化
當(dāng)然，這種是我們經(jīng)常用到的，首屏人人都會(huì)看到 但是滑到底部就人少了，所以這種情況我們就按需加載
少量靜態(tài)文件的域名
例如一些iconfont，圖片就放在別的域名下，雖然節(jié)省了DNS的解析，但請(qǐng)求圖片的時(shí)候會(huì)攜帶cookie所以我們要減少cookie，來(lái)提升性能
極小的圖片base64化
小的圖片我們base64化存到本地localStorage中，又可以節(jié)省網(wǎng)絡(luò)請(qǐng)求
原文 https://segmentfault.com/a/11...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92279.html
摘要：要快，但是我們的服務(wù)也必須萬(wàn)無(wú)一失，后續(xù)我會(huì)分享百度移動(dòng)端首頁(yè)的前端架構(gòu)設(shè)計(jì)那么這樣的優(yōu)化，是如何做到的呢，又如何兼顧穩(wěn)定性，架構(gòu)性，與速度呢別急，讓我們把這些優(yōu)化一一道來(lái)。百度移動(dòng)端首頁(yè)的很多就是這樣緩存在客戶端的。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fronte...
摘要：最后，狀態(tài)管理與同構(gòu)實(shí)戰(zhàn)這本書由我和前端知名技術(shù)大佬顏海鏡合力打磨，凝結(jié)了我們?cè)趯W(xué)習(xí)實(shí)踐框架過(guò)程中的積累和心得。 對(duì)于前端資訊比較敏感的同學(xué)，可能這兩天已經(jīng)聽(tīng)說(shuō)了 GoogleChromeLabs/quicklink這個(gè)項(xiàng)目：它由 Google 公司著名開(kāi)發(fā)者 Addy Osmani 發(fā)起，實(shí)現(xiàn)了：在空閑時(shí)間預(yù)獲取頁(yè)面可視區(qū)域內(nèi)的鏈接，加快后續(xù)加載速度。如果你沒(méi)有聽(tīng)說(shuō)過(guò) Addy Os...
摘要：凡是做的項(xiàng)目，特別是移動(dòng)端的項(xiàng)目，首屏加載速度必定是一個(gè)繞不過(guò)去的話題。大家知道這些依賴庫(kù)的文件都會(huì)被一起打包到那個(gè)文件里面，如果這些你的第三方依賴庫(kù)很多，很大的話，那就會(huì)導(dǎo)致這個(gè)文件很大，那首屏加載的速度肯定會(huì)被拖慢。 凡是做SPA的項(xiàng)目，特別是移動(dòng)端的SAP項(xiàng)目，首屏加載速度必定是一個(gè)繞不過(guò)去的話題。接下來(lái)我就我們項(xiàng)目里的一些實(shí)踐來(lái)做一下總結(jié)。希望拋磚引玉，如果各位有更好的方案，不...
摘要：不努力不奮斗，可能就會(huì)在基層一輩子止步不前。不過(guò)，只一句，如果你還在做這一行，還是一名程序猿媛，想走上坡路的你，也許我這到手的十幾家一線互聯(lián)網(wǎng)公司性能優(yōu)化項(xiàng)目實(shí)戰(zhàn)可能會(huì)對(duì)你有所幫助。 ...
閱讀 2042·2021-11-25 09:43
閱讀 716·2021-10-11 10:58
閱讀 1815·2019-08-30 15:55
閱讀 1789·2019-08-30 13:13
閱讀 800·2019-08-29 17:01
閱讀 1904·2019-08-29 15:30
閱讀 905·2019-08-29 13:49
閱讀 2233·2019-08-29 12:13
