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 的调试可以看出数据已经进行加载了

参考资料

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