2010-10-07 76 views
1

如果使用更長的Javascript或更長的HTML,我會更好。 幾件事 1.我不在乎SEO的評級。 2.我關心網站的速度。 3.我關心網站的功能。Javascript vs HTML(需要更多時間才能加載)

基本上我的核心問題coders- 請告訴我更好 -

<div> Blah blah blah blah </div> 

document.getElementById("blah").innerHTML = "Blah blah blah blah" 

? 任何額外的知識總是歡迎:)。謝謝。

+1

行之前的4個空格將其格式化爲代碼。 'ctr-k'作爲選擇。 – 2010-10-07 19:22:10

回答

6

使瀏覽器渲染純HTML會比加載JavaScript,等待DOM準備好,然後使用JavaScript來操縱DOM更快。

即使你忽略瀏覽器具有操控通過Javascript的DOM時候做更多的工作,想想這是會需要更長的時間來下載一個事實:

30個字符:

<div>Blah Blah Blah Blah</div> 

轉到JavaScript的路線,你倆都從服務器下載更多的內容和要求眉毛

<script> 
    document.getElementById("blah").innerHTML = "Blah Blah Blah Blah"; 
</script> 

所以:或超過50個字符(懶得算)呃做更多的工作來呈現頁面。

+0

我基本上想要添加一個(umm..lets調用它)彈出菜單,但不是通過AJAX,而不是我想從數據庫中獲取的東西。但是我希望它只在有人點擊某個div時出現。我如何通過HTML編碼來做到這一點? – Susagittikasusa 2010-10-07 19:31:29

+0

@Susagittikasusa - 根據你認爲的流行菜單,你應該能夠使用CSS編寫代碼(如果你希望它顯示在鼠標懸停上,而不是點擊)。否則,一些JavaScript將是必要的。請記住,並非所有的JavaScript都是AJAX。 – 2010-10-07 19:33:50

+0

Aight,我會試用css。謝謝。 – Susagittikasusa 2010-10-07 19:37:07

1

HTML會更快,因爲javascript需要額外的字節下載到瀏覽器以將文本添加到元素。此外,Javascript需要額外的腳本和函數開銷,這不會太多,但對於大型網站來說,它會更慢。

1

對於給定的例子,HTML顯然會更快。 HTML部分沒有涉及任何邏輯,JavaScript將不得不執行操作來產生相同的結果。這也是更多的人物,然後更多的帶寬。

你會想要使用Javascript的原因將使問題沒有意義。您將在您的初始HTML輸出中無法使用Javascript。

0

如果沒有其他原因,HTML將會更快,您仍然需要發送想要顯示的字符的確切字節數加上javascript的額外字符,以便轉身並將其渲染回頁。現在,如果您打算使用JavaScript以便稍後通過AJAX將元素添加到頁面,那麼最好將數據作爲JSON發送並將其分配給html元素。

0
<div> Blah blah blah blah </div> 

更快,因爲其他的代碼是不完整的,它必須是:

$(document).ready(function() { // Using jQuery here, since creating a pure 
           // JS DOM ready is a pain. 
           // window.onload is fired later. 
    document.getElementById("blah").innerHTML = "Blah blah blah blah"; 
} 

因此,由JS去上班的時候,DOM是準備好了,基本上是指文本呈現。

,當然,如果你使用的是絕對沒有比賽:

window.onload = function() { ... 

時看到它的速度更快繪製圖標SVG不是加載它們從服務器的圖像這將是有趣的....這是一個完全不同的問題,儘管有很多變數。

0

雖然賈斯汀Niessner的答案是基本上是正確的,我想補充一點,實際速度加載網站以及一個網站的速度用戶的感知可以由很多因素的影響的。考慮:

  • 從服務器傳輸到瀏覽器的數據量。
  • 要加載單個頁面的HTTP請求數。
  • 由空白,未縮小的JavaScript,未縮小的CSS樣式引起的開銷。
  • 未優化的圖像。
  • 頁面的動態與靜態構造。
  • 將表示邏輯放入服務器或放入瀏覽器中。

-1

HTML將始終呈現速度就越快。

像你描述使用JavaScript的潛在問題:

  1. 的JavaScript需要時間來執行。
  2. 您必須先等待元素被創建,然後才能通過JavaScript訪問元素。
  3. 如果JavaScript是在一個單獨的文件中,它將是一個額外的HTTP傳輸來回服務器。
  4. 如果用戶關閉了JavaScript,他根本看不到它。
  5. JavaScript的代碼也稍大,所以再次需要更多時間進行傳輸。
  6. 也有可訪問性問題(屏幕閱讀器可能有麻煩)。
  7. innerHTML不是標準的JavaScript,因此一些瀏覽器可能無法正確執行它。
+0

他提到他關心功能。 – ajsie 2010-10-21 02:49:23

+0

@ weng - 這是在#4中解決,否則沒有功能差異。 – Adam 2010-10-21 16:15:56

2

正如其他人所說的那樣,純HTML的加載速度會更快。然而,取決於你實際嘗試完成的決定/答案可能會有點棘手。

例如,你可以只有一個基本的html框架和一個內容佔位符,然後通過ajax調用來加載實際的數據。由於最初的渲染將很快發生,因此用戶認爲網站加載非常快。實際/整體時間會更長,但由於韌皮站點迅速渲染,所以權衡可能是值得的。

+0

+1這裏閱讀問題的唯一人... – galambalazs 2010-10-07 21:43:23

相關問題