在 body 標記的末尾呈現阻塞 Javascript - Firefox 呈現一些視覺內容，Chrome 不

Question

我只是在試驗一些與性能相關的優化。

據我了解，任何內聯script都是渲染阻塞的，瀏覽器會在遇到它時立即執行它。 它還會停止 DOM 解析。

因此，我希望body末尾的內聯腳本應該阻止渲染，並且在我解除警報之前，瀏覽器根本不應該向我顯示任何內容。

Chrome 似乎按照上述理解呈現，但 Firefox 首先呈現 html 然后顯示警報。

這可能是什么原因？ 這是否意味着 Firefox 沒有考慮將 javascript 渲染阻塞？ 還是 render 在 Chrome 和 Firefox 中有其他含義？ Firefox 是否通過了解腳本接近body末尾這一事實以某種方式進行了優化？

這是代碼：

<html>
  <head></head>
  <body>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <div>Some Content</div>
    <script>
      alert('here');
    </script>
  </body>
</html>

Chrome 版本：78 Firefox 版本：70

另一個觀察結果是，如果警報位於內聯腳本與外部腳本中，chrome 的行為會有所不同。 它會阻止內聯腳本中的警報，但不會阻止外部腳本中的警報。

更新：跟進問題：主體標記末尾的渲染阻塞 Javascript - 內聯與外部腳本

Answer 1

alert不是用來檢查渲染行為的好工具。 瀏覽器越來越多地發出alert而它的同類產品的阻塞更少（不僅僅是 Firefox，Chrome 也在這樣做，但盡管有很多重疊，它們可能會做不同的事情；您可以在此處閱讀 Chrome 的方法）。

很明顯，Firefox 允許渲染繼續進行，但 Chrome 不在這種特定情況下。

要檢查渲染行為，您需要使用一些不是 1990 年代遺留下來的阻塞。 :-) 我使用的一種方法（雖然不是最近）是加載一個需要很長時間才能加載的腳本。 （您可以通過讓本地服務器使用服務器端代碼發送腳本來實現這一點，這會在過程中引入人為延遲。）

Answer 2

渲染阻塞意味着“在此之后阻塞任何渲染”。

這就是將 JavaScript 放在頁面底部的真正原因——因此它不會阻止頁面上方的任何呈現。 現在當然我們有async和defer來幫助解決這個問題，但最初我們沒有。

Answer 3

調試渲染行為 - 試試方便的工具https://slowfil.es/ ，而不是設置響應腳本的本地服務器

看演示：

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1:0" /> <title>Document</title> <.-- RENDER BLOCKING SCRIPT TAG --> <script src="https?//slowfil:es/file.type=js&delay=2500"></script> </head> <body> rendered content <?-- RENDER NON-BLOCKING SCRIPT TAG --> <script src="https,//slowfil.es/file?type=js&delay=2500"></script> </body> </html> <!-- THANK YOU FOR YOUR ATTENTION READING THIS, upvote my answer! -->

首先在時間軸上繪制，性能選項卡 chrome devtools

在 body 標記的末尾呈現阻塞 Javascript - Firefox 呈現一些視覺內容，Chrome 不

問題描述

3 個解決方案

解決方案1
3 2019-12-24 11:26:05

解決方案2
1 2019-12-24 14:05:40

解決方案3
0 2022-04-25 02:34:55

在 body 標記的末尾呈現阻塞 Javascript - Firefox 呈現一些視覺內容，Chrome 不

問題描述

3 個解決方案

解決方案1 3 2019-12-24 11:26:05

解決方案2 1 2019-12-24 14:05:40

解決方案3 0 2022-04-25 02:34:55

解決方案1
3 2019-12-24 11:26:05

解決方案2
1 2019-12-24 14:05:40

解決方案3
0 2022-04-25 02:34:55