在火狐浏览器页面上下拖动数量为200+的文件列表,拖动过程中列表区会出现空白导致显示内容不连贯。IE、谷歌都正常。这个测试提出来的问题该如何改?
1 <div class="dsm-inline"> 2 <label class="dsm-form-label">待发送文件</label> 3 <div class="row fileupload-buttonbar"> 4 <div class="col-lg-7" style="padding-left: 0;"> 5 <span class="btn btn-primary whitebg fileinput-button"> 6 <span>添加文件</span> 7 <input type="file" name="file" multiple > 8 </span> 9 <div class="hidden"> 10 <button type="submit" class="btn btn-primary start"> 11 <span>开始上传</span> 12 </button> 13 </div> 14 <button type="reset" class="btn btn-primary whitebg cancel"> 15 <span>清空全部</span> 16 </button> 17 <span class="desc"> 单次选择文件数量不超过400个</span> 18 <span class="fileupload-loading"></span> 19 </div> 20 <div class="col-lg-5 fileupload-progress fade hidden"> 21 <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" 22 aria-valuemax="100"> 23 <div class="progress-bar progress-bar-success" style="width:0%;"></div> 24 </div> 25 <div class="progress-extended"> </div> 26 </div> 27 </div> 28 <div class="dsm-input-block"> 29 <table style="margin-left: 0;margin-bottom: 0;" role="presentation" 30 class="table table-striped"> 31 <tbody class="files"></tbody> 32 </table> 33 </div> 34 </div>
这是页面优化问题了 拖动部分的element小标签太多了 游览器计算过大 (大概是这个原因) 减少可视部分的dom 减少动画帧 适当的隐藏一部分超出可视部分的element 在不影响用户体验的前提下进行分布式加载 瀑布流加载