zoukankan      html  css  js  c++  java
  • html5-自定义数据与js加载

    data自定义数据

      dataset

        - data-name:dataset.name

        - data-name-first:dataset.nameFirst

      Data数据在jquery mobile中有着重要作用

    // data- 前缀必须有
    <div id="div1" data-miaov="miaov"
      data-miaov-all = "miaovkt"
    >div</div>
    
    <script>
    window.onload = function() {
      var oDiv = document.getElementById('div1');
      alert( oDiv.dataset.miaov ); // miaov
      alert( oDiv.dataset.miaovAll ); // miaovkt
      // 最常用的形式 就是将html 和 js分离 利用自定义属性设置html的样式 knockoutjs.com
    }
    </script>

    延迟加载JS

       js的加载会影响后面的内容加载

         - 很多浏览器都采用了并行加载JS, 但还是会影响其他内容

       HTML5的defer和async

         - defer:延迟加载,会按顺序执行,在onload执行前被触发

         - async:异步加载,加载完就触发,有顺序问题

       Labjs库 异步加载的库

    // js是单线程 会从上向下执行(可能出现白屏) defer可用于延迟加载(先加载其下面内容) 
     // 如果三个js都给defer 理论上三者按顺序执行, 实际可能乱序执行 
    <script src="a.js" defer="defer"></script>
    <script src="b.js"></script>
    <script src="c.js"></script>
    
    <body>
      <img src="" />
    </body>
    
    // async异步加载 四个同时加载,谁先加载完毕谁先执行,执行顺序无法保证
      // dom 元素可能找不到对象
      // 如果彼此存依赖关系 如c的加载依赖b, 那么可能无法成功加载c
    // 一般用于 独立加载项 如广告 当网站加载完毕的时候 我们不需要立刻加载它
    <script src="a.js" async="async"></script>
    <script src="b.js" async="async"></script>
    <script src="c.js"  async="async"></script>
    
    <body>
      <img src="" />
    </body>
  • 相关阅读:
    把CentOS改成中文
    String,StringBuffer,StringBuilder三者性能对比
    在Linux上部署安装C/C++开发环境
    Kali Linux安装ssh服务
    Kali VirtualBox安装增强功能
    CentOS安装docker
    CentOS安装jdk11
    Java基本数据类型
    奥卡姆剃刀定律在Java代码中的体现——记一次LeetCode刷题心得
    Java 实现简易登录注册功能
  • 原文地址:https://www.cnblogs.com/wssjzw/p/9302333.html
Copyright © 2011-2022 走看看