首頁 web前端 js教程 如何使用require.js?讓JS載入速度更快

如何使用require.js?讓JS載入速度更快

Jun 21, 2017 am 10:59 AM
javascript 載入 實用 靈活 速度

當一個網頁引入很多js文件,網頁載入會變得很慢,並且js文件存在依賴性,有時候顛倒順序就不能運行了,這很影響用戶體驗。

require.js解決了非同步加載,提高網頁的加載,同時依賴順序的js可以用數組排序。

 

第一部載入require.js放到目錄的js子目錄下:

<script# src ="js/require.js?1.1.10">script>

需要加一個參數 defer async="true" 表示這個檔案需要非同步載入defer相容IE版本


需要加上data-main="js/main" 表示js下的main.js是主要載入模組。工作時候一定要嚴謹。

 


require()函數接受兩個參數。第一個參數是一個數組,表示所依賴的模組,第二個是回到函數,當前面模組都載入成功後,它將被呼叫。

//main.js:

define(function (require,exports,module){
    exports.add = function (x,y){
      return x+y;
    }; 
});
登入後複製

//math.html:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="require/require.js?1.1.10"></script><script>require(['main'], function (math){
            alert(math.add(1,1));
              });</script></head><body></body></html>
登入後複製

#回傳一個2,則成功彈出。

 

一起呼叫

//b.js:

#
define(function (require,exports,module){
    exports.add = function (obj,oEv,show){
      return obj[addEventListener(oEv,show,false)]
    }; 
});
登入後複製

//math.html:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="require/require.js?1.1.10"></script><script>var btn=document.getElementById('btn');function show(){
                alert('弹出')
            }
            require(['main','main'], function (math){
               math.add(btn,'click',show);
                alert(math.add(1,1));
              });</script></head><body><button id="btn">提交</button></body></html>
登入後複製

 

看玩此文,如果有任何不妥之處望請留言。

以上是如何使用require.js?讓JS載入速度更快的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1325
25
PHP教程
1273
29
C# 教程
1252
24
在Illustrator中載入插件時出錯[修復] 在Illustrator中載入插件時出錯[修復] Feb 19, 2024 pm 12:00 PM

啟動AdobeIllustrator時是否會彈出載入插件時出錯的訊息?一些Illustrator用戶在打開該應用程式時遇到了此錯誤。訊息後面緊跟著一系列有問題的插件。此錯誤提示表示已安裝的插件有問題,但也可能是由於VisualC++DLL檔案損壞或首選項檔案受損等其他原因所引起。如果遇到此錯誤,我們將在本文中指導您修復問題,請繼續閱讀以下內容。在Illustrator中載入外掛程式時出錯如果您在嘗試啟動AdobeIllustrator時收到「載入外掛程式時出錯」的錯誤訊息,您可以使用以下用途:以管理員身

PyCharm新手指南:學會在PyCharm中刪除項目 PyCharm新手指南:學會在PyCharm中刪除項目 Feb 23, 2024 pm 09:39 PM

PyCharm新手指南:刪除專案的實用技巧PyCharm是一款功能強大的Python整合開發環境(IDE),在進行專案開發時,有時候需要刪除專案或專案中的檔案。本文將介紹在PyCharm中刪除專案的實用技巧,並提供具體的程式碼範例幫助新手更好地理解和應用。 1.刪除項目刪除項目意味著刪除整個項目資料夾,這在我們需要清理或重建項目時非常有用。在PyCharm中刪

Uplay下載速度持續為零,無變化 Uplay下載速度持續為零,無變化 Dec 23, 2023 pm 02:49 PM

很多小夥伴吐槽Uplay下載速度慢,還有Uplay平台下載速度太慢有的時候只有幾KB,那麼應該如何解決呢?主要是dns和hosts文件的問題,下面由我帶給大家Uplay下載速度慢的解決方案,具體的一起來看看吧。 Uplay下載速度慢一直為0解決方法1、雙擊開啟這台電腦!如下圖所示2、進入這台電腦,找到你的系統盤,一般預設都是c盤,如下圖所示3、接著進入這個資料夾:C:\Windows\System32\drivers\etc\,如下圖所示4、右鍵點選hosts檔案-選擇開啟方式,如下圖所示5、開啟

全角英文字母轉換為半角形式的實用技巧 全角英文字母轉換為半角形式的實用技巧 Mar 26, 2024 am 09:54 AM

全角英文字母轉換為半角形式的實用技巧在現代生活中,我們經常會接觸到英文字母,在使用電腦、手機等設備時也經常需要輸入英文字母。然而,有時候我們會遇到全角英文字母的情況,而我們需要使用的是半角形式。那麼,如何將全角英文字母轉換為半角形式呢?以下就為大家介紹一些實用的技巧。首先,全角英文字母和數字是指在輸入法中佔據一個全角位置的字符,而半角英文字母和數字則是佔據一

Stremio字幕不工作;載入字幕時出錯 Stremio字幕不工作;載入字幕時出錯 Feb 24, 2024 am 09:50 AM

字幕在你的WindowsPC上不能在Stremio上運行嗎?一些Stremio用戶報告說,影片中沒有顯示字幕。許多用戶報告說他們遇到了一條錯誤訊息,上面寫著「載入字幕時出錯」。以下是與此錯誤一起顯示的完整錯誤訊息:載入字幕時出錯載入字幕失敗:這可能是您正在使用的插件或您的網路有問題。正如錯誤訊息所說,可能是您的網路連線導致了錯誤。因此,請檢查您的網路連接,並確保您的網路運作正常。除此之外,這個錯誤的背後可能還有其他原因,包括字幕加載項衝突、特定影片內容不支援字幕以及Stremio應用程式過時。如

格式化筆記型電腦會使其速度更快嗎? 格式化筆記型電腦會使其速度更快嗎? Feb 12, 2024 pm 11:54 PM

格式化筆記型電腦會使其速度更快嗎?如果您想格式化您的Windows筆記型電腦,但想知道它是否會使速度更快,本文將幫助您了解這個問題的正確答案。格式化筆記型電腦會使其速度更快嗎?使用者格式化Windows筆記型電腦的原因有很多。但最常見的原因是筆記型電腦的效能或速度緩慢。格式化筆記型電腦會徹底刪除C碟或安裝Windows作業系統的硬碟分割區上儲存的所有資料。因此,每個用戶在採取這一步驟之前都會三思而後行,尤其是在筆記型電腦的性能方面。本文將幫助您了解格式化筆記型電腦是否會加快速度。格式化筆記型電腦有助於

插入超連結時Outlook凍結 插入超連結時Outlook凍結 Feb 19, 2024 pm 03:00 PM

如果您在插入超連結時出現在Outlook時遇到凍結問題,可能是因為網路連線不穩定、Outlook版本舊、防毒軟體幹擾或加載項衝突等原因。這些因素可能導致Outlook無法正常處理超連結操作。修正插入超連結時Outlook凍結的問題使用以下修復程式解決插入超連結時Outlook凍結的問題:檢查已安裝的加載項更新Outlook暫時停用您的防毒軟體,然後嘗試建立新的使用者設定檔修復辦公室應用程式卸載並重新安裝Office我們開始吧。 1]檢查已安裝的加載項可能是Outlook中安裝的某個加載項導致了問題。

深度解讀:為何Laravel速度慢如蝸牛? 深度解讀:為何Laravel速度慢如蝸牛? Mar 07, 2024 am 09:54 AM

Laravel是一款廣受歡迎的PHP開發框架,但有時候被人詬病的就是其速度慢如蝸牛。究竟是什麼原因導致了Laravel的速度不盡人意呢?本文將從多個面向深入解讀Laravel速度慢如蝸牛的原因,並結合具體的程式碼範例,幫助讀者更深入地了解此問題。 1.ORM查詢效能問題在Laravel中,ORM(物件關係映射)是一個非常強大的功能,可以讓

See all articles