本文目錄一覽:
如何優化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
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/150563.html