为什么操作dom会消耗性能

因为对DOM的修改为影响网页的用户界面,重绘页面是一项昂贵的操作。太多的JavaScript DOM操作会导致一系列的重绘操作,为了确保执行结果的准确性,所有的修改操作是按顺序同步执行的。我们称这个过程叫做回流(reflow),同时这也是最昂贵的浏览器操作之一, 回流操作主要会发生在几种情况下: 当对DOM节点执行新增或者删除操作时。 动态设置一个样式时(比如element.style.width=”10px”)。 当获取一个必须经过计算的尺寸值时,比如访问offsetWidth、clientHeight或者其他需要经过计算的CSS值(在兼容DOM的浏览器中,可以通过getComputedStyle函数获取;在IE中,可以通过currentStyle属性获取)。

解决问题的关键,就是限制通过JavaScript DOM操作所引发回流的次数。大部分浏览器都不会在JavaScript的执行过程中更新DOM。相应的,这些浏览器将对对DOM的操作放进一个队列,并在JavaScript脚本执行完毕以后按顺序一次执行完毕。也就是说,在JavaScript执行的过程中,用户不能和浏览器进行互动,直到一个回流操作被执行。(失控脚本对话框会触发回流操作,因为他执行了一个中止JavaScript执行的操作,此时会对用户界面进行更新) 如果要减少由于DOM修改带来的回流操作,有两个基本的方法。第一个就是在对当前DOM进行操作之前,尽可能多的做一些准备工作。一个经典的例子就是向document对象中添加很多DOM节点:

for(var i = 0;i < items.length;i++){
var item=document.createElement("li");
item.appendChild(document.createTextNode("Option"+i);
list.appendChild(item);
}

这段代码的效率是很低的,因为他在每次循环中都会修改当前DOM结构。为了提高性能,我们需要将这个次数降到最低,对于这个案例来说,最好的办法是建立一个文档碎片(documentfragment),作为那些已创建元素元素的临时容器,最后一次将容器的内容直接添加到父节点中:

var fragment = document.createDocumentFragment();
for(vari=0;i < items.length;i++){
var item=document.createElement("li");
item.appendChild(document.createTextNode("Option"+i);
fragment.appendChild(item);
}
list.appendChild(fragment);

 

转载于:https://www.cnblogs.com/jiahuasir/p/10266932.html

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

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

相关文章

RISC-V生态未来的三种可能~

来源&#xff1a;嵌入式资讯精选因为x86 架构与 Arm 架构商业使用都要付费&#xff0c;因此&#xff0c;RISC-V开源具有很大优势。今天就来说说 RISC-V 生态的内容。关于RISC-VRISC&#xff1a;Reduced Instruction Set Computer&#xff0c;即精简指令集计算机。RISC-V是基于R…

java-图像的几何变换

/** Java 绘图相关技术的学习*Graphics类相关技术知识&#xff1a; 1.图像的几何变换图像翻转&#xff1a;使用另一个重载的drawImage(Image img,int x_1,int y_1,目标矩形的第一坐标int x_2,int y_2,目标矩形的第二坐标int x1,int y1,源矩形的第一坐标int x2,int y2,源矩形的第…

VS Code配置C/C++

VS Code 配置C/C  准备工作 Mingw-w64下载&#xff0c;在vscode中&#xff0c;点击帮助文档&#xff0c;进入如下界面。 在左侧选择CMingw-w64 onWindows,进入如下界面。可以参考文档进行配置。 点击文档中的mingw-w64链接进入如下界面。 点击黄色区域链接进入到里面…

人脑启发AI设计:让神经网络统一翻译语音和文本

来源&#xff1a;图灵人工智能作者&#xff1a;Glaciohound编辑&#xff1a;陈彩娴能够统一地理解语音和文本&#xff0c;是人类能够形成通用语言能力的重要原因。那么&#xff0c;人工智能是否也能如此&#xff1f;最近&#xff0c;来自字节跳动和UIUC的研究人员借鉴这一思路&…

32 bit 与 64 bit 程序(2)比较

32 bit 与 64 bit 程序&#xff08;2&#xff09;区别 由于操作系统内存分配的不同&#xff0c;导致软件开发过程中&#xff0c;需要编译不同版本的软件。 几个重要概念&#xff1a; &#xff08;1&#xff09;这里所说的的32位与64位程序&#xff0c;是指经过编译器编译后的可…

2021世界人工智能大会AI Debate:图神经网络是否是实现认知智能的关键?

来源&#xff1a;学术头条2021年7月10日&#xff0c;WAIC&#xff08;2021世界人工智能大会&#xff09;“图神经网络与认知智能前沿技术论坛”在上海世博中心成功举办。清华大学计算机科学与技术系教授李涓子&#xff0c;复旦大学计算机科学技术学院教授黄萱菁&#xff0c;清华…

Tensorflow深度学习应用(筑基篇)

筑基篇 #codinggbk1.张量 用于描述数据&#xff0c;可以理解为多维数组,包含张量的名字&#xff0c;阶数&#xff0c;形状数值类型. Tensor("Add:0", shape(m,n,k), dtypefloat32),表示节点名为Add,0代表第0个输出&#xff0c;shape表示为MxNxK维的数组&…

WPF中自动增加行(动画)的TextBox

WPF中自动增加行&#xff08;动画&#xff09;的TextBox 原文:WPF中自动增加行&#xff08;动画&#xff09;的TextBoxWPF中自动增加行&#xff08;动画&#xff09;的TextBox WPF中的Textbox控件是可以自动换行的&#xff0c;只要设置TextWrapping属性为”Wrap”即可&#xff…

基因婴儿事未了!人类将在2031年开始实现永生?

来源:WPR前段时间&#xff0c;中国首例“基因编辑”婴儿事件闹得沸沸扬扬&#xff0c;这件事也发酵到了国外&#xff0c;不到一天&#xff0c;各路外媒全部刷屏了。在这些外媒报道里&#xff0c;最有意思的要数《纽约时报》杂志了。他们就“基因编辑”问题&#xff0c;请到了作…

Tensorflow深度学习应用(进阶篇)

#codinggbk进阶篇相关数据&#xff1a;标签&#xff1a;要预测的事物特征&#xff1a;用于描述数据的输入变量样本&#xff1a;数据的特定实例有标签的样本&#xff1a;{特征&#xff0c;标签}无标的样本&#xff1a;{特征&#xff0c;...}模型&#xff1a;将样本映射到预测标签…

Java之Synchronized与锁升级

Synchronized与锁升级 一、概述 在多线程并发编程中 synchronized 一直是元老级角色&#xff0c;很多人都会称呼它为重量级锁。但是&#xff0c;随着 Java SE 1.6 对 synchronized 进行了各种优化之后&#xff0c;有些情况下它就并不那么重了。 本文详细介绍 Java SE 1.6 中为…

机器学习算法

最近&#xff0c;机器学习岗位越来越火爆&#xff0c;那么自然对算法的一些能力要求也是越来越高&#xff0c;想要在求职者中脱颖而出&#xff0c;起步自然非常重要。 我和小伙伴们一起研讨了 2019 年校招的一些算法面试&#xff0c;有些是亲自经历的&#xff0c;也有伙伴分享的…

深度强化学习在智能城市领域应用介绍

来源&#xff1a;海豚数据科学实验室深度强化学习是近年来热起来的一项技术。深度强化学习的控制与决策流程必须包含状态&#xff0c;动作&#xff0c;奖励是三要素。在建模过程中&#xff0c;智能体根据环境的当前状态信息输出动作作用于环境&#xff0c;然后接收到下一时刻状…

Tensorflow深度学习应用(进阶篇)-回归(函数拟合训练)-可视化

#codinggbk进阶篇&#xff1a;多元回归&#xff1a;建模问题&#xff1a;Yx1xx1x2xw2x3xw3...xnxwnb,矩阵简化表示YXWbnumpy库基础&#xff1a;整型的一个数字&#xff0c; 不能取得其shape&#xff08;维度&#xff09;&#xff0c;通过np.array()可以将其转换成一个标量&…

docker下创建crontab定时任务失败

创建过程 基础镜像采用的centos7.2&#xff0c;需要安装一下crontab&#xff0c;在dockerfile中加以下语句就可以了&#xff1a; # crontab jobs RUN yum -y install crontabs ADD ./run/nlp-cron /etc/cron.d/nlp-cron RUN chmod 0644 /etc/cron.d/nlp-cron RUN crontab /etc/…

Tensorflow深度学习应用(进阶篇)-1

#codinggbk 逻辑回归&#xff1a;逻辑回归需要将输出控制在[0,1]之间&#xff0c;可以使用函数将值映射在[0,1]之间Sigmod函数&#xff0c;逻辑回归一般采用对数损失函数&#xff1b;from pylab import mpl mpl.rcParams[font.sans-serif] [SimHei] #设置显示绘图显示中文 mp…

​20210716未来智能实验室收录资料

20210716未来智能实验室收录资料特别推荐&#xff1a;置顶收录未来智能实验室在人民日报《学术前沿》发表的城市大脑最新综述研究论文和报告《城市大脑的起源、发展与未来趋势》。本期收录前沿科技进展材料52篇1.《科学》&#xff1a;媲美AlphaFold2的蛋白质结构预测新工具问世…

Jq将字符串复制粘贴到剪贴板

第一种&#xff1a; 自己测试时 只适合于input 和textarea 但是针对于其他标签的复制就不能用了。代码如下&#xff1a; <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><…

元宇宙深度研究报告:元宇宙是互联网的终极形态?

报告出品方&#xff1a;华安证券作者&#xff1a;尹沿技、张天、姚天航1 元宇宙&#xff1a;剑指互联网的“终极形态”1.1 元宇宙指向互联网的终极形态元宇宙&#xff08;Metaverse&#xff09;概念起源于科幻小说&#xff0c;或指向互联网的“终极形态”。Metaverse 一词来源于…

论文写作

1.文献综述 站在巨人的肩膀上&#xff0c;找到自己的创新点(别人没做过的),文献综述可以帮你理清思路&#xff0c;找到切入点&#xff0c;在别人的基础上&#xff0c;做出高于别人的综述&#xff0c;这正是文献综述的意义。 内容与结构规划 目的 找出研究的空白&#xff0c;基…