原理

使用可见性以及预取数据，同时充分利用浏览器的空闲时间，主要是解析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

 
 
 
 

quicklink 基本使用的更多相关文章

  1. UWP学习记录12-应用到应用的通信

    UWP学习记录12-应用到应用的通信 1.应用间通信 “共享”合约是用户可以在应用之间快速交换数据的一种方式. 例如,用户可能希望使用社交网络应用与其好友共享网页,或者将链接保存在笔记应用中以供日后参 ...

  2. Axure RP介绍

    1.什么是原型设计?产品原型设计(Prototype Design)最基础的工作,就是结合批注.大量的说明以及流程图画框架图WireFrame,将自己的产品原型完整而准确的表述给 UI.UE.程序工程 ...

  3. 重新想象 Windows 8 Store Apps (39) - 契约: Share Contract

    [源码下载] 重新想象 Windows 8 Store Apps (39) - 契约: Share Contract 作者:webabcd 介绍重新想象 Windows 8 Store Apps 之  ...

  4. WP7:模拟开始屏幕Tile漂动效果

    在WP7手机的开始屏幕,如果你Hold住某一个瓷贴,就会发现除了你按住的那个瓷贴其他全部下沉半透明,然后开始在不停地漂来漂去~~今天来模仿一下这个效果.新建一个项目,然后在Grid里放一个ListBo ...

  5. 快速构建Windows 8风格应用15-ShareContract构建

    原文:快速构建Windows 8风格应用15-ShareContract构建 本篇博文主要介绍共享数据包.如何构建共享源.如何构建共享目标.DataTransferManager类. 共享数据包 Da ...

  6. win10 uwp App-to-app communication 应用通信

    这篇文章都是乱说的,如果觉得有不好的,可以发我邮箱 应用之间需要相互的发送信息,就是我们经常用的分享 有个人看到一个网页很好,于是就希望把这个网页发送到邮件,那么这样的话就是使用应用通信. 因为每个应 ...

  7. Axure RP 介绍

    原型设计是将想法转变为设计过程中至关重要的一环.经常有设计师小伙伴可能会问到,“哪个原型设计工具是最好的呢”?实际上这是一种错误的提问方式,尤其是在当下原型工具种类繁多,针对不同需求各有优势的大环境中 ...

  8. 背水一战 Windows 10 (100) - 应用间通信: 分享

    [源码下载] 背水一战 Windows 10 (100) - 应用间通信: 分享 作者:webabcd 介绍背水一战 Windows 10 之 应用间通信 分享 示例1.本例用于演示如何开发一个分享的 ...

  9. centos installation of matlab R2015b

    the source of installation is in the website: http://blog.csdn.net/hejunqing14/article/details/50265 ...

随机推荐

  1. 深入理解java虚拟机---虚拟机工具jps与jstat(十四)

    jps-java process status jps类似于linux的ps命令,用于查看进程. JPS 名称: jps - Java Virtual Machine Process Status T ...

  2. IOCP IO完成端口

    一. IO完成端口概念 IO完成端口的出现是为了解决并发模型中可运行线程上下文切换开销过大而出现的. 在<Windows核心编程>的描述中,IO完成端口是Wnidows系统提供的最复杂的内 ...

  3. Git超实用总结

    Git 是什么? Git 是一个分布式的代码管理容器,本地和远端都保有一份相同的代码. Git 仓库主要是由是三部分组成:本地代码,缓存区,提交历史,这几乎是所有操作的本质,但是为了文章更加简单易懂, ...

  4. 分类算法的R语言实现案例

    最近在读<R语言与网站分析>,书中对分类.聚类算法的讲解通俗易懂,和数据挖掘理论一起看的话,有很好的参照效果. 然而,这么好的讲解,作者居然没提供对应的数据集.手痒之余,我自己动手整理了一 ...

  5. 2D转换下的zoom和transform:scale的区别

    一.什么是zoom 在我们做项目和查看别人的网页的时候总会在一些元素的样式里,看到有一个家伙孤零零的待在那里,它到底是谁呢? 它的名字叫zoom,zoom的意思是“变焦”,虽然在摄影的领域经常被提到, ...

  6. es6 常用总结

    1.变量 let 声明的变量只在它所在的代码块有效,不允许重复声明 const 声明是一个只读的常量.一旦声明,常量的值就不能改变. const与let的作用域相同,只在声明所在的块级作用域内有效. ...

  7. [转]Spark 踩坑记：数据库（Hbase+Mysql）

    https://cloud.tencent.com/developer/article/1004820 Spark 踩坑记:数据库(Hbase+Mysql) 前言 在使用Spark Streaming ...

  8. Android Native Hook技术（一）

    原理分析 ADBI是一个著名的安卓平台hook框架,基于 动态库注入 与 inline hook 技术实现.该框架主要由2个模块构成:1)hijack负责将so注入到目标进程空间,2)libbase是 ...

  9. Python之路，第十九篇：Python入门与基础19

    python3  面向对象3 数值转换函数重载: str(obj)              __str__ complex(x)       __complex__ int(obj)         ...

  10. python 加密 hashlib与hmac模块

    https://www.jb51.net/article/128911.htm hashlib模块简介: hashlib模块为不同的安全哈希/安全散列(Secure Hash Algorithm)和 ...