本文目录一览:
如何优化js代码
一、 让代码简洁:一些简略的表达方式也会产生很好的优化
eg:x=x+1;在不影响功能的情况下可以简写为x++;
二、 变量名方法名尽量在不影响语意的情况下简单。(可以选择首字母命名)
eg:定义数组的长度可以取名为:ArrLen而不需要取为ArrayLength。
三、 关于JS的循环,循环是一种常用的流程控制。
JS提供了三种循环:for(;;)、while()、for(in)。在这三种循环中for(in)的效率最差,因为它需要查询Hash键,因此应尽量少用for(in)循环,for(;;)、while()循环的性能基本持平。当然,推荐使用for循环,如果循环变量递增或递减,不要单独对循环变量赋值,而应该使用嵌套的++或–运算符。
四、 如果需要遍历数组,应该先缓存数组长度,将数组长度放入局部变量中,避免多次查询数组长度。
因为我们常常要根据字符串、数组的长度进行循环,而通常这个长度是不变的,比如每次查询a.length,就要额外进行一个操作,而预先把var len=a.length,则就少了一次查询。
五、 尽量选用局部变量而不是全局变量。
局部变量的访问速度要比全局变量的访问速度更快,因为全局变量其实是window对象的成员,而局部变量是放在函数的栈里的。
六、 尽量少使用eval。
每次使用eval需要消耗大量时间,这时候使用JS所支持的闭包可以实现函数模板。
七、 减少对象查找
因为JavaScript的解释性,所以a.b.c.d.e,需要进行至少4次查询操作,先检查a再检查a中的b,再检查b中的c,如此往下。所以如果这样的表达式重复出现,只要可能,应该尽量少出现这样的表达式,可以利用局部变量,把它放入一个临时的地方进行查询。
八、 字符串连接。
如果是追加字符串,最好使用s+=anotherStr操作,而不是要使用s=s+anotherStr。
如果要连接多个字符串,应该少使用+=,如s+=a;s+=b;s+=c;应该写成s+=a + b + c;
而如果是收集字符串,比如多次对同一个字符串进行+=操作的话,最好使用一个缓存。怎么用呢?使用JavaScript数组来收集,最后使用join方法连接起来,如下
var buf = new Array();for(var i = 0; i 100; i++){ buf.push(i.toString());}var all = buf.join("");
九、 类型转换
1. 把数字转换成字符串,应用"" + 1,虽然看起来比较丑一点,但事实上这个效率是最高的,性能上来说:("" +) String() .toString() new String()
尽量使用编译时就能使用的内部操作要比运行时使用的用户操作要快。
String()属于内部函数,所以速度很快,而.toString()要查询原型中的函数,所以速度逊色一些,new String()用于返回一个精确的副本。
2. 浮点数转换成整型,这个更容易出错,很多人喜欢使用parseInt(),其实parseInt()是用于将字符串转换成数字,而不是浮点数和整型之间的转换,我们应该使用Math.floor()或者Math.round()。Math是内部对象,所以Math.floor()其实并没有多少查询方法和调用的时间,速度是最快的。
3. 对于自定义的对象,如果定义了toString()方法来进行类型转换的话,推荐显式调用toString(),因为内部的操作在尝试所有可能性之后,会尝试对象的toString()方法尝试能否转化为String,所以直接调用这个方法效率会更高
十、 尽量作用JSON格式来创建对象,而不是var obj=new Object()方法。
因为前者是直接复制,而后者需要调用构造器,因而前者的性能更好。
十一、 当需要使用数组时,也尽量使用JSON格式的语法,
使用JSON格式的语法即直接使用如下语法定义数组:[parrm,param,param...],而不是采用new Array(parrm,param,param...)这种语法。因为使用JSON格式的语法是引擎直接解释的。而后者则需要调用Array的构造器。
十二、 对字符串进行循环操作,例如替换、查找,就使用正则表达式。
因为JS的循环速度比较慢,而正则表达式的操作是用C写成的API,性能比较好。
十三、 插入HTML
很多人喜欢在JavaScript中使用document.write来给页面生成内容。事实上这样的效率较低,如果需要直接插入HTML,可以找一个容器元素,比如指定一个div或者span,并设置他们的innerHTML来将自己的HTML代码插入到页面中。
十四、 对象查询
使用[“”]查询要比.items()更快
十五、 定时器
如果针对的是不断运行的代码,不应该使用setTimeout,而应该是用setInterval。setTimeout每次要重新设置一个定时器。
十六、 尽量减少DOM调用
在Web开发中,JavaScript的一个很重要的作用就是对DOM进行操作。可是对DOM的操作是非常昂贵的,因为这会导致浏览器执行回流 (reflow)操作。我们应该尽可能的减少DOM操作。
js溢出常见现象以及引发原因
出现js溢出的问题一般的情况有两种:
1.检查自己的js代码看代码中有没有死循环。
2.代码中引用了jQuery-1.4.2.min.js这个js实现一些动态效果或者是辅助,这个版本的jQuery就存在这样的
解决方案:
1.查询自己的代码,用ie8、ie9 自带的js调试工具跟一遍代码看哪里出现了问题。
2.更换jQuery引用版本。
JavaScript问题,代码及报错如下,求解决方案
错误意思是你引用了未定义或者为空的方法
看你的代码的话是form没有获取到,你在好好看看你的代码,获取到form后肯定不会报此错误的
关于一段js代码的几个问题
据我了解,这段代码应该是微软专用的,可以在 IE 中设置默认主页。也就是说,以上CSS 的 behavior 和 JavaScript 的 setHomePage() 是 IE 的私有语法,他们应该是在 IE5 中引入的,新版本的 IE 仍然支持,不过其他非 IE 内核浏览器是不支持的。
1. return(false) 是为了阻止浏览器的默认行为。比如说,a 的默认行为是产生超链接,单击后影响浏览器的地址栏进行跳转 ,还有 form 中的 button,默认行为是单击后提交表单,那么在 a 或 button 的 onclick 事件函数中 return(false) 就可以阻止这种行为,这样就可以自定义某些功能了。
2. setHomePage(url) 是设置默认主页的,url=你要设置的页面地址。这是为 IE 专门设置的一个方法。
3.behavior 也是专用于 IE 的,就是借助 CSS 样式向 HTML 添加代码,从而产生在 IE 中的某种浏览器效果,“#default#homepage”表示设置默认主页效果。
4. 将 onclick 的代码写在函数中会好一些,比如说 onclick=“function(){ /*代码放在函数里面*/ }”,还有,setHomePage(url) 的 url 应当是整的网址,要有协议头,如“http://”。
关于你说的 this.style.behavior 对 DOM 对象产生的影响问题,我来解释一下:
1. this 指是的当前调用事件函数(如 onclick )的文档对象,如 a onclick="this.setHomePage('......')" , this 就是对象 a 的引用(或者说就是这个 a);
2. 而 obj.style 是对文档对象中 style 属性的引用,比如上面的例子中,写了 this.style.behavior='url(#default#homepage}',就相当于 a style=“behavior:url(#default#homepage)”。
如果你想详细了解,可以看有关 HTML DOM 和 CSS in JavaScript 的资料。另外,IE 的专有语法可能与 Web 标准语法的实现机理不同,所以不用深究。
-----------------------------------------------------------------------------------------
你要的那种“枚举”功能,实际上就是用 for-in 循环实现的,比如说要查看 window 对象的属性:
for(prop in window){
document.write(prop+":"+window[prop]);
}
还有,之前已经说过,this.style 操作的是对象的样式(或者说是 CSS),this.style.behavior 指向的就是 behavior 这个 CSS 属性,这个属性只有 IE 可以完全识别。而 setHomePage() 是微软在 IE 实现的 DOM 中为对象额外定义的一个方法。这两者没有直接联系,也不存在“先有谁,后有谁”的问题,只是配合起来,可以在 IE 上实现添加默认主页的对话框而已。
js代码问题
你可以加一个层来显示你的关闭按钮,这个层的位置和flash的层的位置实现方法一样,只是把有关闭按钮的层放到flash层的上面。实现的思路是隐藏显示flash文件的层。。。。。
大哥看好了是这样加的
左边
theFloaters.addItem('close1',6,80,'img src=close.jpg onClick=hiddenp1() ');
你自己写的隐藏的方法 hiddenp1()
右边
theFloaters.addItem('followDiv1','document.body.clientWidth-106',80,'img src=close.jpg onClick="hiddenp2()"');
至于位置你可以自己调整
再给10分 我给你实现代码
下面是具体实现,所有功能都已经实现,快点给我分。。。。
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title层/title
script language="JavaScript"
var delta=0.08
var collection;
function floaters()
{
this.items = [];
this.addItem = function(id,x,y,content,i,cx,cy)//i代表层的位置 id层的标识 x,y层的坐标 cx层的宽度 cy层的高度
{
alert("1")
//document.write('DIV id='+id+' style="Z-INDEX: 10; POSITION: absolute; width:80px; height:60px;left:'+(typeof(x)=='string'?eval(x):x)+';top:'+(typeof(y)=='string'?eval(y):y)+'"'+content+'/DIV');
document.write('DIV id='+id+' style="Z-INDEX: '+i+'; POSITION: absolute; width:'+cx+'; height:'+cy+';left:'+x+';top:'+y+'"'+content+'/DIV');
var newItem = {};
newItem.object = document.getElementById(id);
newItem.x = x;
newItem.y = y;
alert("2")
this.items[this.items.length] = newItem;
}
this.play = function()
{
collection = this.items
setInterval('play()',10);
}
}
function play()
{
for(var i=0;icollection.length;i++)
{
var followObj = collection[i].object;
var followObj_x = (typeof(collection[i].x)=='string'?eval(collection[i].x):collection[i].x);
var followObj_y = (typeof(collection[i].y)=='string'?eval(collection[i].y):collection[i].y);
if(followObj.offsetLeft!=(document.body.scrollLeft+followObj_x)) {
var dx=(document.body.scrollLeft+followObj_x-followObj.offsetLeft)*delta;
dx=(dx0?1:-1)*Math.ceil(Math.abs(dx));
followObj.style.left=followObj.offsetLeft+dx;
}
if(followObj.offsetTop!=(document.body.scrollTop+followObj_y)) {
var dy=(document.body.scrollTop+followObj_y-followObj.offsetTop)*delta;
dy=(dy0?1:-1)*Math.ceil(Math.abs(dy));
followObj.style.top=followObj.offsetTop+dy;
}
followObj.style.display = '';
}
}
var theFloaters = new floaters();
//右面
theFloaters.addItem('followDiv1','document.body.clientWidth-106',80,'EMBED src=Img2268828951.swf quality=high WIDTH=100 HEIGHT=300 TYPE=application/x-shockwave-flash id=ad wmode=opaque/EMBED',1,80,60);
//右边关闭按钮
theFloaters.addItem('close1','document.body.clientWidth-106',80,'img src=73571174520.jpg width="30" height="30" onClick="hiddenp1()"',2,30,30);
//左面
theFloaters.addItem('followDiv2',6,80,'EMBED src=Img2268828951.swf quality=high WIDTH=100 HEIGHT=300 TYPE=application/x-shockwave-flash id=ad1 wmode=opaque/EMBED',1,80,60);
//左边关闭按钮
theFloaters.addItem('close2',6,80,'img src=73571174520.jpg width="30" height="30" onClick=hiddenp2()',2,30,30);
theFloaters.play();
function hiddenp1()
{
window.document.all.followDiv1.style.visibility='hidden'
window.document.all.close1.style.visibility='hidden'
}
function hiddenp2()
{
window.document.all.followDiv2.style.visibility='hidden'
window.document.all.close2.style.visibility='hidden'
}
/script
/head
body
/body
/html