未加星标

JS的加载、执行顺序

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

我们通常会认为,在html中,位置靠前的js,会优先加载、执行。这句话大部分情况下正确,但是随着浏览器的升级调整,新特性的加入,这个加载、执行顺序也越来越复杂。

首先我们看一个最简单的情况

<scriptsrc="a.js"></script> <scriptsrc="b.js"></script>

chrome下,为了减少等待时间,a,b会并行加载,但是执行时则会先a后b;并不是a加载,a执行,b加载,b执行的顺序。

async、defer的加入

关于async、defer功能及异同的介绍: 点击前往

async属性会让js并行加载,并在js加载完成后立即执行,也就是说执行顺序由加载速度定,而不是html中的先后顺序 defer属性js同样会并行加载,而执行时间点为文档解析完成后,按照html中的顺序执行,也就是说defer不影响执行顺序

所以如果代码是这样的

<scriptsrc="a.js"async></script> <scriptsrc="b.js"></script>

a,b同样并行加载,但此时如果是b先加载完,则b会优先执行;

动态插入脚本的执行顺序

例:

<scripttype="text/javascript"> var snode = document.createElement('script'); snode.src = 'a.js'; document.head.appendChild(snode); </script> <scripttype="text/javascript"> var snodeb = document.createElement('script'); snodeb.src = 'b.js'; document.head.appendChild(snodeb); </script>

对于支持async属性的浏览器,动态插入的外链脚本, 相当于默认具有async=true;也就是a.js, b.js 执行顺序不确定的;

如果需要让动态插入的脚本按插入顺序执行,可以显式设置 async = false;

<scripttype="text/javascript"> var snode = document.createElement('script'); snode.src = 'a.js'; snode.async = false; document.head.appendChild(snode); </script> <scripttype="text/javascript"> var snodeb = document.createElement('script'); snodeb.src = 'b.js'; snodeb.async = false; document.head.appendChild(snodeb); </script> 动态插入内联脚本

特殊场景下,我们会使用js动态往页面插入脚本,比如:

<scripttype="text/javascript"> var dn = document.createElement('script'); dn.text = 'console.log("dn")'; document.head.appendChild(dn); </script>

此动态插入的脚本并不会执行;

但是如果我们换一种方式,将其改成外链,但是url用一个data url来代替,则可以执行,比如:

<scripttype="text/javascript"> var dn = document.createElement('script'); dn.src='data:application/javascript,' + 'console.log("dn")'; document.head.appendChild(dn); </script> 脚本的执行与其onload事件执行的先后

例:

<scripttype="text/javascript"> function track(evt){ console.log(evt.type +' : '+ evt.target.src); } </script> <scriptsrc="c.js"onload="track(event)"></script>

执行后可以看出js加载完成后会优先完成解析,执行,然后才触发onload事件。内联脚本没有onload事件触发。如果我们要动态加载一个脚本,并在其加载执行完成后有回调,onload就可以派上用场了。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 浏览器
tags: gt,lt,script,js,document,加载,async,执行,text,dn,javascript,snodeb,snode,scripttype,src
分页:12
转载请注明
本文标题:JS的加载、执行顺序
本站链接:http://www.codesec.net/view/561330.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(44)