读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则承载着整 ...
随机推荐
- walle(瓦力)部署系统的安装和简单使用
Walle(瓦力):一套软件开发的部署系统.提供了清晰的日志记录,支持数据的回滚.用于解决大型团队在软件开发中的测试.预测试和上线的统一部署管理. 系统环境:CentOS6.8-A CentOS-6. ...
- Werkzeug库——wrappers模块
Werkzeug库中的wrappers模块主要对request和response进行封装.request包含了客户端发往服务器的所有请求信息,response包含了web应用返回给客户端的所有信息.w ...
- Linux产生coredump文件(core)
1.可以使用命令 ulimit -c unlimited 来开启 core dump 功能,并且不限制 core dump 文件的大小: 如果需要限制文件的大小,将 unlimited 改成你想生成 ...
- 搭建Angular环境
一.安装nodejs 登录nodejs官网,下载对应系统版本:安装,只要一直下一步即可. 在nodejs中自带了npm,不需要独立安装npm. 输入node -v /npm -v 查看node和np ...
- MyBatis-Spring(三)--Mapped Statements collection does not contain value for...问题解决
前一篇文章我总结了一下MyBatis-Spring项目使用SqlSessionTemplate配置的用法,其实在测试过程中并不是一帆风顺,遇到了很多的问题,最主要的就是Mapped Statement ...
- 文件内容操作命令 cat、more、less、head、tail、wc、grep 命令详情
文件内容操作命令 cat.more.less.head.tail.wc.grep 命令详情 1) cat命令 用途:显示出文件的全部内容 格式:cat 目标文件 例: ...
- 利用Qt自带工具发布程序
Qt官方开发环境生成的exe发布方式--使用windeployqt 从开始菜单-->Qt 5.4.0-->5.4-->MinGW 4.9 (32-bit)-->Qt 5.4 f ...
- bzoj 2503 相框——思路
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2503 我也知道应该只关注度数. #include<iostream> #incl ...
- iphone越狱开发之Class-Dump
刚刚开始接触ios越狱开发,现在开始纪录每天的点滴进展 装载请注明 http://www.cnblogs.com/xiongwj0910/archive/2012/08/16/2642988.html ...
- linux-基础-常用命令
一 Linux的简介 1.1 Linux的概述 Linux是基于Unix的开源免费的操作系统,由于系统的稳定性和安全性几乎成为程序代码运行的最佳系统环境.Linux是由Linus Torvalds(林 ...