How many ways are there to implement lazy loading in js? Introduction to six ways of lazy loading in js-JS Tutorial-php.cn

How many ways are there to implement lazy loading in js? Introduction to six ways of lazy loading in js

不言

Release： 2018-08-22 11:37:01

Original

2530 people have browsed it

The content of this article is about how many ways to implement lazy loading in js? The introduction to the six methods of js delayed loading has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

JS lazy loading means waiting for the page to load before loading the JavaScript file.
JS lazy loading helps improve page loading speed.
General methods are as follows:

defer attribute
async attribute
Dynamic creation of DOM method
Use jQuery’s getScript method
Use setTimeout delay method
Let JS Finally load

1, defer attribute
HTML 4.01 defines the defer attribute for the <script> tag.
Purpose: Indicates that the script will not affect the structure of the page when executed. In other words, the script will be delayed until the entire page has been parsed before execution.

Setting the defer attribute in the <script> element is equivalent to telling the browser to download immediately but delay execution.

<!DOCTYPE html>
<html>
<head>
    <script src="test1.js" defer="defer"></script>
    <script src="test2.js" defer="defer"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

Copy after login

Note: Although the <script> element is placed within the <head> element, the included script will delay the browser from encountering </html> tag before executing.

The HTML5 specification requires that scripts be executed in the order in which they appear. In reality, deferred scripts do not necessarily execute in order.

The defer attribute only applies to external script files. Implementations that support HTML5 ignore the defer attribute set by embedded scripts.

2. async attribute

HTML5 defines # for the <script> tag ##asyncProperties. Similar to the defer attribute, they are used to change the behavior of processing scripts. Likewise, only applies to external script files. Purpose: Do not let the page wait for the script to be downloaded and executed, thereby
loading other content of the page asynchronously.

Asynchronous scripts must be executed before the page load event.

There is no guarantee that the script will be executed in order.

<!DOCTYPE html>
<html>
<head>
    <script src="test1.js" async></script>
    <script src="test2.js" async></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>

Copy after login

Async, like defer, will not block the downloading of other resources, so it will not affect the loading of the page.

Disadvantages: Cannot control the order of loading

3. Dynamically create DOM method

//这些代码应被放置在</body>标签前（接近HTML文件的底部）
<script type="text/javascript">
    function downloadJSAtOnload() {
        var element = 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",downloadJAAtOnload);    
        else
        window.onload = downloadJSAtload;</script>

Copy after login

4. Use jQuery’s getScript () method

$.getScript("outer.js",function(){  
//回调函数，成功获取文件后执行的函数
    console.log("脚本加载完成")
});

Copy after login

5. Use setTimeout delay method

6. Let JS load finally

Related Recommended:

Delayed loading of JavaScript

Detailed explanation of delayed loading of images in Javascript

JavaScript image lazy loading library Echo.js_javascript tips

The above is the detailed content of How many ways are there to implement lazy loading in js? Introduction to six ways of lazy loading in js. For more information, please follow other related articles on the PHP Chinese website!