前言：?

在同樣的網(wǎng)絡(luò)環(huán)境下，兩個(gè)同樣能滿(mǎn)足你的需求的網(wǎng)站熏版，一個(gè)“Duang”的一下就加載出來(lái)了咖驮，一個(gè)糾結(jié)了半天才出來(lái)，你會(huì)選擇哪個(gè)启妹？研究表明：用戶(hù)最滿(mǎn)意的打開(kāi)網(wǎng)頁(yè)時(shí)間是2-5秒筛严，如果等待超過(guò)10秒，99%的用戶(hù)會(huì)關(guān)閉這個(gè)網(wǎng)頁(yè)饶米。也許這樣講桨啃，各位還不會(huì)有太多感觸，接下來(lái)我列舉一組數(shù)據(jù)：Google網(wǎng)站訪(fǎng)問(wèn)速度每慢400ms就導(dǎo)致用戶(hù)搜索請(qǐng) 求下降0.59%;Amazon每增加100ms網(wǎng)站延遲將導(dǎo)致收入下降1%;雅虎如果有400ms延遲會(huì)導(dǎo)致流量下降5-9%檬输。網(wǎng)站的加載速度嚴(yán)重影響了用戶(hù)體驗(yàn)照瘾，也決定了這個(gè)網(wǎng)站的生死存亡。

可能有人會(huì)說(shuō)：網(wǎng)站的性能是后端工程師的事情丧慈，與前端并無(wú)多大關(guān)系析命。我只能說(shuō)，too young too simple逃默。事實(shí)上鹃愤，只有10%~20%的最終用戶(hù)響應(yīng)時(shí)間是用在從Web服務(wù)器獲取HTML文檔并傳送到瀏覽器的，那剩余的時(shí)間去哪兒了完域？來(lái)瞄一下性能黃金法則：

只有10%~20%的最終用戶(hù)響應(yīng)時(shí)間花在了下載HTML文檔上软吐。其余的80%~90%時(shí)間花在了下載頁(yè)面中的所有組件上。

接下來(lái)我們將研究一下前端攻城獅如何來(lái)提高頁(yè)面的加載速度吟税。

一凹耙、減少HTTP請(qǐng)求

上面說(shuō)到80%~90%時(shí)間花在了下載頁(yè)面中的所有組件進(jìn)行的HTTP請(qǐng)求上鸟蟹。因此，改善響應(yīng)時(shí)間最簡(jiǎn)單的途徑就是減少HTTP請(qǐng)求的數(shù)量使兔。

圖片地圖：

假設(shè)導(dǎo)航欄上有五幅圖片，點(diǎn)擊每張圖片都會(huì)進(jìn)入一個(gè)鏈接藤韵，這樣五張導(dǎo)航的圖片在加載時(shí)會(huì)產(chǎn)生5個(gè)HTTP請(qǐng)求虐沥。然而，使用一個(gè)圖片地圖可以提高效率泽艘，這樣就只需要一個(gè)HTTP請(qǐng)求欲险。

服務(wù)器端圖片地圖：將所有點(diǎn)擊提交到同一個(gè)url，同時(shí)提交用戶(hù)點(diǎn)擊的x匹涮、y坐標(biāo)天试，服務(wù)器端根據(jù)坐標(biāo)映射響應(yīng)

客戶(hù)端圖片地圖：直接將點(diǎn)擊映射到操作

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets"/><map name="planetmap" id="planetmap"><area shape="rect" coords="180,139,14" href ="venus.html" alt="Venus"/><area shape="rect" coords="129,161,10" href ="mercur.html" alt="Mercury"/><area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun"/><area shape="rect" coords="140,0,110,260" href ="star.html" alt="Sun"/></map>

使用圖片地圖的缺點(diǎn)：指定坐標(biāo)區(qū)域時(shí)，矩形或圓形比較容易指定然低，而其它形狀手工指定比較難

CSS Sprites

CSS Sprites直譯過(guò)來(lái)就是CSS精靈喜每，但是這種翻譯顯然是不夠的，其實(shí)就是通過(guò)將多個(gè)圖片融合到一副圖里面雳攘，然后通過(guò)CSS的一些技術(shù)布局到網(wǎng)頁(yè)上带兜。特別是圖片特別多的網(wǎng)站，如果能用css sprites降低圖片數(shù)量吨灭，帶來(lái)的將是速度的提升刚照。

<div><span id="image1" class="nav"></span><span id="image2" class="nav"></span><span id="image3" class="nav"></span><span id="image4" class="nav"></span><span id="image5" class="nav"></span></div>

.nav {? ? width: 50px;? ? height: 50px;? ? display: inline-block;? ? border: 1px solid #000;? ? background-image: url('E:/1.png');}#image1 {? ? ? ? background-position: 0 0;}#image2 {? ? ? ? background-position: -95px 0;}#image3 {? ? ? ? background-position: -185px 0;}#image4 {? ? ? ? background-position: -275px 0;}#image5 {? ? ? ? background-position: -366px -3px;}

運(yùn)行結(jié)果：

PS：使用CSS Sprites還有可能降低下載量，可能大家會(huì)認(rèn)為合并后的圖片會(huì)比分離圖片的總和要大喧兄，因?yàn)檫€有可能會(huì)附加空白區(qū)域无畔。實(shí)際上，合并后的圖片會(huì)比分離的圖片總和要小吠冤，因?yàn)樗档土藞D片自身的開(kāi)銷(xiāo)浑彰，譬如顏色表、格式信息等咨演。

字體圖標(biāo)

在可以大量使用字體圖標(biāo)的地方我們可以盡可能使用字體圖標(biāo)闸昨，字體圖標(biāo)可以減少很多圖片的使用，從而減少http請(qǐng)求薄风，字體圖標(biāo)還可以通過(guò)CSS來(lái)設(shè)置顏色饵较、大小等樣式，何樂(lè)而不為遭赂。

合并腳本 和樣式表

將多個(gè)樣式表或者腳本文件合并到一個(gè)文件中循诉，可以減少HTTP請(qǐng)求的數(shù)量從而縮短效應(yīng)時(shí)間。

然而合并所有文件對(duì)許多人尤其是編寫(xiě)模塊化代碼的人來(lái)說(shuō)是不能忍的撇他，而且合并所有的樣式文件或者腳本文件可能會(huì)導(dǎo)致在一個(gè)頁(yè)面加載時(shí)加載了多于自己所需要的樣式或者腳本茄猫，對(duì)于只訪(fǎng)問(wèn)該網(wǎng)站一個(gè)（或幾個(gè)）頁(yè)面的人來(lái)說(shuō)反而增加了下載量狈蚤，所以大家應(yīng)該自己權(quán)衡利弊。

二划纽、使用CDN

如果應(yīng)用程序web服務(wù)器離用戶(hù)更近脆侮，那么一個(gè)HTTP請(qǐng)求的響應(yīng)時(shí)間將縮短。另一方面勇劣，如果組件web服務(wù)器離用戶(hù)更近靖避，則多個(gè)HTTP請(qǐng)求的響應(yīng)時(shí)間將縮短。

?CDN（內(nèi)容發(fā)布網(wǎng)絡(luò)）是一組分布在多個(gè)不同地理位置的Web服務(wù)器比默，用于更加有效地向用戶(hù)發(fā)布內(nèi)容幻捏。在優(yōu)化性能時(shí)，向特定用戶(hù)發(fā)布內(nèi)容的服務(wù)器的選擇基于對(duì)網(wǎng)絡(luò)慕課擁堵的測(cè)量命咐。例如篡九，CDN可能選擇網(wǎng)絡(luò)階躍數(shù)最小的服務(wù)器，或者具有最短響應(yīng)時(shí)間的服務(wù)器醋奠。

CDN還可以進(jìn)行數(shù)據(jù)備份榛臼、擴(kuò)展存儲(chǔ)能力，進(jìn)行緩存窜司，同時(shí)有助于緩和Web流量峰值壓力讽坏。

CDN的缺點(diǎn)：

1、響應(yīng)時(shí)間可能會(huì)受到其他網(wǎng)站流量的影響例证。CDN服務(wù)提供商在其所有客戶(hù)之間共享Web服務(wù)器組路呜。

2、如果CDN服務(wù)質(zhì)量下降了织咧，那么你的工作質(zhì)量也將下降

3胀葱、無(wú)法直接控制組件服務(wù)器

三、添加Expires頭

頁(yè)面的初次訪(fǎng)問(wèn)者會(huì)進(jìn)行很多HTTP請(qǐng)求笙蒙，但是通過(guò)使用一個(gè)長(zhǎng)久的Expires頭抵屿，可以使這些組件被緩存，下次訪(fǎng)問(wèn)的時(shí)候捅位，就可以減少不必要的HTPP請(qǐng)求轧葛，從而提高加載速度。

Web服務(wù)器通過(guò)Expires頭告訴客戶(hù)端可以使用一個(gè)組件的當(dāng)前副本艇搀，直到指定的時(shí)間為止尿扯。例如：

Expires:?Fri, 18 Mar 2016 07:41:53 GMT

Expires缺點(diǎn)： 它要求服務(wù)器和客戶(hù)端時(shí)鐘嚴(yán)格同步；過(guò)期日期需要經(jīng)常檢查

HTTP1.1中引入Cache-Control來(lái)克服Expires頭的限制焰雕，使用max-age指定組件被緩存多久衷笋。

Cache-Control： max-age=12345600

若同時(shí)制定Cache-Control和Expires，則max-age將覆蓋Expires頭

四矩屁、壓縮組件

從HTTP1.1開(kāi)始，Web客戶(hù)端可以通過(guò)HTTP請(qǐng)求中的Accept-Encoding頭來(lái)表示對(duì)壓縮的支持

Accept-Encoding: gzip,deflate

如果Web服務(wù)器看到請(qǐng)求中有這個(gè)頭，就會(huì)使用客戶(hù)端列出來(lái)的方法中的一種來(lái)進(jìn)行壓縮瓤湘。Web服務(wù)器通過(guò)響應(yīng)中的Content-Encoding來(lái)通知 Web客戶(hù)端。

Content-Encoding: gzip

代理緩存

當(dāng)瀏覽器通過(guò)代理來(lái)發(fā)送請(qǐng)求時(shí)空幻，情況會(huì)不一樣。假設(shè)針對(duì)某個(gè)URL發(fā)送到代理的第一個(gè)請(qǐng)求來(lái)自于一個(gè)不支持gzip的瀏覽器容客。這是代理的第一個(gè)請(qǐng)求氛悬，緩存為空。代理將請(qǐng)求轉(zhuǎn)發(fā)給服務(wù)器耘柱。此時(shí)響應(yīng)是未壓縮的，代理緩存同時(shí)發(fā)送給瀏覽器」飨郑現(xiàn)在调煎，假設(shè)到達(dá)代理的請(qǐng)求是同一個(gè)url，來(lái)自于一個(gè)支持gzip的瀏覽器己肮。代理會(huì)使用緩存中未壓縮的內(nèi)容進(jìn)行響應(yīng)士袄，從而失去了壓縮的機(jī)會(huì)。相反谎僻，如果第一個(gè)瀏覽器支持gzip娄柳，第二個(gè)不支持，你們代理緩存中的壓縮版本將會(huì)提供給后續(xù)的瀏覽器艘绍，而不管它們是否支持gzip赤拒。

解決辦法：在web服務(wù)器的響應(yīng)中添加vary頭Web服務(wù)器可以告訴代理根據(jù)一個(gè)或多個(gè)請(qǐng)求頭來(lái)改變緩存的響應(yīng)。因?yàn)閴嚎s的決定是基于Accept-Encoding請(qǐng)求頭的诱鞠，因此需要在vary響應(yīng)頭中包含Accept-Encoding挎挖。

vary:?Accept-Encoding

五、將樣式表放在頭部

首先說(shuō)明一下航夺，將樣式表放在頭部對(duì)于實(shí)際頁(yè)面加載的時(shí)間并不能造成太大影響蕉朵，但是這會(huì)減少頁(yè)面首屏出現(xiàn)的時(shí)間，使頁(yè)面內(nèi)容逐步呈現(xiàn)阳掐，改善用戶(hù)體驗(yàn)始衅，防止“白屏”。

我們總是希望頁(yè)面能夠盡快顯示內(nèi)容缭保，為用戶(hù)提供可視化的回饋汛闸，這對(duì)網(wǎng)速慢的用戶(hù)來(lái)說(shuō)是很重要的。

將樣式表放在文檔底部會(huì)阻止瀏覽器中的內(nèi)容逐步出現(xiàn)艺骂。為了避免當(dāng)樣式變化時(shí)重繪頁(yè)面元素蛉拙，瀏覽器會(huì)阻塞內(nèi)容逐步呈現(xiàn)，造成“白屏”彻亲。這源自瀏覽器的行為：如果樣式表仍在加載孕锄，構(gòu)建呈現(xiàn)樹(shù)就是一種浪費(fèi)吮廉，因?yàn)樗袠邮奖砑虞d解析完畢之前務(wù)虛會(huì)之任何東西

六、將腳本放在底部

更樣式表相同畸肆，腳本放在底部對(duì)于實(shí)際頁(yè)面加載的時(shí)間并不能造成太大影響宦芦，但是這會(huì)減少頁(yè)面首屏出現(xiàn)的時(shí)間，使頁(yè)面內(nèi)容逐步呈現(xiàn)轴脐。

js的下載和執(zhí)行會(huì)阻塞Dom樹(shù)的構(gòu)建（嚴(yán)謹(jǐn)?shù)卣f(shuō)是中斷了Dom樹(shù)的更新）调卑，所以script標(biāo)簽放在首屏范圍內(nèi)的HTML代碼段里會(huì)截?cái)嗍灼恋膬?nèi)容。

下載腳本時(shí)并行下載是被禁用的——即使使用了不同的主機(jī)名大咱，也不會(huì)啟用其他的下載恬涧。因?yàn)槟_本可能修改頁(yè)面內(nèi)容，因此瀏覽器會(huì)等待碴巾；另外溯捆，也是為了保證腳本能夠按照正確的順序執(zhí)行，因?yàn)楹竺娴哪_本可能與前面的腳本存在依賴(lài)關(guān)系厦瓢，不按照順序執(zhí)行可能會(huì)產(chǎn)生錯(cuò)誤提揍。

七、避免CSS表達(dá)式

CSS表達(dá)式是動(dòng)態(tài)設(shè)置CSS屬性的一種強(qiáng)大并且危險(xiǎn)的方式煮仇，它受到了IE5以及之后版本劳跃、IE8之前版本的支持。

p {? ? width: expression(func(),document.body.clientWidth > 400 ? "400px" : "auto");? ? height: 80px;? ? border: 1px solid #f00;}

<p><span></span></p><p><span></span></p><p><span></span></p><p><span></span></p><p><span></span></p><script>var n =0;

? ? function func() {

? ? ? ? n++;

? ? ? ? // alert();? ? ? ? console.log(n);

? ? }</script>

鼠標(biāo)移動(dòng)了幾次浙垫，函數(shù)的運(yùn)行次數(shù)輕而易舉的達(dá)到了幾千次刨仑，危險(xiǎn)性顯而易見(jiàn)。

如何解決：

一次性表達(dá)式：

p {? ? width: expression(func(this));? ? height: 80px;? ? border: 1px solid #f00;}

<p><span></span></p><p><span></span></p><p><span></span></p><p><span></span></p><p><span></span></p><script>var n =0;

? ? function func(elem) {

? ? ? ? n++;

? ? ? ? elem.style.width = document.body.clientWidth >400?'400px' : "auto";

? ? ? ? console.log(n);

? ? }</script>

事件處理機(jī)制

用js事件處理機(jī)制來(lái)動(dòng)態(tài)改變?cè)氐臉邮郊欣眩购瘮?shù)運(yùn)行次數(shù)在可控范圍之內(nèi)贸人。

八、使用外部的JavaScript和CSS

內(nèi)聯(lián)腳本或者樣式可以減少HTTP請(qǐng)求佃声，按理來(lái)說(shuō)可以提高頁(yè)面加載的速度艺智。然而在實(shí)際情況中，當(dāng)腳本或者樣式是從外部引入的文件圾亏，瀏覽器就有可能緩存它們十拣，從而在以后加載的時(shí)候能夠直接使用緩存，而HTML文檔的大小減小志鹃，從而提高加載速度夭问。

影響因素：

1、每個(gè)用戶(hù)產(chǎn)生的頁(yè)面瀏覽量越少曹铃，內(nèi)聯(lián)腳本和樣式的論據(jù)越強(qiáng)勢(shì)缰趋。譬如一個(gè)用戶(hù)每個(gè)月只訪(fǎng)問(wèn)你的網(wǎng)站一兩次，那么這種情況下內(nèi)聯(lián)將會(huì)更好。而如果該用戶(hù)能夠產(chǎn)生很多頁(yè)面瀏覽量秘血，那么緩存的樣式和腳本將會(huì)極大減少下載的時(shí)間味抖，提交頁(yè)面加載速度。

2灰粮、如果你的網(wǎng)站不同的頁(yè)面之間使用的組件大致相同仔涩，那么使用外部文件可以提高這些組件的重用率。

加載后下載

有時(shí)候我們希望內(nèi)聯(lián)樣式和腳本粘舟，但又可以為接下來(lái)的頁(yè)面提供外部文件熔脂。那么我們可以在頁(yè)面加載完成止嘔動(dòng)態(tài)加載外部組件，以便用戶(hù)接下來(lái)的訪(fǎng)問(wèn)柑肴。

1function doOnload() { 2setTimeout("downloadFile()",1000); 3? } 4 5window.onload = doOnload; 6 7function downloadFile() { 8downloadCss("http://abc.com/css/a.css"); 9downloadJS("http://abc.com/js/a.js");10 }1112function downloadCss(url) {13varele = document.createElement('link');14ele.rel = "stylesheet";15ele.type = "text/css";16ele.href = url;1718? ? document.body.appendChild(ele);19 }2021function downloadJS(url) {22varele = document.createElement('script');23ele.src = url;24? ? document.body.appendChild(ele);25}

在該頁(yè)面中霞揉，JavaScript和CSS被加載兩次（內(nèi)聯(lián)和外部）。要使其正常工作晰骑，必須處理雙重定義适秩。將這些組件放到一個(gè)不可見(jiàn)的IFrame中是一個(gè)比較好的解決方式。

?九些侍、減少DNS查找

當(dāng)我們?cè)跒g覽器的地址欄輸入網(wǎng)址（譬如： www.linux178.com） ，然后回車(chē)政模，回車(chē)這一瞬間到看到頁(yè)面到底發(fā)生了什么呢岗宣？

域名解析 --> 發(fā)起TCP的3次握手 --> 建立TCP連接后發(fā)起http請(qǐng)求 --> 服務(wù)器響應(yīng)http請(qǐng)求，瀏覽器得到html代碼 --> 瀏覽器解析html代碼淋样，并請(qǐng)求html代碼中的資源（如js耗式、css、圖片等） --> 瀏覽器對(duì)頁(yè)面進(jìn)行渲染呈現(xiàn)給用戶(hù)

域名解析是頁(yè)面加載的第一步趁猴，那么域名是如何解析的呢刊咳？以Chrome為例：

1.? Chrome瀏覽器 會(huì)首先搜索瀏覽器自身的DNS緩存（緩存時(shí)間比較短，大概只有1分鐘儡司，且只能容納1000條緩存）娱挨，看自身的緩存中是否有www.linux178.com 對(duì)應(yīng)的條目，而且沒(méi)有過(guò)期捕犬，如果有且沒(méi)有過(guò)期則解析到此結(jié)束跷坝。

注：我們?cè)趺床榭碈hrome自身的緩存？可以使用 chrome://net-internals/#dns 來(lái)進(jìn)行查看

2.? 如果瀏覽器自身的緩存里面沒(méi)有找到對(duì)應(yīng)的條目碉碉，那么Chrome會(huì)搜索操作系統(tǒng)自身的DNS緩存,如果找到且沒(méi)有過(guò)期則停止搜索解析到此結(jié)束.

注：怎么查看操作系統(tǒng)自身的DNS緩存柴钻，以Windows系統(tǒng)為例，可以在命令行下使用 ipconfig /displaydns 來(lái)進(jìn)行查看

3.? 如果在Windows系統(tǒng)的DNS緩存也沒(méi)有找到垢粮，那么嘗試讀取hosts文件（位于C:\Windows\System32\drivers\etc）贴届，看看這里面有沒(méi)有該域名對(duì)應(yīng)的IP地址，如果有則解析成功。

4.? 如果在hosts文件中也沒(méi)有找到對(duì)應(yīng)的條目毫蚓，瀏覽器就會(huì)發(fā)起一個(gè)DNS的系統(tǒng)調(diào)用占键，就會(huì)向本地配置的首選DNS服務(wù)器（一般是電信運(yùn)營(yíng)商提供的，也可以使用像Google提供的DNS服務(wù)器）發(fā)起域名解析請(qǐng)求（通過(guò)的是UDP協(xié)議向DNS的53端口發(fā)起請(qǐng)求绍些，這個(gè)請(qǐng)求是遞歸的請(qǐng)求捞慌，也就是運(yùn)營(yíng)商的DNS服務(wù)器必須得提供給我們?cè)撚蛎腎P地址），運(yùn)營(yíng)商的DNS服務(wù)器首先查找自身的緩存柬批，找到對(duì)應(yīng)的條目啸澡，且沒(méi)有過(guò)期，則解析成功氮帐。如果沒(méi)有找到對(duì)應(yīng)的條目嗅虏，則有運(yùn)營(yíng)商的DNS代我們的瀏覽器發(fā)起迭代DNS解析請(qǐng)求，它首先是會(huì)找根域的DNS的IP地址（這個(gè)DNS服務(wù)器都內(nèi)置13臺(tái)根域的DNS的IP地址）上沐，找打根域的DNS地址皮服，就會(huì)向其發(fā)起請(qǐng)求（請(qǐng)問(wèn)www.linux178.com這個(gè)域名的IP地址是多少啊参咙？）龄广，根域發(fā)現(xiàn)這是一個(gè)頂級(jí)域com域的一個(gè)域名，于是就告訴運(yùn)營(yíng)商的DNS我不知道這個(gè)域名的IP地址蕴侧，但是我知道com域的IP地址择同，你去找它去，于是運(yùn)營(yíng)商的DNS就得到了com域的IP地址净宵，又向com域的IP地址發(fā)起了請(qǐng)求（請(qǐng)問(wèn)www.linux178.com這個(gè)域名的IP地址是多少?）,com域這臺(tái)服務(wù)器告訴運(yùn)營(yíng)商的DNS我不知道www.linux178.com這個(gè)域名的IP地址敲才，但是我知道linux178.com這個(gè)域的DNS地址，你去找它去择葡，于是運(yùn)營(yíng)商的DNS又向linux178.com這個(gè)域名的DNS地址（這個(gè)一般就是由域名注冊(cè)商提供的紧武，像萬(wàn)網(wǎng)，新網(wǎng)等）發(fā)起請(qǐng)求（請(qǐng)問(wèn)www.linux178.com這個(gè)域名的IP地址是多少敏储？）阻星，這個(gè)時(shí)候linux178.com域的DNS服務(wù)器一查，誒已添，果真在我這里迫横，于是就把找到的結(jié)果發(fā)送給運(yùn)營(yíng)商的DNS服務(wù)器，這個(gè)時(shí)候運(yùn)營(yíng)商的DNS服務(wù)器就拿到了www.linux178.com這個(gè)域名對(duì)應(yīng)的IP地址酝碳，并返回給Windows系統(tǒng)內(nèi)核矾踱，內(nèi)核又把結(jié)果返回給瀏覽器，終于瀏覽器拿到了www.linux178.com對(duì)應(yīng)的IP地址疏哗，該進(jìn)行一步的動(dòng)作了呛讲。

注：一般情況下是不會(huì)進(jìn)行以下步驟的

如果經(jīng)過(guò)以上的4個(gè)步驟，還沒(méi)有解析成功，那么會(huì)進(jìn)行如下步驟：

5.? 操作系統(tǒng)就會(huì)查找NetBIOS name Cache（NetBIOS名稱(chēng)緩存贝搁，就存在客戶(hù)端電腦中的）吗氏，那這個(gè)緩存有什么東西呢？凡是最近一段時(shí)間內(nèi)和我成功通訊的計(jì)算機(jī)的計(jì)算機(jī)名和Ip地址雷逆，就都會(huì)存在這個(gè)緩存里面弦讽。什么情況下該步能解析成功呢？就是該名稱(chēng)正好是幾分鐘前和我成功通信過(guò)膀哲，那么這一步就可以成功解析往产。

6.? 如果第5步也沒(méi)有成功，那會(huì)查詢(xún)WINS 服務(wù)器（是NETBIOS名稱(chēng)和IP地址對(duì)應(yīng)的服務(wù)器）

7.? 如果第6步也沒(méi)有查詢(xún)成功某宪，那么客戶(hù)端就要進(jìn)行廣播查找

8.? 如果第7步也沒(méi)有成功仿村，那么客戶(hù)端就讀取LMHOSTS文件（和HOSTS文件同一個(gè)目錄下，寫(xiě)法也一樣）

如果第八步還沒(méi)有解析成功兴喂，那么就宣告這次解析失敗蔼囊，那就無(wú)法跟目標(biāo)計(jì)算機(jī)進(jìn)行通信。只要這八步中有一步可以解析成功衣迷，那就可以成功和目標(biāo)計(jì)算機(jī)進(jìn)行通信畏鼓。

DNS也是開(kāi)銷(xiāo)，通常瀏覽器查找一個(gè)給定域名的IP地址要花費(fèi)20~120毫秒壶谒，在完成域名解析之前云矫，瀏覽器不能從服務(wù)器加載到任何東西。那么如何減少域名解析時(shí)間佃迄，加快頁(yè)面加載速度呢泼差？

當(dāng)客戶(hù)端DNS緩存（瀏覽器和操作系統(tǒng)）緩存為空時(shí)贵少，DNS查找的數(shù)量與要加載的Web頁(yè)面中唯一主機(jī)名的數(shù)量相同呵俏，包括頁(yè)面URL、腳本滔灶、樣式表普碎、圖片、Flash對(duì)象等的主機(jī)名录平。減少主機(jī)名的 數(shù)量就可以減少DNS查找的數(shù)量麻车。

減少唯一主機(jī)名的數(shù)量會(huì)潛在減少頁(yè)面中并行下載的數(shù)量（HTTP 1.1規(guī)范建議從每個(gè)主機(jī)名并行下載兩個(gè)組件，但實(shí)際上可以多個(gè)）斗这，這樣減少主機(jī)名和并行下載的方案會(huì)產(chǎn)生矛盾动猬，需要大家自己權(quán)衡。建議將組件放到至少兩個(gè)但不多于4個(gè)主機(jī)名下表箭，減少DNS查找的同時(shí)也允許高度并行下載赁咙。

十、精簡(jiǎn)JavaScript

精簡(jiǎn)

精簡(jiǎn)就是從代碼中移除不必要的字符以減少文件大小，降低加載的時(shí)間彼水。代碼精簡(jiǎn)的時(shí)候會(huì)移除不必要的空白字符（空格崔拥，換行、制表符）凤覆，這樣整個(gè)文件的大小就變小了链瓦。

混淆

混淆是應(yīng)用在源代碼上的另外一種方式，它會(huì)移除注釋和空白符盯桦，同時(shí)它還會(huì)改寫(xiě)代碼慈俯。在混淆的時(shí)候，函數(shù)和變量名將會(huì)被轉(zhuǎn)換成更短的字符串俺附，這時(shí)代碼會(huì)更加精煉同時(shí)難以閱讀肥卡。通常這樣做是為了增加對(duì)代碼進(jìn)行反向工程的難度，這也同時(shí)提高了性能事镣。

缺點(diǎn)：

混淆本身比較復(fù)雜步鉴，可能會(huì)引入錯(cuò)誤。

需要對(duì)不能改變的符號(hào)做標(biāo)記璃哟，防止JavaScript符號(hào)（譬如關(guān)鍵字氛琢、保留字）被修改。

混淆會(huì)使代碼難以閱讀随闪，這使得在產(chǎn)品環(huán)境中調(diào)試問(wèn)題更加困難阳似。

在以上提到了關(guān)于用gzip之類(lèi)的壓縮方式來(lái)壓縮文件，這邊說(shuō)明一下铐伴，就算使用gzip等方式來(lái)壓縮文件撮奏，精簡(jiǎn)代碼依然是有必要的。一般來(lái)說(shuō)当宴，壓縮產(chǎn)生的節(jié)省是高于精簡(jiǎn)的畜吊，在生產(chǎn)環(huán)境中，精簡(jiǎn)和壓縮同時(shí)使用能夠最大限度的獲得更多的節(jié)省户矢。

CSS的精簡(jiǎn)

CSS的精簡(jiǎn)帶來(lái)的節(jié)省一般來(lái)說(shuō)是小于JavaScript精簡(jiǎn)的玲献，因?yàn)镃SS中注釋和空白相對(duì)較少。

除了移除空白梯浪、注釋之外捌年，CSS可以通過(guò)優(yōu)化來(lái)獲得更多的節(jié)省：

合并相同的類(lèi)挂洛；

移除不使用的類(lèi)礼预；

使用縮寫(xiě)，譬如

.right {? ? color: #fff;? ? padding-top: 0;

? ? margin: 0 10px;? ?

? ? border: 1px solid #111}.wrong {? ? color: #ffffff;? ? padding-top: 0px;

? ? margin-top: 0;? ? margin-bottom: 0;? ? margin-left: 10px;? ? margin-right: 10px;? ? border-color: #111;? ? border-width: 1px;? ? border-style: solid;}

上面.right是正確的的寫(xiě)法虏劲，顏色使用縮寫(xiě)托酸，使用0代替0px荠藤，合并可以合并的樣式。另外获高，在精簡(jiǎn)的時(shí)候其實(shí)樣式最后一行的'哈肖；'也是可以省略的。

來(lái)看看精簡(jiǎn)的例子：

以上分別是jquery-2.0.3的學(xué)習(xí)版（未精簡(jiǎn)）和精簡(jiǎn)版念秧，可見(jiàn)精簡(jiǎn)文件的大小比源文件小了155k淤井，而且，在精簡(jiǎn)版中jquery還做了混淆摊趾，譬如用e代替window等币狠，從而獲得最大的節(jié)省。

十一砾层、避免重定向

什么是重定向漩绵？

重定向用于將用戶(hù)從一個(gè)URL重新路由到另一個(gè)URL。

常用重定向的類(lèi)型

301：永久重定向肛炮，主要用于當(dāng)網(wǎng)站的域名發(fā)生變更之后止吐，告訴搜索引擎域名已經(jīng)變更了，應(yīng)該把舊域名的的數(shù)據(jù)和鏈接數(shù)轉(zhuǎn)移到新域名下侨糟，從而不會(huì)讓網(wǎng)站的排名因域名變更而受到影響碍扔。

302：臨時(shí)重定向，主要實(shí)現(xiàn)post請(qǐng)求后告知瀏覽器轉(zhuǎn)移到新的URL秕重。

304：Not Modified不同，主要用于當(dāng)瀏覽器在其緩存中保留了組件的一個(gè)副本，同時(shí)組件已經(jīng)過(guò)期了溶耘，這是瀏覽器就會(huì)生成一個(gè)條件GET請(qǐng)求二拐，如果服務(wù)器的組件并沒(méi)有修改過(guò)，則會(huì)返回304狀態(tài)碼凳兵，同時(shí)不攜帶主體百新，告知瀏覽器可以重用這個(gè)副本，減少響應(yīng)大小留荔。

重定向如何損傷性能?

當(dāng)頁(yè)面發(fā)生了重定向吟孙，就會(huì)延遲整個(gè)HTML文檔的傳輸澜倦。在HTML文檔到達(dá)之前聚蝶，頁(yè)面中不會(huì)呈現(xiàn)任何東西，也沒(méi)有任何組件會(huì)被下載藻治。

來(lái)看一個(gè)實(shí)際例子：對(duì)于ASP.NET webform開(kāi)發(fā)來(lái)說(shuō)碘勉，對(duì)于新手很容易犯一個(gè)錯(cuò)誤，就是把頁(yè)面的連接寫(xiě)成服務(wù)器控件后臺(tái)代碼里桩卵，例如用一個(gè)Button控件验靡，在它的后臺(tái)click事件中寫(xiě)上：Response.Redirect("")倍宾；然而這個(gè)Button的作用只是轉(zhuǎn)移URL，這是非常低效的做法胜嗓，因?yàn)辄c(diǎn)擊Button后高职，先發(fā)送一個(gè)Post請(qǐng)求給服務(wù)器，服務(wù)器處理Response.Redirect("")后就發(fā)送一個(gè)302響應(yīng)給瀏覽器辞州，瀏覽器再根據(jù)響應(yīng)的URL發(fā)送GET請(qǐng)求怔锌。正確的做法應(yīng)該是在html頁(yè)面直接使用a標(biāo)簽做鏈接，這樣就避免了多余的post和重定向变过。

重定向的應(yīng)用場(chǎng)景

1. 跟蹤內(nèi)部流量

重定向經(jīng)常用于跟蹤用戶(hù)流量的方向,當(dāng)擁有一個(gè)門(mén)戶(hù)主頁(yè)的時(shí)候埃元，同時(shí)想對(duì)用戶(hù)離開(kāi)主頁(yè)后的流量進(jìn)行跟蹤，這時(shí)可以使用重定向媚狰。例如: 某網(wǎng)站主頁(yè)新聞的鏈接地址http://a.com/r/news岛杀，點(diǎn)擊該鏈接將產(chǎn)生301響應(yīng)，其Location被設(shè)置為http://news.a.com崭孤。通過(guò)分析a.com的web服務(wù)器日志可以得知人們離開(kāi)首頁(yè)之后的去向类嗤。

我們知道重定向是如何損傷性能的，為了實(shí)現(xiàn)更好的效率辨宠，可以使用Referer日志來(lái)跟蹤內(nèi)部流量去向土浸。每個(gè)HTTP請(qǐng)求都有一個(gè)Referer表示原始請(qǐng)求頁(yè)(除了從書(shū)簽打開(kāi)或直接鍵入U(xiǎn)RL等操作)，記錄下每個(gè)請(qǐng)求的Referer彭羹，就避免了向用戶(hù)發(fā)送重定向黄伊，從而改善了響應(yīng)時(shí)間。

2. 跟蹤出站流量

有時(shí)鏈接可能將用戶(hù)帶離你的網(wǎng)站派殷，在這種情況下还最，使用Referer就不太現(xiàn)實(shí)了。

同樣也可以使用重定向來(lái)解決跟蹤出站流量問(wèn)題毡惜。以百度搜索為例拓轻，百度通過(guò)將每個(gè)鏈接包裝到一個(gè)302重定向來(lái)解決跟蹤的問(wèn)題，例如搜索關(guān)鍵字“前端性能優(yōu)化”经伙，搜索結(jié)果中的一個(gè)URL為https://www.baidu.com/link?url=pDjwTfa0IAf_FRBNlw1qLDtQ27YBujWp9jPN4q0QSJdNtGtDBK3ja3jyyN2CgxR5aTAywG4SI6V1NypkSyLISWjiFuFQDinhpVn4QE-uLGG&wd=&eqid=9c02bd21001c69170000000556ece297扶叉，即使搜索結(jié)果并沒(méi)有變，但這個(gè)字符串是動(dòng)態(tài)改變的帕膜，暫時(shí)還不知道這里起到怎樣的作用枣氧？（個(gè)人感覺(jué)：字符串中包含了待訪(fǎng)問(wèn)的網(wǎng)址，點(diǎn)擊之后會(huì)產(chǎn)生302重定向垮刹，將頁(yè)面轉(zhuǎn)到目標(biāo)頁(yè)面（待修改达吞，求大神們給我指正））

除了重定向外，我們還可以選擇使用信標(biāo)(beacon)——一個(gè)HTTP請(qǐng)求荒典，其URL中包含有跟蹤信息酪劫。跟蹤信息可以從信標(biāo)Web服務(wù)器的訪(fǎng)問(wèn)日記中提取出來(lái)吞鸭，信標(biāo)通常是一個(gè)1px*1px的透明圖片，不過(guò)204響應(yīng)更優(yōu)秀覆糟，因?yàn)樗】贪瑥膩?lái)不被緩存，而且絕不會(huì)改變?yōu)g覽器的狀態(tài)滩字。

十二透敌、刪除重復(fù)腳本

在團(tuán)隊(duì)開(kāi)發(fā)一個(gè)項(xiàng)目時(shí)，由于不同開(kāi)發(fā)者之間都可能會(huì)向頁(yè)面中添加頁(yè)面或組件踢械，因此可能相同的腳本會(huì)被添加多次酗电。

重復(fù)的腳本會(huì)造成不必要的HTTP請(qǐng)求（如果沒(méi)有緩存該腳本的話(huà)），并且執(zhí)行多余的JavaScript浪費(fèi)時(shí)間内列，還有可能造成錯(cuò)誤撵术。

如何避免重復(fù)腳本呢？

1. 形成良好的腳本組織话瞧。重復(fù)腳本有可能出現(xiàn)在不同的腳本包含同一段腳本的情況嫩与，有些是必要的，但有些卻不是必要的交排，所以需要對(duì)腳本進(jìn)行一個(gè)良好的組織划滋。

2. 實(shí)現(xiàn)腳本管理器模塊。

例如：

1function insertScript($file) { 2if(hadInserted($file)) { 3return; 4? ? ? } 5? ? ? exeInsert($file); 6 7if(hasDependencies($file)) { 8 9$deps = getDependencies($file);1011? ? ? ? foreach ($deps as $script) {12? ? ? ? ? ? insertScript($script);13? ? ? ? }1415echo "";1617? ? }18}

先檢查是否插入過(guò)埃篓，如果插入過(guò)則返回处坪。如果該腳本依賴(lài)其它腳本，則被依賴(lài)的腳本也會(huì)被插入架专。最后腳本被傳送到頁(yè)面同窘，getVersion會(huì)檢查腳本并返回追加了對(duì)應(yīng)版本號(hào)的文件名，這樣如果腳本的版本變化了部脚，那么以前瀏覽器緩存的就會(huì)失效想邦。

十三、配置ETag

以前瀏覽器緩存的就會(huì)失效委刘。

什么是ETag丧没？

實(shí)體標(biāo)簽(EntityTag)是唯一標(biāo)識(shí)了一個(gè)組件的一個(gè)特定版本的字符串，是web服務(wù)器用于確認(rèn)緩存組件的有效性的一種機(jī)制锡移，通撑煌可以使用組件的某些屬性來(lái)構(gòu)造它。

條件GET請(qǐng)求

如果組件過(guò)期了罩抗，瀏覽器在重用它之前必須首先檢查它是否有效拉庵。瀏覽器將發(fā)送一個(gè)條件GET請(qǐng)求到服務(wù)器灿椅，服務(wù)器判斷緩存還有效套蒂，則發(fā)送一個(gè)304響應(yīng)钞支，告訴瀏覽器可以重用緩存組件。

那么服務(wù)器是根據(jù)什么判斷緩存是否還有效呢?有兩種方式：

ETag（實(shí)體標(biāo)簽）操刀；

最新修改日期烁挟；

最新修改日期

原始服務(wù)器通過(guò)Last-Modified響應(yīng)頭來(lái)返回組件的最新修改日期。

舉個(gè)栗子：

當(dāng)我們不帶緩存訪(fǎng)問(wèn)www.google.com.hk的時(shí)候骨坑，我們需要下載google的logo撼嗓，這時(shí)會(huì)發(fā)送這樣一個(gè)HTTP請(qǐng)求：

Request：

GET googlelogo_color_272x92dp.png?HTTP 1.1

Host: www.google.com.hk

Response:

HTTP 1.1 200 OK

Last-Modified:Fri, 04 Sep 2015 22:33:08 GMT

當(dāng)需要再次訪(fǎng)問(wèn)相同組件的時(shí)候，同時(shí)緩存已經(jīng)過(guò)期欢唾，瀏覽器會(huì)發(fā)送如下條件GET請(qǐng)求：

Request：

GET?googlelogo_color_272x92dp.png?HTTP 1.1

If-Modified-Since:Fri, 04 Sep 2015 22:33:08 GMT

Host: www.google.com.hk

Response:

HTTP 1.1 304 Not Modified

實(shí)體標(biāo)簽

ETag提供了另外一種方式且警，用于檢測(cè)瀏覽器緩存中的組件與原始服務(wù)器上的組件是否匹配。摘抄自書(shū)上的例子：

不帶緩存的請(qǐng)求：

Request：

GET /i/yahoo/gif HTTP 1.1

Host: us.yimg.com

Response:

HTTP 1.1 200 OK

Last-Modified:Tue,12 Dec 200603:03:59 GMT

ETag:”10c24bc-4ab-457elc1f“

再次請(qǐng)求相同組件:

Request：

GET /i/yahoo/gif HTTP 1.1

Host: us.yimg.com

If-Modified-Since:Tue,12 Dec 200603:03:59 GMT

If-None-Match:”10c24bc-4ab-457elc1f“

Response:

HTTP 1.1 304 Not Midified

為什么要引入ETag?

ETag主要是為了解決Last-Modified無(wú)法解決的一些問(wèn)題：

1. 一些文件也許會(huì)周期性的更改礁遣，但是他的內(nèi)容并不改變(僅僅改變的修改時(shí)間)斑芜，這個(gè)時(shí)候我們并不希望客戶(hù)端認(rèn)為這個(gè)文件被修改了，而重新GET;

2. 某些文件修改非常頻繁祟霍，比如在秒以下的時(shí)間內(nèi)進(jìn)行修改杏头，(比方說(shuō)1s內(nèi)修改了N次)，If-Modified-Since能檢查到的粒度是s級(jí)的沸呐，這種修改無(wú)法判斷(或者說(shuō)UNIX記錄MTIME只能精確到秒);

3. 某些服務(wù)器不能精確的得到文件的最后修改時(shí)間醇王。

ETag帶來(lái)的問(wèn)題

ETag的問(wèn)題在于通常使用某些屬性來(lái)構(gòu)造它，有些屬性對(duì)于特定的部署了網(wǎng)站的服務(wù)器來(lái)說(shuō)是唯一的崭添。當(dāng)使用集群服務(wù)器的時(shí)候寓娩，瀏覽器從一臺(tái)服務(wù)器上獲取了原始組件，之后又向另外一臺(tái)不同的服務(wù)器發(fā)起條件GET請(qǐng)求呼渣，ETag就會(huì)出現(xiàn)不匹配的狀況根暑。例如：使用inode-size-timestamp來(lái)生成ETag，文件系統(tǒng)使用inode存儲(chǔ)文件類(lèi)型徙邻、所有者排嫌、組和訪(fǎng)問(wèn)模式等信息，在多臺(tái)服務(wù)器上缰犁，就算文件大小淳地、權(quán)限、時(shí)間戳等都相同帅容，inode也是不同的颇象。

最佳實(shí)踐

1. 如果使用Last-Modified不會(huì)出現(xiàn)任何問(wèn)題，可以直接移除ETag并徘，google的搜索首頁(yè)則沒(méi)有使用ETag遣钳。

2. 確定要使用ETag，在配置ETag的值的時(shí)候麦乞，移除可能影響到組件集群服務(wù)器驗(yàn)證的屬性蕴茴，例如使用size-timestamp來(lái)生成時(shí)間戳劝评。

十四、使Ajax可緩存

維基百科中這樣定義Ajax：

AJAX即“Asynchronous JavaScript and XML”（異步的JavaScript與XML技術(shù)）倦淀，指的是一套綜合了多項(xiàng)技術(shù)的瀏覽器端網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)蒋畜。Ajax的概念由杰西·詹姆士·賈瑞特所提出。

傳統(tǒng)的Web應(yīng)用允許用戶(hù)端填寫(xiě)表單（form）撞叽，當(dāng)提交表單時(shí)就向Web服務(wù)器發(fā)送一個(gè)請(qǐng)求姻成。服務(wù)器接收并處理傳來(lái)的表單，然后送回一個(gè)新的網(wǎng)頁(yè)愿棋，但這個(gè)做法浪費(fèi)了許多帶寬科展，因?yàn)樵谇昂髢蓚€(gè)頁(yè)面中的大部分HTML碼往往是相同的。由于每次應(yīng)用的溝通都需要向服務(wù)器發(fā)送請(qǐng)求糠雨，應(yīng)用的回應(yīng)時(shí)間依賴(lài)于服務(wù)器的回應(yīng)時(shí)間辛润。這導(dǎo)致了用戶(hù)界面的回應(yīng)比本機(jī)應(yīng)用慢得多。

與此不同见秤，AJAX應(yīng)用可以?xún)H向服務(wù)器發(fā)送并取回必須的數(shù)據(jù)砂竖，并在客戶(hù)端采用JavaScript處理來(lái)自服務(wù)器的回應(yīng)。因?yàn)樵诜?wù)器和瀏覽器之間交換的數(shù)據(jù)大量減少（大約只有原來(lái)的5%）[來(lái)源請(qǐng)求],服務(wù)器回應(yīng)更快了鹃答。同時(shí)乎澄，很多的處理工作可以在發(fā)出請(qǐng)求的客戶(hù)端機(jī)器上完成，因此Web服務(wù)器的負(fù)荷也減少了测摔。

類(lèi)似于DHTML或LAMP置济，AJAX不是指一種單一的技術(shù)，而是有機(jī)地利用了一系列相關(guān)的技術(shù)锋八。雖然其名稱(chēng)包含XML浙于，但實(shí)際上數(shù)據(jù)格式可以由JSON代替，進(jìn)一步減少數(shù)據(jù)量挟纱，形成所謂的AJAJ羞酗。而客戶(hù)端與服務(wù)器也并不需要異步。一些基于AJAX的“派生／合成”式（derivative/composite）的技術(shù)也正在出現(xiàn)紊服，如AFLAX檀轨。

Ajax的目地是為突破web本質(zhì)的開(kāi)始—停止交互方式，向用戶(hù)顯示一個(gè)白屏后重繪整個(gè)頁(yè)面不是一種好的用戶(hù)體驗(yàn)欺嗤。

異步與即時(shí)

Ajax的一個(gè)明顯的有點(diǎn)就是向用戶(hù)提供了即時(shí)反饋参萄，因?yàn)樗惒降膹暮蠖藈eb服務(wù)器請(qǐng)求信息。

用戶(hù)是否需要等待的關(guān)鍵因素在于Ajax請(qǐng)求是被動(dòng)的還是主動(dòng)的煎饼。被動(dòng)請(qǐng)求是為了將來(lái)來(lái)使用而預(yù)先發(fā)起的讹挎，主動(dòng)請(qǐng)求是基于用戶(hù)當(dāng)前的操作而發(fā)起的

什么樣的AJAX請(qǐng)求可以被緩存？

POST的請(qǐng)求，是不可以在客戶(hù)端緩存的筒溃，每次請(qǐng)求都需要發(fā)送給服務(wù)器進(jìn)行處理马篮，每次都會(huì)返回狀態(tài)碼200。（可以在服務(wù)器端對(duì)數(shù)據(jù)進(jìn)行緩存铡羡，以便提高處理速度）

GET的請(qǐng)求积蔚，是可以（而且默認(rèn)）在客戶(hù)端進(jìn)行緩存的意鲸，除非指定了不同的地址烦周，否則同一個(gè)地址的AJAX請(qǐng)求，不會(huì)重復(fù)在服務(wù)器執(zhí)行怎顾，而是返回304读慎。

Ajax請(qǐng)求使用緩存

在進(jìn)行Ajax請(qǐng)求的時(shí)候，可以選擇盡量使用get方法槐雾，這樣可以使用客戶(hù)端的緩存夭委，提高請(qǐng)求速度。

seo優(yōu)化

Meta標(biāo)簽優(yōu)化

主要包括主題（Title)募强，網(wǎng)站描述(Description)株灸，和關(guān)鍵詞（Keywords）。還有一些其它的隱藏文字比如Author（作者）擎值，Category（目錄）慌烧，Language（編碼語(yǔ)種）等。

如何選取關(guān)鍵詞并在網(wǎng)頁(yè)中放置關(guān)鍵詞

搜索就得用關(guān)鍵詞鸠儿。關(guān)鍵詞分析和選擇是SEO最重要的工作之一屹蚊。首先要給網(wǎng)站確定主關(guān)鍵詞（一般在5個(gè)上下），然后針對(duì)這些關(guān)鍵詞進(jìn)行優(yōu)化进每，包括關(guān)鍵詞密度（Density）汹粤，相關(guān)度（Relavancy），突出性（Prominency）等等田晚。

了解主要的搜索引擎

雖然搜索引擎有很多嘱兼，但是對(duì)網(wǎng)站流量起決定作用的就那么幾個(gè)。比如英文的主要有Google贤徒，Yahoo遭京，Bing等；中文的有百度泞莉，搜狗哪雕，有道等。不同的搜索引擎對(duì)頁(yè)面的抓取和索引鲫趁、排序的規(guī)則都不一樣斯嚎。還要了解各搜索門(mén)戶(hù)和搜索引擎之間的關(guān)系，比如AOL網(wǎng)頁(yè)搜索用的是Google的搜索技術(shù)，MSN用的是Bing的技術(shù)堡僻。

主要的互聯(lián)網(wǎng)目錄

Open Directory自身不是搜索引擎糠惫，而是一個(gè)大型的網(wǎng)站目錄，他和搜索引擎的主要區(qū)別是網(wǎng)站內(nèi)容的收集方式不同钉疫。目錄是人工編輯的硼讽，主要收錄網(wǎng)站主頁(yè)；搜索引擎是自動(dòng)收集的牲阁，除了主頁(yè)外還抓取大量的內(nèi)容頁(yè)面固阁。

按點(diǎn)擊付費(fèi)的搜索引擎

搜索引擎也需要生存，隨著互聯(lián)網(wǎng)商務(wù)的越來(lái)越成熟城菊，收費(fèi)的搜索引擎也開(kāi)始大行其道备燃。最典型的有Overture和百度，當(dāng)然也包括Google的廣告項(xiàng)目Google Adwords凌唬。越來(lái)越多的人通過(guò)搜索引擎的點(diǎn)擊廣告來(lái)定位商業(yè)網(wǎng)站并齐，這里面也大有優(yōu)化和排名的學(xué)問(wèn)，你得學(xué)會(huì)用最少的廣告投入獲得最多的點(diǎn)擊客税。

搜索引擎登錄

網(wǎng)站做完了以后况褪，別躺在那里等著客人從天而降。要讓別人找到你更耻，最簡(jiǎn)單的辦法就是將網(wǎng)站提交（submit）到搜索引擎测垛。如果你的是商業(yè)網(wǎng)站，主要的搜索引擎和目錄都會(huì)要求你付費(fèi)來(lái)獲得收錄（比如Yahoo要299美元）酥夭，但是好消息是（至少到目前為止）最大的搜索引擎Google目前還是免費(fèi)赐纱，而且它主宰著60％以上的搜索市場(chǎng)。

鏈接交換和鏈接廣泛度（Link Popularity）

網(wǎng)頁(yè)內(nèi)容都是以超文本（Hypertext）的方式來(lái)互相鏈接的熬北，網(wǎng)站之間也是如此疙描。除了搜索引擎以外，人們也每天通過(guò)不同網(wǎng)站之間的鏈接來(lái)Surfing（“沖浪”）讶隐。其它網(wǎng)站到你的網(wǎng)站的鏈接越多起胰，你也就會(huì)獲得更多的訪(fǎng)問(wèn)量。更重要的是巫延，你的網(wǎng)站的外部鏈接數(shù)越多效五，會(huì)被搜索引擎認(rèn)為它的重要性越大，從而給你更高的排名炉峰。

合理的標(biāo)簽使用

幾個(gè)開(kāi)發(fā)過(guò)程中就需要做好的SEO優(yōu)化技巧畏妖，分享給大家。

1疼阔、簡(jiǎn)化代碼結(jié)構(gòu)戒劫，更利于搜索引擎分析抓取有用內(nèi)容：頁(yè)面盡量采用DIV+CSS半夷，當(dāng)然，表格展現(xiàn)模式用table還是比div方便很多的;所有js迅细、css采用外聯(lián)方式巫橄，圖片采用css精靈，減少請(qǐng)求次數(shù)茵典∠婊唬看下下面同樣的內(nèi)容，用div和talbe布局的代碼比較统阿，顯而易見(jiàn)用div簡(jiǎn)便的多彩倚。

2、重要內(nèi)容優(yōu)先加載(第一個(gè)鏈接最好是網(wǎng)站主關(guān)鍵詞砂吞，不刻意要求)向挖，可以用css來(lái)處理择懂，索引一篇文章的長(zhǎng)度也是有限制的，一定要把最重要的內(nèi)容括眠，優(yōu)先展現(xiàn)給蜘蛛袁串，這方面你可以通過(guò)查看一些比較大的網(wǎng)頁(yè)快照來(lái)求證概而。

3、每個(gè)頁(yè)面只能出現(xiàn)一次H1標(biāo)簽囱修，H2標(biāo)簽可以多次：H1權(quán)重很高赎瑰，普遍認(rèn)為僅次于title，一般資訊詳情頁(yè)的標(biāo)題破镰、商品詳情頁(yè)的標(biāo)題餐曼，都放在H1里。

4鲜漩、圖片一定要添加alt屬性源譬，title屬性可選：蜘蛛不認(rèn)識(shí)圖片上的內(nèi)容，只能通過(guò)alt屬性來(lái)判斷孕似，如果是商品列表頁(yè)踩娘，所有商品都加了alt和title的話(huà)，容易造成堆砌關(guān)鍵詞喉祭，所以我一般是只加alt屬性养渴。

5、圖片大小聲明：如果圖片大小不做定義的話(huà)泛烙，頁(yè)面需要重新渲染理卑，就會(huì)影響到加載速度。

6蔽氨、鏈接可根據(jù)需求添加title屬性以及nofllow值;非特殊性鏈接藐唠，鏈接地址一定要寫(xiě)入herf屬性霞溪，有些前端開(kāi)發(fā)人員為了省事，直接用div加個(gè)click事件當(dāng)鏈接中捆，在視覺(jué)上和使用上確實(shí)是實(shí)現(xiàn)了鏈接效果鸯匹，但是做過(guò)SEO優(yōu)化的人

員都知道，蜘蛛目前對(duì)于js的支持很差泄伪，基本無(wú)法讀取里面的鏈接地址殴蓬。所以說(shuō)用click事件是絕對(duì)不允許的，特別是一些重要的導(dǎo)航鏈接蟋滴。

7染厅、頁(yè)面內(nèi)容盡量不要做成flash、圖片津函、視頻肖粮，這些東西蜘蛛是抓不到的，就算是必須的尔苦，也要生成相應(yīng)的靜態(tài)頁(yè)面涩馆。有很多企業(yè)站看著很炫，全站flash允坚，老板看著是爽了魂那，做SEO優(yōu)化的人員就要抓狂了，全站沒(méi)一個(gè)鏈接稠项。

8涯雅、除首頁(yè)外別的頁(yè)面最好要加上面包屑型導(dǎo)航，導(dǎo)航結(jié)構(gòu)一定要清晰展运。

9活逆、做好404頁(yè)面，一般會(huì)加首頁(yè)鏈接及錯(cuò)誤提示拗胜，并測(cè)試其返回狀態(tài)碼為404：1蔗候、用戶(hù)體驗(yàn)友好，可以留住用戶(hù)挤土，不至于直接關(guān)閉頁(yè)面;2琴庵、蜘蛛友好，可以返回抓取其他頁(yè)面仰美。

10迷殿、網(wǎng)站結(jié)構(gòu)呈扁平狀樹(shù)型，目錄結(jié)構(gòu)不宜過(guò)深咖杂，每個(gè)頁(yè)面離首頁(yè)最多點(diǎn)擊不超過(guò)3次庆寺，過(guò)深不利于搜索引擎的抓取。

---------------------

來(lái)源：CSDN

原文：https://blog.csdn.net/dadaDaShiXiong/article/details/79794896

如果是原創(chuàng)文章诉字，轉(zhuǎn)載請(qǐng)注明出處：http://www.cnblogs.com/MarcoHan/