当数据量较大时，两个tab切换的效率问题

IT_wanghe

于 2017-05-10 18:49:46 发布

阅读量1.5k

点赞数

分类专栏：优化用户体验文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/IT_wanghe/article/details/71566383

版权

优化用户体验专栏收录该内容

0 篇文章

订阅专栏

本文探讨了在数据量较大时使用HTML与JavaScript进行页面切换的两种不同方式，并对比了它们的加载效率。一种是在HTML层面通过Angular指令实现，另一种是在JavaScript层面利用jQuery显示和隐藏元素。实验结果显示，在数据量较大时，JavaScript方式更加流畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当数据量较大时，两个tab切换的效率问题

接下来只比较两种方式的效率

只在html页面操作

ng-init="flag=true";
ng-click="flag=!flag";
<div ng-if="flag=true"></div>
<div ng-if="flag=false"></div>

这种情况当数据量比较大的时候，会出现加载卡顿的情况。

在js层面操作

<div class="A"></div>
<div class="b"></div>
var flag=true;
$scope.loading=function(){ 
  if(flag){
    $('.A').show();
    $('.B').hide();
    flag=false;
  }else{
    $('.A').hide();
    $('.B').show();
    flag=true;
  }
}

这中情况加载比较流畅。不会卡顿