quicklink 基本使用

时间：2023-03-09 19:03:53
quicklink 基本使用

原理

使用可见性以及预取数据，同时充分利用浏览器的空闲时间，主要是解析href 以通过代码的选项指定需要加载的数据，当然其中
也添加了好多灵活的控制参数，方便我们使用，而且代码很小，压缩之后也就1kb

运行使用了docker

version: "3"

services:

  web:

    image: nginx

    volumes:

    - "./:/usr/share/nginx/html/"

    ports:

    - "8080:80"

基本使用

  • 基本代码结构
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

</head>

<body>

    <div class="h-c-header__initiative-logo h-c-header__initiative-logo--no-margin">

        <a href="2.html" data-analytics='{

                                "category": "navigation",

                                "action": "header",

                                "label": "navlink: home"

                                }'

            class="h-c-header__initiative-logo-link uni-click-tracker">

            <span class="h-c-header__initiative-logo-text"> The Keyword</span>

        </a>

    </div>

    <a href="static/js/login.js"></a>

    <div id="landing-components" data-scripts='[

          { "url": "4.js",

            "options": {

                "async": true,

                "defer": true

            }

          },

          { "url": "static/js/login.js",

            "options": {

                "async": true,

                "defer": true

            }

          }

        ]'></div>

    <div id="userlogin"></div>

    <input type="button" value="click load" onclick="load()" />

    <iframe id="myhtml">

        default content

    </iframe>

    <script type="text/javascript">

        var scripts = document.querySelector("#landing-components").getAttribute('data-scripts');

        scripts = JSON.parse(scripts);

        scripts.forEach(function (scriptObj) {

            var s = document.createElement('script');

            s.async = scriptObj.options.async;

            s.defer = scriptObj.options.defer;

            s.src = scriptObj.url;

            document.head.appendChild(s);

        });

    </script>

    <script src="https://unpkg.com/quicklink@1.0.0/dist/quicklink.umd.js"></script>

    <script>

        window.addEventListener('load', function () {

            quicklink({});

        });

        function load() {

            var content = document.getElementById("myhtml")

            content.src = "2.html"

        }

    </script>

</body>

</html>

效果测试

通过chrome 的调试可以看出数据已经进行加载了
quicklink 基本使用

参考资料

https://github.com/rongfengliang/quicklink-learning
https://github.com/GoogleChromeLabs/quicklink
https://github.com/w3c/IntersectionObserver

相关文章