成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

百度移動端首頁秒開學(xué)習(xí)

xuhong / 945人閱讀

摘要：百度首頁秒開我們打開手機(jī)端看百度首頁，搜索框，新聞，圖片，標(biāo)簽秒開那他是怎么做到呢靜態(tài)文件放置百度首頁是沒有外鏈的，，代碼在上線之前都編譯到了里緩存對于一些頁面不變的靜態(tài)文件，例如如果有些不變的，就會把它存到本地，例如，可以通過對標(biāo)簽添加一

百度首頁秒開

我們打開手機(jī)端看百度首頁，搜索框，新聞，圖片，tab標(biāo)簽... 秒開... 那他是怎么做到呢？

靜態(tài)文件放置

百度首頁是沒有外鏈的，js，css代碼在上線之前都編譯到了html里

緩存

對于一些頁面不變的靜態(tài)文件，例如html/css/javascript如果有些不變的，就會把它存到本地，例如localStorage，可以通過對標(biāo)簽添加一些屬性data-local="aaa",來標(biāo)識內(nèi)容，等到，再次加載的時候，就從localStorage中找到對應(yīng)的內(nèi)容，進(jìn)行渲染

存：

?。?

外鏈
如果都存本地的話，那手機(jī)內(nèi)存會暴，所以有些靜態(tài)文件又通過一個借口返回，通過外鏈一些靜態(tài)資源和本地存的資源減少了頁面加載的時間，但是問題又來了，如果請求的資源不同于本地存的，那豈不又炸了...
所以，會給每個文件以自己的內(nèi)容生成的版本號為戳，標(biāo)識自己的唯一性，每次服務(wù)端返回頁面時，會把當(dāng)前在服務(wù)器上的所有靜態(tài)文件版本號，返給前端，首屏加載完成后，會用這些版本號與local中進(jìn)行一一比較，如果發(fā)現(xiàn)不一致，就發(fā)起一個合并請求，這樣可以保證每個文件的緩存與版本迭代，同時，避免了過多的外鏈。

緩存Dom
不變的數(shù)據(jù)，例如dom就緩存，render樹基本不發(fā)生變化就進(jìn)行緩存，對于可變的就不能緩存

使用iconfont
如果有很多icon圖標(biāo)我們最好使用iconfont，節(jié)省一些資源

卡片的異步加載與緩存
首屏顯示幾個卡片，等到下拉的時候在加載更多的卡片

不在首屏的就要異步化
當(dāng)然，這種是我們經(jīng)常用到的，首屏人人都會看到 但是滑到底部就人少了，所以這種情況我們就按需加載

少量靜態(tài)文件的域名
例如一些iconfont，圖片就放在別的域名下，雖然節(jié)省了DNS的解析，但請求圖片的時候會攜帶cookie所以我們要減少cookie，來提升性能

極小的圖片base64化
小的圖片我們base64化存到本地localStorage中，又可以節(jié)省網(wǎng)絡(luò)請求

原文 https://segmentfault.com/a/11...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92279.html

相關(guān)文章

  • [聊一聊系列]聊一聊百度移動端首頁前端速度那些事兒

    摘要：要快，但是我們的服務(wù)也必須萬無一失，后續(xù)我會分享百度移動端首頁的前端架構(gòu)設(shè)計那么這樣的優(yōu)化，是如何做到的呢，又如何兼顧穩(wěn)定性，架構(gòu)性，與速度呢別急，讓我們把這些優(yōu)化一一道來。百度移動端首頁的很多就是這樣緩存在客戶端的。 歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/fronte...

    The question 評論0 收藏0

  • 結(jié)合 Google quicklink，react 項目實(shí)現(xiàn)頁面秒開

    摘要：最后，狀態(tài)管理與同構(gòu)實(shí)戰(zhàn)這本書由我和前端知名技術(shù)大佬顏海鏡合力打磨，凝結(jié)了我們在學(xué)習(xí)實(shí)踐框架過程中的積累和心得。 對于前端資訊比較敏感的同學(xué)，可能這兩天已經(jīng)聽說了 GoogleChromeLabs/quicklink這個項目：它由 Google 公司著名開發(fā)者 Addy Osmani 發(fā)起，實(shí)現(xiàn)了：在空閑時間預(yù)獲取頁面可視區(qū)域內(nèi)的鏈接，加快后續(xù)加載速度。如果你沒有聽說過 Addy Os...

    warkiz 評論0 收藏0

  • vue項目首頁加載速度優(yōu)化

    摘要：凡是做的項目，特別是移動端的項目，首屏加載速度必定是一個繞不過去的話題。大家知道這些依賴庫的文件都會被一起打包到那個文件里面，如果這些你的第三方依賴庫很多，很大的話，那就會導(dǎo)致這個文件很大，那首屏加載的速度肯定會被拖慢。 凡是做SPA的項目，特別是移動端的SAP項目，首屏加載速度必定是一個繞不過去的話題。接下來我就我們項目里的一些實(shí)踐來做一下總結(jié)。希望拋磚引玉，如果各位有更好的方案，不...

    rickchen 評論0 收藏0

  • 性能優(yōu)化全新思路！實(shí)踐騰訊、字節(jié)、阿里、百度、網(wǎng)易等互聯(lián)網(wǎng)公司項目實(shí)戰(zhàn)+案例分析（附PDF源碼）

    摘要：不努力不奮斗，可能就會在基層一輩子止步不前。不過，只一句，如果你還在做這一行，還是一名程序猿媛，想走上坡路的你，也許我這到手的十幾家一線互聯(lián)網(wǎng)公司性能優(yōu)化項目實(shí)戰(zhàn)可能會對你有所幫助。 ...

    ytwman 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<