js에서 로드 지연과 미리 불러오는 구체적인 사용
1. 로드 지연 (게으름)
원리: 진정으로 데이터가 필요할 때에야 진정으로 데이터 로드 작업을 실행할 수 있다.
목적: 로드 지연 메커니즘은 일부 무의미한 성능 비용을 피하기 위해 제기된 것이다
로드 지연을 실현하는 몇 가지 방법
1. js를 마지막으로 불러오기
사용 방법: js 외부에 도입된 파일을 페이지 밑에 놓기
용도: js를 마지막으로 도입하여 페이지 불러오는 속도를 가속화합니다
설명:
유람기가 동기화 모드를 사용하는 이유는 일반적으로 js 파일을 불러오거나
2. defer 属性
사용 방법:
용도: 스크립트가 실행될 때 페이지의 구조에 영향을 주지 않도록 합니다.즉, 스크립트는 전체 페이지로 지연되어 해석이 끝난 후에 실행된다는 것이다
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" defer="defer"></script>
<script src="test2.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
3. async 属性
사용 방법:
용도: 스크립트가 다운로드되고 실행될 때까지 페이지를 기다리지 못하게 하고 다른 내용을 비동기적으로 불러옵니다.
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" async></script>
<script src="test2.js" async></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
설명:
4. 动态创建 DOM 方式
//这些代码应被放置在</body>标签前(接近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))response - 요청한 결과 데이터 포함
status - 요청한 상태 ("success", "notmodified", "error", "timeout"또는 "parsererror") 를 포함합니다.
용도: HTTP GET 요청을 통해 JavaScript 파일을 로드하고 실행합니다.
//加载并执行 test.js：
$.getScript("test.js");
//加载并执行 test.js ，成功后显示信息
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
6.使用 setTimeout 延迟方法的加载时间
용도: js 코드 불러오기 지연, 웹 페이지 불러오기 시간 남기기
<script type="text/javascript">
function A(){
$.post("/lord/login",{name:username,pwd:password},function(){
alert("Hello World!");
})
}
$(function (){
setTimeout("A()",1000); //延迟1秒
})
</script>
常用实例 - 图片懒加载
원리: 한 장의 그림은
<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())) {// 判断图片是否在可视区域
visible = true;// 图片在可视区域
} else {
visible = false;// 图片不在可视区域
}
if (visible) {
$(this).attr('src', $(this).attr('lazy-src'));
}
}
});
}
// 打开页面触发函数
lazyload();
// 滚屏时触发函数
window.onscroll =function(){
lazyload(imgs);
}
二、 预加载
원리: 사용자가 볼 때 로컬 캐시에서 직접 렌더링할 수 있도록 그림을 미리 불러옵니다.
목적: 전방 성능을 희생하고 사용자 체험을 바꾸어 사용자의 조작을 가장 빨리 반영한다.
实现预加载的几种方法
1. css 实现
원리: CSS의 background 속성을 통해 그림을 화면 밖의 배경에 미리 불러올 수 있습니다.이 그림들의 경로가 변하지 않으면, 웹 페이지의 다른 곳에서 호출될 때, 브라우저는 렌더링 과정에서 미리 불러오는 (캐시) 그림을 사용합니다.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 预加载图片
원리: 쓰기 함수를 통해 미리 불러옵니다.이 스크립트를 함수에 봉인하고addLoadEvent()를 사용하여 페이지가 불러올 때까지 미리 불러오는 시간을 늦춥니다.
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 实现预加载
원리: Ajax를 사용하여 그림을 미리 불러오는 방법, DOM을 이용하여 그림뿐만 아니라 CSS, JavaScript 등과 관련된 것도 미리 불러옵니다.
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);
};
三、 懒加载与预加载的对比
1、概念
지연 불러오는 것도 게으른 불러오는 것이다. 데이터가 진정으로 필요할 때 데이터 불러오는 작업을 실행할 수 있다.
사전 로드: 사용자가 직접 로컬 캐시에서 렌더링할 수 있도록 미리 로드합니다.
2、区别
3、意义
게으른 부하의 주요 목적은 전방 성능을 최적화하고 요청 수나 지연 요청 수를 줄이는 것이다.
사전 로드는 전방 성능을 희생하고 사용자 체험을 바꾸어 사용자의 조작을 가장 빨리 반영한다.
四、 参考资料
【1】 https://www.jb51.net/article/154930.htm
【2】 https://www.jb51.net/article/57579.htm
이 js에서 불러오기 지연과 불러오기에 대한 구체적인 사용에 관한 글은 여기까지 소개합니다. 더 많은 js에서 불러오기 지연과 불러오기 내용에 대해서는 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
