javascrpt --- 使用jquery添加dom元素和Angular ng-repeat生成select性能比较

今天用两种方法实现了动态的给select添加option的功能.
第一种是用jquery.

// html
<select id="drag-pointList"></select>
// js
$('#drag-pointList').children('option').remove();   // 清空之前的option
let list =  res.data.list ;   // res是ajax请求成功返回的结果
let len = list.length;
let start = new Date();
if(len > 0){for( let i = 0; i < len; i++) {let item = list[i];let option ={id: item.pointId,name: item.pointName  + " - " + item.pointId,}let domOp = '<option value="' + option.id + '"> ' + option.name + '</option>'$('#drag-pointList').append(domOp);}this.form.render('select');   // 使用layui更新select,let end = new Date();console.log('数据:', len, '条  ', '耗时:', end - start, '毫秒');
}

下面是使用ng-repeat的方法实现动态的添加select

// html
<select id="drag-pointList"><option value="item.id" ng-repeat='item in dragPointList'>{{item.name}}</option>
</select>
// js
$('#drag-pointList').children('option').remove();   // 清空之前的option
let list =  res.data.list ;   // res是ajax请求成功返回的结果
let len = list.length;
let start = new Date();
if(len > 0){for( let i = 0; i < len; i++) {let item = list[i];let option ={id: item.pointId,name: item.pointName  + " - " + item.pointId,}this.$scope.dragPointList.push(option); // Angular ($scope挂在了this.$scope上..)}this.form.render('select');   // 使用layui更新select,let end = new Date();console.log('数据:', len, '条  ', '耗时:', end - start, '毫秒');
}

Angular效果如下:

可以看见使用Angular更新渲染select明显要快…
得出结论利用Jquery生成dom的方式添加select可能比较耗时,应当适当减少对dom的操作…

javascrpt --- 使用jquery添加dom元素和Angular ng-repeat生成select性能比较相关推荐

jq在html中添加dom元素,使用jQuery添加DOM元素的最佳方法
所以我已经看到了三种向页面添加html/DOM元素的方法.我很好奇他们每个人的利弊是什么. 1 - 传统的JavaScript 我相信直接的JS方法是通过构造每个元素,设置属性,然后附加它们.例: v ...
jQuery添加DOM节点常用的5种方法
一.内部插入(前插入.后插入): <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
jQuery添加插入元素技巧
1.jQuery添加插入元素技巧有两种:指定元素的里面和外面 2.里面添加: 里面的前面添加:prepend.prependTo: 里面的后面添加:append.appendTo: 3.外面添加: 外 ...
jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...
jquery 添加插入元素技巧前面和后面
jquery添加插入元素技巧: jquery添加分为在指定元素的里面添加和外面添加两种: 里面添加使用(append 和prepend) 里面添加又分为在里面的前面添加和后面添加里面的前面添加使用 ...
jq增加删除html标签,jQuery添加\删除元素
jQuery添加\删除元素 html> jquery添加和删除元素 $(function(){ //添加元素 //元素内部添加 //append()在被选元素的结尾插入内容; // $('but ...
jQuery——遍历DOM元素的兄弟元素
任务描述本关任务:用 jQuery 遍历 DOM 元素的兄弟元素.效果如下: 相关知识为了完成本关任务,你需要掌握:1.siblings(),2. next() , nextAll() 3. pr ...
jQuery 添加删除元素
通过 jQuery,可以很容易地添加新元素/内容. 添加新的 HTML 内容我们将学习用于添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() ...
jQuery操作DOM元素案例
直接打开注释即可观察效果,都已经测试通过!!! <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...

javascrpt --- 使用jquery添加dom元素和Angular ng-repeat生成select性能比较

javascrpt --- 使用jquery添加dom元素和Angular ng-repeat生成select性能比较相关推荐

最新文章

热门文章