前端主要指html、css、java三種技術(shù)，這三種技術(shù)，都有一些優(yōu)化手段。

html和css部分有很多優(yōu)化手段，比如用div代替table、慎用iframe、css精靈圖等，就不多說了，咱們主要說說java部分的優(yōu)化手段。

java部分

十萬元擁有高顏值雙聯(lián)屏還帶6氣囊

廣告

十萬元擁有高顏值雙聯(lián)屏還帶6氣囊

案例一：

代碼1：

var arr = [“a”, “b”, “c”];

for( var i=0; i<arr.length; i++ ){

console.log( arr[i] );

}

上面的代碼確實(shí)沒有問題，能夠?qū)?shù)組進(jìn)行循環(huán)，但是，i<arr.length 這個(gè)寫法將導(dǎo)致性能下降，因?yàn)槊恳淮闻袛鄷r(shí)，都需要獲取arr的length屬性，解決的辦法是，提前用變量保存length屬性，判斷時(shí)僅判斷變量即可。

代碼2：

var arr = [“a”, “b”, “c”];

var len = arr.length;

for( var i=0; i<len; i++ ){

console.log( arr[i] );

}

上面的代碼就比第一次的代碼性能好很多了，但是它還有優(yōu)化的空間，那就是var聲明變量部分，上面的代碼用了3個(gè)var，這3個(gè)var如果合并成1個(gè)，那么性能會(huì)更好。

代碼3：

var arr = [“a”, “b”, “c”], i=0, len=arr.length;

for( ; i<len; i++ ){

console.log( arr[i] );

}

總結(jié)：

1， 對(duì)于反復(fù)需要獲取某一個(gè)屬性時(shí)，我們提前用一個(gè)變量接收，比如len=arr.length；

2， 能夠合并的代碼，可以做合并操作，比如 var聲明多個(gè)變量；

取平衡點(diǎn)

代碼4：

var arr = ["a", "b", "c"], i=-1, len=arr.length-1;

for( ; i++<len; ){

console.log( arr[i] );

}

代碼4從性能的角度講，會(huì)比代碼3更優(yōu)；但從語義的角度講，代碼3比代碼4優(yōu)。

選擇哪種，需要看具體需求，如果僅僅是這種3次的循環(huán)，那就無所謂了，性能都差不多。

案例二：

代碼1：

var a=1, b=2, fn=function(){

alert( a+b );

};

上面的代碼中，執(zhí)行fn函數(shù)時(shí)，會(huì)輸出a+b的值，如果沒有其他程序需要用到a和b，那么變量a和b就不應(yīng)該寫在全局下，而應(yīng)該寫在函數(shù)內(nèi)，寫在全局下，頁面關(guān)閉才會(huì)銷毀，而寫在函數(shù)內(nèi)，函數(shù)執(zhí)行完畢，就會(huì)銷毀，所以從內(nèi)存使用的角度，我們可以為此做優(yōu)化。

代碼2：

var fn = function(){

var a=1, b=2;

alert( a+b );

}

如果fn函數(shù)僅需要執(zhí)行1次，之后就再也沒有使用場(chǎng)景了，我們可以使用下面的自調(diào)用函數(shù)。

代碼3：

(function(){

var a=1, b=2;

alert(a+b);

})()

總結(jié)：盡量減少全局變量，變量用完記得要銷毀。

上圖為我推薦給大家的一本說，里面寫的內(nèi)容比較詳細(xì)。

java中可以優(yōu)化的地方特別多，時(shí)間關(guān)系，就先講到這里。

用于來定義一類可以在同一個(gè)頁面內(nèi)重復(fù)利用的樣式。 如比較常用的.clearfix（一般是用于清除浮動(dòng)），或者自己定義的用于新聞列表的樣式，詳細(xì)的寫好鏈接、列表、邊框以及背景等屬性，有些人還會(huì)習(xí)慣把一些常用的屬性作為一個(gè)類。

querySelectorAll()的作用是：按文檔順序返回指定元素節(jié)點(diǎn)的子樹中匹配選擇器的元素集合，如果沒有匹配返回空集合。相關(guān)延伸： 在傳統(tǒng)的 JavaScript 開發(fā)中，查找 DOM 往往是開發(fā)人員遇到的第一個(gè)頭疼的問題，原生的 JavaScript 所提供的 DOM 選擇方法并不多，僅僅局限于通過 tag, name, id 等方式來查找，這顯然是遠(yuǎn)遠(yuǎn)不夠的，如果想要進(jìn)行更為精確的選擇不得不使用看起來非常繁瑣的正則表達(dá)式，或者使用某個(gè)庫(kù)。 事實(shí)上，現(xiàn)在所有的瀏覽器廠商都提供了 querySelector 和 querySelectorAll 這兩個(gè)方法的支持，甚至就連微軟也派出了 IE 8 作為支持這一特性的代表，querySelector 和 querySelectorAll 作為查找 DOM 的又一途徑，極大地方便了開發(fā)者，使用它們，你可以像使用 CSS 選擇器一樣快速地查找到你需要的節(jié)點(diǎn)。用法：document.querySelectorAll("#test")[0];document.querySelectorAll("div.test>p:first-child")[0];document.querySelectorAll( '.test span' ); 瀏覽器兼容性： 雖然有些問題，但瑕不掩瑜，這么好用的兩個(gè)方法咋沒火呢？瀏覽器兼容性。。。其實(shí)比起一些HTML5和CSS3的特性來說這兩個(gè)方法還沒那么讓人絕望，因?yàn)镮E8都已經(jīng)支持了，其它各個(gè)主力主流瀏覽器自然是實(shí)現(xiàn)了。IE8+FirefoxChromeSafariOperaAndroid所以如果你是針對(duì)Mobile web優(yōu)化，不要引用jQuery了，直接使用這兩個(gè)方法就可以。

1.第一從符號(hào)上來區(qū)分后代選擇器：是用空格來分隔開來 例如<h1>一個(gè)<span>人</span>的戰(zhàn)爭(zhēng)</h1> 就是h1 span{}子代選擇器：用特殊符號(hào)> 例如 h1>span{}

2.第二從用法上區(qū)分后代選擇器html部分：<ul class="study"> <li>物理 <ul> <li>力學(xué)</li> <li>聲學(xué)</li> <li>電磁學(xué)</li> </ul> </li> <li>數(shù)學(xué) <ul> <li>微積分</li> <li>概率論</li> <li>博弈論</li> </ul> </li> </ul> css部分//使用子代選擇器的效果.study >li{ border:1px solid red;/*只給物理和數(shù)學(xué)加一個(gè)紅色方框*/}//使用后代選擇器的效果.study li{ border:1px solid red;/*給物理 力學(xué) 聲學(xué) 電磁學(xué) 和數(shù)學(xué) 微積分 概率論博弈論都加一個(gè)紅色方框*/}這說明子代是他是單傳只給物理和數(shù)學(xué)就斷子絕孫，后代是一代傳一代。

子代選擇器時(shí)效果圖：

后代選擇器時(shí)效果圖：