建站常識
Flickr的開發(fā)者的Web應(yīng)用優(yōu)化技巧
2006-10-27 13:04:00
Cal Henderson是大名鼎鼎的 Flickr 網(wǎng)站的開發(fā)者之一。在一篇名為 Serving JavaScript Fast 的文章中,他介紹了用于 Flickr 站點應(yīng)用優(yōu)化的技巧,讀罷感覺獲益良多?!苯酪幌聞e人的饃”,概括一下該文的主要內(nèi)容。
Flickr 是 Web 2.0 的代表站點。面對的網(wǎng)絡(luò)問題除了一般 Web 站點都會有的內(nèi)容優(yōu)化之外, 還有必須要靈活處理 JavaScript 與CSS的頻繁變化后部署分發(fā)帶來的復(fù)雜性。
設(shè)定文件大小的策略 首先面臨的一個問題是把所有的 JavaScript 與 CSS 放到一個文件中好呢,還是分割成多個文件? 從減少網(wǎng)絡(luò)請求的角度上考慮, 前者更好,后者差。但是從并行的角度考慮, IE 與Firefox 默認(rèn)情況下都只能同時從一個域請求兩個資源. 這會在很多情況下給用戶帶來不良的使用體驗–必須所有的文件都下載完畢才可以看到像樣的頁面. Flickr 采用了折衷的辦法–在保持文件數(shù)量盡可能少的情況下,把JavaScript 與 CSS 分成多個子文件. 這在開發(fā)上帶來了復(fù)雜性,但是對性能的收益是巨大的。
壓縮的優(yōu)化問題 毫無疑問,對站點內(nèi)容進行壓縮是一個比較常用的 Web 優(yōu)化手段.但是并不一定都能達到理想的效果。原因在于mod-gzip 模塊不但消耗服務(wù)器端 CPU 資源,也消耗客戶端 CPU 資源. 而且, mod_gzip 壓縮文件后創(chuàng)建的臨時文件是放到磁盤上的,這也會給磁盤 IO 帶來嚴(yán)重的問題. Flickr 采用的是 Httpd 2.x 以后支持的mod_deflate 模塊.壓縮操作都在內(nèi)存中進行。mod_deflate 在 Httpd 1.x 是不可用的, 不過可以通過創(chuàng)建RAM 盤的方式來間接提高性能。
當(dāng)然, mod_gzip 到也不是一無是處, 對于預(yù)壓縮的文件, 還是有好處的. 而且, 采用壓縮的時候,也要注意策略. 圖片文件壓縮就沒什么必要了(Flickr 上圖像多, 而且壓縮得不到什么好處). Flickr 只對 JavaScript 和 CSS 進行壓縮. mod_gzip 新一點的版本能夠自動通過配置 mod_gzip_update_static 選項自動處理 預(yù)壓縮的文件. Cal 也指出這個特性在一些舊版本的瀏覽器上會出問題。
壓縮的另一個主要手段是內(nèi)容的壓縮. 針對 JavaScript 可以進行通過減少注釋、合并空格、使用緊湊的語法等小技巧(Google 的所有腳本都非常難讀,而且非常緊湊,思想類似).當(dāng)然,經(jīng)過這樣處理的 JavaScript 可能帶了很多括號不容易解析,F(xiàn)lickr 使用了 Dojo Compressor 來構(gòu)建解析樹。Dojo Compressor 開銷很低,而且對于最終用戶是透明的. JavaScript 的處理方法介紹過,CSS 處理則相對簡單.通過簡單的正則表達式替換(比如把多個空格替換為一個空格符), 最高可以獲得 50% 的壓縮比。
Caching 的優(yōu)化 Flickr 的開發(fā)者充分利用了 Http 1.1 規(guī)范定義的 Etag 與 Last-Modified 機制 來提高 Caching 的效率。值得注意的是,Cal 介紹了一個在負(fù)載均衡條件下的 e-Tag 小技巧. 即可以設(shè)定 Apache 通過文件調(diào)整時間與文件大小獲得 E-Tag ,而默認(rèn)情況下, Apache 是通過文件節(jié)點獲取 e-Tag 的。當(dāng)然,這也不是很完美,因為會影響 if-modified-since 。
靈活運用mod_rewrite 據(jù)說Flickr 網(wǎng)站應(yīng)用是進行每日構(gòu)建的(Daily Build)。 如果沒有一個靈活的機制恐怕這是不可想象的。而且,在 Flickr 這樣的站點, 內(nèi)容的修改同步的處理都是很讓人頭疼的難題. 他們的利器是 mod_rewrite 的靈活運用。通過配置 URL 重寫規(guī)則,很容易切換到不同的環(huán)境下。聽起來很簡單, 但是沒有一定的 Web 技術(shù)功力談何容易做到 ?!
通過這幾個主要方法的運用,我們看到了如夢幻一般高性能的 Flickr 。
近期更新
- [2023-06-25 23:22:29] 優(yōu)秀網(wǎng)站設(shè)計的五大特點
- [2023-04-27 14:05:55] Html 5 響應(yīng)式網(wǎng)站設(shè)計制作
- [2023-04-10 11:07:30] 網(wǎng)站建設(shè)制作流程知多少
- [2022-10-14 10:11:30] 做網(wǎng)站設(shè)計應(yīng)該更看重框架搭建還是視覺觀感?
- [2022-08-09 15:57:48] 以“產(chǎn)品”思維搭建網(wǎng)站!
- [2022-08-08 09:12:57] 一家公司的網(wǎng)站應(yīng)該有哪些板塊內(nèi)容?
- [2022-08-05 09:28:06] 企業(yè)網(wǎng)站建設(shè)為什么要設(shè)置新聞板塊?
- [2022-07-04 15:58:06] 網(wǎng)站首頁設(shè)計的好看,這個網(wǎng)站就成功了一大半!
- [2022-05-20 09:34:19] 網(wǎng)站后臺管理系統(tǒng)是什么?有什么作用?
- [2022-05-17 11:29:32] 作為消費者,應(yīng)該如何選擇一家水平高的網(wǎng)站建設(shè)公司
- [2022-05-17 11:27:01] 高端網(wǎng)站定制與模板化網(wǎng)站應(yīng)該怎么選擇?
- [2022-04-22 16:00:41] 現(xiàn)在高端的網(wǎng)站設(shè)計都有哪些新的趨勢?
延伸閱讀
- [2010-06-22 08:21:00] 互聯(lián)網(wǎng)產(chǎn)品設(shè)計之人物角色
- [2006-08-22 22:09:00] WEB網(wǎng)頁設(shè)計中的全色系顏色表
- [2007-12-03 22:42:00] 有感豆瓣的改版
- [2008-02-22 10:37:00] 文字鏈接,怎么辦?
- [2010-01-24 21:48:00] 交互設(shè)計(7)一避免迷路
- [2006-12-26 14:42:00] 體驗:設(shè)計不能承受之重
- [2010-03-31 11:48:00] sns視覺設(shè)計分享
- [2007-11-17 17:55:00] 網(wǎng)頁設(shè)計如何促進內(nèi)衣品牌建設(shè)
- [2020-07-01 17:13:57] 對于中小型企業(yè),青島網(wǎng)站建設(shè)有哪些標(biāo)準(zhǔn)?
- [2009-05-26 08:13:00] 可用性問題的嚴(yán)重性評級
- [2008-01-02 10:15:00] 你是否在邊緣化?
- [2006-12-14 22:22:00] Web2.0的視覺設(shè)計
解決方案
輪胎行業(yè)網(wǎng)站設(shè)計解決方案 機械行業(yè)網(wǎng)站設(shè)計解決方案 房地產(chǎn)行業(yè)網(wǎng)站設(shè)計解決方案 科技企業(yè)網(wǎng)站設(shè)計解決方案 電子家電網(wǎng)站設(shè)計解決方案 食品行業(yè)網(wǎng)站設(shè)計解決方案 集團公司網(wǎng)站設(shè)計解決方案 企事業(yè)單位網(wǎng)站設(shè)計解決方案 外貿(mào)行業(yè)網(wǎng)站設(shè)計解決方案 健身運動網(wǎng)站設(shè)計解決方案 美容與化妝品網(wǎng)站設(shè)計解決方案 建筑設(shè)計行業(yè)網(wǎng)站設(shè)計解決方案 物流行業(yè)網(wǎng)站設(shè)計解決方案
TAGS關(guān)鍵字
微信營銷的優(yōu)勢 青島SEO 網(wǎng)站策劃 圖形網(wǎng)格 英文網(wǎng)站建設(shè) 外貿(mào)網(wǎng)站設(shè)計 青島網(wǎng)站設(shè)計哪家好 青島開發(fā)區(qū)建站公司 SEO優(yōu)化 舒適的界面 html和css 搜索引擎蜘蛛 良好的導(dǎo)航 手機網(wǎng)站建設(shè) 審美 微信開發(fā) 企業(yè)網(wǎng)站 網(wǎng)站建設(shè),手機網(wǎng)站 網(wǎng)站制作 青島網(wǎng)絡(luò)公司 青島輪胎網(wǎng)站設(shè)計 網(wǎng)站開發(fā) 集團公司網(wǎng)站建設(shè) 搜索引擎 css IT資訊 H5專題頁面 營銷型網(wǎng)站 空白和簡潔的設(shè)計 微信小程序