在就緒狀態之前操作dom可以嗎？

這通常是我如何管理漸進式增強，同時保持體驗清潔，但它有多安全？是否有潛在的競爭條件，這不工作？在就緒狀態之前操作dom可以嗎？

想象的簡單抽象的場景，你想，如果你有JavaScript的支持，以顯示不同的東西..這通常是我最終會做：

<div id="test">original</div> 
<script type="text/javascript"> 
    var t = document.getElementById('test'); 
    t.innerHTML = 'changed'; 
</script>

很多人可能要求你應該使用一個框架，並等待對於一個準備好的事件，並在那裏做改變..但是，有一個顯着的延遲，其中'test'元素已經在文檔結束之前被呈現，並且css準備好並且domready觸發。因此導致一個明顯的閃爍'原創'。

此代碼是否容易出現競態失敗？或者我能否保證一個元素在腳本之前存在時是可發現和可修改的？

在此先感謝。

來源

2009-08-03 meandmycode

你可以，但有圍繞這個問題。

首先，在IE中，如果您嘗試操作尚未關閉的節點（例如，BODY在它的關閉標記之前，應該在JS的下面），那麼您可能會遇到IE的「OPERATION ABORTED」錯誤，這將導致空白頁。操作節點包括追加節點，移動節點等。

在其他瀏覽器中，行爲是未定義的，但它們的行爲通常與您預期的相同。主要問題是隨着頁面的發展，頁面可能會加載/解析/運行不同。這可能會導致某些腳本在瀏覽器定義引用的元素實際上已經創建並可用於DOM操作之前運行。

如果您試圖增強您的用戶感知性能（即snappiness）。我強烈建議你避開這條道路，並考慮減輕你的頁面。您可以使用雅虎的YSlow/Google的Page Performance Firebug來幫助您入門。

Google's Page Speed

Yahoo's YSlow

來源

2009-08-03 15:22:15

嗨Raegx，是的，我可以完全理解操作失敗的問題，改變未關閉的元素..在snappiness方面，這些頁面很輕，實際頁面是15kb ..但是，我改變了元素可能正好在開頭的body標籤下，並且它會在domready着火之前呈現，無論我的頁面有多淺。我試圖避免一個sl experience的體驗這是總是經驗豐富與準備和做這些事情。 – meandmycode 2009-08-03 15:29:49

您可以在DOM完全加載之前操作DOM，但它可能有風險。你顯然不能保證你試圖操縱的DOM實際上還存在，所以你的代碼可能會間歇性地失敗。

來源

2009-08-03 15:06:30

感謝rikh，你是什麼意思世界上沒有保證，通過規範或產品的實際現實存在的今天（ff，即歌劇等）..我會認爲解析器線性行爲並添加元素，因爲它遇到他們的結束節點..雖然這可能不是一個規範，但我認爲這是一個明智的行爲，並且更希望找到認可的答案，情況就是如此。 – meandmycode 2009-08-03 15:35:11

說實話，我不知道，但這不是我想要依賴的東西。如果您真的擔心顯示錯誤信息，請嘗試最初不顯示任何內容，然後在準備好的文檔上填寫內容，或者只是將問題設計在系統外面，這樣您就不需要執行所要求的操作。 – 2009-08-03 19:57:36

不幸的是，這是不可能的，我有的最後一個例子是我們將分頁數字渲染爲超鏈接，並且我們的javascript運行並更改這些以便我們可以顯示'頁面x的y'並突出顯示活動的頁面超鏈接錨點）..這是一個典型的漸進式增強場景，我們渲染出的東西，將工作沒有JavaScript ..然後攔截並修改它與JavaScript爲了使用JavaScript ..事實上，你可以操縱它與JavaScript然後證明你。。有支持javascript的） – meandmycode 2009-08-03 21:52:27

只要你只能修改其preceed腳本塊節點（即節點的結束標記preceeds腳本的開放標籤），你不應該遇到任何問題。

如果要確保操作成功，請將代碼包裝在try...catch塊中，並在發生故障時通過setTimeout()再次調用該代碼。

來源

2009-08-03 15:29:20 Christoph

在Viajeros.com我有一個加載指標工作8-9個月，我目前沒有問題。它看起來像這樣：

<body> 

<script type="text/javascript"> 
    try { 
     document.write('<div id="cargando"><p>Cargando...<\/p><\/div>'); 
     document.getElementById("cargando").style.display = "block"; 
    } catch(E) {}; 
</script>

來源

2009-08-03 16:27:04 Danita

-1

訪問DOM在IE 5和導航過早拋出異常4.

來源

2012-06-22 07:33:51

在就緒狀態之前操作dom可以嗎？

回答

相關問題