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

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

1、Make Fewer HTTP Requests 

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

[[64828]]

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

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

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

3、Add an Expires Header

4、Gzip Components

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

5、Put Stylesheets at the Top

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

6、Put Scripts at the Bottom

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

7、Avoid CSS Expressions

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

8、Make JavaScript and CSS External

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

9、Reduce DNS Lookups

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

10、Minify JavaScript

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

11、Avoid Redirects

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

12、Remove Duplicate Scripts 

13、Configure ETags

14、Make Ajax Cacheable

這幾個就不一一細講了。

再有就是講一下seo方面的問題。

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

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

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

沒見過后面跟_ntesquote_這樣的標簽的吧，其實該頁面存在大篇幅的這樣的標簽，為的是js統(tǒng)一獲取該標簽，一次性發(fā)送請求，獲取異步數(shù)據(jù)，減少后端負荷。

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

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

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

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