| 關(guān)于大規(guī)模、高流量Web2.0網(wǎng)站性能調(diào)優(yōu)的14條準(zhǔn)則，已近成了業(yè)界web2.0網(wǎng)站前端優(yōu)化的準(zhǔn)則，國(guó)內(nèi)外也有很多文章和書籍介紹這些準(zhǔn)則。14條準(zhǔn)則其實(shí)是美國(guó)雅虎Performance部門這幾年的工作成果之一，他們還研究并提出了許多有效的網(wǎng)站性能調(diào)優(yōu)技術(shù)。美國(guó)Performance團(tuán)隊(duì)負(fù)責(zé)將雅虎產(chǎn)品和應(yīng)用改進(jìn)得更快、更好、更有效率。
上周美國(guó)Yahoo! Performance部門的技術(shù)經(jīng)理Tenni來(lái)到中國(guó)雅虎的Office。在Yahoo!之前，Tenni曾在IBM的普適計(jì)算(Pervasive Computing)部門工作過(guò)，該部門致力于開發(fā)高性能的企業(yè)移動(dòng)解決方案。 在北京溫特萊中心，我負(fù)責(zé)接待了Tenni，并和她探討了許多互聯(lián)網(wǎng)站性能調(diào)優(yōu)方面的問(wèn)題，收獲良多。除了這14條準(zhǔn)則，他們最近又提出了8條新的準(zhǔn)則。這篇blog的讀者則有幸先看到這些準(zhǔn)則。注意：轉(zhuǎn)載本文時(shí)，請(qǐng)務(wù)必注明出處–http://icyriver.net/?p=26。 （Tenni Theurer畢業(yè)于加利福尼亞大學(xué)的計(jì)算機(jī)科學(xué)專業(yè)，說(shuō)點(diǎn)8卦的東西：她告訴我，她母親很小就從臺(tái)灣去了美國(guó)，但卻是一個(gè)pure Chinese，非常愛(ài)國(guó)，每次聽到別人說(shuō)中國(guó)在怎么不好，就會(huì)很生氣。Tenni外表看起來(lái)很Chinese，但基本上是一個(gè)ABC，中文說(shuō)得很少。中午我們吃飯的時(shí)候，她指著皮蛋教會(huì)了我們，這個(gè)叫thousand-year-old eggs。） 1。Make Fewer HTTP Requests （盡量減少http請(qǐng)求數(shù)量） 首先面臨的一個(gè)問(wèn)題是把所有的 JavaScript 與 CSS 放到一個(gè)文件中好呢，還是分割成多個(gè)文件 ? 從減少網(wǎng)絡(luò)請(qǐng)求的角度上考慮, 前者更好，后者差。但是從并行的角度考慮, IE 與 Firefox 默認(rèn)情況下都只能同時(shí)從一個(gè)域請(qǐng)求兩個(gè)資源. 這會(huì)在很多情況下給用戶帶來(lái)不良的使用體驗(yàn)–必須所有的文件都下載完畢才可以看到像樣的頁(yè)面. Flickr 采用了折衷的辦法–在保持文件數(shù)量盡可能少的情況下，把 JavaScript 與 CSS 分成多個(gè)子文件. 這在開發(fā)上帶來(lái)了復(fù)雜性，但是對(duì)性能的收益是巨大的。 2。Use a Content Delivery Network （使用CDN） 3。Add an Expires Header （在下載的css、js、image組件里增加過(guò)期時(shí)間） 4。Gzip Components （對(duì)下載的組件進(jìn)行壓縮） 毫無(wú)疑問(wèn)，對(duì)站點(diǎn)內(nèi)容進(jìn)行壓縮是一個(gè)比較常用的 Web 優(yōu)化手段．但是并不一定都能達(dá)到理想的效果．原因在于 mod-gzip 模塊不但消耗服務(wù)器端 CPU 資源，也消耗客戶端 CPU 資源. 而且, mod_gzip 壓縮文件后創(chuàng)建的臨時(shí)文件是放到磁盤上的，這也會(huì)給磁盤 IO 帶來(lái)嚴(yán)重的問(wèn)題. Flickr 采用的是 Httpd 2.x 以后支持的 mod_deflate 模塊．壓縮操作都在內(nèi)存中進(jìn)行．mod_deflate 在 Httpd 1.x 是不可用的, 不過(guò)可以通過(guò)創(chuàng)建 RAM 盤的方式來(lái)間接提高性能． 當(dāng)然, mod_gzip 到也不是一無(wú)是處, 對(duì)于預(yù)壓縮的文件, 還是有好處的. 而且, 采用壓縮的時(shí)候,也要注意策略. 圖片文件壓縮就沒(méi)什么必要了(Flickr 上圖像多, 而且壓縮得不到什么好處). Flickr 只對(duì)JavaScript 和 CSS 進(jìn)行壓縮. mod_gzip 新一點(diǎn)的版本能夠自動(dòng)通過(guò)配置 mod_gzip_update_static 選項(xiàng)自動(dòng)處理 預(yù)壓縮的文件. Cal 也指出這個(gè)特性在一些舊版本的瀏覽器上會(huì)出問(wèn)題. 壓縮的另一個(gè)主要手段是內(nèi)容的壓縮. 針對(duì) JavaScript 可以進(jìn)行通過(guò)減少注釋、合并空格、使用緊湊的語(yǔ)法等小技巧(Google 的所有腳本都非常難讀，而且非常緊湊，思想類似).當(dāng)然，經(jīng)過(guò)這樣處理的 JavaScript 可能帶了很多括號(hào)不容易解析，Flickr 使用了 Dojo Compressor 來(lái)構(gòu)建解析樹。Dojo Compressor 開銷很低，而且對(duì)于最終用戶是透明的. JavaScript 的處理方法介紹過(guò)，CSS 處理則相對(duì)簡(jiǎn)單.通過(guò)簡(jiǎn)單的正則表達(dá)式替換(比如把多個(gè)空格替換為一個(gè)空格符), 最高可以獲得 50% 的壓縮比。 5。Put CSS components at the top of the page. （css文件盡可能放在頁(yè)面的最上面） 6。Put JS components as close to the bottom of the page as possible. （js文件盡可能放在頁(yè)面的最下面） 7。Avoid CSS Expressions （在css文件中慎用表達(dá)式） 8。Make JavaScript and CSS External （在外部包含js和css文件） 9。Reduce DNS Lookups （減少請(qǐng)求中域名的解析次數(shù)） 10。Minify JavaScript （js代碼壓縮） 11。Avoid doing redirects. （避免重定向） 12。Remove Duplicates Scripts （避免請(qǐng)求重復(fù)的js文件） 13。Configure ETags （配置好ETag） Flickr 的開發(fā)者充分利用了 Http 1.1 規(guī)范定義的 Etag 與 Last-Modified 機(jī)制 來(lái)提高 Caching 的效率. 值得注意的是，Cal 介紹了一個(gè)在負(fù)載均衡條件下的 e-Tag 小技巧. 即可以設(shè)定 Apache 通過(guò)文件調(diào)整時(shí)間與文件大小獲得 E-Tag ,而默認(rèn)情況下, Apache 是通過(guò)文件節(jié)點(diǎn)獲取 e-Tag 的。當(dāng)然，這也不是很完美，因?yàn)闀?huì)影響 if-modified-since 。 但是有的網(wǎng)站的e-Tag，如yahoo，其產(chǎn)生規(guī)則是基于節(jié)點(diǎn)的。相同的css或js腳本在不同節(jié)點(diǎn)服務(wù)器上的e-Tag不同，所以如果有n個(gè)服務(wù)器，那么瀏覽器獲得304應(yīng)答消息的概率是1/n。 14。Make Ajax Cacheable （緩存Ajax請(qǐng)求） 以下幾點(diǎn)是新增的準(zhǔn)則，還沒(méi)有正式公布，所以大家要注意，轉(zhuǎn)載本文時(shí)，請(qǐng)務(wù)必注明出處—http://icyriver.net/?p=26。 15。Flush the Header （先發(fā)送Header里的信息） We improved the page load times by flushing the apache output buffer after the document HEAD was generated.This had two benefits. First, the HEAD contains SCRIPT and LINK tags for scripts and stylesheets. By flushing the HEAD, those tags are received and parsed by the browser sooner, and in turn the browser starts downloading those components earlier. Second, the HEAD is flushed before actually generating the search results. This is a win for any property doing a significant backend computation or especially making one or more backend web service calls. 16。Split Static Content Across Multiple Hostnames （把較大的靜態(tài)文件分割成不同域的請(qǐng)求） If you have many (10 or more) components downloaded from a single hostname, it might be better to split those across two hostnames. 17。Reduce the Size of Cookies （不要讓Cookie內(nèi)容過(guò)大） Reduce the amount of data in the cookie by storing state information on the backend, and abbreviating names and values stored in the cookie. Set expiration dates on your cookies, and make them as short as possible. 18。Host Static Content on a Different Top-Level Domain （把靜態(tài)文件放在不同的頂級(jí)域名下） 19。Minify CSS （Css代碼壓縮） 20。Use GET for XHR （有XHR時(shí)使用GET請(qǐng)求） Iain Lamb did a deep study of how using POST for XMLHttpRequests is inefficient, especially in IE. His recommendation: “If the amount of data you have to send to the server is small (less than 2k), I suggest you design your webservice / client application to use GET rather than POST。 21。Avoid IFrames （盡量避免使用IFrame） Don’t use SRC (set it via JS instead). Each IFrame takes 20-50ms, even if it contains nothing 22。Optimize images （優(yōu)化圖片） 出處 http://icyriver.net/?p=26 |
聯(lián)系客服
