async和DOM Script文件加载比较


Posted in PHP onJuly 20, 2014

目前我用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

async和DOM Script文件加载比较
图1-1. 下载阻塞DomReady

async和DOM Script文件加载比较
图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>

在浏览器中加载的情况:

async和DOM Script文件加载比较
图2-1 异步下载 不阻塞DomReady 阻塞load事件

async和DOM Script文件加载比较
图2-2 执行阻塞load事件

async和DOM Script文件加载比较
图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');

在浏览器中加载的情况:

async和DOM Script文件加载比较
图3-1 下载阻塞load事件

async和DOM Script文件加载比较
图3-2 执行阻塞load事件

async和DOM Script文件加载比较
图3-3 IE9不阻塞load事件

小结

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

PHP 相关文章推荐
建立动态的WML站点(一)
Oct 09 PHP
一些 PHP 管理系统程序中的后门
Aug 05 PHP
PHP数组实例总结与说明
Aug 23 PHP
PHP中几种常见的超时处理全面总结
Sep 11 PHP
Linux编译升级php的详细方法
Nov 04 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
Jun 13 PHP
使用PHP编写发红包程序
Jul 22 PHP
非常经典的PHP文件上传类分享
May 15 PHP
mac系统下为 php 添加 pcntl 扩展
Aug 28 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
Jul 10 PHP
Laravel 前端资源配置教程
Oct 18 PHP
XAMPP升级PHP版本实现步骤解析
Sep 04 PHP
Eclipse的PHP插件PHPEclipse安装和使用
Jul 20 #PHP
php多任务程序实例解析
Jul 19 #PHP
php实现斐波那契数列的简单写法
Jul 19 #PHP
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
Jul 19 #PHP
完善CodeIgniter在IDE中代码提示功能的方法
Jul 19 #PHP
CodeIgniter中实现泛域名解析
Jul 19 #PHP
php实现建立多层级目录的方法
Jul 19 #PHP
You might like
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
php 删除一维数组中某一个值元素的操作方法
2018/02/01 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
JavaScript在多浏览器下for循环的使用方法
2012/11/07 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
Node.js Mongodb 密码特殊字符 @的解决方法
2017/04/11 Javascript
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
2018/06/08 Javascript
修改vue+webpack run build的路径方法
2018/09/01 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
jquery validate 实现动态增加/删除验证规则操作示例
2019/10/28 jQuery
JS实现秒杀倒计时特效
2020/01/02 Javascript
uniapp实现可以左右滑动导航栏
2020/10/21 Javascript
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
深入浅析Python获取对象信息的函数type()、isinstance()、dir()
2018/09/17 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
Java基础面试题
2014/07/19 面试题
关于毕业的广播稿
2014/01/10 职场文书
求职意向书范文
2014/04/01 职场文书
个人投资计划书
2014/05/01 职场文书
如何写贫困证明申请书
2014/10/29 职场文书
慰问信范文
2015/02/14 职场文书
早恋主题班会
2015/08/14 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
Java 在线考试云平台的实现
2021/11/23 Java/Android