《高性能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. SQL Server-聚焦计算列或计算列持久化查询性能(二十二)

    前言 上一节我们详细讲解了计算列以及计算列持久化的问题,本节我们依然如前面讲解来看看二者查询性能问题,简短的内容,深入的理解,Always to review the basics. 持久化计算列比非 ...

  2. Django

    一.Django 简介 Django 是一个由 Python 写成的开放源代码的 Web 应用框架.它最初是被开发来用于管理劳伦斯出版集团旗下的一些以新闻内容为主的网站的,即是 CMS(内容管理系统) ...

  3. Tomcat启动报错org.springframework.web.context.ContextLoaderListener类配置错误——SHH框架

    SHH框架工程,Tomcat启动报错org.springframework.web.context.ContextLoaderListener类配置错误 1.查看配置文件web.xml中是否配置.or ...

  4. java 设计模式

    目录: 设计模式六大原则(1):单一职责原则 设计模式六大原则(2):里氏替换原则 设计模式六大原则(3):依赖倒置原则 设计模式六大原则(4):接口隔离原则 设计模式六大原则(5):迪米特法则 设计 ...

  5. Struts2入门(六)——国际化

    一.前言 1.1.国际化简介 国际化是指应用程序在运行的时候,根据客户端请求来自的国家地区.语言的不同而显示不同的界面(简单说就是根据你的地区显示相关地区的语言,如果你现在在英国,那么显示的语言就是英 ...

  6. css3更改input单选和多选的样式

    在项目开发中我们经常会遇到需要更改input单选和多选样式的情况,今天就给大家介绍一种简单改变input单选和多选样式的办法. 在这之前先简单介绍一下:before伪类 :before 选择器向选定的 ...

  7. 关于SMARTFORMS文本编辑器出错

    最近在做ISH的一个打印功能,SMARTFORM的需求本身很简单,但做起来则一波三折. 使用环境是这样的:Windows 7 64bit + SAP GUI 740 Patch 5 + MS Offi ...

  8. Java虚拟机 JVM

    finalize();(不建议使用,代价高,不确定性大) 如果你在一个类中覆写了finalize()方法, 那么你可以在第一次被GC的时候,挽救一个你想挽救的对象,让其不被回收,但只能挽救一次. GC ...

  9. Android Studio切换为eclipse的快捷键之后还是有区别的部分快捷键

    Android Studio Eclipse 把代码提示换成了Class Name Completion, 快捷键是Ctrl+Alt+Space(空格键). 代码提示快捷键Alt+/,         ...

  10. 从史上八大MySQL事故中学到的经验

    本文列举了史上八大MySQL宕机事件原因.影响以及人们从中学到的经验,文中用地震级数来类比宕机事件的严重性和后果,排在最严重层级前两位的是由于亚马逊AWS宕机故障(相当于地震十级和九级). 一.Per ...