頁面加載後向<body>添加元素的問題

我們正在爲「body」標籤添加背景圖片。圖像是動態的，因此必須最後加載才能將變量傳遞給它。頁面加載後向<body>添加元素的問題

問題是，我們正在嘗試改進我們的PageSpeed，並且在添加背景圖片時，PageSpeed報告將一大堆腳本標記爲渲染阻塞。即使我們有一個在我們的頁腳。

據我所知，這不應該是渲染阻塞，因爲內容可以沒有它加載罰款 - 它會 - 但是當調用背景圖像時，它會變成渲染阻塞。

有沒有人做過這樣的事情？任何解決方法？

我也花了大量的時間試圖在頁面加載完成後加載腳本，並且我在頁面後加載了它，但呈現阻止內容仍在報表中標記。

我似乎無法理解這一切。任何指導將不勝感激。

感謝， bhtech

UPDATE

<html> 
<head> 
<script src="/header.js"></script> 
</head> 
<body> 
<script src="/footer.js"></script> 
<script src="/loadbodyimage.js"></script> 
</body> 
</html>

當不包括/loadbodyimage.js文件，只有/header.js文件是阻止呈現的 - 這是非常合情合理。

但是，當我包含/loadbodyimage.js（它向body標籤添加背景圖像）時，/ footer.js文件也會變成呈現模塊。

這是一個非常愚蠢的版本正在發生 - 但種說明我正在經歷。

UPDATE

我已經添加下面的代碼到我的頁面的底部，其寫入body標籤，並添加背景圖像。這很簡單的jQuery。

$(document).ready(function() { 
$('body').css('background', 'url(/images/bgImage.jpg)'); 
});

這使得頁面上的腳本（甚至在它之後）被標記爲渲染阻塞。如果我評論這一行，腳本不再呈現阻塞。我希望這有助於解釋我的問題。

來源

2015-01-21 bhtech

我看不出有什麼毛病你的代碼......哦，等一下，你忘了，包括你的問題中的任何代碼。幫助我們通過提供您的問題代碼的簡化版本來幫助您 - 僅僅是證明問題的最低限度。 – nnnnnn 2015-01-21 03:29:21

我建議給一個名爲head.js的腳本試試。它異步並行加載JS。嘗試提高PageSpeed分數和初始頁面加載時間時，我的結果非常好。

您可以下載head.js here。

用法：

<head> 
<script src="/head.load.min.js"></script> 
<script> 
    head.js("/header.js"); 
    head.js("/footer.js"); 
    head.js("/loadbodyimage.js"); 
</script> 
</head>

來源

2015-01-21 03:58:13 Mike

頁面加載後向<body>添加元素的問題

回答

相關問題