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的操作…