使用者體驗一直是前端開發需要考慮的重要部分，在資料請求時常見到鎖屏的loading動畫，而現在越來越多的產品傾向於使用Skeleton Screen Loading(骨架屏)替代，以優化使用者體驗

Skeleton Screen

Skeleton Screen(骨架屏)就是在頁面資料尚未載入前先給使用者展示出頁面的大致結構，直到請求資料返回後再渲染頁面，補充進需要顯示的資料內容。常用於文章列表、動態列表頁。

請求處理

無論是PC端還是移動端，只要有資料請求都會出現一定的延遲時間，之前對於這段等待時間的處理也是各不相同。同步請求中頁面會卡住，直到請求完成，使用者期間無法進行任何操作，有一種宕機的感覺，體驗較差。非同步請求中大多數會以鎖屏的loading動畫過渡等待時間，於是，也就出現了製作不同loaidng狀態的炫技。

Skeleton Screen優勢

鎖屏loading在一定程度限制了使用者的操作，所以為了進一步提升使用者體驗，Skeleton Screen被越來越多的公司產品採用，如：Facebook、簡書、知乎、掘金等，在動態、文章載入時預先渲染出結構佈局，資料載入完成後再填充資料顯示，這樣的好處在於不干擾使用者操作，使使用者對於載入的內容有一個大致的預期，特別是弱網路環境下極大的優化了使用者體驗。

Skeleton Screen實現

主要步驟： 1、建立與顯示內容相似的html結構 2、在需要顯示內容的元素上增加背景色

第一種

簡單堆砌出元素結構

html

<div class="skeleton">
    <div class="skeleton-head"></div>
    <div class="skeleton-body">
        <div class="skeleton-title"></div>
        <div class="skeleton-content"></div>
    </div>
</div>

css

.skeleton {
    padding: 10px;
}

.skeleton .skeleton-head,
.skeleton .skeleton-title,
.skeleton .skeleton-content {
    background: rgb(194, 207, 214);
}

.skeleton-head {
    width: 100px;
    height: 100px;
    float: left;
}

.skeleton-body {
    margin-left: 110px;
}

.skeleton-title {
    width: 500px;
    height: 60px;
}

.skeleton-content {
    width: 260px;
    height: 30px;
    margin-top: 10px;
}    

pixabayhttps://www.wode007.com/sites/73237.html wallhavenhttps://www.wode007.com/sites/73236.html

第二種

背景動畫，html結構相同，修改部分css樣式

.skeleton .skeleton-head,
.skeleton .skeleton-title,
.skeleton .skeleton-content {
    background: rgb(194, 207, 214);
    background-image: linear-gradient(90deg,rgba(255, 255, 255, 0.15) 25%, transparent 25%);
    background-size: 20rem 20rem;
    animation: skeleton-stripes 1s linear infinite;
}

@keyframes skeleton-stripes {
    from {
        background-position: 0 0 ;
    }
    to {
        background-position: 20rem 0;
    }
}

第三種

元素結構長度變化

.skeleton {
  padding: 10px;
}

.skeleton .skeleton-head,
.skeleton .skeleton-title,
.skeleton .skeleton-content {
  background: rgb(194, 207, 214);
}

.skeleton-head {
  width: 100px;
  height: 100px;
  float: left;
}

.skeleton-body {
  margin-left: 110px;
}

.skeleton-title {
  width: 500px;
  height: 60px;
  transform-origin: left;
  animation: skeleton-stretch .5s linear infinite alternate;
}

.skeleton-content {
  width: 260px;
  height: 30px;
  margin-top: 10px;
  transform-origin: left;
  animation: skeleton-stretch .5s -.3s linear infinite alternate;
}

@keyframes skeleton-stretch {
  from {
    transform: scalex(1);
  }
  to {
    transform: scalex(.3);
  }
}

總結

前端優化彷彿是一種無止境的探索，尤其是現在產品對於使用者體驗的重視，任何一點體驗的改善與提升都會增加使用者的友好度，最終使產品留下一個好印象。