news 2026/7/5 3:37:38

如何确保JavaScript的执行顺序 – 之jQuery.html深度分析

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
如何确保JavaScript的执行顺序 – 之jQuery.html深度分析

在上一篇文章《如何确保JavaScript的执行顺序 - 之实战篇》中,我们发现jQuery的html函数能够确保动态加载的JavaScript按照引入顺序执行。

我们先来简单回顾下HTML源代码(test2.htm):

<html>

<head>

<title></title>

<script src="js/jquery-1.4.4.js" type="text/javascript"></script>

<script>

$(function(){

$('#container').html('<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text\/javascript"><\/script>' + '<script>alert(typeof(jQuery.ui));<\/script>');

});

</script>

</head>

<body>

<div id="container">

</div>

</body>

</html>

2. 调试,单步跟进

逐行分析jQuery源代码是一件相当枯燥的事情。我这里会以test2.htm为目标,调试进入jQuery源代码。

1) 首先在html: 打一个断点,刷新页面

这里的value是字符串:"<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text/javascript"></script><script>alert(typeof(jQuery.ui));</script>"

我们来看会进入那个条件分支:首先看看rnocache是啥?

可见value中含有 <script 字符串,不会进入第二个条件分支。

2) 进入html函数的最后一个条件分支

来看看append函数:

3) 进入domManip函数

继续单步调试,发现目标,这里有对scripts的长度判断:

应该是已经分析了输入字符串,并提取了其中的script标签,我们来看下这里的局部变量scripts的内容:

4) 发现目标

这里的两个局部变量scripts和evalScript是我们重点需要关注的,我们分别来看下:

scripts,这是一个数组,包含两个script标签:

[<script src=​"./​service.ashx?file=js/​jquery-ui.js&delay=2000" type=​"text/​javascript">​</script>​

, <script>​alert(typeof(jQuery.ui));​</script>​]

evalScript,这是一个函数,通过jQuery.each函数来调用,上述数组中的每个值都会作为参数传到这个函数中执行:

function evalScript( i, elem ) {

if ( elem.src ) {

jQuery.ajax({

url: elem.src,

async: false,

dataType: "script"

});

} else {

jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" );

}

if ( elem.parentNode ) {

elem.parentNode.removeChild( elem );

}

}

3. 哦,明白了

通过上面的分析,我们清楚的看到jQuery.html函数会首先把其中的script检索出来,然后对于每个script标签应用evalScript函数。

在这个函数中,对于外部JavaScript个内联JavaScript,进行了不同的处理。

1) jQuery.html如何处理字符串中的外部script标签

jQuery.ajax({

url: elem.src,

async: false,

dataType: "script"

});

对于外部script标签,比如:<script src="./service.ashx?file=js/jquery-ui.js&delay=2000" type="text/javascript"></script>,jQuery采用了同步Ajax方案(async: false)。这也是在各种不同浏览器中能够保证动态JS的加载顺序的关键所在。

2) jQuery.html如何处理字符串中的内联script标签

jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" );

来看下globalEval函数的定义:

由此可见,对于内联的script标签,jQuery通过在head中创建script标签来执行。

4. 后记

目前来看,一切来龙去脉似乎清晰可见。那么大家有没有考虑过,如果动态加载加载不同域名下(Cross-Domain)的JavaScript文件,jQuery还能确保在所有浏览器下的JavaScript的执行顺序吗?

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/5 3:37:18

爬虫代理 IP 池搭建与管理——从采集到自动切换

爬虫被网站封 IP 是家常便饭。每次被封就去手动换 IP 效率太低&#xff0c;正确的做法是搭建一个代理 IP 池——自动采集、自动验证、自动切换。 一、代理池的整体架构 代理来源&#xff08;采集/购买&#xff09;↓ 存入代理池&#xff08;Redis/数据库&#xff09;↓ 定时验证…

作者头像 李华
网站建设 2026/7/5 3:36:53

Bellman方程 - RL强化学习中价值估计的数学根基

TL;DR Too Long; Didn’t Read&#xff0c;太长没仔细看 S status A action R reward下标 a~π&#xff1a;读作 a 服从分布 π a&#xff1a;action&#xff0c;智能体当前选择的动作 π&#xff1a;Policy&#xff08;策略&#xff09;&#xff0c;大模型 / 强化学习里就是策…

作者头像 李华
网站建设 2026/7/5 3:35:52

sqlmap的使用以及如何避免轰炸式扫描(靶场)

1.直接上靶场2.然后我们打开kali&#xff0c;打开终端&#xff0c;输入&#xff1a;sqlamp -u “http://target.com" --forms -batch (先别急&#xff01;&#xff01;)这个时候sqlmap就开始工作了&#xff0c;但是这种做法是十分危险的&#xff0c;因为这种指令是让sqlma…

作者头像 李华
网站建设 2026/7/5 3:35:33

手把手教你用Python调用视频元数据解析API:从注册到生产级封装

为什么需要视频元数据解析接口&#xff1f; 在日常开发中&#xff0c;我们经常需要处理视频链接——无论是爬取视频详情、搭建视频聚合应用&#xff0c;还是做内容审核或数据统计&#xff0c;视频元数据&#xff08;Metadata&#xff09; 都是核心信息。元数据通常包括&#x…

作者头像 李华
网站建设 2026/7/5 3:32:40

使用更有意义的命名

在大部分编程活动中&#xff0c;我们都是在给各种各样的元素来命名&#xff0c;如果你取了一个好名字&#xff0c;不仅能让元素的职责马上清晰起来&#xff0c;而且能使代码更好维护。在命名的时候&#xff0c;注意尽量使用声明方式的词语&#xff0c;不要用实现来命名&#xf…

作者头像 李华
网站建设 2026/7/5 3:31:18

我现在有一些工具类,我应该不应该做自己的框架?

那框架完全是废物吗&#xff1f;非也。能产生这种东西&#xff0c;就表明它必定有它自己的用途。我们有一个业务&#xff0c;这个业务有它自己的模型、规则、流程等等。但是有些不确定的东西会未来才接进来&#xff0c;那么我们就非得有一个框架不可&#xff1a;比如图形界面就…

作者头像 李华