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前端必知的优化技巧有哪些”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！