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. 微信回调校验失败兼容php7

    今天在移动微信支付的代码的时候,发现校验失败,之前好好的,一点点打印了,顺着微信校验程序打印看结果,发现  $xml = $GLOBALS['HTTP_RAW_POST_DATA'];; 接收到的数据 ...

  2. Lucene 评分机制一

    1. 评分公式 1.1 公式介绍 这个公式是Lucene实际计算时使用的公式,是由原型公式推导而来 tf(t in d) 表示某个term的出现频率,定义了term t出现在当前document d的 ...

  3. html2canvas JS截图插件

    github/download:https://github.com/niklasvh/html2canvas/releases 参考文章:基于html2canvas实现网页保存为图片及图片清晰度优化 ...

  4. bootstrap面包屑在ie8下显示重叠,鼠标点击显示效果正常

    ie8下加载后的显示 点击之后的显示 主要是li标签宽度auto引起的,可以设置li标签的最小宽度 <ol class="breadcrumb"> <li id= ...

  5. org.hibernate.service.spi.ServiceException: Unable to create requested service [org.hibernate.engine.jdbc.connections.spi.ConnectionProvider]

    从hibernate3升级到4应该会遇到 应该添加引用 <!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-c3p0 ...

  6. css3之文本和颜色功能之text-shadow

    总本看一下 1.text-shadow 语法:text-shadow: h-shadow v-shadow blur color; h-shadow: 必需.水平阴影的位置.允许负值. v-shado ...

  7. 详解Spring MVC 4常用的那些注解

    Spring从2.5版本开始在编程中引入注解,用户可以使用@RequestMapping, @RequestParam, @ModelAttribute等等这样类似的注解.到目前为止,Spring的版 ...

  8. 2016年省赛 G Triple Nim

    2016年省赛 G Triple Nimnim游戏,要求开始局面为先手必败,也就是异或和为0.如果n为奇数,二进制下最后一位只有两种可能1,1,1和1,0,0,显然异或和为1,所以方案数为0如果n为偶 ...

  9. TZ_06_SpringMVC_异常处理,自定义异常

    1.SpringMVC异常处理的方式 . 2. 异常处理思路 1>. Controller调用service,service调用dao,异常都是向上抛出的,最终有DispatcherServle ...

  10. 20190922-雅礼Day2

    先送大家几个变量名: 具体的可以去$C++ \ Reference$里看(本页 右侧/下侧 有链接) 或者等一下奇迹银桥第三氮 const int c; mutable int a; volatile ...