Web前端必知的優(yōu)化技巧有哪些

本篇內(nèi)容主要講解“Web前端必知的優(yōu)化技巧有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Web前端必知的優(yōu)化技巧有哪些”吧!

1. 移除移動幽靈陰影點(diǎn)擊效果

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

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

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

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

* { 

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

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

我不是在談?wù)撫槍挾刃∮?00px的設(shè)備放棄特定于樣式表的 @media 代碼。相反。您應(yīng)該始終使用樣式表來使網(wǎng)站移動友好。

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

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

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

     {return false;
  }      
}

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

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

<!-- ===== 放大版本 ========== -->
<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. 嘗試無限滾動和延遲加載的數(shù)據(jù)

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

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

以下代碼顯示了如何在Vue應(yīng)用中實(shí)現(xiàn)這種效果?？梢栽谄渌蚣埽ɡ鏏ngular或React）中添加類似的代碼。

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

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

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

   }  
}

5. 使模態(tài)和彈出窗口全屏或全屏顯示

手機(jī)屏幕的空間有限。有時，開發(fā)人員會忘記這一點(diǎn)，并使用與桌面版本相同的界面類型。尤其是模態(tài)窗口，如果不正確的實(shí)現(xiàn)，對移動用戶來說是個關(guān)卡。

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

由于屏幕空間有限，大型公司的移動網(wǎng)頁應(yīng)用（如Youtube或Instagram）設(shè)計得很好的移動網(wǎng)頁應(yīng)用都會把模態(tài)做為全寬或全屏，在模態(tài)的頂部有一個 ”X“ 來關(guān)閉。

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

到此，相信大家對“Web前端必知的優(yōu)化技巧有哪些”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！