zoukankan      html  css  js  c++  java
  • 关于script的async属性

     script标签有一个很不常用的 async 属性,这个属性最早是由FireFox先搞出来的,然后得到了 Chrome 和 Safari 的支持,但是很不幸的是IE不支持该属性。

    关于async的介绍可以见这里:http://www.w3.org/TR/html5/scripting-1.html#attr-script-async

    async 属性我们大致可以这样去理解:

         当script的 async 属性被置为 true 时,脚本的执行序为异步的。即不按照挂载到 Dom 的序顺执行 ,相反如果是 false 则按挂载的顺序执行。

         如果script标签被直接编码到html中,那黙认的async属性为 false ,如果script 是由 document.createElement("script")得到,那么 async 属性为 true

    IE、Safari和Opera是完全不鸟这个属性了,如果是动态创建script标签,Opera会按script 挂到Dom的序顺依次执行,但是 IE浏览器和 Safari 此时很不给力了异步执行了。

    那么这里就会产生一个问题, 我们有一个动态载入JavaScript的需求,而且是随时都有可能动态的载入一个或多个Javascript脚本,而且这个加载一定是跨域的。使用 xhr (动态载入JavaScript代码)注入的方式肯定是不能考虑了。那如何做到并序下载按序执行呢?

    我们可以尝试这种办法,首先我们使用一个type="text/seed"的script标签把所有脚本下载下来,你也可以设置成任意你想设置的东西 text/someelse  当然不能写javascript了。完成所有的脚本下载后,再依序重新生成script标签,并把标签挂入到Dom树之中。

    这相当于利用浏览器的cache把文件预加载进来,然后再一个个执行。但是这个方案却是一个没有理论基础的,因为我不知道浏览器会怎么利用cache。但是目前所测试的浏览器上都达到了预期的结果。

  • 相关阅读:
    解决GIT可视化工具Sourcetree拉取失败问题
    记录常用Git命令
    vue开发移动端使用rem的适配方案
    使用HBuilderX实现打包vue项目成app
    使用vue+webpack从零搭建项目
    整理最近面试问道的问题
    模块化之seaJs学习和使用
    理解Object.defineProperty的作用
    vue生命周期
    使用gulp编译sass
  • 原文地址:https://www.cnblogs.com/darrel/p/2124783.html
Copyright © 2011-2022 走看看