页面上有三个list时性能问题

munanl · 发表于 2017-4-1 09:03:26

我在一个页面上放了三个list，分别显示不同的data，每个list中都有image的列，list1和list2中的图片是读取的本地，list3中的图片是读的另一个表userdata中的字段，如果不加list3中的image获取方法的话，页面打开没问题，但是如果加上list3的image的bind-attr-src的话，页面就卡死了，需要差不多十秒才能加载出来数据，怎么回事啊？

js代码：

Model.prototype.modelParamsReceive = function(event) {
var teamID = event.data.teamID;
var fteamData = this.comp("fteamData");
fteamData.setFilter("filter", "id = " + teamID);
this.comp("list1").refresh();
var steamData = this.comp("steamData");
steamData.setFilter("filter", "parent = " + teamID);
this.comp("list2").refresh();
var relationData = this.comp("relationData");
relationData.setFilter("filter", "branchID = " + teamID);
this.comp("list3").refresh();
};
Model.prototype.showImg = function(parent, subnum) {
if (parent === 0) {
return "r/icon/home.jpg";
}
if (parent > 0) {
return "r/icon/up.jpg";
}
if (subnum === 0) {
return "r/icon/final.jpg";
}
if (subnum > 0) {
return "r/icon/down.jpg";
}
};
Model.prototype.showPhoto = function(userID) {
this.comp("userData").refreshData();
this.comp("userData").find([ "id" ], [ userID ])[0].val("photo");
};
Model.prototype.countSubnum = function(teamID) {
this.comp("teamData").refreshData();
return this.comp("teamData").find([ "parent" ], [ teamID ]).length;
};

复制代码

munanl · 发表于 2017-4-1 09:04:02

[code]<?xml version="1.0" encoding="UTF-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" xid="window" class="window" component="$UI/system/components/justep/window/window" design="device:m;">
  <div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;top:420px;left:84px;" onParamsReceive="modelParamsReceive">

<div component="$UI/system/components/justep/data/baasData" autoLoad="false" xid="teamData" queryAction="queryTeaminfo" saveAction="saveTeaminfo" url="/x5/x5" tableName="teaminfo" idColumn="id">
<column label="ID" name="id" type="Integer" xid="default40"></column>
<column label="团队名称" name="team" type="String" xid="default41"></column>
<column label="简介" name="profile" type="String" xid="default38"></column>
<column label="父ID，0代表没有父级" name="parent" type="Integer" xid="default39"></column>
<column label="创建人ID" name="creater" type="Integer" xid="default36"></column>
<column label="长老团列表，逗号分隔" name="presbyter" type="String" xid="default37"></column>
<column label="创建时间" name="createtime" type="DateTime" xid="default34"></column>
<column label="0：正常；1：锁定；" name="status" type="Integer" xid="default35"></column>
<column label="当前团队级别" name="grade" type="Integer" xid="default42"></column>
<column label="当前成员数量" name="member" type="Integer" xid="default33"></column>
<column label="已填加说明项" name="mark" type="Integer" xid="default32"></column>
<column label="已发布任务数" name="task" type="Integer" xid="default31"></column>
<column label="已上传文件数" name="file" type="Integer" xid="default30"></column>
<column label="已用空间大小" name="space" type="Integer" xid="default29"></column></div><div component="$UI/system/components/justep/data/baasData" autoLoad="false" xid="fteamData" queryAction="queryTeaminfo" saveAction="saveTeaminfo" url="/x5/x5" tableName="teaminfo" idColumn="id"><column label="ID" name="id" type="Integer" xid="default1"></column>
  <column label="团队名称" name="team" type="String" xid="default2"></column>
  <column label="简介" name="profile" type="String" xid="default3"></column>
  <column label="父ID，0代表没有父级" name="parent" type="Integer" xid="default4"></column>
  <column label="创建人ID" name="creater" type="Integer" xid="default5"></column>
  <column label="长老团列表，逗号分隔" name="presbyter" type="String" xid="default6"></column>
  <column label="创建时间" name="createtime" type="DateTime" xid="default7"></column>
  <column label="0：正常；1：锁定；" name="status" type="Integer" xid="default8"></column>
  <column label="当前团队级别" name="grade" type="Integer" xid="default9"></column>
  <column label="当前成员数量" name="member" type="Integer" xid="default10"></column>
  <column label="已填加说明项" name="mark" type="Integer" xid="default11"></column>
  <column label="已发布任务数" name="task" type="Integer" xid="default12"></column>
  <column label="已上传文件数" name="file" type="Integer" xid="default13"></column>
  <column label="已用空间大小" name="space" type="Integer" xid="default14"></column></div>
  <div component="$UI/system/components/justep/data/baasData" autoLoad="false" xid="steamData" queryAction="queryTeaminfo" saveAction="saveTeaminfo" url="/x5/x5" tableName="teaminfo" idColumn="id">
<column label="ID" name="id" type="Integer" xid="default26"></column>
<column label="团队名称" name="team" type="String" xid="default27"></column>
<column label="简介" name="profile" type="String" xid="default24"></column>
<column label="父ID，0代表没有父级" name="parent" type="Integer" xid="default25"></column>
<column label="创建人ID" name="creater" type="Integer" xid="default22"></column>
<column label="长老团列表，逗号分隔" name="presbyter" type="String" xid="default23"></column>
<column label="创建时间" name="createtime" type="DateTime" xid="default20"></column>
<column label="0：正常；1：锁定；" name="status" type="Integer" xid="default21"></column>
<column label="当前团队级别" name="grade" type="Integer" xid="default28"></column>
<column label="当前成员数量" name="member" type="Integer" xid="default19"></column>
<column label="已填加说明项" name="mark" type="Integer" xid="default18"></column>
<column label="已发布任务数" name="task" type="Integer" xid="default17"></column>
<column label="已上传文件数" name="file" type="Integer" xid="default16"></column>
<column label="已用空间大小" name="space" type="Integer" xid="default15"></column></div>
  <div component="$UI/system/components/justep/data/baasData" autoLoad="false" xid="relationData" queryAction="queryRelation" saveAction="saveRelation" url="/x5/x5" tableName="relation" idColumn="id">
<column label="ID" name="id" type="Integer" xid="default71"></column>
  <column label="用户ID" name="userID" type="Integer" xid="default72"></column>
  <column label="团队ID" name="teamID" type="Integer" xid="default73"></column>
  <column label="分支ID" name="branchID" type="Integer" xid="default74"></column>
  <column label="真实姓名" name="realname" type="String" xid="default75"></column>
  <column label="职位" name="position" type="String" xid="default76"></column>
  <column label="工号" name="number" type="String" xid="default77"></column>
  <column label="电话" name="phone" type="String" xid="default78"></column>
  <column label="电邮" name="email" type="String" xid="default79"></column>
  <column label="0：不是；1：顶级团队管理；2：末级团队管理；" name="ismanager" type="Integer" xid="default80"></column>
  <column label="加入顶级团队时间" name="jointime" type="DateTime" xid="default81"></column>
  <master xid="default111"></master></div>
  <div component="$UI/system/components/justep/data/baasData" autoLoad="false" xid="userData" queryAction="queryUserinfo" saveAction="saveUserinfo" url="/x5/x5" tableName="userinfo" idColumn="id">
<column label="用户ID" name="id" type="Integer" xid="default96"></column>
  <column label="用户名" name="username" type="String" xid="default97"></column>
  <column label="密钥" name="keyword" type="String" xid="default98"></column>
  <column label="手机号/登录帐号" name="cellphone" type="String" xid="default99"></column>
  <column label="密码" name="password" type="String" xid="default100"></column>
  <column label="昵称" name="nickname" type="String" xid="default101"></column>
  <column label="性别" name="sex" type="String" xid="default102"></column>
  <column label="出生日期" name="birthday" type="Date" xid="default103"></column>
  <column label="住址" name="address" type="String" xid="default104"></column>
  <column label="头像地址" name="photo" type="String" xid="default105"></column>
  <column label="0：管理员；1：正常；2：锁定；3：注销；" name="status" type="Integer" xid="default106"></column>
  <column label="注册时间" name="logontime" type="DateTime" xid="default107"></column>
  <column label="最后一次登录时间" name="logintime" type="DateTime" xid="default108"></column>
  <column label="注销时间" name="logouttime" type="DateTime" xid="default109"></column>
  <master xid="default110"></master></div></div>
  <span component="$UI/system/components/justep/messageDialog/messageDialog" xid="messageDialog" style="top:40px;left:102px;"></span>
  <span component="$UI/system/components/justep/windowDialog/windowDialog" xid="windowDialog" style="top:40px;left:52px;"></span>
  <div component="$UI/system/components/justep/panel/panel" class="x-panel x-full" xid="panel1">
<div class="x-panel-top" xid="top1" height="55">
<div component="$UI/system/components/justep/titleBar/titleBar" class="x-titlebar" style="height:55px;" xid="titleBar1" title="团队">
   <div class="x-titlebar-left flex1" xid="left1">

munanl · 发表于 2017-4-1 09:04:18

   <a component="$UI/system/components/justep/button/button" label="" class="btn btn-link btn-lg btn-only-icon" icon="glyphicon glyphicon-chevron-left" onClick='{"operation":"window.close"}' xid="backBtn" style="height:55px;">
   <i class="glyphicon glyphicon-chevron-left" xid="i1"></i>
   <span xid="span1"></span></a> </div>
   <div class="x-titlebar-title flex1" style="text-align:left;" xid="title1">团队</div>
   <div class="x-titlebar-right flex5 reverse" xid="right1">
   <div component="$UI/system/components/justep/button/buttonGroup" class="btn-group" tabbed="true" xid="buttonGroup1">
   <a component="$UI/system/components/justep/button/button" class="btn btn-link btn-lg btn-only-label" label="邀" xid="inviteBtn" icon="linear linear-indentdecrease" style="height:55px;" onClick="inviteBtnClick">
      <i xid="i18" class="linear linear-indentdecrease"></i>
      <span xid="span18">邀</span></a>
   <a component="$UI/system/components/justep/button/button" class="btn btn-link btn-lg btn-only-icon" label="码" xid="codeBtn" icon="glyphicon glyphicon-qrcode" style="height:55px;" onClick="codeBtnClick">
      <i xid="i17" class="glyphicon glyphicon-qrcode"></i>
      <span xid="span17">码</span></a>
   <a component="$UI/system/components/justep/button/button" class="btn btn-link btn-lg btn-only-icon" label="button" xid="moreBtn" icon="glyphicon glyphicon-option-vertical" style="height:55px;" onClick="moreBtnClick">
      <i xid="i19" class="glyphicon glyphicon-option-vertical"></i>
      <span xid="span19"></span></a> </div> </div> </div> </div>
<div class="x-panel-content" xid="content1">
<div component="$UI/system/components/justep/controlGroup/controlGroup" class="x-control-group" title="title" xid="controlGroup1">
   <div class="form-group" xid="formGroup1">

<div class="col-sm-3" xid="col1"></div><div component="$UI/system/components/justep/list/list" class="x-list" xid="list1" data="fteamData" autoLoad="false">
<ul class="x-list-template" xid="listTemplateUl1">
<li xid="li1">
  <div class="col-sm-1" xid="col8"><div component="$UI/system/components/justep/row/row" class="x-row" xid="row1">
<div class="x-col x-col-fixed" xid="col5" style="width:auto;"><img src="" alt="" xid="image1" class="img" bind-attr-src=' $model.showImg( val("parent"), -1)'></img></div>
<div class="x-col x-col-center" xid="col6"><div component="$UI/system/components/justep/output/output" class="x-output" xid="output1" bind-ref='ref("team")'></div></div>
<div class="x-col x-col-fixed x-col-center" xid="col7" style="width:auto;"><div component="$UI/system/components/justep/output/output" class="x-output" xid="output2" bind-ref='ref("member")'></div></div></div></div></li></ul> </div><div class="col-sm-3" xid="col14"></div><div component="$UI/system/components/justep/list/list" class="x-list" xid="list2" data="steamData" autoLoad="false">
<ul class="x-list-template" xid="listTemplateUl2">
<li xid="li2">
   <div class="col-sm-1" xid="col9">
   <div component="$UI/system/components/justep/row/row" class="x-row" xid="row2">
   <div class="x-col x-col-fixed" xid="col12" style="width:auto;">
      <img src="" alt="" xid="image2" class="img" bind-attr-src=' $model.showImg(-1,  $model.countSubnum( val("id")))'></img></div>
   <div class="x-col x-col-center" xid="col10">
      <div component="$UI/system/components/justep/output/output" class="x-output" xid="output3" bind-ref='ref("team")'></div></div>
   <div class="x-col x-col-fixed x-col-center" xid="col11" style="width:auto;">
      <div component="$UI/system/components/justep/output/output" class="x-output" xid="output4" bind-ref='ref("member")'></div></div> </div>
  </div> <div class="col-sm-2" xid="col13"></div></li> </ul> </div>
  <div class="col-sm-3" xid="col15"></div>
  <div component="$UI/system/components/justep/list/list" class="x-list" xid="list3" data="relationData" autoLoad="false">
<ul class="x-list-template" xid="listTemplateUl3">
<li xid="li3">
   <div class="col-sm-1" xid="div1">
   <div component="$UI/system/components/justep/row/row" class="x-row" xid="row3">
   <div class="x-col x-col-fixed" xid="col17" style="width:auto;">
      <img src="" alt="" xid="image3" class="img" bind-attr-src=' $model.showPhoto( val("userID"))'></img></div>
   <div class="x-col x-col-center" xid="col19">
      <div component="$UI/system/components/justep/output/output" class="x-output" xid="output5" bind-ref='ref("realname")'></div></div>
   <div class="x-col x-col-fixed x-col-center" xid="col18" style="width:auto;">
      <div component="$UI/system/components/justep/output/output" class="x-output" xid="output6" bind-ref='ref("position")'></div></div> </div> </div>
   <div class="col-sm-2" xid="col16"></div></li> </ul> </div></div></div> </div> </div></div>[/code]

liangyongfei · 发表于 2017-4-1 10:17:56

userdata 是baasData 组件吗？？
先试试，单独放置list3显示会慢吗？？吧list1 和 list2 先删除！
F12 调试看一下是不是网络慢引起的？？加载数据有多少呢？？请分页加载！！设置userdata 的 limit属性！！

找到原因才能解决！

munanl · 发表于 2017-4-6 16:49:50

liangyongfei 发表于 2017-4-1 10:17
userdata 是baasData 组件吗？？
先试试，单独放置list3显示会慢吗？？吧list1 和 list2 先删除！
F12 调 ...

Model.prototype.showPhoto = function(userID) {
this.comp("userData").refreshData();
this.comp("userData").find([ "id" ], [ userID ])[0].val("photo");
};

复制代码

试过了，单独只有list3的时候，也是很慢，我觉得是上面这个方法的问题。

list3中有一个列是使用上面的方法读取的另一个数据表中的字段，可能是因为读取数据的次数太多了，所以需要的时间长。

list3绑定的数据表relation，但是relation表中没有photo，需要根据relation表中的userID字段去userinfo表中查找到这个id的photo字段的值。

逻辑不算复杂，但是上面这个方法实在是太慢了。

有没有其他方法可以实现的？我试过主从表，不太会用。

半导体 · 发表于 2017-4-7 09:43:22

munanl 发表于 2017-4-6 16:49
试过了，单独只有list3的时候，也是很慢，我觉得是上面这个方法的问题。

list3中有一个列是使用上面 ...

自定义action 定义sql语句实现跨表查询把查询到的数据带回到data显示
http://docs.wex5.com/baas-customaction/

		自动登录	找回密码
密码			注册

[处理中3] 页面上有三个list时性能问题