當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

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

發布時間：2025/3/21 HTML 18 豆豆

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

1.靜態文件放置

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

2.緩存 cookie,localstorage

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

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

下次獲取本地存儲：

那什么時候讀localStorage，什么時候寫localStorage

在寫入localStorage的時候，同時在cookie中寫下當前所有要緩存的版本號，cookie會在同步訪問的時候傳送到服務端的，而localStorage不會，所以服務端決定要傳送內容還是傳送讀取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">這部分內容非常多將會緩存起來這部分內容非常多將會緩存起來這部分內容非常多將會緩存起來</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）等靜態文件通過一個接口返回。

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

4.緩存DOM

模版也會緩存到localStorage中

5.使用iconfont或字體圖標

6.按需加載與緩存

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

7.減少DNS解析

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

8.極小圖片轉成base64

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。