Web前端必知的優化技巧有哪些

本篇內容主要講解“Web前端必知的優化技巧有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Web前端必知的優化技巧有哪些”吧!

1. 移除移動幽靈陰影點擊效果

原生應用沒有，移動瀏覽器有。當你單擊任何按鈕或任何可單擊的對象（例如圖標）時，使用Safari或Chrome瀏覽器的用戶將看到陰影單擊效果。

<div>、<button>或其他被單擊的元素將具有簡短的基礎陰影效果。這種效果應該是給用戶反饋，讓用戶知道有什么東西被點擊了，結果應該會發生什么。這對于網站上的很多交互來說是有意義的。

但是，如果您的網站實際上已經足夠響應并包含加載數據的效果了怎么辦？或者您使用Angular，React或Vue，并且很多UX交互是瞬時的？陰影單擊效果可能會影響您的用戶體驗。

你可以在樣式表中使用以下代碼來擺脫這種陰影單擊效果。不用擔心，即使您需要將其作為全局樣式添加，它也不會破壞其他任何內容。

* { 

  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

2. 使用用戶代理檢測用戶是否從移動設備訪問

我不是在談論針對寬度小于600px的設備放棄特定于樣式表的 @media 代碼。相反。您應該始終使用樣式表來使網站移動友好。

但是，如果要根據用戶是否在移動設備上顯示其他效果，該怎么辦？你希望將它包含在JavaScript函數中——并且您不希望在用戶更改其智能手機方向(將寬度增加到600px以上)時更改它。

對于這種情況，我的建議是使用可全局訪問的Helper函數，該函數根據瀏覽器的用戶代理確定用戶設備是否為移動設備。

$_HelperFunctions_deviceIsMobile: function() {
  if (/Mobi/i.test(navigator.userAgent)) {
     return true;
  } else 

     {return false;
  }      
}

3. 加載移動版本的較大的圖像

如果你使用大圖像，并且想要確保移動設備上的加載時間仍然適合你的移動用戶，請始終加載不同版本的圖像。

<!-- ===== 放大版本 ========== -->
<div class="generalcontainer nomobile">
    <div class="aboutus-picture" id="blend-in-cover" v-bind:style="{ 'background-image': 'url(' + image1 + ')' }"></div>
</div>
<!-- ===== 移動版本 ========== -->
<div class="generalcontainer mobile-only">
    <div class="aboutus-picture" id="blend-in-cover" v-bind:style="{ 'background-image': 'url(' + image1-mobile + ')' }"></div>
</div>

在你的CSS文件中，定義 mobile-only 和 nomobile。

.mobile-only {   display: none; }
@media (max-width: 599px) {
  ...
  .nomobile {display: none;}
  .mobile-only {display: initial;}
}

4. 嘗試無限滾動和延遲加載的數據

如果您有大型列表，則應考慮在用戶向下滾動時延遲加載更多數據，而不是顯示“加載更多或顯示更多”按鈕。原生應用程序通常包括這樣的延遲加載的無限滾動功能。

在移動web中使用Javascript框架實現這一點并不難。您可以在模板中的元素上添加引用（$ref）或僅依賴于窗口的絕對滾動位置。

以下代碼顯示了如何在Vue應用中實現這種效果。可以在其他框架（例如Angular或React）中添加類似的代碼。

mounted() {
  this.$nextTick(function() {
     window.addEventListener('scroll', this.onScroll);
     this.onScroll(); // 需要初始加載頁面
  });        
},
beforeDestroy() {
   window.removeEventListener('scroll', this.onScroll);
}

如果用戶滾動到某個元素或頁面底部，則onScroll函數將加載數據：

onScroll() {    
   var users = this.$refs["users"];
   if (users) {
      var marginTopUsers = usersHeading.getBoundingClientRect().top;
      var innerHeight = window.innerHeight;
      if ((marginTopUsers - innerHeight) < 0) {
          this.loadMoreUsersFromAPI();
      }                               

   }  
}

5. 使模態和彈出窗口全屏或全屏顯示

手機屏幕的空間有限。有時，開發人員會忘記這一點，并使用與桌面版本相同的界面類型。尤其是模態窗口，如果不正確的實現，對移動用戶來說是個關卡。

模式窗口是你疊加在頁面其他內容之上的窗口。對于桌面版用戶，他們可以很好地工作。

由于屏幕空間有限，大型公司的移動網頁應用（如Youtube或Instagram）設計得很好的移動網頁應用都會把模態做為全寬或全屏，在模態的頂部有一個 ”X“ 來關閉。

注冊功能尤其如此，在桌面版本中，注冊功能是普通模式窗口，而在移動版本中，則是全屏模式。

到此，相信大家對“Web前端必知的優化技巧有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！