網站速度和異步Javascript

異步

雖然我做了很多開發,但我並沒有將自己歸類為真正的開發人員。 我可以在頁面上編程和移動內容並使其工作。 真正的開發人員了解如何開發代碼,使其可以擴展、不佔用大量資源、加載速度快、以後可以輕鬆修改並且仍然有效。

營銷人員所面臨的難點是兩者都有一個 非常快的網站 並且仍然結合了集成和社交元素,這些元素可能對網站加載的速度產生依賴性。 這樣的例子之一是 社交按鈕. 在 Martech,我們在網站的每個頁面上都有社交按鈕。 所以……如果有一天 Facebook 資源加載速度變慢,它就會拖慢我們網站的速度。 然後將 Twitter、Pinterest、Buffer 等添加到其中,您網站的快速加載機會幾乎為零。

這稱為同步加載。 你必須完成加載一個元素 之前 你加載下一個元素。 如果您能夠異步加載項目,那麼您就可以在不相互依賴的情況下加載項目。 您可以通過異步加載元素來顯著提高站點的速度。 問題是這些公司為您提供的現成腳本幾乎從未優化為異步運行。
異步

您可以通過在 Pingdom 上運行測試來查看影響頁面速度的因素:
pingdom頁面加載

異步Javascript 允許您編寫告訴元素加載的代碼 頁面已完全加載。 沒有依賴! 因此,您的頁面會加載,一旦完成,就會啟動一個腳本來加載其他元素——在本例中是我們的社交按鈕。 如果您是開發人員,您可以閱讀一篇很棒的文章, 延遲加載異步Javascript.

以下是 Emil Stenström 如何正確執行此操作的片段:

(function(){function async_load(){var s = document.createElement('script'); s.type ='text / javascript'; s.async = true; s.src ='http://buttondomain.com /script.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s,x);} if(window.attachEvent)window.attachEvent('onload',async_load); else window.addEventListener('load',async_load,false);})();

結果是,如果這些第三方集成發生故障或運行緩慢,則不會影響核心頁面內容的顯示。 如果您查看我們頁面的源代碼,您將看到我正在使用該技術加載所有其他社交腳本。 過程 提高了我們網站的速度秒 – 並且在裝載過程中不會窒息。 我們尚未將所有外部依賴項轉換為 異步Javascript,但我們會的。

你覺得呢?

本網站使用Akismet來減少垃圾郵件。 了解您的評論如何處理.