在需要時調用函數

因此，在我的頁面中，我有一些小腳本，一旦您訪問該網站，我實際上並不需要加載這些腳本，實際上用戶在他們的整個會話中可能完全不需要它們。在需要時調用函數

另外，根據這個：http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJS它也不是一個好的做法。

因此，例如，目前我有一切「當DOM準備」：

$(function() { 
// most of the code of which is not needed 
});

如果我不代碼放在裏面的DOM已準備就緒，在大部分的時間它不是可執行文件。所以我想爲每個片段做獨立的功能。

對於〔實施例：

function snippet1() { 
    // Code here 
}

，然後當我需要一個片斷，我需要用的時候點擊鼠標加載它。（不總是一個鼠標，取決於我需要加載）。

例如：

$('#button1').click(function() { 
    snippet1(); 
});

所以我的問題是：這是加載功能，異步，所以你減少網頁加載時間或是否有更好的方式呢？我沒有看過我的例子，我只是想到了它。

請注意，我知道異步加載，但這不是我的選擇，因爲我可以將所有功能合併到一個將被緩存的js文件中，所以頁面加載時間將小於每次加載異步js文件。

來源

2012-01-13 jQuerybeast

你混幾件事情：

頁面加載時間
JavaScript腳本時間 - 腳本被加載後，它必須被解析（檢查錯誤，編譯成字節碼等）
功能執行時間

，因爲你不希望分裂腳本你不能做太多關於頁面加載時間。您可能會考慮將其分爲兩部分：您始終需要的部分和很少需要的「可選」部分。在後臺加載罕見功能。該網站已被訪問過一次之後

注意，頁面加載時間變得很沒有實際意義和您所做確保瀏覽器能夠緩存文件。

如果你想減少解析時間，你有兩種選擇：

，你不需要不要加載零件。
壓縮的腳本。谷歌有一個很好的工具：Closure Compiler。除了讓腳本更快，它還會檢查許多常見的錯誤。

最後一部分是執行時間。只有當這些功能被調用並且它們執行了很多操作時，這些纔是相關的。在你的情況下，我想你可以忽略這一點。

來源

2012-01-13 14:23:55

嗨，謝謝你的回答。我知道所有的方法來最小化和減少加載時間。剩下的是解析時間。我的所有腳本都是異步加載，縮小，緩存在Akamai的CDN等等上。它只是我沉迷於加載時間和性能的人之一，我只是想盡一切辦法。在所有的網頁加載腳本在線（網頁測試，yslow，谷歌的網頁速度，我得到100/100或完整的A，我不慌張，我只是想解釋說我知道很多東西）。我的實際頁面甚至使用緩存清單。 – jQuerybeast 2012-01-13 14:30:39

我只是想了解是否有更好的做法，我不知道。 – jQuerybeast 2012-01-13 14:30:51

在這種情況下，您唯一的選擇是分割腳本。由於瀏覽器將緩存它們，因此如果僅在2-3分割它們，這不會影響加載時間。事實上，這可能會有所幫助，因爲未來的更改可能只會影響2/3腳本中的一個，所以瀏覽器不必重新加載所有內容。 – 2012-01-13 14:50:02

是的，儘可能多的你應該定義document.ready包裝外的對象，函數等。有些開發人員會定義絕對封裝外的所有內容，然後只需在封裝器中調用一個init()函數來加載其他所有內容。我是一個這樣的開發者。

至於異步，這不會執行真正的異步加載，但它會加快您的頁面，因爲頁面加載的工作量要少得多。

通常，如果您不使用像requireJS或yepnope這樣的腳本加載器，最好在所有腳本引用（或者至少不需要立即運行的腳本引用）你的身體，所以頁面呈現之前，資源將不會運行，直到頁面加載後。

來源

2012-01-13 14:22:04 glortho

謝謝。聽起來很好的建議。有沒有關於它的文章？ – jQuerybeast 2012-01-13 14:26:35

看看這個SO發佈和答案，其中包括一個鏈接到雅虎的開創性最佳實踐文章：http://stackoverflow.com/questions/143486/unobtrusive-javascript-script-at-the-top-or-the-bottom- of-the-html-code – glortho 2012-01-13 14:44:04

我會使用RequireJS（http://requirejs.org/）或類似的庫加載所有其他資源。

將所有您不需要的東西立即分開，並在主內容加載後加載它。

來源

2012-01-13 14:22:27

爲什麼我自己可以加載整個插件？ – jQuerybeast 2012-01-13 14:25:31

這是非常小，經過充分測試。它也會節省你的時間。 – 2012-01-13 14:32:33

在需要時調用函數

回答

相關問題