JS文件加载:比较async和DOM Script

时间:2022-08-30 20:35:36

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
JS文件加载:比较async和DOM Script图1-1. 下载阻塞DomReady

JS文件加载:比较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>

在浏览器中加载的情况:
JS文件加载:比较async和DOM Script图2-1 异步下载 不阻塞DomReady 阻塞load事件

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

JS文件加载:比较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');

在浏览器中加载的情况:
JS文件加载:比较async和DOM Script图3-1 下载阻塞load事件

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

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

小结

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

参考链接:
http://ie.microsoft.com/TestDrive/Performance/AsyncScripts/Default.html
http://ued.ctrip.com/blog/?p=3121
http://blog.jobbole.com/47304/
http://www.infoq.com/cn/articles/browser-resource-loading-optimization

JS文件加载:比较async和DOM Script的更多相关文章

  1. js文件加载优化

    在js引擎部分,我们可以了解到,当渲染引擎解析到script标签时,会将控制权给JS引擎,如果script加载的是外部资源,则需要等待下载完后才能执行. 所以,在这里,我们可以对其进行很多优化工作. ...

  2. 前端设计中关于外部js文件加载的速度优化

    在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...

  3. js文件加载太慢,JavaScript文件加载加速

    原文出自:https://blog.csdn.net/seesun2012 js脚本加载太慢,JavaScript脚本加载加速(亲测有效) 测试背景: JS文件大小:6.1kB 传统形式加载js文件: ...

  4. 【转】html、css、js文件加载顺序及执行情况

    原链接:http://www.cnblogs.com/Walker-lyl/p/5262075.html 今天看书,看到html,css,js加载执行情况,发现自己并不是真正的了解,网上搜了半小时依然 ...

  5. html、css、js文件加载顺序及执行情况

      HTML页面加载和解析流程 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head& ...

  6. js文件加载执行顺序

    转自:http://blog.163.com/water_down/blog/static/170276590201111711243458/ <script type="text/j ...

  7. js模块加载详解

    看着java中各种import加载,在回过头来看看javascript还在自己造*,写各种XX的模块加载框架,ECMASCRIPT6不知什么时候能够普及.不过DT归DT,该学的还是要学. 一 同步加 ...

  8. 实现简单的 JS 模块加载器

    实现简单的 JS 模块加载器 1. 背景介绍 按需加载是前端性能优化的一个重要手段,按需加载的本质是从远程服务器加载一段JS代码(这里主要讨论JS,CSS或者其他资源大同小异),该JS代码就是一个模块 ...

  9. 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件&comma;可以配置文件后辍,防止浏览器缓存

    js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和 ...

随机推荐

  1. &lbrack;LeetCode&rsqb; Assign Cookies 分点心

    Assume you are an awesome parent and want to give your children some cookies. But, you should give e ...

  2. HTTP权威指南阅读笔记三:HTTP报文

    报文的组成部分 报文由三部分组成:对报文进行描述的起始行(start line).包含属性的首部(header),以及可选的.包含数据的主体(body)部分. 请求报文格式 <method&gt ...

  3. Activiti 查看流程图

    package com.mycom.processDefinition; import java.io.File; import java.io.IOException; import java.io ...

  4. poj3252

    好了,我的数论渣爆了………… 首先[n,m]内的round number显然就是f[m]-f[n-1] 即问0~x内有多少round number: 设x的二进制位数为t: 首先很好分析出在这个范围 ...

  5. 2014年度辛星css教程夏季版第六节

    这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行, ...

  6. lufylegend库 鼠标事件 循环事件 键盘事件

    lufylegend库 鼠标事件 循环事件 键盘事件 <!DOCTYPE html> <html lang="en"> <head> <m ...

  7. 第五篇:数据备份、pymysql模块

    http://www.cnblogs.com/linhaifeng/articles/7525619.html#_label3 一 IDE工具介绍 生产环境还是推荐使用mysql命令行,但为了方便我们 ...

  8. Hibernate主键生成策略及选择

    1 .increment:适用于short,int,long作为主键,不是使用数据库自动增长机制 这是hibernate中提供的一种增长机制 在程序运行时,先进行查询:select max(id) f ...

  9. &lbrack;CodeForces 372A&rsqb; Counting Kangaroos is Fun

    题目链接:http://codeforces.com/problemset/problem/372/A 二分思想 AC代码: #include <cstdio> #include < ...

  10. 深入理解Java中的IO

    深入理解Java中的IO 引言:     对程序语言的设计者来说,创建一个好的输入/输出(I/O)系统是一项艰难的任务 < Thinking in Java >   本文的目录视图如下: ...