js操作dom为什么消耗性能

2024-09-05

操作dom影响性能的原因

为什么dom操作会影响性能? 在浏览器当中,dom的实现和ECMAScript的实现是分离的. 例如,在IE中,ECMAScrit的实现在jscript.dll中,而DOM的实现在mshtml.dll中:在Chrome中使用WebKit中的 WebCore处理DOM和渲染,但ECMAScript是在V8引擎中实现的,其他浏览器的情况类似. 因此,操作dom,就是通过js代码调用dom的接口,就相当于两个相互独立的模块发生了交互.这样,相比于在同一个模块当中互相调用,这种跨模块的调用它的性能损耗是

为什么操作dom会消耗性能

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

原生js操作DOM基础-笔记

原文参考http://mp.weixin.qq.com/s?__biz=MzU3MDA0NTMzMA==&mid=2247485490&idx=1&sn=15197b4b53e0669e4a017e54a31fb39c&source=41#wechat_redirect 使用原生js为了提高效率,纯js操作dom一查询DOMdocument.querySelector()参数是任意css选择器格式,只会返回第一个匹配到值document.querySelectorAll(

框架操作DOM和原生js操作DOM比较

问题引出对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html ng-app="test"> <head> <title>Performance Comparison for Knockout, Angular and React</title> <link href="//cdnjs.cloud

js操作DOM对象

js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点名称 nodeType 节点类型 nodeValue 节点值 setAttribute("属性名","属性值")getAttribute("属性名") 根据属性名获取对应的属性值 getAttributeNode("属性名") 获

原生js操作Dom节点:CRUD

知识点,依然会遗忘.我在思考到底是什么原因.想到研究生考试准备的那段岁月,想到知识体系的建立,知识体系分为正向知识体系和逆向知识体系:正向知识体系可以理解为教科书目录,逆向知识体系可以理解考试真题. 按照知识体系建设这个思路,追求长久的深刻的记忆.决定建立正向知识体系.本文系正向知识体系的第一篇. 原生js操作dom节点:所谓的CRUD,代表create,read,update,del:也就是创建,读取,更新和删除.dom提供了api用于创建节点常用有 var div=document.crea

【JavaScript实用技巧（二）】Js操作DOM（由问题引发的文章改版，新人大佬都可）

[JavaScript实用技巧(二)]Js操作DOM(由问题引发的文章改版,新人大佬都可!) 博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明这片文章的来源是更改之前的一个笔记,是获取js获取input标签的值,当时只是讲了这个例子,当然下面这个例子依然保留,毕竟要在乎老用户的感受,属于增量需求. 由当时的一个例子看来,需要总结或者说学习的点还是比较多的. 新人可能只想解决某个问题,而大佬麻烦看看总结的还有哪里需要补充

JS 操作Dom节点之CURD

许多优秀的Javascript库,已经封装好了丰富的Dom操作函数,这可以加快项目开发效率.但是对于非常注重网页性能的项目来说,使用Dom的原生操作方法还是必要的. 1. 查找节点 document.getElementById() //兼容问提:IE低版本不仅检查Id属性,还会检查Name属性,当Name属性匹配参数时也会返回该元素 //解决方法:不要让一个元素name属性和另一个元素的id属性相同 document.getElementsByTagName() document.getEle

[总结]JS操作DOM常用API详解

文本整理了javascript操作DOM的一些常用的api,根据其作用整理成为创建,修改,查询等多种类型的api,主要用于复习基础知识,加深对原生js的认识. 基本概念在讲解操作DOM的api之前,首先我们来复习一下一些基本概念,这些概念是掌握api的关键,必须理解它们. Node类型 DOM1级定义了一个Node接口,该接口由DOM中所有节点类型实现.这个Node接口在JS中是作为Node类型实现的.在IE9以下版本无法访问到这个类型,JS中所有节点都继承自Node类型,都共享着相同的基本属

原生js操作dom的方法

今天学习了原生js的dom节点的操作,就记录下来,仅供自己以后参考. 1)创建节点:除了可以使用createElement创建元素,也可以使用createTextNode创建文本节点. document.body指向的是<body>元素;document.documentElement则指向<html>元素 //创建节点 var createNode = document.createElement("div"); var createT

JS操作DOM常用API总结

<JS高程>中的DOM部分写的有些繁琐,还没勇气整理,直到看到了这篇博文 Javascript操作DOM常用API总结,顿时有了一种居高临下,一览全局的感觉.不过有时间还是得自己把书里面的部分好好消化一下的,下次看应该会容易多了吧~^_^~~先放上根据参考博文整理的思维导图,后期再根据自己的吸收加以更新和补充~

JS操作DOM对象——JS基础知识（四）

一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象处理网页内容的方法和接口 (3)BOM(浏览器对象模型) 存在兼容性问题与浏览器进行交互的方法和接口 1.DOM定义为js操作html元素而制定的规范,DOM树如下图 2.节点整个文档是一个文档节点每一个标签是一个元素节点标签中的文字是一个文字节点标签中的属性是一个属性节点 3.访问节点的方法 getElementById();

JS 操作Dom节点之样式

为了提高用户体验,我们经常会动态修改Dom节点的样式,各种浏览器差异比较大,我们如何应对?不断尝试,不断总结~! 1. style.getComputedStyle.currentStyle 内嵌样式: <div style="width: 30px;background-color: #ff6a00;">我就是傻里傻气的,完全素颜!</div> 1 //内联样式优先级最高,通过style获取的样式是最准确的 2 var el

5月24日上课笔记-js操作DOM

解析properpties配置文件类加载器 ResourceBundle 一.jquery操作DOM 1.jquery操作css css("",""); css({"":"","":" ...}) addClass("class1 class2..."); removeClass("class1 class2..."); 判断是否包含某样式 hasClas

原生Js操作DOM

查找DOM .querySelectorAll(),它接受包含一个CSS选择器的字符串参数,返回一个表示文档中匹配选择器的所有元素的NodeList元素. .querySelector(),返回第一个匹配的元素 <div class="wrap"> <div class="header">header</div> </div> <script> var oHeader = document.querySel

原生js操作Dom命令总结

常用的dom方法 document.getElementById(“box”);//通过id获取标签 document.getElementsByTagName(“div”);根据标签名获取页面元素注意: 由于获取结果可能是多个,element后面要加s根据标签获取的结果是伪数组形式,伪数组是不具备数组的方法.要操作伪数组中的所有元素需要遍历伪数组. 根据标签名获取元素时,有可能获取到的标签只有一个,但是形式还是伪数组. 根据标签名获取时,document可以更换为任意标签在bo

原生js 操作dom

1.一些常用的方法 obj.getElementById() 返回带有指定 ID 的元素. obj.getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组). obj.etElementsByClassName() 返回包含带有指定类名的所有元素的节点列表. obj.getElementsByName() 方法可返回带有指定名称的对象的集合.//表单中name还是蛮多的 node.childNodes 只读 childNodes 属性返回节点

JS操作DOM节点查找

JS中常用的DOM操作事件,包括有节点查找,键盘鼠标事件等等,本文内容介绍DOM的节点查找. <script> window.onload = function(){ //children 与 childNodes console.log( document.body.children ); //包含7个节点的数组 console.log( document.body.childNodes ); //包含7个实节点,以及8个空节点组成的长度为15的数组 //firstChild 与 firs

JS 操作 DOM

定义:文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式节点:(例如:<div id="属性节点">测试</div>) 元素节点:标签元素<div> 文本节点:标签内的所有纯文本 “测试” 属性节点 :标签的属性 ‘id’ IE 浏览器是以com实现的DOM 返回一个Object一.获得元素节点 var ele = docu

5月25日-js操作DOM遍历子节点

一.遍历节点遍历子节点 children();//获取节点的所有直接子类遍历同辈节点 next(); prev(); siblings();//所有同辈元素 *find(); 从后代元素中查找匹配的 filter(); 过滤查找 each() 遍历节点 $("li").each(function(i,ele){ //alert($(ele).html()); }); 二.css DOM操作三.表单校验表单选择器

js操作Dom的一些方法简化

众所周知JQ的选择符很强大,一些看起来很难实现的功能只要在$符号中传入简单的字符串就可以获取到各种层级关系的DOM,而却不用考虑浏览器的兼容性.但有时候在做小项目的时候并不需要引入JQ,而又不想频繁繁琐地调用原始方法,那么我们可以考虑对它们做一点小小的修改,来帮助你在以后需要用到它们的时候变得方便简单.下面是一些基本方法的封装处理: 1.document.getElmentById();最基本,最常用的方法. var $ = function (id) { return typeof id ==

js操作dom为什么消耗性能

热门专题