脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → PHP编程 → php技巧 → async和DOM Script文件加载比较

async和DOM Script文件加载比较

 更新时间：2014年07月20日 17:20:23   投稿：hebedich  
async与script动态加载都能使文件异步加载，本文叙述它们对页面渲染和load加载的影响方面。

目前我用demo.js作为执行文件操作.代码：

var now = function() { return +(new Date()); }
var t_s = now();
while(now() - t_s < 2000) { }

用sleep.php作为请求文件操作。代码：

<?php
  sleep(3);
  echo 'var bb';
?>

1. 一般script标签加载

<script src="demo.js"></script>
<script src="sleep.php"></script>

在浏览器加载情况: 图1-1. 下载阻塞DomReady 图1-2. 执行阻塞DomReady


图1-1. 下载阻塞DomReady


图1-2. 执行阻塞DomReady

2. async属性

async是html5中新增的属性，它的作用是能够异步下载脚本文件，不阻塞DOMReady。

每一个async属性的脚本都在它下载结束之后立刻执行，同时会在window的load事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况

支持async浏览器: Firefox 3.6+, IE 10+, Chrome 2+, Safari 5+, iOS 5+, Android 3+

<script src="demo.js" async></script>
<script src="sleep.php" async></script>

在浏览器中加载的情况：


图2-1 异步下载 不阻塞DomReady 阻塞load事件


图2-2 执行阻塞load事件


图2-3 IE9不支持async属性下载阻塞DomReady

3. DOM Script动态加载

文档对象模型（DOM）允许您使用 JavaScript 动态创建 HTML 的几乎全部文档内容。 script元素与页面其他元素一样，可以非常容易地通过标准 DOM 函数创建：

var loadScript = function(url) {
 var s = document.createElement('script');
 s.type = 'text/javascript';
 s.async = 'true';
 s.src = url;
 document.getElementsByTagName('head')[0].appendChild(s); 
}
// 加载js文件脚本
loadScript('sleep.php');
loadScript('demo.js');

在浏览器中加载的情况：


图3-1 下载阻塞load事件


图3-2 执行阻塞load事件


图3-3 IE9不阻塞load事件

小结

async和script动态加载在现代浏览器中加载的情况是一致的。前者使用简单，后在兼容性方面更好。 异步加载文件还有很多方法，ajax(会受到同源限制)、iFrame、img…

您可能感兴趣的文章:

相关文章

  • 完美解决phpexcel导出到xls文件出现乱码的问题

    完美解决phpexcel导出到xls文件出现乱码的问题

    下面小编就为大家带来一篇完美解决phpexcel导出到xls文件出现乱码的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • thinkphp 验证码 的使用小结

    thinkphp 验证码 的使用小结

    thinkPHP中Verify类可以支持验证码的生成和验证功能，本文就给大家简单讲解下verify类生成验证码以及验证功能的实现方法，希望大家能够喜欢。
    2017-05-05
  • php使用socket简单实现通信功能

    php使用socket简单实现通信功能

    socket只不过是一个数据结构。使用这个socket数据结构去开始一个客户端和服务器之间的会话。服务器是一直在监听准备产生一个新的会话。当一个客户端连接服务器，它就打开服务器正在进行监听的一个端口进行会话
    2023-03-03
  • PHP中串行化用法示例

    PHP中串行化用法示例

    这篇文章主要介绍了PHP中串行化用法,结合实例形式分析了php使用serialize与unserialize函数实现串行化与反串行化操作的相关技巧,需要的朋友可以参考下
    2016-11-11
  • PHP中isset、empty的用法与区别示例详解

    PHP中isset、empty的用法与区别示例详解

    这篇文章主要给大家介绍了关于PHP中isset、empty的用法与区别的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • thinkphp3.0 模板中函数的使用

    thinkphp3.0 模板中函数的使用

    thinkphp3.0 模板中函数的使用,不是所有的变量都能使用函数
    2012-11-11
  • php 无限分类的树类代码

    php 无限分类的树类代码

    php tree 无限分类代码，需要的朋友可以参考下。
    2009-12-12
  • PHP isset()函数使用方法详解

    PHP isset()函数使用方法详解

    isset()函数是PHP中的内置函数，用于确定是否声明了变量且其值不等于NULL，本文将详细给大家介绍PHP isset()函数的具体使用方法，有感兴趣的同学可以跟着小编一起来学习
    2023-07-07
  • PHP图片加水印实现方法

    PHP图片加水印实现方法

    这篇文章主要介绍了PHP图片加水印实现方法,涉及php图片的读取、水印处理及图形生成等操作技巧,需要的朋友可以参考下
    2016-05-05
  • php封装的mysqli类完整实例

    php封装的mysqli类完整实例

    这篇文章主要介绍了php封装的mysqli类,结合完整实例形式分析了php针对mysqli操作类的定义与使用技巧,需要的朋友可以参考下
    2016-10-10

最新评论