延迟脚本的那些事

最近看了javascript 高级程序设计第三版 和 高性能javascript  对于 延迟脚本好像有点出入(可能是我理解的出入,所以打算自己亲自测试一下 来证明  到底怎么回事)高级程序设计中对于defer的解释:这个属性的用途表明脚本在执行时不影响页面的构造 (脚本会被延迟到整个页面都解析完毕在运行)所以加上这个属性就是告诉浏览器在遇到这个属性的时候立即下载但是延迟去执行   html5规范如果有多个defer的外部脚本  那么按照出现的先后顺序来执行  所有支持html5 的浏览器都应该按照这个规则来执行 而且最重要的是defer 只适用与外部脚本 内嵌脚本只有ie4-ie7才支持

好了上代码 看一下到底是怎么回事  以代码为准

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>defer</title>
    <script src="js/defer.js" defer="defer"></script>
    <script src="js/defer1.js" defer="defer"></script>
</head>
<body>
    <p>这是p标签</p>
    <p>这是p标签</p>
    <p>这是p标签</p>
    <p>这是p标签</p>
    <p>这是p标签</p>
    <p>这是p标签</p>
    <p>这是p标签</p>
    <p>这是p标签</p>

    <script type="text/javascript">
    alert(1);
    window.onload=function  () {
        alert(2)
    }
    </script>
</body>

</html>

外部脚本咱们看一下 defer.js的代码

alert(3)

defer1.js的代码呢  继续看一下

alert(4);

和大家说一下执行的顺序   和测试环境

(1)环境 火狐 40.0.3版本

<1>顺序是  1  3  4  2

(2)测试环境是  ie  7  8  9

<2>顺序是 1 3  4  2

(3)测试环境是谷歌版本45.0.2454.93

<3>顺序是 1 3  4  2

总结: 经过不完全测试   出现的顺序都是一样的   从而可以得出来 以下结论

(1):  含有defer属性的外部脚本会按照出现的先后顺序依次执行 

(2): 含有defer属性的外部脚本会在 DOMContentLoaded事件之前执行(DOMContentLoaded:当所有DOM解析完以后会触发这个事件 firefox特有 就相当于jq代码 $(function(){}))

(3): 带有defer的属性的脚本不会阻塞浏览器的其他进程 因此可以与那个的其他资源并行下载

理解以上知识需要知道的内容(补充浏览器的运行机制)

1、执行并渲染html的进程遇到<script>时,无法确定脚本是否会影响文档内容,故下载与执行脚本会阻塞文档的解析与渲染。

即脚本的执行在默认情况下是同步阻塞的。

2、<script>标签的defer和async布尔属性(只需出现在标签里即可)

这两个属性都像在告诉browsers链接进来的脚本都不会使用document.write(),也不会生成文档内容,因此浏览器可以在下载脚本时继续解析和渲染文档

// 出现顺序是  1   3   4 2
    // 测试环境是 火狐 40.0.3

    // 测试环境是 ie9 ie7 ie8  出现顺序和 火狐一样

    // 总结  会在onload 之前进行

    // 测试环境谷歌45    顺序是 1  3  4 2

说完了defer再说一下 这个async 属性 (异步加载  )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>async</title>
    <script src="js/async.js" async></script>
    <script src="js/async1.js" async></script>
</head>
<body>

    <p>我是用来测试的</p>
    <p>我是用来测试的</p>
    <p>我是用来测试的</p>
    <p>我是用来测试的</p>
    <p>我是用来测试的</p>
    <p>我是用来测试的</p>
    <script type="text/javascript">
      alert(1)

      window.onload=function  () {
           alert(2);
      }

    </script>
</body>
</html>

js外部脚本 和以上的 defer一样 只不过是修改了一下 名字而已

看结果

 // 出现顺序是 4 3    1   2   火狐40.0.3版本

// 出现顺序是  3 4  1 2    ie 9 ie8  ie7


// 谷歌 1  4  3  2

标记为async属性的脚本不会保证他们的执行顺序 但是有一点可以保证就是肯定会在dom加载完毕之前执行

最后说一句  他们都是异步加载 只不过执行时机不同,最后偷了一张图 来说明一下他们的区别和类似之处 来作为最后的压轴 和结尾

时间: 2024-11-15 10:09:30

延迟脚本的那些事的相关文章

原生 JS 中 延迟脚本和异步脚本

一.延迟脚本 defer HTML4.0中为<script> 标签添加了个defer属性.属性的用途是表民脚本在执行时不会影响页面的构造. 脚本会被延迟到页面加载完毕的时候,执行.也就是当浏览器解析到</html> 标签后才会执行代码.在HTML5规范中,defer属性中适用于外部脚本. 而家了defer  的脚本文件会比DOMContentLoaded事件触发前执行. 二.异步脚本 async HTML5为<script>添加了个async属性.这个属性与defer属

javascript中的延迟脚本技术

<html> <head> <title>javascript中的延迟脚本技术<title> <script type="text/javascript" defer="defer" src="some.js"></script> <head> <body> <!-- 内容--> </body> <html> def

js的延迟脚本----defer与异步脚本----async

延迟脚本----defer: 一般而言,js的引入<script></script>被放在body的结束符之前,这主要是为了让页面的所有节点被加载完了之后在执行js代码,防止js获取dom节点失败的情况出现. 如果你一定要将<script></script>放在head中,又担心无法获取到dom节点的话,可以如以下代码形式定义延迟脚本defer: <script type="text/javascript" defer="

JavaScript值延迟脚本和异步脚本

Html 4.0为<script>标签定义了defer属性,这个属性的用途是表名脚本在执行时,不会影响页面的构造.也就是说,脚本会延迟到整个页面解析完毕之后在运行,因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行.但是有一种特殊情况,看如下代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C

延迟脚本

defer属性的用途是表明脚本在执行的时候不会影响页面的构造,即脚本会被延迟到整个页面都解析完毕后再运行.在<script>元素中设置该属性,相当于告诉浏览器立即下载,但延迟执行.如果有多个js文件都设置了defer属性,则按顺序执行.async和defer相似,async只适用于外部的脚本文件,如果有多个js文件都设置了async属性,未必按顺序执行,有可能后面的js文件 先于前面的js文件,所以应确定两个js文件不依赖.所以这时候最好还是把js文件放在body底部,并且放在</bod

非堵塞 延迟脚本 高性能

1.延迟解析 <script type="text/javascript" src="file1.js" defer></script>     defer告诉解析器该脚本不会修改Dom,可以迟点再解析执行 也可以写在网页内脚本 <script defer> alert("defer"); </script> 2.动态生成脚本连接 function loadScript(url, callback)

测试域名ping延迟脚本

#!/bin/bash if [ $# -lt 1 ]thenecho "Usage:avg file1"exit 1fiecho "====================`date`======================" >> result.txtfunction main { time=`ping -c 10 -i 0.1 -q $1 | egrep "^rtt" | awk -F/ '{print $5}'` [[ &

html5_延迟(defer)脚本与异步(async)脚本

延迟脚本: 诸如以下的html文档: <!Doctype html> <html> <head> <title>延迟脚本</title> <script src="defer.js"></script> </head> <body> <div id="target"></div> </body> </html>

JS之脚本延迟

自从开了博客,我就一下班回来匆匆吃完饭门一关等一开电脑一打开匆匆的研究东西,以至于朋友们都怀疑我是不是都得了自闭症 其实因为我有恐惧心理怕自己的技术哪天跟不上社会了,说到技术我觉得技术不求越新越好,但求越稳越好,就目前而言,前段框架五花八门,八面玲珑,一一都会 别吹牛了,在我看来找到自己的框架吃透它.不吹牛了,回归正题. ========================================================================================