雅虎用戶界面博客（YUIBlog）

截屏：羅斯哈姆斯的銳套件，Textmate

繼續閱讀截屏：羅斯哈姆斯的銳套件，Textmate ...

查找談話： bloglines | Technorati的

共享和擴展： 書籤和書籤 | Digg它！ | reddit！

表現的研究，第1部分：什麼是80/20法則告訴我們關於減少HTTP請求

這已經不是什麼秘密了用戶喜歡快的網站。 我在一個專門的團隊專注於量化和提高產品的性能雅虎全球。 我們工作的一部分，我們進行實驗相關網頁的性能。 我們能夠分享我們的研究結果，以便其他前端工程師加入我們的行列，加速了用戶體驗到網上。

80/20性能規則

Vilfredo帕累托，經濟學家在20世紀初，發表了著名的觀察有80％的國家財富屬於 20％的人口。 這個後來被推廣到什麼通常被稱為帕累托原則（也稱為 80-20規則），其中規定任何現象，80％的後果，來自於 20％的原因。 我們看到這種現象在軟件工程中有80％的時間花在只有20％的代碼。 當我們優化我們的應用中，我們知道，把重點放在有20％的代碼。 同樣的技術也應適用於在優化網頁。 大多數性能優化今天作出的部分生成的HTML文件（Apache中，C + +中，數據庫等），但這些部件不僅有助於約 20％用戶的響應時間。 這是更好地把重點放在優化的部分，有助於其他80％。

使用包嗅探器，我們發現什麼發生在其他80％。 圖 1是一個圖形化視圖的時間都花在哪裡加載 http://www.yahoo.com一個空的緩存。 每一個酒吧代表一個具體組成部分，是為了顯示在開始的瀏覽器。 第一個欄的時間花在瀏覽器只返回的HTML文件。 公告只有10％的時間都花在這裡為瀏覽器請求的HTML頁面，並為 Apache縫合在一起的HTML並返回響應返回給瀏覽器。 另外90％的時間都花在抓取頁面中的其他組件包括圖片，腳本和樣式表。

表1顯示了流行的網站的開支 5％至38％的時間下載的HTML文件。 另外62％至95％的時間都花在HTTP請求獲取所有組件中的HTML文件（如圖像，腳本和樣式表）。 有許多的影響組件在頁面加劇了瀏覽器下載一個事實，即只有兩個或四個部分，每並行主機，根據 HTTP版本的響應和用戶的瀏覽器。 我們的經驗表明，減少 HTTP請求的數量有最大的影響減少響應時間，而且往往是最簡單的性能改進，使。

不應該一切都保存在瀏覽器的緩存呢？

得出的結論是相同的：減少 HTTP請求數量有最大的影響減少響應時間，而且往往是最簡單的性能改進，使。 在接下來的文章中，我們將看看緩存的影響，以及一些令人吃驚的現實世界的結果。

免責聲明：主宰視覺豐富的設計緊迫需要權衡對這種請求減少的目標。 當你需要視覺豐富，可以採取其他步驟 - 聚合JS文件，使用CSS精靈，等等 - 但是視覺豐富並趨向背道而馳一個細長的HTTP請求管道。

查找談話： bloglines | Technorati的

共享和擴展： 書籤和書籤 | Digg它！ | reddit！

視頻：道格拉斯克羅克福德，“高級JavaScript”

上個月，我發表一些視頻來自一個Douglas Crockford的演講對前端工程（ 視頻：道格拉斯克羅克福德，“不願面對的空氣污染指數：理論的DOM” ）。 這些誰享有道格拉斯的深潛到DOM可能也有興趣在他的“高級 JavaScript”頒獎，現在公開的在雅虎視頻。 在本次講座 - 第三屆三部分組成的系列，他先後任教於雅虎 - 道格拉斯人們密切注意的代碼模式從中 JavaScript程序員可以選擇在創作中的應用。 他比較熟悉的結構模式，如Pseudoclassical更獨特的模式，如寄生模式，（他認為），運行更“與糧”的JavaScript。 當布蘭登艾奇發言今年夏天，他在雅虎道格拉斯形容為“尤達和JavaScript編程的拉姆達”，在觀看“JavaScript高級”，你可能有一個明確的意義在哪裡的情緒從何而來。

它值得再次指出，道格拉斯的思想和觀點，是他自己的許多缺陷，而且在錄像工藝是我的。

• 第1部分：31分鐘
• 第2部分：25分鐘
• 第3部分：11分鐘
• 下載幻燈片（PowerPoint文件壓縮）
• 注：此影片也可以在一個可下載的，與iPod兼容的格式由銳劇院。

你可以看看第一部分如下：

更多視頻

在銳劇院組， 銳網站包含鏈接到視頻從Firebug的作者喬休伊特，Oddpost創始人伊恩羔羊，銳工程師馬特斯威尼，等等。

關於視頻格式的一個注記

這部影片也可以在一個可下載的，與iPod兼容的格式由銳劇院。

查找談話： bloglines | Technorati的

共享和擴展： 書籤和書籤 | Digg它！ | reddit！

分級瀏覽器支持：第四季度更新

大約每3個月，我們更新圖表詳細說明哪些瀏覽器獲得A級支持按照分級瀏覽器支持 。 結合昨天的銳更新版本 ，這裡是我們的瀏覽器支持更新為2006年第四季度。

總結：A級為 Firefox 2.0開始支持，並重申了IE7的。 A級的支持是停止對 IE 5.5以上和Firefox 1.0。 很少使用Gecko的衍生工具（例如Netscape和Mozilla應用程序套件）現在接到X級，而不是A級的支持。 Opera 9中現在收到A級支持其他平台。

子彈的形式，這裡的變化都在此更新：

1. 重述的A級的支持，IE 7中，贏（XP系統）
2. 終止的A級的支持，IE5.5以上，運
3. 啟動的A級的支持，Firefox 2.x的，Win / Mac的。
4. 終止的A級的支持，火狐1.0.x的，Win / Mac的。
5. 擴建工程級的支持，歌劇 9.x中，Win / Mac的
6. 終止 A級的支持下，Mozilla的應用程序套件，Win / Mac的
7. 終止 A級的支持，網景，Win / Mac的

雖然你應始終引用官方金紫荊星章圖表託管在雅虎開發者網絡 ，我已經包括了本季度的快照的圖表為子孫後代著想：

展望下一季度（2007年第一季度），我們將反映增量版本支持的瀏覽器，但沒有大的變化的預期。

謝謝，
內特

查找談話： bloglines | Technorati的

共享和擴展： 書籤和書籤 | Digg它！ | reddit！

銳版本0.12.0：TabView控制，改進的API文檔，以及更多

今天，我們發布的版本0.12銳圖書館。 下面是重點：

• 該TabView控制 ：筆試由銳動畫和大教堂作家馬特斯威尼 ，這個充滿活力的標籤解決方案是最新銳的加法和具有強大的支持漸進提高和高光澤的豐富性。 退房馬特的名冊TabView例子的一個想法是什麼新的控制能做到;查看源代碼的例子來看看他們是如何實施。
• 改進的文檔：銳開發亞當摩爾（ 事件 ， 拖放 ， 滑塊 ， 樹視圖 ）創建了一個新的工具生成的API文檔 ，使我們能夠產生統一的，交聯API文檔和一個完整的自動完成驅動的搜索控件 。 新的API文檔開發人員提供了更清晰的照片，並提供單獨的班級結構分類的屬性和配置選項。 你可能永遠不會回到備忘單再次...
• ...但是，如果你還喜歡作弊表：備忘單0.12版本更新，包括新的薄板TabView和對奈特Koechley的CSS 復位 ， 字體和網格基礎。 你可以下載所有的銳備忘單從銳圖書館網站。
• 談到網格的CSS：內特有rev'd烤網格包中支持750px，950px，和全視口（“液態”）的佈局。 網格0.12三倍的數量仍然支持的佈局和權重前gzipping下3KB。 我們已經建立了銳網站上的復位/字體/網格的基礎，我們現在正在做的使用使用新的全視支持。
• 整個圖書館的改進：有增強，整個圖書館被發現，從事件的新onContentReady方法顯著改善日曆控件與一個簡單的界面，用於創建多月日曆顯示（如果你從以前的版本升級的日曆， 檢查了一步一步的升級指南 ）。 如需完整清單的變更，請參閱發行說明文檔，伴隨著分配。

我們會跟進的一些詳細信息，這些主題在本週晚些時候。 現在，請讓您的方式來SourceForge上下載最新銳的分佈情況;請參閱發行說明中的分佈變化充分體現整個圖書館。 與往常一樣， 銳網站雅虎開發者網絡上擁有所有最新的文件。

查找談話： bloglines | Technorati的

共享和擴展： 書籤和書籤 | Digg它！ | reddit！

JavaScript中，我們幾乎不new亞

JavaScript是一種原型的語言，但它有一個new運營商，試圖使它看起來有點像經典的語言。 這往往混淆程序員，導致一些有問題的編程模式。

你永遠需要使用new Object()在JavaScript。 使用對象字面{}來代替。 同樣，不要使用new Array()使用數組文字[]來代替。 JavaScript中的數組工作沒有類似 Java中的數組，並使用類似 Java的語法會迷惑你的。

不要使用new Number ， new String ，或者new Boolean 。 這些形式產生不必要的對象包裝。 只要使用簡單的文字來代替。

不要使用new Function來創建函數值。 使用函數表達式代替。 例如，

 幀 [0]。的onfocus =新功能（“document.bgColor ='古董白'”） 

最好寫成

 幀 [0]。的onfocus =函數（）{document.bgColor ='古董白';}; 

第二種形式允許編譯器看到的函數體越快，所以任何錯誤，也將被檢測越快。 有時候， new Function是使用的人誰不明白的內部職能的工作。

  selObj.onchange =新功能（“dy​​namicOptionListObjects [”+
         dol.index +“]。變化（本）”）; 

如果我們繼續在字符串函數體，編譯器無法看到它們。 如果我們繼續作為字符串表達式的函數體，我們看不到它們。 這是更好地不是程序在無知。 通過使一個函數，返回一個函數，我們可以明確地傳遞我們的價值觀要綁定。 這使我們能夠初始化設置selObj在一個循環。

  selObj.onchange =功能（我）{
    返回函數（）{
         dynamicOptionListObjects [我]。變化（這一點）;

     };
 }（dol.index）; 

這是不是一個好主意，把new直接在前面的function 。 例如， new function優勢，建設沒有提供新的對象。

  MyObj中=新功能（）{
     this.type ='核心';
 }; 

最好是使用對象字面。 它比較小，速度快。

  MyObj中= {
    類型：'核心'
 }; 

如果我們做出了對象，其中包含的方法綁定到私有變量和函數，最好還是離開過的new前綴。

 美孚新功能的VaR =（）{
    功能processMessages（消息）{
        警報（“消息：”+ message.content）;
     }
     this.init =函數（）{
        訂閱（“/ mytopic”，對此，processMessages）;
     }
 } 

通過使用new調用函數時，對象保存到一個毫無價值的prototype對象。 這浪費內存沒有抵消優勢。 如果我們不使用new ，我們並沒有浪費的prototype鏈中的對象。 因此，相反，我們將調用工廠函數以正確的方式，使用()

 風險 foo函數（）{
    功能processMessages（消息）{
        警報（“消息：”+ message.content）;
     }
    返回{
        初始化：函數（）{
            訂閱（“/ mytopic”，對此，processMessages）;
         }
     };
 }（）;

因此，規則很簡單：我們唯一一次應該使用new操作符調用一個pseudoclassical構造函數。 當調用一個構造函數，使用的new是強制性的。

有時間到new ，有時，沒有。

查找談話： bloglines | Technorati的

共享和擴展： 書籤和書籤 | Digg它！ | reddit！