文章詳情頁

js中延遲加載和預(yù)加載的具體使用

瀏覽：77日期：2024-04-07 18:05:19

延遲加載（懶加載）和預(yù)加載是常用的 web 優(yōu)化的手段。。

一、延遲加載（懶加載）

原理：當(dāng)在真正需要數(shù)據(jù)的時候，才真正執(zhí)行數(shù)據(jù)加載操作。目的：延遲加載機(jī)制是為了避免一些無謂的性能開銷而提出來的

實(shí)現(xiàn)延遲加載的幾種方法1. 讓 js 最后加載

使用方法：把 js 外部引入的文件放到頁面底部用途: 讓 js 最后引入，從而加快頁面加載速度說明:流覽器之所以會采用同步模式，通常加載 js 文件或者放<script>標(biāo)簽都在結(jié)構(gòu)最后面，也是因?yàn)樗鼤柚篂g覽器后續(xù)操作的原因，所以放在后面，當(dāng)頁面結(jié)構(gòu)和樣式全部渲染完成再執(zhí)行 js，提升用戶體驗(yàn)

2. defer 屬性

使用方法：為 <script>標(biāo)簽定義了 defer屬性。用途: 讓腳本在執(zhí)行時不會影響頁面的構(gòu)造。也就是說，腳本會被延遲到整個頁面都解析完畢之后再執(zhí)行

<!DOCTYPE html><html><head> <script src='http://www.hdgsjgj.cn/bcjs/test1.js' defer='defer'></script> <script src='http://www.hdgsjgj.cn/bcjs/test2.js' defer='defer'></script></head><body></body></html>

說明：

雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標(biāo)簽后再執(zhí)行。當(dāng)瀏覽器解析到 script 腳本，有 defer 時,瀏覽器會并行下載有 defer 屬性的 script，而不會阻塞頁面后續(xù)處理。所有的 defer 腳本保證是按順序依次執(zhí)行的。(但實(shí)際上延遲腳本并不一定會按照順序執(zhí)行，因此最好只包含一個延遲腳本) defer 屬性只適用于外部腳本文件。3. async 屬性

使用方法：為 <script>標(biāo)簽定義了 async屬性。用途: 不讓頁面等待腳本下載和執(zhí)行，從而異步加載頁面其他內(nèi)容。

<!DOCTYPE html><html><head> <script src='http://www.hdgsjgj.cn/bcjs/test1.js' async></script> <script src='http://www.hdgsjgj.cn/bcjs/test2.js' async></script></head><body></body></html>

瀏覽器會立即下載腳本，但不妨礙頁面中的其他操作，比如下載其他資源或等待加載其他腳本。加載和渲染后續(xù)文檔元素的過程和 main.js 的加載與執(zhí)行并行進(jìn)行，這個過程是異步的。它們將在 onload 事件之前完成。

說明：

瀏覽器會立即下載腳本，但不妨礙頁面中的其他操作，加載和渲染后續(xù)文檔元素的過程和腳本的加載與執(zhí)行并行進(jìn)行。這個過程是異步的，它們將在 onload 事件之前完成。所有的 defer 腳本不能控制加載的順序。。 asyncr 屬性只適用于外部腳本文件。4. 動態(tài)創(chuàng)建 DOM 方式

//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近HTML文件底部)<script type='text/javascript'> function downloadJSAtOnload() { varelement = document.createElement('script'); element.src = 'http://www.hdgsjgj.cn/bcjs/defer.js'; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener('load',downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent('onload',downloadJSAtOnload); else window.onload =downloadJSAtOnload;</script>5. 使用 jquery 的 getScript 方法

使用方法：

Query.getScript(url,success(response,status)) url（必寫）：將要請求的 URL 字符串 success(response,status)（可選）：規(guī)定請求成功后執(zhí)行的回調(diào)函數(shù)。

其中的參數(shù)response - 包含來自請求的結(jié)果數(shù)據(jù)status - 包含請求的狀態(tài)（'success', 'notmodified', 'error', 'timeout' 或 'parsererror'）

用途: 通過 HTTP GET 請求載入并執(zhí)行 JavaScript 文件。

//加載并執(zhí)行 test.js：$.getScript('test.js');//加載并執(zhí)行 test.js ，成功后顯示信息$.getScript('test.js', function(){ alert('Script loaded and executed.');});6.使用 setTimeout 延遲方法的加載時間

用途: 延遲加載 js 代碼，給網(wǎng)頁加載留出時間

原理：一張圖片就是一個<img>標(biāo)簽，瀏覽器是否發(fā)起請求圖片是根據(jù)<img>的 src 屬性，所以實(shí)現(xiàn)懶加載的關(guān)鍵就是，在圖片沒有進(jìn)入可視區(qū)域時，先不給<img>的 src 賦值，這樣瀏覽器就不會發(fā)送請求了，等到圖片進(jìn)入可視區(qū)域再給 src 賦值。

原理：提前加載圖片，當(dāng)用戶需要查看時可直接從本地緩存中渲染目的：犧牲前端性能，換取用戶體驗(yàn)，使用戶的操作得到最快的反映。

實(shí)現(xiàn)預(yù)加載的幾種方法1. css 實(shí)現(xiàn)

原理：可通過 CSS 的background 屬性將圖片預(yù)加載到屏幕外的背景上。只要這些圖片的路徑保持不變，當(dāng)它們在 Web 頁面的其他地方被調(diào)用時，瀏覽器就會在渲染過程中使用預(yù)加載（緩存）的圖片。簡單、高效，不需要任何 JavaScript。

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }2. js 預(yù)加載圖片

原理：通過寫函數(shù)進(jìn)行預(yù)加載。將該腳本封裝入一個函數(shù)中，并使用 addLoadEvent（），延遲預(yù)加載時間，直到頁面加載完畢。

原理：使用 Ajax 實(shí)現(xiàn)圖片預(yù)加載的方法,利用 DOM，不僅僅預(yù)加載圖片，還會預(yù)加載 CSS、JavaScript 等相關(guān)的東西

window.onload = function() { setTimeout(function() { // XHR to request a JS and a CSS var xhr = new XMLHttpRequest(); xhr.open(’GET’, ’http://domain.tld/preload.js’); xhr.send(’’); xhr = new XMLHttpRequest(); xhr.open(’GET’, ’http://domain.tld/preload.css’); xhr.send(’’); // preload image new Image().src = 'http://domain.tld/preload.png'; }, 1000);};

上面代碼預(yù)加載了“preload.js”、“preload.css”和“preload.png”。1000 毫秒的超時是為了防止腳本掛起，而導(dǎo)致正常頁面出現(xiàn)功能問題。

三、懶加載與預(yù)加載的對比1、概念

延遲加載也叫懶加載：當(dāng)在真正需要數(shù)據(jù)的時候，才真正執(zhí)行數(shù)據(jù)加載操作。預(yù)加載：提前加載，當(dāng)用戶需要查看時可直接從本地緩存中渲染

2、區(qū)別兩種技術(shù)的本質(zhì)：兩者的行為相反，一個是提前加載，一個是遲緩甚至不加載。懶加載會對前端有一定的緩解壓力作用，預(yù)加載則會增加前端的壓力。3、意義

懶加載的主要目的是優(yōu)化前端性能，減少請求數(shù)或延遲請求數(shù)。預(yù)加載是犧牲前端性能，換取用戶體驗(yàn)，使用戶的操作得到最快的反映。

四、參考資料

【1】https://www.jb51.net/article/154930.htm【2】https://www.jb51.net/article/57579.htm

到此這篇關(guān)于js中延遲加載和預(yù)加載的具體使用的文章就介紹到這了,更多相關(guān)js中延遲加載和預(yù)加載內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！

JavaScript

上一條：js實(shí)現(xiàn)有趣的倒計(jì)時效果下一條：JS中箭頭函數(shù)與this的寫法和理解

相關(guān)文章：

1. vue實(shí)現(xiàn)web在線聊天功能2. IntelliJ IDEA設(shè)置自動提示功能快捷鍵的方法3. Java Bean與Map之間相互轉(zhuǎn)化的實(shí)現(xiàn)方法4. SpringBoot+TestNG單元測試的實(shí)現(xiàn)5. Springboot 全局日期格式化處理的實(shí)現(xiàn)6. Java使用Tesseract-Ocr識別數(shù)字7. Python使用urlretrieve實(shí)現(xiàn)直接遠(yuǎn)程下載圖片的示例代碼8. Django使用HTTP協(xié)議向服務(wù)器傳參方式小結(jié)9. JAMon(Java Application Monitor)備忘記10. 完美解決vue 中多個echarts圖表自適應(yīng)的問題

排行榜

					
					docker容器調(diào)用yum報錯的解決辦法
Django使用HTTP協(xié)議向服務(wù)器傳參方式小結(jié)
JAMon(Java Application Monitor)備忘記
IntelliJ IDEA設(shè)置自動提示功能快捷鍵的方法
完美解決vue 中多個echarts圖表自適應(yīng)的問題
Springboot 全局日期格式化處理的實(shí)現(xiàn)
Java Bean與Map之間相互轉(zhuǎn)化的實(shí)現(xiàn)方法
Java使用Tesseract-Ocr識別數(shù)字
vue實(shí)現(xiàn)web在線聊天功能
Python使用urlretrieve實(shí)現(xiàn)直接遠(yuǎn)程下載圖片的示例代碼
SpringBoot+TestNG單元測試的實(shí)現(xiàn)
				