读JS高性能总结——DOM编程(一)
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编程(一)的更多相关文章
- 高性能JS笔记3——DOM编程
一.访问与修改DOM DOM和JS 相当于两个岛屿,访问操作的次数越多,要交的过路费越多,对性能产生很大影响. 减少访问DOM的次数,把运算尽量留在JS端操作. 二.innerHTML 对比 DOM ...
- 高性能JavaScript DOM编程
我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用 ...
- JS性能优化——DOM编程
浏览器中的DOM 天生就慢 DOM是个与语言无关的API,它在浏览器中的接口却是用JavaScript实现的.客户端脚本编程大多数时候是在个底层文档打交道,DOM就成为现在JavaScript编码中 ...
- 高性能JavaScript之DOM编程
我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...
- JavaScript性能优化 DOM编程
最近在研读<高性能JavaScript>,在此做些简单记录.示例代码可在此处查看到. 一.DOM 1)DOM和JavaScript 文档对象模型(DOM)是一个独立于语言的,用于操作XML ...
- 160826、浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘
一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DO ...
- 浏览器渲染页面过程描述,DOM编程技巧以及重排和重绘。
一.浏览器渲染页过程描述 1.浏览器解析html源码,然后创建一个DOM树. 在DOM树中,每一个HTML标签都有一个对应的节点(元素节点),并且每一个文本也都有一个对应的节点(文本节点). DOM树 ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇(二)
<高性能javascript> 领悟随笔之-------DOM编程篇二 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇
<高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
随机推荐
- 二进制操作(1)–Bytes
1,Bytes的单元被当作字符串处理. 例如: 有些介绍会声称上述程序会得到这样的结果:b'\x00\x00\x00\x00' 在python v2.7.10上是得不到此结果的. 实际上,如果 typ ...
- NMS 和 Soft-NMS
转自https://zhuanlan.zhihu.com/p/42018282 一 NMS NMS算法的大致思想:对于有重叠的候选框:若大于规定阈值(某一提前设定的置信度)则删除,低于阈值的保留.对于 ...
- 转:Linux 2.4.x内核软中断机制
源地址:http://www.ibm.com/developerworks/cn/linux/kernel/interrupt/ Linux 2.4.x内核软中断机制 杨沙洲 (pubb@163.ne ...
- Activiti实战01_认识Activiti
什么是Activiti Activiti是为解决工作流而创建的一套流程引擎.举个最简单的例子,请假流程就是一个工作流,从开始到审批到结束,像流一样的贯穿整个流程.在工作中最常见的就是OA了.工作流总是 ...
- DLL编程总结
进行DLL的编程主要涉及到两个方面的问题,一个是要保证DLL中要导出的函数名不被编译器不可控地更改(在C++中由于重载机制的存在,会造成程序被编译时函数名被改变),其实就是要保证DLL导出的函数名与使 ...
- servlet接收request请求的json数据
此次使用的是alibaba的fastjson:jar包为fastjson-1.2.7.jar 参考:https://www.qingtingip.com/h_229797.html 思路:由于此次接收 ...
- numpy使用中的疑惑
numpy中有一些常用的用来产生随机数的函数,randn就是其中一个,randn函数位于numpy.random中,函数原型如下: numpy.random.randn(d0, d1, ..., dn ...
- Phone List HDU1671 字典树Trie
模板题...不过会爆内存,要小心 #include <iostream> #include <cstdio> #include <string.h> #pragma ...
- Luogu P2678 跳石头(二分)
P2678 跳石头 题意 题目背景 一年一度的"跳石头"比赛又要开始了! 题目描述 这项比赛将在一条笔直的河道中进行,河道中分布着一些巨大岩石.组委会已经选择好了两块岩石作为比赛起 ...
- global.fun.php
<?php /** 所有公共函数文件*/ /** 序列化*/function _serialize($obj){ return base64_encode(gzcompress( ...