百度移動端首頁秒開學習

百度首頁秒開

咱們打開手機端看百度首頁，搜索框，新聞，圖片，tab標籤... 秒開... 那他是怎麼作到呢？

• 靜態文件放置

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

• 緩存

對於一些頁面不變的靜態文件，例如html/css/javascript若是有些不變的，就會把它存到本地，例如localStorage，能夠經過對標籤添加一些屬性data-local='aaa',來標識內容，等到，再次加載的時候，就從localStorage中找到對應的內容，進行渲染

存：
<script>
    function cacheOne(attrid) {
        var content = document.querySelector('[data-local="' + attrid + '"]').outerHTML;
        localStorage.setItem(attrid, content);
    }
    cacheOne('aaa');
</script>
取：
<script type="text/javascript" data-local="test1">
    function readOne(attrid) {
        var content = localStorage.getItem(attrid);
        document.querySelector('[data-local="' + attrid + '"]').outerHTML = content;
    }
    readOne('aaa');
</script>

• 外鏈
  若是都存本地的話，那手機內存會暴，因此有些靜態文件又經過一個藉口返回，經過外鏈一些靜態資源和本地存的資源減小了頁面加載的時間，可是問題又來了，若是請求的資源不一樣於本地存的，那豈不又炸了...
  因此，會給每一個文件以本身的內容生成的版本號爲戳，標識本身的惟一性，每次服務端返回頁面時，會把當前在服務器上的全部靜態文件版本號，返給前端，首屏加載完成後，會用這些版本號與local中進行一一比較，若是發現不一致，就發起一個合併請求，這樣能夠保證每一個文件的緩存與版本迭代，同時，避免了過多的外鏈。
• 緩存Dom
  不變的數據，例如dom就緩存，render樹基本不發生變化就進行緩存，對於可變的就不能緩存
• 使用iconfont
  若是有不少icon圖標咱們最好使用iconfont，節省一些資源
• 卡片的異步加載與緩存
  首屏顯示幾個卡片，等到下拉的時候在加載更多的卡片
• 不在首屏的就要異步化
  固然，這種是咱們常常用到的，首屏人人都會看到 可是滑到底部就人少了，因此這種狀況咱們就按需加載
• 少許靜態文件的域名
  例如一些iconfont，圖片就放在別的域名下，雖然節省了DNS的解析，但請求圖片的時候會攜帶cookie因此咱們要減小cookie，來提高性能
• 極小的圖片base64化
  小的圖片咱們base64化存到本地localStorage中，又能夠節省網絡請求

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