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. List--使用List作为堆栈和队列

    1,List作为堆栈 堆栈“先进后出”.对此,可以使用append和pop来操作数据. 不指定下标时,pop会先操作最后一个数据. 例如: 2,队列 队列“先进先出”.当然也可以使用append和po ...

  2. utils04_搭建私有Git服务器

    1.远程仓库实际上和本地仓库没啥不同,纯粹为了7x24小时开机并交换大家的修改.GitHub就是一个免费托管开源代码的远程仓库.但是对于某些视源代码如生命的商业公司来说,既不想公开源代码,又舍不得给G ...

  3. Java SE、Java EE、Java ME三者的区别

    1. Java SE(Java Platform,Standard Edition).Java SE 以前称为 J2SE.它允许开发和部署在桌面.服务器.嵌入式环境和实时环境中使用的 Java 应用程 ...

  4. 【arc075f】AtCoder Regular Contest 075 F - Mirrored

    题意 给定一个数x,问有多少个正整数y,使得rev(y)-y==x 其中rev(x)表示x按位翻转之后得到的数. x<=1e9 做法 首先通过打表发现,这个答案不会很大. 这就说明解相当地松弛. ...

  5. PAT甲级——A1053 Path of Equal Weight

    Given a non-empty tree with root R, and with weight W​i​​ assigned to each tree node T​i​​. The weig ...

  6. HTML5：使用Canvas和Input range控件放大缩小图片,剪裁，并上传图片

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. 国内在Amazon fireTV或者fire平板下载应用（netflix\hulu\YouTube）的方法

    1.首先需要vpn翻墙至U.S. 2.需要一个美国亚马逊账户,并设置收货地址 (Manage Your Fire & Kindle 1-Click Payment Settings ),如果只 ...

  8. spring源码学习之springMVC（二）

    接着上一篇.继续来看springMVC中最和我们开发中接近的一部分内容: DispatcherServlet的逻辑处理 作者写到在DispatcherServlet类中存在doGet.doPost之类 ...

  9. VS2013生成、使用dll，lib文件

    VS2013生成DLL文件 vs2013创建及使用DLL 一般来说项目偏爱生成dll动态库文件,因为可以解决静态库造成的空间浪费和更新困难问题,另外创建静态库时,我一般是建立空项目后,在项目配置类型中 ...

  10. JS字符串的相关方法

    1.字符方法 charAt()和charCodeAt(),都接收一个参数,charAt()返回的是给定位置的字符,charCodeAt()返回的是给定位置字符的字符编码.如: <script&g ...