web前端代碼優(yōu)化：一、html頁(yè)面優(yōu)化1.css文件放在head，js文件放在html尾部（的前面即可）。因?yàn)椋合螺d某一個(gè)js時(shí)其他任務(wù)是暫停的，需要等這個(gè)JS下載并執(zhí)行完畢后再下載其他的。

　　2.盡量減少標(biāo)簽，不多用一個(gè)標(biāo)簽

　　比如:clear清除浮動(dòng)用:after

　　web前端seo怎么優(yōu)化

　　3.減少dns查詢

　　每引用一個(gè)來(lái)自外部的文件，就會(huì)有一個(gè)dns查詢，一般對(duì)首次訪問(wèn)網(wǎng)站的速度會(huì)有影響。

　　4.避免出現(xiàn)空的src，如 data-original=""

　　5.減少http請(qǐng)求

　　比如:(1)使用CSS Sprite技術(shù)(css精靈)

　　(2)css和js代碼，能盡量合并就合并。(外部鏈接)

　　6.js的延遲加載，異步加載，使用defer標(biāo)簽 、 async="true"

　　二、代碼優(yōu)化

　　1.項(xiàng)目最后使用壓縮工具壓縮css，js

　　因?yàn)檫@樣，可以減少頁(yè)面的體積加快打開(kāi)速度。

　　2.css的class不要太長(zhǎng)，要有清楚的層級(jí)關(guān)系

　　3.js操作樣式時(shí)使用class，html里不使用內(nèi)聯(lián)css和js代碼

　　三、JS優(yōu)化

　　1.字符串的拼接：使用 +=是較低效的，可使用數(shù)組的 join() 方法

　　2.使用循環(huán)時(shí)尤其不要使用 for(in),while比f(wàn)or的效率要高一點(diǎn)。（循環(huán)次數(shù)很大的時(shí)候）

　　3.局部變量的訪問(wèn)速度比全局變量更快，而且要盡量避免全局變量

　　4.對(duì)DOM元素的每一次操作代價(jià)都比較高，所以盡量少得操作。

　　比如：for循環(huán)中有對(duì)字符串的拼接，然后使用innerHTML操作,就應(yīng)該把innerHTML放在for循環(huán)外面。

　　5.對(duì)某個(gè)dom節(jié)點(diǎn)進(jìn)行操作時(shí)，將這個(gè)dom節(jié)點(diǎn)存在一個(gè)局部變量中。

　　6.關(guān)于字符串遍歷，優(yōu)先使用正則表達(dá)式

　　7.使 用直接量 var a=[] 比var a=new Array()快

　　8.創(chuàng)建dom節(jié)點(diǎn) 最好不要直接寫(xiě)字符串，而應(yīng)該調(diào)用creatElement()方法

　　四、服務(wù)器方面優(yōu)化

　　1.提高自己服務(wù)器質(zhì)量，帶寬等方面

　　2.開(kāi)啟瀏覽器緩存，減少http請(qǐng)求

　　3.開(kāi)啟gzip壓縮

　　從前端角度出發(fā)有哪些注意事項(xiàng)有利于SEO?

　　1、提高頁(yè)面加載速度。 能用css解決的不用背景圖片，背景圖片也盡量壓縮大小，可以幾個(gè)icons放在一個(gè)圖片上，使用background-position找到需要的圖片位置?？梢詼p少HTTP請(qǐng)求數(shù)，提高網(wǎng)頁(yè)加載速度。

　　2、 結(jié)構(gòu)、表現(xiàn)和行為的分離。另外一個(gè)重要的拖慢網(wǎng)頁(yè)加載速度的原因就是將css和JS都堆積在HTML頁(yè)面上，每次看到有人直接在頁(yè)面上編寫(xiě)CSS和JS我都很痛心疾首。通過(guò)外鏈的方式能大大加快網(wǎng)頁(yè)加載速度的，css文件可以放在head里，JS文件可以放置在body的最下方，在不影響閱讀的情況下再去加載JS文件。

　　3、 優(yōu)化網(wǎng)站分級(jí)結(jié)構(gòu)。在每個(gè)內(nèi)頁(yè)加面包屑導(dǎo)航是很有必要的，可以讓蜘蛛進(jìn)入頁(yè)面之后不至于迷路，有條件的話，最好能單獨(dú)加個(gè)Sitemap頁(yè)面，將網(wǎng)站結(jié)構(gòu)一目了然地展示在蜘蛛面前，更有利于蜘蛛抓取信息。

　　4、 集中網(wǎng)站權(quán)重。由于蜘蛛分配到每個(gè)頁(yè)面的權(quán)重是一定的，這些權(quán)重也將平均分配到每個(gè)a鏈接上，那么為了集中網(wǎng)站權(quán)重，可以使用”rel=nofollow”屬性，它告訴蜘蛛無(wú)需抓取目標(biāo)頁(yè),可以將權(quán)重分給其他的鏈接。

　　5、 文本強(qiáng)調(diào)標(biāo)簽的使用。當(dāng)著重強(qiáng)調(diào)某個(gè)關(guān)鍵詞需要加粗表示，選用strong標(biāo)簽比使用b標(biāo)簽要更有強(qiáng)調(diào)作用。

　　6、 a標(biāo)簽的title屬性的使用。在不影響頁(yè)面功能的情況下，可以盡量給a標(biāo)簽加上title屬性，可以更有利于蜘蛛抓取信息。

　　7、 圖片alt屬性的使用。這個(gè)屬性可以在圖片加載不出來(lái)的時(shí)候顯示在頁(yè)面上相關(guān)的文字信息，作用同上。

　　8、 H標(biāo)簽的使用。主要是H1標(biāo)簽的使用需要特別注意，因?yàn)樗詭?quán)重，一個(gè)頁(yè)面有且最多只能有一個(gè)H1標(biāo)簽，放在該頁(yè)面最重要的標(biāo)題上面，如首頁(yè)的logo上可以加H1標(biāo)簽。