Chrome在DOM加載之前先加載js事件

Question

我正在使用window.onload在chrome v71.0.3578.98上進行了一些JavaScript測試，並且正在經歷JS在DOM加載之前發生的情況。

參考gif： https : //imgur.com/nxHYjRr

這是僅包裝在簡單html標記中的代碼。

 <h1>Title...</h1> <p>lorem500...</p> <script> function pageLoad() { alert('I\\'m alive'); } window.onload = pageLoad; </script> 

因此，在這個基本頁面中，我嘗試在chrome v71中運行它，並且首先運行了javascript，但是在firefox中，按照預期，在頁面加載后對其進行了加載。 有什么想法嗎？

Answer 1

問題是alert 阻止 -當alert彈出窗口可見時，進一步的頁面呈現被阻止，並且當window.onload運行時，頁面可能根本還沒有呈現，特別是如果之前沒有太多HTML的情況下。 。 當onload運行時，所有元素確實存在於文檔中，只是可能不可見。 （取決於瀏覽器）

alert對用戶非常不友好，並且很難使用（遇到時）。 使用console.log或適當的模式：

 <h1>Title...</h1> <p>lorem500...</p> <script> function pageLoad() { console.log('I\\'m alive'); } window.onload = pageLoad; </script> 

如果您必須使用alert ，則僅在即時setTimeout之后發出警報，從而使瀏覽器有機會在調用alert之前繪制頁面，以防萬一瀏覽器尚未呈現該頁面：

 <h1>Title...</h1> <p>lorem500...</p> <script> function pageLoad() { setTimeout(() => { alert('I\\'m alive'); }); } window.onload = pageLoad; </script>