如果腳本非常短，是否使用內聯JavaScript首選外部包含？

我在網站中使用外部JavaScript，因爲我總是試圖將JavaScript保留在底部和外部。如果腳本非常短，是否使用內聯JavaScript首選外部包含？

下列外部資源的響應內容較少。內嵌 HTML中的響應可以減少頁面呈現的阻塞。

http://websiteurl/應內嵌下列小型資源： http://websiteurl/script.js

這個外部的js文件只有這個內容

$(document).ready(function() { 
    $("#various2").fancybox({ 
     'width': 485, 
     'height': 691, 
    }); 
});

但在YSlow的，我得到這個建議

級N/A上使JavaScript和CSS外部

只有在您的財產是普通用戶主頁時才考慮這一點。
There are a total of 3 inline scripts 
JavaScript和CSS是在HTML文檔內聯得到每次請求HTML文檔時下載。這減少了HTTP請求的數量，但增加了HTML文檔的大小。另一方面，如果JavaScript和CSS位於由瀏覽器緩存的外部文件中，則，可以減少HTML文檔的大小，而不會增加HTTP請求的數量。

哪一個是正確的谷歌或雅虎？

來源

2011-08-26 Jitendra Vyas

最好的做法是，代碼一些文件引起每個外部js文件是1個請求。所以你可以把你所有的自定義代碼放在一個文件中，這樣你的html就可以清理乾淨。 –

你是在這個頁面上執行'$（「＃various2」）。fancybox（）'，還是你需要爲多個（類似）頁面執行？ –

這是在標題和標題包含在每個頁面 –

這是一個有點問題的例子，在不少方面。

您可以按照不需要內聯該JS的方式來組織腳本。例如，您可以使用運行該代碼段的common.js文件，其他類似的代碼片段並簡化代碼。

此外，這似乎已經甦醒「從來沒有內嵌任何JavaScript EVER」架構警察。事實證明，有時這是嵌入JavaScript的最佳做法，例如查看Google分析的常見片段。

爲什麼Google suggesting你應內嵌這個小腳本？

因爲20% of the page visits你有未填裝緩存
如果你有一個高速緩存未命中，很可能你的網站一個新的連接將需要打開（1個往返），然後在提供的數據第二次往返。（如果你是幸運的你使用的保持有效連接，並將其切成1個往返。
對於一般的「全球性」英文網站，你正在尋找一個典型110毫秒往返時間，在美國擁有的服務應用程序如果你使用的是CDN，這個數字可能會減半
即使資源是本地的，網絡瀏覽器可能仍然需要訪問磁盤來抓取那個小文件
非異步或推遲的JavaScript腳本標記在阻塞，如果這個腳本是在你的頁面的中間位置，這將是卡住，直到腳本下載。

從性能的角度來看，如果只有2個選項分別是：

將一個50個字符的JavaScript位內嵌
將在50個字符在一個單獨的文件，併爲它服務。

考慮到你是一個很好的網絡公民並壓縮了你的所有內容，相比之下，20％的風險給人帶來了相當大的延遲，所增加的額外有效載荷的數量可以忽略不計。我會一直選擇＃1。

在一個不完美的世界中，擁有如此清晰簡單的選項是非常罕見的。有一個選項3涉及異步加載jQuery並從公共區域獲取此功能。

來源

2012-03-15 05:41:48

我通常寫內聯javascript，特別是如果腳本是這麼小。我會說只是將其粘貼到您的代碼中。它不會增加很多http文件的大小。

來源

2011-08-26 13:20:56

，但它打破了關注點分離的規則 –

@Jitendra如果您將JavaScript代碼放在頁面底部的SCRIPT元素內部的準備好的處理程序中，它仍然是獨立的，但是，您很好。打破規則將使用'onevent'屬性，或者立即在** HTML元素之間放置調用的SCRIPT元素**。 –

@ŠimeVidas - OK然後，Unobtrusive JavaScript和分離行爲與內容和樣式有什麼區別 –

這並不完全正確。您可以配置Web服務器（以及至少apache），以便在服務時使腳本/ ccs內聯。

這裏是一個有用的鏈接

http://www.websiteoptimization.com/speed/tweak/mod_pagespeed/

來源

2011-08-26 13:21:25

有兩個因素考慮這裏。一個是下載時間，另一個是可維護性。這些都受到一段JavaScript需要多少次的影響。

關於下載時間，您顯然有兩種選擇：將JS包含在頁面主體中，或作爲外部文件。將JS包含在主體中確實可以節省額外的HTTP請求，但它也會使HTML膨脹一點，如果您將幾個腳本內聯放在多個不同的頁面上，可能會很痛苦。

另一個重要的考慮因素是JS是否需要立即在頁面上。如果頁面加載後需要一小段JS，那麼將它內聯可能是一個好主意。如果它將來被用於某些異步事件，那麼將它放入一個外部文件可能仍然是一個不錯的選擇。

來源

2011-08-26 13:23:02

製作腳本直列可以有一些不利的影響 -

一）代碼組織 - 你的代碼被散佈在您的標記之間，從而影響可讀性

B）代碼縮小和模糊處理變得困難

最好將js保存在獨立的文件中，然後在構建時將所有這些文件集成到一個文件中，然後對其進行縮小和混淆。

來源

2011-08-26 13:25:11 Shreyas

雖然內嵌腳本將保存的請求，因爲YSlow的表明，它增加了HTML文件大小和混合內容/標記的代碼/邏輯，你一般都希望從儘可能避免。

原因YSlow的給出了這樣的警告：

只考慮這一點，如果你的財產是一種常見的用戶主頁。

這是因爲如果頁面頻繁加載，這是值得的JavaScript的外部，因爲文件將被緩存在瀏覽器中。因此，如果您將JS合併到一個文件中，那麼在第一次請求時會產生一個額外的請求，並在隨後的請求中從緩存中加載該文件。

來源

2011-08-26 13:39:09 chesles

亞倫彼得斯從去年的速度歐盟談提供了良好的洞察選項，當然你應該選擇 - http://www.slideshare.net/startrender/fast-loading-javascript

對於JS的非常小的片斷它真的不值得他們將在一個外部文件作爲網絡檢索它們的開銷會使收益變得不足。

根據延遲，它可能永遠值得包括大腳本例如綁定移動設備在加載的第一頁中加載了js，然後將其緩存到本地存儲中以供稍後頁面使用。

阿迪·奧斯馬尼最近組建了一個實驗庫，幫助人們與緩存腳本localStorage的發揮 - http://addyosmani.github.com/basket.js/

來源

2012-03-15 09:25:39

如果腳本非常短，是否使用內聯JavaScript首選外部包含？

回答

相關問題