2015-09-01 31 views
3

我有一大堆的JSP文件和10-12 javascipt的文件,這我包括在每個JSP文件中使用包括標記,如下所示:將<script>標記放入JSP文件中的最佳位置是什麼?

<%@ include file="common_js_files.jsp"%> 

我已經看到Where should I put <script> tags in HTML markup?

按照該給出的答案,許多人同意將<script>標籤放在結束標籤之前。我期待這會減少頁面加載時間,但它不會改變加載時間。上述鏈接中僅提及HTML頁面的情況嗎?那麼JSP頁面呢?

請提出是否有更好的方法來處理JSP頁面中的常見JavaScript文件。

在此先感謝。

+2

JSP生成HTML,從瀏覽器的角度來看,靜態HTML,PHP,JSP,ASP ......沒有區別。因此,如果最佳做法是將腳本放在''標籤之前,請將它放在那裏。 –

回答

3

在瀏覽器JSP將被轉換成/解釋爲HTML,所以最好的做法是既JSPHTML一樣,說:

許多Web開發者推薦加載JavaScript代碼放在頁面底部以提高響應速度,這對於HTML服務來說更爲重要。在NATIVE沙箱模式中,您加載的所有腳本都會在客戶端進行掃描和清理,這可能需要幾秒鐘的時間。

將標記移動到頁面的末尾將使HTML內容在處理JavaScript之前呈現,從而允許向用戶呈現微調或其他消息。

,併爲進一步的閱讀來看看:

2

解決此問題的舊方法是將標記放在您的底部,因爲這可確保解析器在最後纔會被阻止。

這種方法有其自身的問題:瀏覽器無法開始下載腳本,直到整個文檔被解析。對於大型腳本&樣式表的大型網站,能夠儘快下載腳本對於性能非常重要。如果您的網站在2秒內未加載,用戶將轉到其他網站。

在最佳解決方案中,瀏覽器將盡快下載腳本,同時解析文檔的其餘部分。

的現代轉型

今天,瀏覽器都支持異步和推遲的腳本屬性。這些屬性告訴瀏覽器在下載腳本時繼續解析是安全的。

異步

<script type="text/javascript" src="path/to/script1.js" async></script> 
<script type="text/javascript" src="path/to/script2.js" async></script> 

與異步屬性的腳本被異步地執行。這意味着腳本在下載後立即執行,同時不會阻止瀏覽器。 這意味着它的腳本1.

根據http://caniuse.com/#search=async之前執行的可能腳本2下載&,所有的瀏覽器的80%支持這一觀點。

延遲

<script type="text/javascript" src="path/to/script1.js" defer></script> 
<script type="text/javascript" src="path/to/script2.js" defer></script> 

腳本與defer屬性,以便執行(即第一腳本1,腳本然後2)。這也不會阻止瀏覽器。

與異步腳本不同,延遲腳本只在整個文檔被加載後執行。

根據http://caniuse.com/#search=defer,所有瀏覽器中有80%支持此功能。 88%至少部分支持它。

關於瀏覽器兼容性的一個重要提示:在某些情況下,IE < = 9可能會按順序執行延遲腳本。如果您需要支持這些瀏覽器,請先閱讀本文!

結論

當前國家的最先進的是把腳本標記和使用異步或推遲屬性。這可以讓您的腳本儘快下載,而不會阻塞您的瀏覽器。

好處是您的網站仍然可以正確加載不支持這些屬性的20%的瀏覽器,同時加快其他80%的瀏覽器速度。

Source

相關問題