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