DOM是一个与语言无关的API，它在浏览器中的借口却是用JS来实现的。

浏览器通常会把DOM和JS独立实现.

在IE中，JS的实现名是JScript，位于jscript.dll文件中，DOM实现则是mshtml.dll；

Safari中的DOM和渲染则使用webkit中的WebCore来实现，JS则是有独立的JavaScriptCore引擎来实现；

Google浏览器，同样使用webkit中的WebCore来渲染页面，但JS引擎则是由V8来实现；

Firefox中的JS引擎名为SpiderMonkey（最新版的名字是TraceMonkey），与名为Gecko的渲染引擎相互独立。

浏览器 JS实现引擎 DOM实现引擎
IE JScript（jscript.dll文件中） mshtml.dll
Safari webkit中的WebCore JavaScriptCore
Chrome webkit中的WebCore V8
Firefox SpiderMonkey（最新版是TraceMonkey） Gecko

两个相互独立的功能只要通过接口彼此连接，就会产生消耗。访问DOM,也会产生一定的消耗。

DOM的访问和修改

访问DOM元素是有代价的----如书上所说的过桥费，修改元素则更是昂贵，因为他会导致浏览器重新计算页面的几何变化。当然最坏的情况是在循环中访问或修改元素，尤其是对HTML元素集合的循环操作。

如上面代码：此代码的问题在于-----每次循环，该元素都会被访问两次，一次读取innerHTML属性值，另一次重写它；

更高效率的做法，用局部变量存储修改中的内容，在循环结束后一次性写入：

读JS高性能总结——DOM编程（一）的更多相关文章

  1. 高性能JS笔记3——DOM编程

    一.访问与修改DOM DOM和JS 相当于两个岛屿,访问操作的次数越多,要交的过路费越多,对性能产生很大影响. 减少访问DOM的次数,把运算尽量留在JS端操作. 二.innerHTML 对比 DOM ...

  2. 高性能JavaScript DOM编程

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用 ...

  3. JS性能优化——DOM编程

    浏览器中的DOM  天生就慢 DOM是个与语言无关的API,它在浏览器中的接口却是用JavaScript实现的.客户端脚本编程大多数时候是在个底层文档打交道,DOM就成为现在JavaScript编码中 ...

  4. 高性能JavaScript之DOM编程

    我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...

  5. JavaScript性能优化 DOM编程

    最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML ...

  6. 160826、浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘

    一.浏览器渲染页过程描述   1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...

  7. 浏览器渲染页面过程描述，DOM编程技巧以及重排和重绘。

    一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DOM树 ...

  8. 《高性能javascript》 领悟随笔之-------DOM编程篇(二)

    <高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

  9. 《高性能javascript》 领悟随笔之-------DOM编程篇

    <高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...

随机推荐

  1. Sublime Text3添加到右键快捷菜单教程（亲测可用）

    前言: 安装Sublime Text3时,未选择右键快捷方式,可以通过下面的方式解决! 教程: 方法一: 新建sublime_addright.reg文件 编辑后双击打开就OK 注意:括号内是subl ...

  2. Python pylint的安装和使用

    Pylint 是一个 Python 代码分析工具,它分析 Python 代码中的错误,查找不符合代码风格标准和有潜在问题的代码. Pylint 是一个 Python 工具,除了平常代码分析工具的作用之 ...

  3. 线段树区间更新+区间求和模板（数组实现）洛谷p3372，p3373

    模板题目1:https://www.luogu.org/problemnew/show/P3372 懒惰标记讲解:https://www.cnblogs.com/wushengyang/p/11194 ...

  4. hibernate一对一关联手动改表后No row with the given identifier exists:

    articleId手动改了一个并不存在的值 把被控端的id改成存在的就好了

  5. Java 线程池 +生产者消费者+MySQL读取300 万条数据

    1.1需求 数据库300 万条用户数据 ,遍历获取所有用户, 各种组合关联, 获取到一个新的json ,存到redis 上. 1.2 难点 数据库比较多, 不可能单线程查询所有的数据到内存. 1.3解 ...

  6. [转]C#改变无边框窗体大小

    #region 改变窗体大小 const int WM_NCHITTEST = 0x0084; ; //左边界 ; //右边界 ; //上边界 ; //左上角 ; //右上角 ; //下边界 cons ...

  7. TCP、UDP区别

    个人认为,用户层Socket的TCP和UDP编程,区别并不大.   最大的区别,或者说,唯一的区别,似乎就是TCP客户端中断连接之后,TCP会得到一个应答.   但是如果用UDP来实现TCP,似乎也不 ...

  8. 一些hbase的shell查询语句

    华为bids(不想吐槽)种种原因只能用hbase shell查询,在此记录下自己探索的hbase shell 免得下次要用还得去找 scan 'ogg_sel_ioc_sv_product_name_ ...

  9. day18 8.jdbc中设置事务隔离级别

    设置数据库事务隔离级别特殊需求才有,后面很少用.因为数据库本身是事务隔离级别的,mysql的事务隔离级别是Repeatable read,可以解决脏读和不可重复读.不用设置,人家数据库是有事务隔离级别 ...

  10. 2018-10-20-C#-从零开始写-SharpDx-应用-初始化dx修改颜色

    title author date CreateTime categories C# 从零开始写 SharpDx 应用 初始化dx修改颜色 lindexi 2018-10-20 17:34:37 +0 ...