html5-自定义数据与js加载
Posted 大帝SING
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于html5-自定义数据与js加载的主要内容，如果未能解决你的问题，请参考以下文章
VSCode自定义代码片段12——JavaScript的Promise对象