2012-11-18 51 views
1

是否更好地爲網站的所有頁面編寫一個大的JavaScript文件?或者只加載特定於該頁面的JavaScript?根據需要加載多個javascript vs加載一個大文件一次

我知道一個大文件更適合緩存。不過,我認爲瀏覽器可能會運行各種不必要的代碼(jQuery在「準備就緒」的東西和附加事件)到不需要它們的頁面。

我也明白越少的HTTP請求越好。因此,我們有3個方案中,我看到:

  1. 一個在整個網站大文件
  2. 加載模塊根據需要
  3. 具體到每一個頁面一個組合文件,實時生成需要的模塊組合。

什麼是最好的?

我有Yii框架,如果有幫助。

+0

你總是可以使用那些特定於頁面的條件來防止你的JS/jQuery執行不需要的函數。最終它取決於你正在部署的webapp類型以及它在頁面加載時需要多少功能,但標準約定是HTTP請求越少越好。所以,如果頁面需要某個「類」,只需檢查是否存在頁面特定的元素,並使用它來確定是否需要包含更多的腳本/調用某些方法。 – thescientist

回答

1

你對你的想法是正確的 - 一個大文件是最受歡迎的,但是這會導致不需要的Javascript部分被執行。您的目標必須是將通常需要的Javascript文件與僅用於一個頁面的部分分開。然後,您可以決定是否將每個案例都包含在大文件中,或者是否要繼續單獨加載。嘗試確定大多數用戶訪問的主要頁面 - 需要的文件應放在主文件中。

作爲一個旁註,你可以看看Require.js在Javascript和按需加載中構建模塊關係。

0

從你指定的選項,我會做一個大的Javascript文件。開始時可能需要稍長的時間,但它會使應用程序使用更加快速。當然,這取決於每個特定的情況。

我也推薦你去use Head.JS裝載機,這很簡單。基本上,他們聲明在第一次加載時並行加載多個文件實際上比加載一個大文件要快(至少使用head.js)。這是因爲它們正在以非阻塞並行方式加載。特別是隨着老一代的瀏覽器,其下載腳本一個接一個(就像從head.js網站採取如下圖)後:

enter image description here

編輯:忘了提,有加載一個文件的附加警告 - 某些設備對緩存有限制,例如,在iPhone 4中,限制爲25kb(相當低)。

0

當談到Yii框架,它肯定似乎他們要你當你需要他們(需要的js文件在頁面上)加載JS文件只,例如:

Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/myfile.js', CClientScript::POS_HEAD); 
Yii::app()->clientScript->registerScriptFile(Yii::app()->request->baseUrl.'/js/myfile.js', CClientScript::POS_READY); 

這種方法還只有在需要時才加載jQuery。但我完全不同意,不是從效率的角度出發,而是從易用性的角度出發。如果您使用的是大量的JavaScript,我建議強制Yii的使用加載jQuery的直線距離:

Yii::app()->clientScript->registerCoreScript('jquery'); 

然後我有一個包含常用功能(功能我在不止一個地方在網站上使用)一個JS文件,該文件我也馬上加載。然後,我使用內嵌JavaScript的頁面特定的JavaScript小片段

+0

我目前充分利用'ClientScript'配置來根據需要加載腳本。我在層次結構中一直保持高度的jQuery,所以它工作正常(它在每一頁都被加載得很多而不必擔心)。現在這加載了多個文件。問題是如果Yii可以在飛行中優化這個... –

0

那麼,我們必須競爭的力量。 A)最初加載大量數據。 B)多次加載數據。

在這裏找到平衡是一門微妙的藝術,需要理解使用模式以獲得一些有教育意義的猜測,然後進行測試和測量,直到達到可接受的響應時間。

不要問什麼是「最好的」,你應該問自己什麼是你的網站可以接受的。在典型的寬帶連接上,在不到一秒內加載首頁即可。慢速連接十秒鐘好嗎?然後測量並調整,直到速度可以接受。

考慮使用模式的一些問題可能是如果您想優先考慮前端頁面加載速度或加載子頁面的速度?如果你將所有的JavaScript分成一個大文件,你在第一頁加載時會受到懲罰,但是其他頁面的加載速度會更快。另一種方式。

如果你有很多不同的頁面,並且用戶不會訪問更多的頁面,你應該考慮爲每個頁面保留一個js文件。但是不要爲每個頁面創建許多腳本,儘可能少地保留文件數量。

一個和許多js文件之間的區別主要是第一次加載。一旦緩存一個或多個文件不會產生重大影響。多個文件的壞處是,當您通過網絡加載時,每個文件都有延遲。

最後提醒。確保你縮小文件,如果可能的話添加gzip,並確保你的緩存頭允許瀏覽器正確緩存js文件和其他資源。