當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

首页优化加载(聊聊百度移动端首页前端优化)

發(fā)布時間：2025/3/21 HTML 13 豆豆

生活随笔收集整理的這篇文章主要介紹了首页优化加载(聊聊百度移动端首页前端优化) 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1.靜態(tài)文件放置

百度首頁沒有外鏈css，js也很少，是為了減少http請求，一般首屏所需要的js與css，全部在上線前編譯內(nèi)聯(lián)至HTML中，如下圖：

2.緩存 cookie,localstorage

如果html,css,js一直不變，就直接緩存到客戶端localstorage中去，下次加載如果只需讀取本地存儲的內(nèi)容。

<!DOCTYPE HTML> <html><head><meta charset="utf-8"/></head><body><div data-local="test1">這部分內(nèi)容非常多將會緩存起來這部分內(nèi)容非常多將會緩存起來這部分內(nèi)容非常多將會緩存起來</div><script>function cacheOne(attrid) {var content = document.querySelector('[data-local="' + attrid + '"]').outerHTML;localStorage.setItem(attrid, content);}cacheOne('test1');</script></body> </html>

下次獲取本地存儲：

那什么時候讀localStorage，什么時候?qū)憀ocalStorage

在寫入localStorage的時候，同時在cookie中寫下當(dāng)前所有要緩存的版本號，cookie會在同步訪問的時候傳送到服務(wù)端的，而localStorage不會，所以服務(wù)端決定要傳送內(nèi)容還是傳送讀取localStorage的代碼就靠cookie了，這里簡單使用php試驗下：

如果cookie中有version，證明存儲過cookie，有本地存儲localStorage,只需要傳讀取localStorage并且寫入的代碼

<!DOCTYPE HTML> <html><head><meta charset="utf-8"/></head><body><?php $curversion='1'?><?php if ($_COOKIE['localversion'] !== $curversion) {?> <div data-local="test1">這部分內(nèi)容非常多將會緩存起來這部分內(nèi)容非常多將會緩存起來這部分內(nèi)容非常多將會緩存起來</div><script>function cacheOne(attrid) {var content = document.querySelector('[data-local="' + attrid +'"]').outerHTML ;localStorage.setItem(attrid, content);}cacheOne('test1');document.cookie="localversion=<?php echo $curversion?>;";</script><?php } else {?><script type="text/javascript" data-local="test1">function readOne(attrid) {var content = localStorage.getItem(attrid);document.querySelector('[data-local="' + attrid + '"]').outerHTML = content ;}readOne('test1');</script><?php }?></body> </html>

3.外鏈（將所有js/css）等靜態(tài)文件通過一個接口返回。

可以達(dá)到合并外鏈請求目的，又可以將這些靜態(tài)文件緩存到localStorage中。
每個文件都會返回個版本號。
前端首屏加載完成后，會用這些版本號與localStorage中進(jìn)行一一對比，發(fā)現(xiàn)不一致的js/css文件，會一起發(fā)送一個合并請求，更新下緩存內(nèi)容，保證每個文件的緩存與版本迭代，同時避免了過多的外鏈。

4.緩存DOM

模版也會緩存到localStorage中

5.使用iconfont或字體圖標(biāo)

6.按需加載與緩存

先加載首屏，用戶下拉在加載更多，將不變的html/css/js存儲到了localStorage中，異步加載底部內(nèi)容時，如果內(nèi)容不變，服務(wù)端就不要返回了。

7.減少DNS解析

少量的靜態(tài)文件域名，百度logo以及iconfont圖片域名均是在m.baidu.com域下的，這樣節(jié)省了DNS的解析。

8.極小圖片轉(zhuǎn)成base64

對于小于1k的圖片，我們將其轉(zhuǎn)換為base64，并寫入csss中，一起緩存到localStorage中去，這樣即節(jié)省網(wǎng)絡(luò)請求，同時圖片也可以緩存到本地。

總結(jié)

以上是生活随笔為你收集整理的首页优化加载(聊聊百度移动端首页前端优化)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。