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 相关文章推荐
PHP Zip解压 文件在线解压缩的函数代码
May 26 PHP
php学习笔记 PHP面向对象的程序设计
Jun 13 PHP
php学习笔记 面向对象的构造与析构方法
Jun 13 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
Aug 01 PHP
php使用codebase生成随机数
Mar 25 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
Jun 23 PHP
php用户注册时常用的检验函数实例总结
Dec 22 PHP
PHP微信红包生成代码分享
Oct 06 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
May 30 PHP
PHP设计模式之模板方法模式定义与用法详解
Apr 02 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
Apr 04 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
Dec 01 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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
PHP中实现图片的锐化
2006/10/09 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
JavaScript基础重点(必看)
2016/07/09 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
JS实现自定义状态栏动画文字效果示例
2017/10/12 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
python逐行读取文件内容的三种方法
2014/01/20 Python
使用Python标准库中的wave模块绘制乐谱的简单教程
2015/03/30 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
Python发送邮件测试报告操作实例详解
2018/12/08 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
Android interview questions
2016/12/25 面试题
企业趣味活动方案
2014/08/21 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
邀请函样本
2015/02/02 职场文书
个人总结与自我评价
2015/02/14 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
积极心理学课程心得体会
2016/01/22 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
扩展多台相同的Web服务器
2021/04/01 Servers
Oracle更换为MySQL遇到的问题及解决
2021/05/21 Oracle
SpringAop日志找不到方法的处理
2021/06/21 Java/Android