2009-11-21 34 views
2

我看了一下把腳本在底部(例如Is "Put Scripts at the Bottom" Correct?)的建議,我理解這個概念。關於產品「在底部放置腳本」意見

但是,我有一個疑問。

如果我有一個OnClick,即使調用了一個JS函數,如果JavaScript包含文件未加載,該函數將會失敗。我可以解決這個問題,但它非常複雜。

我的想法是,第一頁加載後腳本將被緩存在客戶端的瀏覽器中,所以在第一頁之後,它將不會對性能造成任何影響,因爲我將SCRIPT include指令放在其中,但它可能會對我的OnClick事件產生影響。

我可以看到,裝載一些巨大的Javascript庫將是緩慢的,在第一頁上,有可能導致一些/許多用戶「點擊關閉」。但是對於第二頁起,頁面末尾是否有任何好處?

如果我真的很厚並且忽略了一些重要的東西,我會很感激任何澄清;謝謝。

+2

我接受了我的所有問題的答案,我收到了我的問題的答案。在我的大多數問題中,我收到了很多有用的建議,但並不是我的問題的實際答案。如果我沒有一個可以接受的答案,我會盡我所能提供一個答案,說明原因,再加上我對所有有用的答覆進行投票。 – Kristen 2010-09-03 19:39:02

回答

1

舉例來說,在jQuery的你可以添加一個ready()事件時,頁面已準備就緒,將觸發。這樣你的事件可以調用在文件末尾加載的函數。這種方式不是非常複雜或困難。

我覺得有益處放置腳本標記在頁面的結束,特別是如果你試圖加載文件速度慢等阻塞頁面。

+0

我可能會再次變厚,但即使我使用READY(),如何幫助我使用OnClick事件?如果用戶在我的後期加載庫已經加載完成之前單擊它,或者在READY()甚至已經觸發之前單擊它(並且一些不顯眼的JS修改了該元素的OnClick事件),則用戶將不會獲得我的有意使用OnClick行動 - 他們會嗎?在這種情況下,渲染內容以便用戶可以「更快地」看到它,如果他們不能這麼做,那麼它將毫無益處。點擊任何東西直到JS完成加載 - 但也許我失去了一些東西? – Kristen 2009-11-21 19:15:12

4

它並不真正的問題,你把腳本,特別是如果你正在使用JS框架,適當事件的onPageLoad(如jQuery的ready())

然而,對於外部負載如腳本分析代碼,廣告等。將它們放在頁面的底部非常重要。這是因爲即使用戶啓用了緩存,緩存也會刷新,其中一些腳本使用iframe來加載內容而不緩存(即廣告)。如果這些內容沒有放在頁面的底部,那麼瀏覽器在加載它們時會掛起,而且通常情況下,它們所在的服務器可能響應速度非常慢。

+0

謝謝。儘管我的觀點與圖書館支持我們在「頁面中」執行的代碼有關,並且恰巧我們沒有任何第三方庫,但您對第三方庫有一個好的看法。我們確實有Google Analytics,現在我想到了它,我們確實有這個權利:) – Kristen 2009-11-21 19:10:36

2

您應該將自己的腳本放在首位,並在頁面末尾放置外部腳本。

如果你的服務器工作正常,內部腳本將加載得很快,所以它們的加載時間幾乎不可知。如果你的服務器速度很慢,那麼這個頁面就會像加載腳本一樣慢,所以你加載它們的時候並沒有多大區別。

,你從不同的服務器加載可能會很慢的腳本有時加載,這就是爲什麼你在頁面到底想他們,讓你的網頁是不是儘可能多的依靠它們。

前一段時間我們furhter搬到一些外部腳本頁面向下,使他們的形式結束標記,這使用戶張貼即使外部腳本都尚未加載的形式加載後。

+1

關於在服務器上託管的外部/非站點腳本的好處,事實證明,這些腳本處於關閉狀態,導致整個頁面呈現被「破壞」。我們在我們自己的服務器上託管(例如,JQuery包含腳本)(而不是使用Google的代碼服務器),以便我們對結果進行嚴格控制。 – Kristen 2009-11-21 19:18:45

0

把你的JS放在哪裏還取決於你是否支持非JS用戶。

如果您正在構建漸進增強的想法,那麼頁面按鈕應該在沒有JS的情況下以令人滿意的方式運行。 JS會重寫非JS功能。我認爲在將所有JS放在頁面底部的想法中,這往往是一個實際的要求。

在頁面沒有JS功能的情況下(或JS功能的好處是顯着的),我會添加必要的JS到標題。