作為門戶網(wǎng)站的前端，有許多說(shuō)不出的苦楚：有些代碼雖然自己也看不下去，但還是不得不硬著頭皮把頁(yè)面給拼上去，比如跟其他頻道公用的部分：因?yàn)槭枪茫琷s、css必須寫在該部分，調(diào)用的js庫(kù)(網(wǎng)易的很多頻道頭部都調(diào)用了兩個(gè)大同小異的js庫(kù))等都身不由己。而且作為財(cái)經(jīng)門戶來(lái)說(shuō)，頁(yè)面分多屏是顯然的、再者N多異步請(qǐng)求的數(shù)據(jù)(股票數(shù)據(jù)要及時(shí)更新)、畫股票行情圖等，對(duì)于前端的性能都是極大的考驗(yàn)。筆者用YSlow去測(cè)評(píng)了一下各大門戶的財(cái)經(jīng)頻道，網(wǎng)易財(cái)經(jīng)得了個(gè)C，而老東家新浪為F，騰訊、搜狐財(cái)經(jīng)都D(測(cè)試時(shí)間為13年2月24日)，這點(diǎn)還是挺慶幸的，哈....

好了，廢話不多說(shuō)，下面筆者就yahoo的14條軍規(guī)來(lái)總結(jié)一下網(wǎng)易財(cái)經(jīng)的前端開發(fā)工作：

1、Make Fewer HTTP Requests 

眾所周知，http請(qǐng)求是要開銷的，減少請(qǐng)求數(shù)可以提高網(wǎng)頁(yè)加載速度。常用的方法，合并css，js以及 Image maps和css sprites等。筆者所在團(tuán)隊(duì)的做法是根據(jù)功能分開開發(fā)，然后通過(guò)內(nèi)部系統(tǒng)對(duì)js，css進(jìn)行分組合并，這樣對(duì)于瀏覽器來(lái)說(shuō)是一個(gè)請(qǐng)求，但是開發(fā)時(shí)仍然能還原成多個(gè)，方便管理和重復(fù)引用。值得一提的是，網(wǎng)易內(nèi)部的前端代碼發(fā)布系統(tǒng)是很值得學(xué)習(xí)、借鑒的，對(duì)于fiddler調(diào)試和性能優(yōu)化工作很是方便，這里不方便透露更多，有興趣的單獨(dú)聊，哈。而css sprites是指只用將頁(yè)面上的背景圖合并成一張，然后通過(guò)background-position來(lái)取背景。這里筆者并不提倡看到像圖片的都用圖片來(lái)處理，就該項(xiàng)目的

[[64828]]

這些部分，都是通過(guò)css實(shí)現(xiàn)的。作為程序猿，新技術(shù)我們要及時(shí)掌握并加以運(yùn)用，尤其是所謂的大公司，更要有這種氣魄，不要因?yàn)槟承?**的瀏覽器不兼容而放棄，慶幸的是，我們領(lǐng)導(dǎo)也很認(rèn)同，哈哈～～

2、Use a Content Delivery Network (CDN 內(nèi)容分發(fā)網(wǎng)絡(luò))

簡(jiǎn)單地講，通過(guò)在現(xiàn)有的Internet中增加一層新的網(wǎng)絡(luò)架構(gòu)，將網(wǎng)站的內(nèi)容發(fā)布到最接近用戶的 cache服務(wù)器內(nèi)，通過(guò)DNS負(fù)載均衡(可選根據(jù)時(shí)間或訪問(wèn)速度來(lái)決定訪問(wèn)哪臺(tái)服務(wù)器資源，筆者剛到不久，沒(méi)有深入去研究公司這部分底層)的技術(shù)，判斷用戶來(lái)源訪問(wèn)cache服務(wù)器取得所需的內(nèi)容。這樣可以有效減少數(shù)據(jù)在網(wǎng)絡(luò)上傳輸?shù)臅r(shí)間，提高速度。相信這個(gè)很多公司都有做，這里就不多說(shuō)了。

3、Add an Expires Header

4、Gzip Components

當(dāng)然，這幾部分內(nèi)容后端幫我們完成了，3主要通過(guò)服務(wù)器端腳本設(shè)置Cache-Control和Expires完成；Gzip的思想就是把文件先在服務(wù)器端進(jìn)行壓縮，然后再傳輸。這個(gè)壓縮率很高，基本上可以壓縮到原來(lái)的1/4。筆者過(guò)去是phper，所以對(duì)這塊也略知一二，對(duì)于前端攻城獅，我們還是有必要了解這塊的內(nèi)容。

5、Put Stylesheets at the Top

我們知道，css，Cascading Style Sheets (層疊樣式表)。層疊即意味后面的css可以覆蓋前面的css，級(jí)別高的css可以覆蓋級(jí)別低的css。。ie，firefox等瀏覽器在css全部傳輸完全之前不會(huì)去渲染任何的東西。很多瀏覽器下，如IE，把樣式表放在頁(yè)面的底部的問(wèn)題在于它禁止了網(wǎng)頁(yè)內(nèi)容的順序顯示。瀏覽器阻止顯示以免重畫頁(yè)面元素，那用戶只能看到空白頁(yè)了。Firefox不會(huì)阻止顯示，但這意味著當(dāng)樣式表下載后，有些頁(yè)面元素可能需要重畫，這導(dǎo)致閃爍問(wèn)題。所以我們應(yīng)該盡快讓css加載完畢。實(shí)際上很多網(wǎng)站也是這么做的，當(dāng)然有需要分屏顯示的網(wǎng)站，為了讓用戶看到的首屏頁(yè)面盡快顯示，也可以分開放置，當(dāng)然，這里要根據(jù)具體項(xiàng)目需求來(lái)討論了。實(shí)際上筆者該項(xiàng)目也分了三個(gè)css文件，比如說(shuō)是延時(shí)顯示的廣告，我們?yōu)榱颂岣遚ss加載速度，也獨(dú)立出來(lái)了放在頁(yè)面的底部。

6、Put Scripts at the Bottom

原因：首先，防止script腳本的執(zhí)行阻塞頁(yè)面的下載。在頁(yè)面loading的過(guò)程中，當(dāng)瀏覽器讀到j(luò)s執(zhí)行語(yǔ)句的時(shí)候一定會(huì)把它全部解釋完畢后在會(huì)接下來(lái)讀下面的內(nèi)容。瀏覽器這么做的邏輯是因?yàn)閖s隨時(shí)可能執(zhí)行 location.href或是其他可能完全中斷此頁(yè)面過(guò)程的函數(shù)，即如此，當(dāng)然得等他執(zhí)行完畢之后再加載咯。所以放在頁(yè)面***，可以有效減少頁(yè)面可視元素的加載時(shí)間。其次，腳本引起的第二個(gè)問(wèn)題是它阻塞并行下載數(shù)量。HTTP/1.1規(guī)范建議瀏覽器每個(gè)主機(jī)的并行下載數(shù)不超過(guò)2個(gè)（IE只能為2個(gè)，其他瀏覽器如ff等都是默認(rèn)設(shè)置為2個(gè)，不過(guò)新出的ie8可以達(dá)6個(gè)）。因此如果您把圖像文件分布到多臺(tái)機(jī)器的話，您可以達(dá)到超過(guò)2個(gè)的并行下載。但是當(dāng)腳本文件下載時(shí)，瀏覽器不會(huì)啟動(dòng)其他的并行下載。

7、Avoid CSS Expressions

盡量減少或者不使用css表達(dá)式，其實(shí)大部分可以用js實(shí)現(xiàn)。

8、Make JavaScript and CSS External

把css和js寫在頁(yè)面內(nèi)容可以減少2次請(qǐng)求，但也增大了頁(yè)面的大小。我們的網(wǎng)站已經(jīng)對(duì)靜態(tài)文件做了緩存，那也就沒(méi)有2次多余的http請(qǐng)求了。

9、Reduce DNS Lookups

一次DNS的解析過(guò)程會(huì)消耗20-120毫秒的時(shí)間,在dns查詢結(jié)束之前，瀏覽器不會(huì)下載該域名下的任何東西。所以減少dns查詢的時(shí)間可以加快頁(yè)面的加載速度。yahoo的建議一個(gè)頁(yè)面所包含的域名數(shù)盡量控制在2-4個(gè)。這就需要對(duì)頁(yè)面整體有一個(gè)很好的規(guī)劃。目前我們這點(diǎn)做的不好，尤其是對(duì)于單純靠廣州收入的網(wǎng)站，很多廣告投放系統(tǒng)拖累了我們，前端攻城獅們也無(wú)可奈何。

10、Minify JavaScript

壓縮js和css的作用很顯然，減少頁(yè)面字節(jié)數(shù)。我們的前端部門，也有專門做后端的，為的是給前端開發(fā)提供工具，快速開發(fā)。Js雖然壓縮了，降低了可讀性，但是在調(diào)試的時(shí)候，工具可以將其復(fù)原，也就是調(diào)用本地的，這里做法應(yīng)該贊一個(gè)，哈～～～

11、Avoid Redirects

重定向是需要消耗時(shí)間的。當(dāng)然這只是一個(gè)例子，發(fā)生重定向的原因很多，比如跳轉(zhuǎn)后面缺少 /等，有興趣的可以去研究研究。

12、Remove Duplicate Scripts 

13、Configure ETags

14、Make Ajax Cacheable

這幾個(gè)就不一一細(xì)講了。

再有就是講一下seo方面的問(wèn)題。

1、標(biāo)簽語(yǔ)義化。提供給搜索引擎友好的提示，使得每個(gè)html標(biāo)簽都有它自己的含義和作用，使爬蟲理解你寫那個(gè)到底是個(gè)啥玩意。比如這里

我們的網(wǎng)易財(cái)經(jīng)這幾個(gè)文字，其實(shí)是沒(méi)展示在頁(yè)面中的，但是我們實(shí)際上代碼是有寫的，然后用樣式使其隱藏起來(lái)。再如：

幻燈片的切換，可能這里的數(shù)字沒(méi)有實(shí)際性的作用，而且也根本無(wú)需顯示在頁(yè)面中，很多時(shí)候我們就忽略不寫了，寫了反而還要使其文字不出現(xiàn)在頁(yè)面中(比如設(shè)置text-indent值為負(fù)的)。其實(shí)不然，我覺(jué)得我們是有必要寫上去的，這樣別人(或機(jī)器)能方便的理解我們的真實(shí)意圖了。這里不得不提的是，筆者該項(xiàng)目有些地方卻故意跟標(biāo)簽語(yǔ)義化做對(duì)，比如這里：

沒(méi)見(jiàn)過(guò)后面跟_ntesquote_這樣的標(biāo)簽的吧，其實(shí)該頁(yè)面存在大篇幅的這樣的標(biāo)簽，為的是js統(tǒng)一獲取該標(biāo)簽，一次性發(fā)送請(qǐng)求，獲取異步數(shù)據(jù)，減少后端負(fù)荷。

2、權(quán)重控制。搜索引擎會(huì)根據(jù)我們?cè)O(shè)置的頁(yè)面權(quán)重來(lái)劃分頁(yè)面重點(diǎn)，比如，h1~h6吧，其權(quán)重依次遞減，一般h1是頁(yè)面中重要的元素，這里可以設(shè)置為網(wǎng)站的logo或其說(shuō)明文字，但不宜過(guò)多，太多了，搜索引擎就不知道該頁(yè)面到底哪個(gè)是重要的了。

3、諸如其他的title、alt之類，筆者這里就不多說(shuō)了。

***貼上頁(yè)面地址：http://money.163.com/  歡迎志同道合之士拍磚、斧正，共同研究，一起進(jìn)步。

原文鏈接：http://www.cnblogs.com/xiezhanggen/archive/2013/02/24/163f2e.html