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

  序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整个页面文档。DOM编程性能一直以来都是非常受开发者关注的话题,如何编写高性能的DOM是前端开发必不可少的技能。


  1.DOM访问与修改

访问DOM元素是有一定的性能代价的,有时候这种代价会整体拖慢网页的运行速度,例如循环访问或修改一些元素内容,操作不当会导致页面卡帧,甚至是假死,例如下面的代码。

function loop(){
for(var i=0;i<1000;i++){
document.getElementById("id").innerHTML += "a";
}
}

loop()函数 循环修改某个元素的innerHTML内容,这段代码的问题在于,每次循环,这个元素都会被访问两次 一次读取,一次修改;

优化的关键在于,我们可以将需要的最终内容拼接成一个字符串,在字符串拼接完成之后一次性修改,这样做大大提升了整体运行速度,并且使代码更容易被理解;

function loop(){
var oDiv = document.getElementById("id"),
sDIV = oDiv.innerHTML;   
for(var i=0;i<1000;i++){
sDIV += "a";     //拼接文本字符串
}
oDiv.innerHTML = sDiv;
}

同理,当我们需要请求某一个表格,异步插入数据的时候,往往先将数据拼接成字符串,再利用innerHTML一次性插入;

for(...){
var t += "<div>......</div>";
}
table.innerHTML = ......;

总结:访问DOM的次数越多,代码的运行速度越慢。因此,通常的经验法则是:减少dom的访问次数,把运算尽量用ECMASCRIPT处理;

2.访问html集合

HTML集合是包含了一组节点信息的类数组对象,它拥有数组的下标访问特性,又不同于数组的引用;

列举一些返回html集合的方法:

document.getElementsByTagName(); 
document.getElementsByClassName();
document.images //返回页面中所有的img元素
document.links //返回页面中的所有链接元素(a)
document.forms //返回页面中所有的表单
......

在访问或者修改这些元素集合的时候,因为访问元素集合始终是没有访问数组快的,所以在修改元素变化不大而的时候,可以将其复制到另一个数组中,从而提升访问速度

function htmltoArray(h){
for(var i=0,len=h.length,arr=[];i<len;i++){  //遍历 复制整个集合
arr[i]=h[i];
}
return arr;
}

这是一个有趣的方法,笔者通过这个函数,试着做了一个类似与jquery的 .index() 方法 , 其原理是将集合复制到数组中 利用数组对象的方法indexof() 确定某个元素相对它的父级元素的位置,代码如下:

function Index(a){
var b = htmltoArray(a.parentNode.children);
return b.indexOf(a); //确定a元素相对它的父级元素b的位置
}

另外,对于所有的DOM访问,多次访问同一个元素的时候,需要把它存在一个局部变量中,减少重复访问的次数;

总结:所有的需要多次访问的元素,事先将其保存在一个局部变量中可以减少访问次数,提高性能,遍历一个数组总是要比遍历一个集合要快得多,一些新的api能够更快速的获得html集合,比如querySeleteor()querySeleteorAll(),使dom集合操作更加简单,高效;  api参考地址:http://www.cnblogs.com/daxian2012/archive/2012/10/18/2729359.html

《高性能javascript》 领悟随笔之-------DOM编程篇的更多相关文章

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

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

  2. JavaScript(三)-- DOM编程

    JavaScript编程中最基本的就是DOM编程,DOM是 Document Object Model文本对象模型,就是对DOM对象进行编程的过程. Java语言和Js都有针对于DOM的编程,两者类似 ...

  3. 轻松学习JavaScript十八:DOM编程学习之DOM简单介绍

    一DOM概述 DOM(文档对象模型)是HTML和XML的应用程序接口(API).DOM将把整个页面规划成由节点层级构成的文档. DOM描绘了一个层次化的节点树,执行开发者加入,移除和改动页面的某一部分 ...

  4. 轻松学习JavaScript二十七:DOM编程学习之事件模型

    在介绍事件模型之前,我们先来看什么是事件和什么是event对象. 一事件介绍 JavaScript事件是由訪问Web页面的用户引起的一系列操作,使我们有能力创建动态页面.事件是能够被 JavaScri ...

  5. 《高性能javascript》随笔

    1.css文件在head标签中引入,保证在渲染结构的时候进行样式渲染2.Js文件放在body的底部,确保在渲染dom树的时候不会出现js阻塞3.函数内的变量是访问速度最快的,全局变量的访问速度是最慢的 ...

  6. javascript性能优化之Dom编程性能调优总结

    1.最小化的Dom访问,在一次Dom访问做尽可能多的操作: 2.使用局部变量存放指向反复访问的元素节点的Dom引用,原则上js代码中不应该重复获取同一个元素节点,除非它在运行过程中发生改变: 3.对元 ...

  7. 高性能JavaScript DOM编程

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

  8. 高性能JavaScript笔记一(加载和执行、数据访问、DOM编程)

    写在前面 好的书,可能你第一遍并不能领会里面的精魂,当再次细细品评的时候,发现领悟的又是一层新的含义 (这段时间,工作上也不会像从前一样做起来毫不费力,开始有了新的挑战,现在的老大让我既佩服又嫉妒,但 ...

  9. 高性能JavaScript之DOM编程

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

随机推荐

  1. jQuery动画-圣诞节礼物

    ▓▓▓▓▓▓ 大致介绍 下午看到了一个送圣诞礼物的小动画,正好要快到圣诞节了,就动手模仿并改进了一些小问题 原地址:花式轮播----圣诞礼物传送 思路:动画中一共有五个礼物,他们平均分布在屏幕中,设置 ...

  2. javascript工厂模式和构造函数模式创建对象

    一.工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,这种模式抽象了创建具体对象的过程(本书后面还将讨论其他设计模式及其在JavaScript 中的实现).考虑到在ECMAScript 中无法创 ...

  3. 缓存、队列(Memcached、redis、RabbitMQ)

    本章内容: Memcached 简介.安装.使用 Python 操作 Memcached 天生支持集群 redis 简介.安装.使用.实例 Python 操作 Redis String.Hash.Li ...

  4. [EasyUI美化换肤]更换EasyUi图标

    前言 本篇文章主要是记录一些换EasyUI皮肤的过程,备忘.也欢迎美工大神各路UI给点好意见,EasyUI我就不介绍了,自行百度吧..(So..所以别问我是不是响应式..本身EasyUI就不是响应式. ...

  5. jquery.cookie的使用

    今天想到了要为自己的影像日记增加赞的功能,并且需要用到cookie. 记得原生的js操作cookie也不是很麻烦的,但似乎jquery更简单,不过相比原生js,需要额外引入2个文件,似乎又不是很好,但 ...

  6. Linux不能上网ping:unknown host问题怎么解决?

    Linux不能上网提示ping:unknown host 检查步骤 Linux系统跟windows平台有所不同的是,为了更好的做网络服务应用.Linux下多用于网络服务器,而且操作界面是字符界面.对于 ...

  7. 一步步学习javascript基础篇(9):ajax请求的回退

    需求1: ajax异步请求 url标识请求参数(也就是说复制url在新页面打开也会是ajax后的效果) ajax异步请求没问题,问题一般出在刷新url后请求的数据没了,这就是因为url没有记录参数.如 ...

  8. Joshua Bloch错了? ——适当改变你的Builder模式实现

    注:这一系列都是小品文.它们偏重的并不是如何实现模式,而是一系列在模式实现,使用等众多方面绝对值得思考的问题.如果您仅仅希望知道一个模式该如何实现,那么整个系列都会让您失望.如果您希望更深入地了解各个 ...

  9. MongoDB与PostgresQL无责任初步测试

    PostgresQL一秒能插入多少条记录,MongoDB呢?读取的情况又如何?我写了一些简单的程序,得出了一些简单的数据,贴在这里分享,继续往下阅读前请注意下本文标题中的“无责任”,这表示此测试结果不 ...

  10. BCL中String.Join的实现

    在开发中,有时候会遇到需要把一个List对象中的某个字段用一个分隔符拼成一个字符串的情况.比如在SQL语句的in条件中,我们通常需要把List<int>这样的对象转换为“1,2,3”这样的 ...