DOM编程_javascript技艺_脚本之家

我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵。有个贴切的比喻,把DOM和JavaScript各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳“过桥费”,访问DOM的次数越多,费用也就越高。因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上。我们不可能不用DOM的接口,那么,怎样才能提高程序的效率?

prepend()方法将指定元素插入匹配元素按内部的开头,其作用和prependTo()方法基本相同,只在语法上有差别,虽然说在语法形式上看基本相同。

有时候我们可能需要从数组中随机抽出一项内容,下面就通过一段代码实例介绍一下如何实现此效果。

1、DOM访问与修改访问DOM元素是有代价的,修改元素代价更是昂贵,因为它会导致浏览器重新计算页面的几何变化。

复制代码 代码如下:$.prepend

 var theArray=new Array();theArray[0]="脚本之家";theArray[1]="脚本之家一";theArray[2]="脚本之家二";theArray[3]="脚本之家三";theArray[4]="脚本之家四";theArray[5]="脚本之家五";theArray[6]="脚本之家六";function ranFun(){ return parseInt;}document.write;

当然最坏的情况是在循环中访问或者修改元素,看下面两段代码:

demo:

以上代码可以随机输出数组中的元素,代码非常的简单,通过使用随机数函数为数组提供一个随机的索引即可。

var times = 15000;// code1console.time;for(var i = 0; i < times; i++) { document.getElementById.innerHTML += 'a';}console.timeEnd;// code2console.time;var str = '';for(var i = 0; i < times; i++) { str += 'a';}document.getElementById.innerHTML = str;console.timeEnd;
脚本之家div{ height:200px; width:200px; border:1px solid green;}$.ready{ $.click.prepend前面要添加内容:点击查看效果

从数组随机读取N条不同数据

结果第一次运行的时间居然是第二次的千倍!(chrome 版本 44.0.2403.130 m)

prepend()详解二:

var ary = new Array();var xiaowu=new Array(“1我的“,“2我的“,“3我的“,“4我的“,“5我的“,“6我的“,“7我的“,“8我的“,“9我的“,“10我的“,“11我的“,“12我的“,“13我的“,“14我的“,“15我的“,“16我的“,“17我的“,“18我的“,“19我的“,“20我的”);var s01=xiaowu.lengthwhile{var tmp =xiaowu[parseInt]var b = false;for (var i=0; i//从一个给定的数组arr中,随机返回num个不重复项function getArrayItems {//新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;var temp_array = new Array();for  {temp_array.push;}//取出的数值项,保存在此数组var return_array = new Array();for (var i = 0; i这段JS代码可以对数组内的元素进行随机排列,这个非常有用,比如我们在玩扑克牌的时候可以让扑克牌进行排列,也就是电脑洗牌。
1: 2846.700ms2: 1.046ms

prepend()函数用于向每个匹配元素内部的起始位置追加指定的内容。

第一段代码的问题在于,每次循环迭代,该元素都会被访问两次:一次读取innerHTML的值,另一次重写它,也就是说,每次循环都在过桥!结果充分表明,访问DOM的次数越多,代码的运行速度越慢。因此,能减少DOM访问的次数则尽量减少,尽量留在ECMAScript这端处理。

指定的内容可以是:html字符串、DOM元素。

2、HTML集合 &
遍历DOM
操作DOM另一个耗能点就是遍历DOM,一般我们会收集一个HTML集合,比如用getElementsByTagName(),或者用document.links等,我想大家对此都不陌生。收集的结果是一个类似数组的集合,它处于一种“实时状态”实时存在,这意味着当底层文档对象更新时,它也会自动更新。怎么讲?很简单举个栗子:

与该函数相对的是append()函数,用于向每个匹配元素内部的末尾位置追加指定的内容。

  • apple
  • orange
  • banana

该函数属于jQuery对象。

发表评论

电子邮件地址不会被公开。 必填项已用*标注