js優(yōu)化針對(duì)IE6.0起作用(詳細(xì)整理)
js優(yōu)化針對(duì)IE6.0起作用，總結(jié)一下幾點(diǎn)：
一，字符串拼接：用數(shù)組拼接
function func2(){
var start = new Date().getTime();
var array = [];
for(var i = 0; i < 10000; i++){
array[i] = "<input type='button' value='a'>";
}
二，for 循環(huán)：先把長度算出來直接調(diào)用
function func2(){
var divs = document.getElementsByTagName("div");
var start = new Date().getTime();
for(var i = 0, len = divs.length; i < len; i++){
//"效率高"
}
三，減少頁面的重繪：可以用一中把頁面拼接起來然后再賦值給頁面
function func2(){
var obj = document.getElementById("demo");
var start = new Date().getTime();
var arr = [];
for(var i = 0; i < 100; i++){
arr[i] = str + i;
}
obj.innerHTML = arr.join("");
四，減少作用域鏈上的查找次數(shù)：如果取多個(gè)頁面值則定義一個(gè)document對(duì)象，再調(diào)用這個(gè)對(duì)象
var doc = document;
for(var i = 0; i < 10000; i++){
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
}
}
五，避免雙重解釋：不要重復(fù)調(diào)用函數(shù)或者方法
1、字符串的拼接
字符串的拼接在我們開發(fā)中會(huì)經(jīng)常遇到，所以我把其放在首位，我們往往習(xí)慣的直接用+=的方式來拼接字符串，其實(shí)這種拼接的方式效率非常的低，我們可以用一種巧妙的方法來實(shí)現(xiàn)字符串的拼接，那就是利用數(shù)組的join方法。
<div class="one" id="one"></div>
<input type="button" value="效率低" onclick="func1()" />
<input type="button" value="效率高" onclick="func2()" />
//效率低的
function func1(){
var start = new Date().getTime();
var template = "";
for(var i = 0; i < 10000; i++){
template += "<input type='button' value='a'>";
}
var end = new Date().getTime();
document.getElementById("one").innerHTML = template;
alert("用時(shí):" + (end - start) + "毫秒");
}
//效率高的
function func2(){
var start = new Date().getTime();
var array = [];
for(var i = 0; i < 10000; i++){
array[i] = "<input type='button' value='a'>";
}
var end = new Date().getTime();
document.getElementById("one").innerHTML = array.join("");
alert("用時(shí):" + (end - start) + "毫秒");
}
我們看看其在不同瀏覽器下執(zhí)行的情況
我們會(huì)發(fā)現(xiàn)，在IE6下其差別是相當(dāng)明顯的，其實(shí)這種情況在IE的高版本中體現(xiàn)的也非常明顯，但是在Firefox下卻沒有多大的區(qū)別，相反第二種的相對(duì)效率還要低點(diǎn)，不過只是差別2ms左右，而Chrome也和Firefox類似。另外在這里順便說明一下，在我們給數(shù)組添加元素的時(shí)候，很多人喜歡用數(shù)組的原生的方法push，其實(shí)直接用arr[i]或者arr[arr.length]的方式要快一點(diǎn)，大概在10000次循環(huán)的情況IE瀏覽器下會(huì)有十幾毫秒的差別。
2、for循環(huán)
for循環(huán)是我們經(jīng)常會(huì)遇到的情況，我們先看看下面例子：
<input type="button" value="效率低" onclick="func1()" />
<input type="button" value="效率高" onclick="func2()" />
var arr = [];
for(var i = 0; i < 10000; i++){
arr[i] = "<div>" + i + "</div>";
}
document.body.innerHTML += arr.join("");
//效率低的
function func1(){
var divs = document.getElementsByTagName("div");
var start = new Date().getTime();
for(var i = 0; i < divs.length; i++){
//"效率低"
}
var end = new Date().getTime();
alert("用時(shí)：" + (end - start) + "毫秒");
}
//效率高的
function func2(){
var divs = document.getElementsByTagName("div");
var start = new Date().getTime();
for(var i = 0, len = divs.length; i < len; i++){
//"效率高"
}
var end = new Date().getTime();
alert("用時(shí)：" + (end - start) + "毫秒");
}
由上表可以看出，在IE6.0下，其差別是非常明顯，而在Firefox和Chrome下幾乎沒有差別，之所以在IE6.0下會(huì)有這種情況，主要是因?yàn)閒or循環(huán)在執(zhí)行中，第一種情況會(huì)每次都計(jì)算一下長度，而第二種情況卻是在開始的時(shí)候計(jì)算長度，并把其保存到一個(gè)變量中，所以其執(zhí)行效率要高點(diǎn)，所以在我們使用for循環(huán)的時(shí)候，特別是需要計(jì)算長度的情況，我們應(yīng)該開始將其保存到一個(gè)變量中。但是并不是只要是取長度都會(huì)出現(xiàn)如此明顯的差別，如果我們僅僅是操作一個(gè)數(shù)組，取得的是一個(gè)數(shù)組的長度，那么其實(shí)兩種方式的寫法都差不多，我們看下面的例子：
<input type="button" value="效率低" onclick="func1()" />
<input type="button" value="效率高" onclick="func2()" />
var arr2 = [];
for(var i = 0; i < 10000; i++){
arr2[i] = "<div>" + i + "</div>";
}
//效率低的
function func1(){
var start = new Date().getTime();
for(var i = 0; i < arr2.length; i++){
//"效率低"
}
var end = new Date().getTime();
alert("用時(shí)：" + (end - start) + "毫秒");
}
//效率高的
function func2(){
var start = new Date().getTime();
for(var i = 0, len = arr2.length; i < len; i++){
//"效率高"
}
var end = new Date().getTime();
alert("用時(shí)：" + (end - start) + "毫秒");
}
從上表可以看出，如果僅僅是一個(gè)數(shù)組的話，我們看到其實(shí)兩種寫法都是差不多的，其實(shí)如果我們把循環(huán)再上調(diào)到100000次的話，也僅僅是差別幾毫秒而已，所以在數(shù)組的情況下，我認(rèn)為都是一樣的。對(duì)于for循環(huán)的優(yōu)化，也有人提出很多點(diǎn)，有人認(rèn)為用-=1，或者從大到小的方式循環(huán)等等，我認(rèn)為是完全沒有必要的，這些優(yōu)化往往實(shí)際情況下根本沒有表現(xiàn)出來，換句話說只是計(jì)算機(jī)級(jí)別的微小的變化，但是給我們帶來的卻是代碼的可讀性大大的降低，所以實(shí)在是得不償失。
3、減少頁面的重繪
減少頁面重繪雖然本質(zhì)不是JS本身的優(yōu)化，但是其往往是由JS引起的，而重繪的情況往往是嚴(yán)重影響頁面性能的，所以完全有必要拿出來，我們看下面例子：
<div id="demo"></div>
<input type="button" value="效率低" onclick="func1()" />
<input type="button" value="效率高" onclick="func2()" />
var str = "<div>這是一個(gè)測(cè)試字符串</div><div>這是一個(gè)測(cè)試字符串</div><div>這是一個(gè)測(cè)試字符串</div><div>這是一個(gè)測(cè)試字符串</div><div>這是一個(gè)測(cè)試字符串</div><div>這是一個(gè)測(cè)試字符串</div><div>這是一個(gè)測(cè)試字符串</div><div>這是一個(gè)測(cè)試字符串</div><div>這是一個(gè)測(cè)試字符串</div><div>這是一個(gè)測(cè)試字符串</div><div>這是一個(gè)測(cè)試字符串</div><div>這是一個(gè)測(cè)試字符串</div><div>這是一個(gè)測(cè)試字符串</div>";
//效率低的
function func1(){
var obj = document.getElementById("demo");
var start = new Date().getTime();
for(var i = 0; i < 100; i++){
obj.innerHTML += str + i;
}
var end = new Date().getTime();
alert("用時(shí) " + (end - start) + " 毫秒");
}
//效率高的
function func2(){
var obj = document.getElementById("demo");
var start = new Date().getTime();
var arr = [];
for(var i = 0; i < 100; i++){
arr[i] = str + i;
}
obj.innerHTML = arr.join("");
var end = new Date().getTime();
alert("用時(shí) " + (end - start) + " 毫秒");
}
在例子中，我只是用了100次的循環(huán)，因?yàn)槿绻?0000次循環(huán)的話，瀏覽器基本上就卡住不動(dòng)了，但是即使是100次的循環(huán)，我們看看下面的執(zhí)行結(jié)果。
可以看到的是，這簡直是一個(gè)驚人的結(jié)果，僅僅100次的循環(huán)，不管是在什么瀏覽器下，都出現(xiàn)了如此之大的差別，另外我們還發(fā)現(xiàn)，在這里，IE6的執(zhí)行效率居然比起Firefox還要好很多，可見Firefox在頁面重繪這方面并沒有做一些的優(yōu)化。這里還要注意的是，一般影響頁面重繪的不僅僅是innerHTML，如果改變?cè)氐臉邮剑恢玫惹闆r都會(huì)觸發(fā)頁面重繪，所以在平時(shí)一定要注意這點(diǎn)。
4、減少作用域鏈上的查找次數(shù)
我們知道，js代碼在執(zhí)行的時(shí)候，如果需要訪問一個(gè)變量或者一個(gè)函數(shù)的時(shí)候，它需要遍歷當(dāng)前執(zhí)行環(huán)境的作用域鏈，而遍歷是從這個(gè)作用域鏈的前端一級(jí)一級(jí)的向后遍歷，直到全局執(zhí)行環(huán)境，所以這里往往會(huì)出現(xiàn)一個(gè)情況，那就是如果我們需要經(jīng)常訪問全局環(huán)境的變量對(duì)象的時(shí)候，我們每次都必須在當(dāng)前作用域鏈上一級(jí)一級(jí)的遍歷，這顯然是比較耗時(shí)的，我們看下面的例子：
<div id="demo"></div>
<input id="but1" type="button" onclick="func1()" value="效率低"/>
<input id="but2" type="button" onclick="func2()" value="效率高"/>
function func1(){
var start = new Date().getTime();
for(var i = 0; i < 10000; i++){
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
var but1 = document.getElementById("but1");
var but2 = document.getElementById("but2");
var inputs = document.getElementsByTagName("input");
var divs = document.getElementsByTagName("div");
}
var end = new Date().getTime();
alert("用時(shí) " + (end - start) + " 毫秒");
}
function func2(){
var start = new Date().getTime();
var doc = document;
for(var i = 0; i < 10000; i++){
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
var divs = doc.getElementsByTagName("div");
}
var end = new Date().getTime();
alert("用時(shí) " + (end - start) + " 毫秒");
}
上面代碼中，第二種情況是先把全局對(duì)象的變量放到函數(shù)里面先保存下來，然后直接訪問這個(gè)變量，而第一種情況是每次都遍歷作用域鏈，直到全局環(huán)境，我們看到第二種情況實(shí)際上只遍歷了一次，而第一種情況卻是每次都遍歷了，所以我們看看其執(zhí)行結(jié)果：
從上表中可以看出，其在IE6下差別還是非常明顯的，而且這種差別在多級(jí)作用域鏈和多個(gè)全局變量的情況下還會(huì)表現(xiàn)的非常明顯。
5、避免雙重解釋
雙重解釋的情況也是我們經(jīng)常會(huì)碰到的，有的時(shí)候我們沒怎么考慮到這種情況會(huì)影響到效率，雙重解釋一般在我們使用eval、new Function和setTimeout等情況下會(huì)遇到，我們看看下面的例子：
<div id="demo"></div>
<input id="but1" type="button" onclick="func1()" value="效率低"/>
<input id="but2" type="button" onclick="func2()" value="效率高"/>
var sum, num1 = 1, num2 = 2;
function func1(){
var start = new Date().getTime();
for(var i = 0; i < 10000; i++){
var func = new Function("sum+=num1;num1+=num2;num2++;");
func();
}
var end = new Date().getTime();
alert("用時(shí) " + (end - start) + " 毫秒");
}
function func2(){
var start = new Date().getTime();
for(var i = 0; i < 10000; i++){
sum+=num1;
num1+=num2;
num2++;
}
var end = new Date().getTime();
alert("用時(shí) " + (end - start) + " 毫秒");
}
第一種情況我們是使用了new Function來進(jìn)行雙重解釋，而第二種是避免了雙重解釋，我們看看在不同瀏覽器下的表現(xiàn)：
可以看到，在所有的瀏覽器中，雙重解釋都是有很大開銷的，所以在實(shí)際當(dāng)中要盡量避免雙重解釋。
感謝"SeaSunK"對(duì)第四點(diǎn)測(cè)試報(bào)告錯(cuò)誤的指正，現(xiàn)在已經(jīng)修改過來了。至于最后一點(diǎn)提出的func1每次都初始化，沒有可比性，所以我給換了eval，結(jié)果發(fā)現(xiàn)，在IE6.0下還是有影響，而且在Firefox下，使用eval對(duì)效率的影響程度更加厲害，在Firefox下，如果10000次循環(huán)，需要十多秒的時(shí)間，所以我把循環(huán)都變成了1000次?？创a和報(bào)告。
var sum, num1 = 1, num2 = 2;
function func1(){
var start = new Date().getTime();
for(var i = 0; i < 1000; i++){
eval("sum+=num1;num1+=num2;num2++;");
}
var end = new Date().getTime();
alert("用時(shí) " + (end - start) + " 毫秒");
}
function func2(){
var start = new Date().getTime();
for(var i = 0; i < 1000; i++){
sum+=num1;
num1+=num2;
num2++;
}
var end = new Date().getTime();
alert("用時(shí) " + (end - start) + " 毫秒");
}
相關(guān)文章
JS異步宏隊(duì)列與微隊(duì)列原理區(qū)別詳解
這篇文章主要介紹了JS異步宏隊(duì)列與微隊(duì)列原理區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
一文教會(huì)你微信小程序如何實(shí)現(xiàn)登錄
微信小程序頁面畫好后,需要開始做一系列和用戶的交互功能了,首先就是登錄,這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)登錄的相關(guān)資料,需要的朋友可以參考下2022-07-07
常見瀏覽器多長時(shí)間會(huì)提示“腳本運(yùn)行時(shí)間過長”總結(jié)
這篇文章主要介紹了常見瀏覽器多長時(shí)間會(huì)提示“腳本運(yùn)行時(shí)間過長”總結(jié),需要的朋友可以參考下2014-04-04
這篇文章主要介紹了微信小程序form表單組件示例代碼,文章給大家提到了一些相關(guān)屬性名和類型及說明，需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)九宮格抽獎(jiǎng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
在Layui中實(shí)現(xiàn)開關(guān)按鈕的效果實(shí)例
今天小編就為大家分享一篇在Layui中實(shí)現(xiàn)開關(guān)按鈕的效果實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
html5+javascript實(shí)現(xiàn)簡單上傳的注意細(xì)節(jié)
這篇文章主要為大家詳細(xì)介紹了html5+javascript實(shí)現(xiàn)上傳操作的注意細(xì)節(jié)，form表單樣式不美觀等細(xì)節(jié)問題，感興趣的小伙伴們可以參考一下2016-04-04
實(shí)例分析瀏覽器中“JavaScript解析器”的工作原理
本文主要對(duì)javascript解析器的工作原理進(jìn)行實(shí)例分析，具有很好的參考價(jià)值，下面就跟小編一起來看下吧2016-12-12
一種JavaScript的設(shè)計(jì)模式...2006-11-11
js實(shí)現(xiàn)GridView單選效果自動(dòng)設(shè)置交替行、選中行、鼠標(biāo)移動(dòng)行背景色
使用js實(shí)現(xiàn)GridView單選效果自動(dòng)設(shè)置交替行、選中行、鼠標(biāo)移動(dòng)行背景色2010-05-05