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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/251270.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C语言及程序设计】项目2-15:模块化的简单银行系统设计

问题描述&#xff1a; https://edu.csdn.net/course/play/456/4808 // 银行系统.cpp: 定义控制台应用程序的入口点。 //#include "stdafx.h" #include <stdlib.h> #pragma warning (disable: 4996)int PassTest(); void ibalance(); void withdraw(); void de…

Android 6.0 动态权限申请

1. 概述 Android 6.0 (API 23) 之前应用的权限在安装时全部授予&#xff0c;运行时应用不再需要询问用户。在 Android 6.0 或更高版本对权限进行了分类&#xff0c;对某些涉及到用户隐私的权限可在运行时根据用户的需要动态授予。这样就不需要在安装时被强迫同意某些权限。 2. …

el-input输入金额,保留两位小数

需求&#xff1a;“只允许输入金额保留两位小数”&#xff0c;有2种实现方法 方法一&#xff08;通过正则控制&#xff09;&#xff1a; html&#xff1a; <el-inputv-model"inputTable.amount"input"formatNum(form.amount, amount)" ></el-i…

斜率DP总结

chunlvxiong的博客 T1&#xff1a;防御准备 三个月后第一次写博客&#xff0c;我们从这个题开始&#xff1a;http://www.lydsy.com/JudgeOnline/problem.php?id3156。 这道题DP方程比较好写&#xff1a;用dp[i]表示1到i全部被控制的最小代价&#xff0c;那么dp[i]min{dp[j](i-…

前端使用react-intl-universal进行国际化

一、国际化 / i18n 目前国际化&#xff0c;就是开发者写对象&#xff0c;一个key关联若干语种的翻译。相比于浏览器自带的翻译功能&#xff0c;语义更加准确。 “国际化”的简称&#xff1a;i18n&#xff08;其来源是英文单词 internationalization的首末字符i和n&#xff0c;…

2021前端面试题

基础知识与素养 JS基本功训练与思考 程序设计的渗透与应用 业务技巧的积累与训练 生产力转换 项目的组织架构 转换专业人才的全面生产力 什么样的技术水平决定了你应该学习什么样的知识与技术&#xff0c;什么样的知识与技术水平决定了你到什么样的公司&#xff0c;到什么样的公…

glog日志库使用笔记

日志能方便地诊断程序原因、统计程序运行数据&#xff0c;是大型软件系统必不可少的组件之一。glog 是google的开源日志系统&#xff0c;相比较log4系列的日志系统&#xff0c;它更加轻巧灵活。 在Github上下载glog&#xff0c;解压后用CMake生成VS2017工程&#xff08;默认生成…

elementPlus关闭弹窗,页面原先滚动条消失

一开始以为是弹窗内容超过一屏引起&#xff0c;改为一屏内也不能解决。 打开控制台&#xff0c;发现弹窗后自动给body标签加上了类el-popup-parent–hidden&#xff0c;关闭后也没去除&#xff0c;因此手动删除该类。 document.getElementsByTagName(body)[0].className ;

在Windows下如何创建虚拟环境(默认情况下)

很多小伙伴平时在使用Python的时候&#xff0c;有的项目需要使用Python2来进行开发&#xff0c;有的项目则是需要Python3来进行开发。当不清楚怎么分开环境的时候&#xff0c;此时两个环境开始打架&#xff0c;彼此傻傻分不清楚。虚拟环境作为隔离的利器应运而生&#xff0c;其…

selenium python 入门-元素定位

环境搭建 安装教程 http://www.testclass.net/selenium_python/install-selenium/ chrome浏览器 还需要下载chrome driver 把下载的chromedriver .exe放到chrome安装目录下的Application目录下和 python所在的安装目录下&#xff0c;比如我的目录是C:\Program Files (x86)\Goog…

DPDK helloworld 源码阅读

在 DPDK Programmers Guides 中的 EAL 一篇中有一个图可以很清晰地看到一个DPDK的应用程序的大致执行思路&#xff1a; 初始化检查CPU支持、微架构配置等完成后&#xff0c;执行main()函数。 第一步是 rte_eal_init()&#xff0c;核心初始化和启动。其中线程使用的是pthread库&…

看了吗网址链接

sklearn实战-乳腺癌细胞数据挖掘&#xff08;博主亲自录制视频&#xff09; https://study.163.com/course/introduction.htm?courseId1005269003&utm_campaigncommission&utm_sourcecp-400000000398149&utm_mediumshare # -*- coding: utf-8 -*- ""&qu…

JMeter 性能测试进阶实战

课程简介 本课程制作的主要目的是为了让大家快速上手 JMeter&#xff0c;期间穿插了大量主流项目中用到的技术&#xff0c;以及结合当今主流微服务技术提供了测试 Dubbo 接口、Java 工程技术具体实施方案&#xff0c;注重实践、注意引导测试思维、拒绝枯燥的知识点罗列、善于用…

JavaScript高级程序设计阅读笔记

2020-11-15 通过初始化指定变量类型 数字-1 对象null和null的比较&#xff08;不理解&#xff09;使用局部变量将属性查找替换为值查找&#xff08;算法复杂度&#xff09;循环的减值迭代&#xff0c;降低了计算终止条件的复杂度switch快多个变量声明逗号隔开使用数组和对象字面…

windows任务计划程序 坑

转载于:https://www.cnblogs.com/kaibindirver/p/8109041.html

javascript --- 类、class、事件委托的编程风格

类风格: // 父类 function Widget(width, height) {this.width width || 50;this.height height || 50;this.$elem null; } Widget.prototype.render function($where) {if(this.$elem) {this.$elem.css({width: this.width "px",height: this.height "p…

堆和堆排序

堆和优先队列 普通队列&#xff1a;FIFO&#xff0c;LILO 优先队列&#xff1a;出队顺序和入队顺序无关&#xff0c;和优先级相关。一个典型应用就是操作系统中。动态选择优先级高的任务执行 堆的实现 最典型的堆就是二叉堆&#xff0c;就像是一颗二叉树。这个堆的特点&#xf…

ES5-1 发展史、ECMA、编程语言、变量、JS值

1. 5大主流浏览器及内核&#xff08;自主研发&#xff09; 浏览器内核IEtridentChromewebkit blinkSafariwebkitFirefoxgeckoOperapresto 2. 浏览器的历史 和 JS诞生 1989-1991 WorldWideWeb&#xff08;后来为了避免与万维网混淆而改名为Nexus&#xff09;是世界上第一个网页…

[Usaco2010 Nov]Visiting Cows

题目描述 经过了几周的辛苦工作,贝茜终于迎来了一个假期.作为奶牛群中最会社交的牛,她希望去拜访N(1<N<50000)个朋友.这些朋友被标号为1..N.这些奶牛有一个不同寻常的交通系统,里面有N-1条路,每条路连接了一对编号为C1和C2的奶牛(1 < C1 < N; 1 < C2 < N; C1…

ES5-2 语法、规范、错误、运算符、判断分支、注释

1. 错误 MDN错误列表 Uncaught SyntaxError: Unexpected token ) // 语法错误 Uncaught ReferenceError: a is not defined // 引用错误等类型 Uncaught TypeError: Cannot read property toString of null出现一个语法错误&#xff0c;则一行代码都不会执行&#xff08;检查…