百度智能小程序 性能優(yōu)化還有什么

骨架屏

為什么要在頁面中使用骨架屏

提前加載頁面的骨架屏，可以減少用戶的白屏等待時長。百度智能小程序提供了骨架屏機制（小程序框架骨架屏比業(yè)務(wù)中創(chuàng)建的骨架屏加載時機更靠前，推薦使用小程序提供的框架骨架屏），使用這一機制，可以給用戶帶來更好的用戶體驗。下面將介紹如何使用骨架屏這一機制。

骨架屏優(yōu)化方案示例

1. 在工程項目根目錄新建 skeleton 文件夾（ skeleton 為指定命名，不可修改；page 文件夾中的文件名可自定義），目錄如下所示：

     skeleton
     |--- page
     |    |--- index.tpl  // 骨架屏模板代碼文件
     |    |--- list.tpl  // 骨架屏模板代碼文件
     |--- config.json  // page和骨架屏的映射關(guān)系文件

2. 使用標準 HTML 與 CSS，編寫骨架屏模板文件。如 index.tpl 骨架屏代碼如下圖：代碼示例

   <div class="home-holder">
       <div class="home-holder-content">
           <div class="home-holder-content-header">
               <div class="jz-holder-imgContent-img"></div>
               <div class="home-holder-content-header-des jz-holder-imgContent-des c-gap-left-small">
                   <div class="home-holder-content-header-des-one jz-holder-des-item"></div>
                   <div class="home-holder-content-header-des-two jz-holder-des-item c-gap-top-large"></div>
                   <div class="jz-holder-slider"></div>
               </div>
           </div>
           <div class="home-holder-content-body jz-holder-block-content"></div>
       </div>
   </div>
   <style>
   .home-holder {
       padding: 0 17px;
       background-color: #fff;
   }
   .home-holder-content-header {
        margin-top: 40px;
   }
   .home-holder-content-header-des-two {
       width: 75%;
   }
   .home-holder-content-body {
       margin-top: 40px;
       margin-bottom: 40px;
   }
   .jz-holder-imgContent-img,
   .jz-holder-des-item {
       background-color: #F4F2F2;
   }
   .jz-holder-imgContent-des {
       display: inline-block;
       vertical-align: middle;
       width: 75%;
   }
   .c-gap-left-small {
       margin-left: 5px;
   }
   .c-gap-top-large {
       margin-top: .15rem;
   }
   .jz-holder-block-content {
       width: 100%;
       height: 214px;
   }
   .jz-holder-slider {
       position: absolute;
       top: 0;
       left: 0%;
       opacity: 0.4;
       width: 104px;
       height: 100%;
       background: -webkit-linear-gradient(left, #F4F2F2, #FFF 50%, #F4F2F2); /* Safari 5.1 - 6.0 */
       background: -o-linear-gradient(right, #F4F2F2, #FFF 50%, #F4F2F2); /* Opera 11.1 - 12.0 */
       background: -moz-linear-gradient(right, #F4F2F2, #FFF 50%, #F4F2F2); /* Firefox 3.6 - 15 */
       background: linear-gradient(to right,#fff, #FFF 50%, #fff); /* 標準的語法（必須放在最后） */
       animation: slide 1.5s infinite;
       -webkit-animation: slide 1.5s infinite;
   }
   @-webkit-keyframes slide {
       0% {
           left: -141px;
           top: 0;
       }
       100% {
           left: 100%;
           top: 0;
       }
   }
   @keyframes slide {
       0% {
           left: -141px;
           top: 0;
       }
       100% {
           left: 100%;
           top: 0;
       }
   }
   </style>
   

3. 配置 config.json 文件，頁面和骨架屏可以是多對一的映射關(guān)系，可配置多個頁面對應(yīng)同一個骨架屏模板，也可以為每個頁面配置一個骨架屏模板。
   代碼示例

   {
       "pages/home/index": "skeleton/page/index",
       "pages/list/index": "skeleton/page/index"
   }
   

4. 在首屏頁面渲染完畢后，調(diào)用 this.removeSkeleton() 方法移除骨架屏。在調(diào)用 removeSkeleton 方法的時候，需要有兼容邏輯（ this.removeSkeleton && this.removeSkeleton() ）。代碼示例

   {
      onLoad() {
          // 請求首屏數(shù)據(jù)，并渲染首屏
          getData().then(() => {
              this.setData({
                  pageModule
              }, () => {
                  this.removeSkeleton && this.removeSkeleton();
              });
          });
      }
   }
   

Bug&Tip: