js中延遲加載和預(yù)加載的具體使用
延遲加載（懶加載）和預(yù)加載是常用的 web 優(yōu)化的手段。。
一、延遲加載（懶加載）
原理： 當(dāng)在真正需要數(shù)據(jù)的時(shí)候，才真正執(zhí)行數(shù)據(jù)加載操作。
目的： 延遲加載機(jī)制是為了避免一些無(wú)謂的性能開(kāi)銷而提出來(lái)的
實(shí)現(xiàn)延遲加載的幾種方法
1. 讓 js 最后加載
使用方法： 把 js 外部引入的文件放到頁(yè)面底部
用途: 讓 js 最后引入，從而加快頁(yè)面加載速度
說(shuō)明:
流覽器之所以會(huì)采用同步模式，通常加載 js 文件或者放<script>標(biāo)簽都在結(jié)構(gòu)最后面，也是因?yàn)樗鼤?huì)阻止瀏覽器后續(xù)操作的原因，所以放在后面，當(dāng)頁(yè)面結(jié)構(gòu)和樣式全部渲染完成再執(zhí)行 js，提升用戶體驗(yàn)
2. defer 屬性
使用方法： 為 <script>標(biāo)簽定義了 defer屬性。
用途: 讓腳本在執(zhí)行時(shí)不會(huì)影響頁(yè)面的構(gòu)造。也就是說(shuō)，腳本會(huì)被延遲到整個(gè)頁(yè)面都解析完畢之后再執(zhí)行
<!DOCTYPE html> <html> <head> <script src="test1.js" defer="defer"></script> <script src="test2.js" defer="defer"></script> </head> <body> <!-- 這里放內(nèi)容 --> </body> </html>
說(shuō)明：
- 雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標(biāo)簽后再執(zhí)行。
- 當(dāng)瀏覽器解析到 script 腳本，有 defer 時(shí),瀏覽器會(huì)并行下載有 defer 屬性的 script，而不會(huì)阻塞頁(yè)面后續(xù)處理。
- 所有的 defer 腳本保證是按順序依次執(zhí)行的。(但實(shí)際上延遲腳本并不一定會(huì)按照順序執(zhí)行，因此最好只包含一個(gè)延遲腳本)
- defer 屬性只適用于外部腳本文件。
3. async 屬性
使用方法： 為 <script>標(biāo)簽定義了 async屬性。
用途: 不讓頁(yè)面等待腳本下載和執(zhí)行，從而異步加載頁(yè)面其他內(nèi)容。
<!DOCTYPE html> <html> <head> <script src="test1.js" async></script> <script src="test2.js" async></script> </head> <body> <!-- 這里放內(nèi)容 --> </body> </html>
瀏覽器會(huì)立即下載腳本，但不妨礙頁(yè)面中的其他操作，比如下載其他資源或等待加載其他腳本。加載和渲染后續(xù)文檔元素的過(guò)程和 main.js 的加載與執(zhí)行并行進(jìn)行，這個(gè)過(guò)程是異步的。它們將在 onload 事件之前完成。
說(shuō)明：
- 瀏覽器會(huì)立即下載腳本，但不妨礙頁(yè)面中的其他操作，加載和渲染后續(xù)文檔元素的過(guò)程和腳本的加載與執(zhí)行并行進(jìn)行。
- 這個(gè)過(guò)程是異步的，它們將在 onload 事件之前完成。
- 所有的 defer 腳本不能控制加載的順序。。
- asyncr 屬性只適用于外部腳本文件。
4. 動(dòng)態(tài)創(chuàng)建 DOM 方式
//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtOnload() {
varelement = document.createElement("script");
element.src = "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（必寫）：將要請(qǐng)求的 URL 字符串
- success(response,status)（可選）：規(guī)定請(qǐng)求成功后執(zhí)行的回調(diào)函數(shù)。
其中的參數(shù)
response - 包含來(lái)自請(qǐng)求的結(jié)果數(shù)據(jù)
status - 包含請(qǐng)求的狀態(tài)（"success", "notmodified", "error", "timeout" 或 "parsererror"）
用途: 通過(guò) HTTP GET 請(qǐng)求載入并執(zhí)行 JavaScript 文件。
//加載并執(zhí)行 test.js：
$.getScript("test.js");
//加載并執(zhí)行 test.js ，成功后顯示信息
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
6.使用 setTimeout 延遲方法的加載時(shí)間
用途: 延遲加載 js 代碼，給網(wǎng)頁(yè)加載留出時(shí)間
<script type="text/javascript">
function A(){
$.post("/lord/login",{name:username,pwd:password},function(){
alert("Hello World!");
})
}
$(function (){
setTimeout("A()",1000); //延遲1秒
})
</script>
常用實(shí)例 - 圖片懶加載
原理： 一張圖片就是一個(gè)<img>標(biāo)簽，瀏覽器是否發(fā)起請(qǐng)求圖片是根據(jù)<img>的 src 屬性，所以實(shí)現(xiàn)懶加載的關(guān)鍵就是，在圖片沒(méi)有進(jìn)入可視區(qū)域時(shí)，先不給<img>的 src 賦值，這樣瀏覽器就不會(huì)發(fā)送請(qǐng)求了，等到圖片進(jìn)入可視區(qū)域再給 src 賦值。
<img class="lazy" src="img/loading.gif" lazy-src="img/pic1.jpg" > <img class="lazy" src="img/loading.gif" lazy-src="img/pic2.jpg" >
function lazyload(){
var visible;
$('img').each(function () {
if( typeof($(this).attr("lazy-src"))!="undefined" ){ // 判斷圖片是否需要懶加載
visible = $(this).offset().top - $(window).scrollTop(); //圖片距離頂部的距離
if ((visible > 0) && (visible < $(window).height())) {// 判斷圖片是否在可視區(qū)域
visible = true;// 圖片在可視區(qū)域
} else {
visible = false;// 圖片不在可視區(qū)域
}
if (visible) {
$(this).attr('src', $(this).attr('lazy-src'));
}
}
});
}
// 打開(kāi)頁(yè)面觸發(fā)函數(shù)
lazyload();
// 滾屏?xí)r觸發(fā)函數(shù)
window.onscroll =function(){
lazyload(imgs);
}
二、 預(yù)加載
原理： 提前加載圖片，當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染
目的： 犧牲前端性能，換取用戶體驗(yàn)，使用戶的操作得到最快的反映。
實(shí)現(xiàn)預(yù)加載的幾種方法
1. css 實(shí)現(xiàn)
原理： 可通過(guò) CSS 的background 屬性 將圖片預(yù)加載到屏幕外的背景上。只要這些圖片的路徑保持不變 ，當(dāng)它們?cè)?Web 頁(yè)面的其他地方被調(diào)用時(shí)，瀏覽器就會(huì)在渲染過(guò)程中使用預(yù)加載（緩存）的圖片。簡(jiǎn)單、高效，不需要任何 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ù)加載圖片
原理： 通過(guò)寫函數(shù)進(jìn)行預(yù)加載。將該腳本封裝入一個(gè)函數(shù)中，并使用 addLoadEvent（），延遲預(yù)加載時(shí)間，直到頁(yè)面加載完畢。
function preloader() {
if (document.images) {
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = "http://domain.tld/path/to/image-001.gif";
img2.src = "http://domain.tld/path/to/image-002.gif";
img3.src = "http://domain.tld/path/to/image-003.gif";
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
3. 使用 ajax 實(shí)現(xiàn)預(yù)加載
原理： 使用 Ajax 實(shí)現(xiàn)圖片預(yù)加載的方法,利用 DOM，不僅僅預(yù)加載圖片，還會(huì)預(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 毫秒的超時(shí)是為了防止腳本掛起，而導(dǎo)致正常頁(yè)面出現(xiàn)功能問(wèn)題。
三、 懶加載與預(yù)加載的對(duì)比
1、概念
延遲加載也叫懶加載： 當(dāng)在真正需要數(shù)據(jù)的時(shí)候，才真正執(zhí)行數(shù)據(jù)加載操作。
預(yù)加載：提前加載，當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染
2、區(qū)別
- 兩種技術(shù)的本質(zhì)：兩者的行為相反，一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。
- 懶加載會(huì)對(duì)前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加前端的壓力。
3、意義
懶加載的主要目的是優(yōu)化前端性能，減少請(qǐng)求數(shù)或延遲請(qǐng)求數(shù)。
預(yù)加載是犧牲前端性能，換取用戶體驗(yàn)，使用戶的操作得到最快的反映。
四、 參考資料
【1】http://www.dbjr.com.cn/article/154930.htm
【2】http://www.dbjr.com.cn/article/57579.htm
到此這篇關(guān)于js中延遲加載和預(yù)加載的具體使用的文章就介紹到這了,更多相關(guān)js中延遲加載和預(yù)加載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
基于JS實(shí)現(xiàn)動(dòng)態(tài)跟隨特效的示例代碼
這篇文章主要介紹了如何利用JavaScript實(shí)現(xiàn)動(dòng)態(tài)跟隨特效，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JS有一定的幫助，感興趣的小伙伴可以了解一下2022-06-06
這篇文章主要為大家詳細(xì)介紹了swiper插件自定義切換箭頭按鈕，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
本文主要介紹了JavaScript函數(shù)節(jié)流的兩種寫法。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
描述 event代表事件的狀態(tài)，例如觸發(fā)event對(duì)象的元素、鼠標(biāo)的位置及狀態(tài)、按下的鍵等等。2011-01-01
這篇文章主要為大家介紹了GoJs基本使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
下面小編就為大家?guī)?lái)一篇深入理解js函數(shù)的作用域與this指向。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05
前端如何實(shí)現(xiàn)對(duì)本地文件的IO操作詳解
這篇文章主要給大家介紹了關(guān)于前端如何實(shí)現(xiàn)對(duì)本地文件IO操作的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了在Iframe中獲取父窗口中表單的值(示例代碼)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
JS判斷數(shù)組中是否有重復(fù)值得三種實(shí)用方法
數(shù)組中是否有重復(fù)值的判斷方法有很多，本文為大家推薦下比較實(shí)用的3種方法，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
javascript對(duì)JSON數(shù)據(jù)排序的3個(gè)例子
這篇文章主要介紹了javascript對(duì)JSON數(shù)據(jù)排序的3個(gè)例子的相關(guān)資料2014-04-04