2008 2008年 5月 15

最佳實踐:使用JavaScript

包括JavaScript在HTML文檔的底部

如果沒有文件撰寫(或任何頁面內容使用的JavaScript動態生成)插入頁的內容的一部分,在你的腳本,將腳本包括BODY標記年底前,語句在頁面底部。
HTTP/1.1規範建議瀏覽器不超過兩部分組成,每個主機的並行下載。 如果您的圖片,從多個主機服務,你可以得到兩個以上的下載發生在平行。 然而,當一個腳本下載,瀏覽器不會啟動任何其他下載,甚至在不同的主機名。
也有動態創建腳本節點和遠程腳本加載後使用AJAX頁面加載的方式。

外化你JavaScript的

使用外部JavaScript文件會導致更快的頁面加載JavaScript文件,因為是由瀏覽器的緩存。 內嵌JavaScript的HTML文檔中的“獲得下載HTML文件的要求。 這實際上可能降低的HTTP請求的數量,但後來增加了HTML文檔的大小。 外部JavaScript的瀏覽器緩存的HTML文檔的大小沒有增加HTTP請求的數量減少。
請注意,如果您的網站上的用戶,每個會話有多個頁面訪問量和您的網頁重新使用相同的腳本和樣式很多,有更大的緩存外部文件的潛在利益。

包JavaScript文件

不同的CSS,JavaScript的情況下,這些文件可能嘎吱嘎吱使用一些標準的算法,將減少文件的大小,比簡單地去除空格或製表符。 例如JavaScript的包裝可以在這裡找到http://dean.edwards.name/packer/

擺脫任何重複的腳本

這是極不尋常,整個腳本可能會重複,但美國十大網站的評論表明,其中兩個含有重複的腳本。 重複的腳本,但明顯降低,造成不必要的HTTP請求和浪費JavaScript執行性能。
此外,在許多情況下,儘管腳本的名稱是不同的,是由於團隊的規模和數量的腳本在同一頁面重複的腳本的可能性。

最小化在可能的情況下訪問DOM元素

使用JavaScript訪問DOM元素是緩慢的,因此,為了有更敏感的頁面,你應該:
•緩存參考訪問元素
•更新節點“離線”,然後將它們添加到樹
•避免固定用JavaScript佈局

從內容和表現的分離行為

正如我們單獨介紹(CSS / XSLT),內容(XHTML / XML的),我們也應該分開行為(JavaScript)的。 這就是所謂的不顯眼的Javascript。 正如我們鏈接到外部CSS文件,我們應該鏈接到外部JavaScript文件。

行為,而不是硬編碼的內容(如onmouseover的onclick等)的行為,應被動態添加元素,類和獨特的元素(IDS)使用DOM。 的基礎性文件的內容,應包含唯一有效的XHTML / XML和沒有JavaScript。
添加行為的Javascript應該增加的內容。 內容應保持有用和可用,沒有JavaScript(或不完整的JavaScript支持)。


2008 2008年 5月 7

最佳實踐:頁重量

我已經保存了這篇文章的年齡,所以很抱歉! 我不記得源......但我們必須知道觀眾對他們來說,我們開發的網站,它似乎是有益的......所以我在這裡是

頁的重量可以用來確定一個給定頁面的下載時間,各種各樣的互聯網連接速度。 例如,下表顯示了在一些流行的連接速度三個不同的網頁的下載時間。

頁面重量下載

連接速度

20 KB

40 KB

100 KB

14.4 kbps的

12秒

25秒

62秒

28.8 Kbps的

6秒

12秒

31秒

33.3 Kbps的

5秒

10秒

26秒

56 Kbps的(V.90)

2秒

5秒

13秒

64 Kbps的(ISDN)。

2秒

4秒

12秒

128 Kbps的(DSL /纜線)

1秒

2秒

6秒

256 Kbps的(DSL /纜線)

<1秒

1秒

3秒

減少頁重量的好處?

減少頁面重效益的網站所有者和消費者產生積極的影響。 潛在的好處包括:

  1. 網頁加載更快。 頁重量減少最明顯的影響,是您網站的網頁加載速度更快的遊客,無論其連接速度。
  2. 頁面加載時間降低,創造更舒適的遊客。 遊客不太可能變得沮喪和其他地方去,如果您的網頁加載迅速。 另一方面,緩慢加載頁面失去訪問者和潛在客戶的最可靠的方法之一。
  3. 更快的加載時間,將有助於提高轉換。 更多的遊客將不再停留在您的網站。 他們將最終使採購,簽署您的簡報,或書,標誌著您的網站。
  4. 你的品牌認知度將得到加強。 回頭客和第一時間的遊客,都將是更傾向於“專業”來形容你的網站(業務)如果您的網頁加載迅速。
  5. 乾淨,堅實的代碼的網頁,往往會更有效地利用天然的搜索引擎被索引。
  6. 重量優化的頁面,實際上可以節省帶寬費用高流量的網站上。 100,000頁,每個重達150 KB將需要從你的ISP的帶寬超過10萬頁,每個重量75 KB的兩倍多。 對於收取的ISP所使用的帶寬或超支,這種減少可以極大地節省帶寬費用。

考慮下面的數據,在一份報告中公佈的

遊客放棄

網頁加載時間

用戶的百分比
繼續等待

10秒後

84%

15秒

51%

20秒

26%

30秒

5%


2008 2008年 04月 24日

最佳實踐:使用CSS

置於頂端的樣式表

如果你想一個頁面加載逐步的,我們希望瀏覽器顯示的任何內容,盡快付諸表決,在文檔的HEAD內頁的頂部的CSS。 這使得網頁出現被載入速度更快,這有利於逐步呈現的頁面。 很多內容和較慢的互聯網連接上的用戶頁面,這一點尤為重要。

這是一個記錄的事實,以提高整體用戶體驗,重要的是提供進度指標和視覺反饋。 為了避免重繪頁面元素的情況下,如果他們的風格變化,一些瀏覽器,包括IE,阻止頁面的渲染,直到CSS是滿載。 正因為如此,用戶是得到 一個空白頁。

W3的HTML規範“還規定,CSS,我必須包括在HTML頁面的HEAD部分。 at the bottom of the page, so it's best not to use it.還注意到@import行為,在IE瀏覽器使用的是相同<link>在頁面的底部,所以最好不要使用它。

避免使用特定功能的瀏覽器

過濾器:過濾器的使用 增加內存消耗,並且每個元素的應用,而不是每幅圖像,這樣的問題,乘以。 此外,過濾器是IE專有的,因此不會工作打算在其他瀏覽器。 如果你想透明或漸變的背景,用圖像1Pixel。
表現形式:CSS表達式是在CSS中有一個很好的功能,但仍然是IE瀏覽器的特定功能。 此外,重要的是要注意的是,這些表達式 評估時,頁面呈現和調整,滾動,甚至當用戶移動鼠標在頁面。 不用說,這可能會影響你的頁面的性能。 因此,在簡單的話,應避免使用CSS表達式,除非你覺得它的優點,重量超過其利弊'

外化你的CSS

使用外部CSS會導致更快的加載 ,因為是由瀏覽器的JavaScript和CSS文件緩存的網頁。 內嵌在HTML文檔中的CSS得到下載的HTML文件要求的時間。 這實際上可能降低的HTTP請求的數量,但後來增加了HTML文檔的大小。 外部CSS瀏覽器緩存的HTML文檔的大小沒有增加HTTP請求的數量減少。

請注意,如果您的網站上的用戶,每個會話有多個頁面訪問量和您的網頁重新使用相同的腳本和樣式很多,有更大的緩存外部文件的潛在利益。

包你的CSS文件

包裝或吱嘎你的CSS是從代碼中刪除不必要的字符,以減少其大小,從而提高加載時間的做法。

CSS可以我嘎吱嘎吱消除所有的意見和任何不必要的字符,如空格,換行符等


2008 2008年 03月 14日

為UI開發的最佳實踐

年齡,我已經想鞏固所有的最佳實踐,我一直在閱讀每一個現在,然後。 終於來了! 我踏踏實實地把它的筆。 我意識到這將是艱鉅的任務,創建這個龐大的文件,所以我決定奉獻給它一個完整的類,這樣我就可以繼續增加有關最佳做法的東西,當我遇到他們......

好吧! 這裡的內容與像雅虎,谷歌等標準開發編寫的合併將是我個人的UI開發的最佳做法

觀看此空間不斷褐變的最佳做法分類


2007 2007年 09月 15日

什麼是文檔類型? 什麼是瀏覽器怪癖嚴格模式?

簡單講那些從來沒有想過在今天之前DOCTYPE聽到! DOCTYPE是在一個HTML文件,前<HTML>標籤來聲明,看起來像這樣(從這個網頁的源粘貼)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


為什麼使用DOCTYPE?
這一切開始時,瀏覽器標準是由W3C推出。 早期的Web開發人員實施CSS根據瀏覽器的意願,必須正確地呈現在他們和大多數網站頁面CSS不太符合這些規範/標準。

因此解決這個問題是

  • 允許Web開發人員,誰知道他們的標準來選擇使用哪種模式。
  • 按照老規則(怪癖),繼續顯示舊的網頁。

DOCTYPE誕生了。

所以,根據你是否頁面設計標準或不,你選擇合適的DOCTYPE。


DOCTYPE與瀏覽器模式之間的關係
DOCTYPE聲明告訴您的瀏覽器,它應該呈現什麼模式的HTML頁面,或者更確切地說,是更精確的瀏覽器應該如何解釋CSS Quirks模式或Strict模式。

沒有書面介紹了這些標準之前的舊網頁的doctype。 因此,當有沒有DOCTYPE,然後在你的HTML瀏覽器是在Quirks模式。
但如果DOCTYPE定義為下列之一,然後在瀏覽器據說是在嚴格模式。

DOCTYPE HTML PUBLIC“ - / / W3C / / DTD HTML 4.01過渡/ / EN”“http://www.w3.org/TR/html4/loose.dtd”>


NDK的家 | 表達它 表示唇齶裂 表示Penmenship 表示敬畏 表達自己