码迷,mamicode.com
首页 > Web开发 > 详细

html5-自定义数据与js加载

时间:2018-07-12 23:57:37      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:win   under   广告   数据   形式   定义数据   ova   前缀   document   

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>

 

html5-自定义数据与js加载

标签:win   under   广告   数据   形式   定义数据   ova   前缀   document   

原文地址:https://www.cnblogs.com/wssjzw/p/9302333.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!