动态添加的带有src属性的script元素不会在src中加载js文件

。这是因为动态添加的script元素会被浏览器立即执行，而不会等待外部js文件加载完成。这种行为可以通过以下步骤来解释：

创建一个script元素：使用JavaScript的createElement方法创建一个script元素节点。
设置src属性：将src属性设置为要加载的外部js文件的URL。
添加到文档中：将script元素添加到文档中，通常是通过将其插入到head或body标签中。
立即执行：一旦script元素被添加到文档中，浏览器会立即开始加载外部js文件，并且不会等待文件加载完成。
执行脚本：一旦script元素被添加到文档中，浏览器会立即执行script元素中的代码，而不会等待外部js文件加载完成。

由于动态添加的script元素会立即执行，而不会等待外部js文件加载完成，因此如果外部js文件中的代码依赖于该文件的加载，可能会导致错误或未定义的行为。为了解决这个问题，可以使用回调函数或事件监听器来确保在外部js文件加载完成后再执行相关代码。

腾讯云相关产品和产品介绍链接地址：

云函数（Serverless）：https://cloud.tencent.com/product/scf
云开发（CloudBase）：https://cloud.tencent.com/product/tcb
云存储（COS）：https://cloud.tencent.com/product/cos
云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
人工智能（AI）：https://cloud.tencent.com/product/ai

相关·内容

一篇文章带你搞定JavaScript 性能调优

带有 defer 属性的标签可以放置在文档的任何位置。...当一个带有 defer 属性的 JavaScript 文件下载时，它不会阻塞浏览的其他进程，因此这类文件可以与其他资源文件一起并行下载。...·任何带有 defer 属性的元素在 DOM 完成加载之前都不会被执行，无论内嵌或者是外链脚本都是如此。...从加载方式上优化：动态添加脚本元素把代码以动态的方式添加的好处是：无论这段脚本是在何时启动下载，它的下载和执行过程都不会阻塞页面的其他进程，我们甚至可以直接添加带头部 head 标签中，都不会影响其他部分...采用无阻塞下载 JavaScript 脚本的方法：使用标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）；使用动态创建的元素来下载并执行代码

6781 0

高性能Javascript--脚本的无阻塞加载策略

同样的事情发生在使用 src 属性加载 JavaScript 的过程中。浏览器必须首先下载外部文件的代码,这要占用一些时间,然后解析并运行此代码。... 一个带有defer属性的标签可以放置在文档的任何位置，它会在被解析时启动下载...document.body.appendChild(script); 新的元素加载file1.js源文件。...最后一步src属性，并将javascript文件添加到head。动态脚本加载是非阻塞Javascript下载中最常用的模式，因为它可以跨浏览器，而且简单易用。　　...这样做实际上会创建一个带有内联代码的元素，一旦新的元素被添加到文档，代码将被执行，并准备使用。

9643 0

在HTML中使用JavaScript

当网页中嵌入了JavaScript脚本，浏览器加载网页时，就会执行脚本，从而操作浏览器，实现各种动态效果 JavaScript代码嵌入网页的方法 1、元素直接嵌入代码 <script type...; } 2、元素加载外部脚本标签相关属性...网页解析过程中，发现带有defer属性的元素浏览器继续往下解析HTML网页，同时并行下载元素加载的外部脚本浏览器完成解析HTML网页，此时再回过头执行已经下载完成的脚本... async属性的运行流程：浏览器开始解析HTML网页解析过程中，发现带有async属性的标签浏览器继续往下解析...async设置为false可以保证b.js在a.js后面执行在这段代码后面加载的脚本文件，会等在b.ja执行完成后再执行相关知识点总结包含在标签内部的JavaScript代码，将被从上到下一次解析

1.4K3 0

高性能的JavaScript--加载和执行

这个defer属性指明元素中所包含的脚本不打算修改DOM,因此代码可以稍后执行（适用于IE4以上浏览器）带有该属性的JavaScript文件在被解析时启动下载，但代码不会被执行，直到DOM加载完成，它不会阻塞浏览器的其他处理过程，所以这些文件可以与页面的其他资源一起并行下载...2.动态脚本元素文档对象模型dom允许使用JavaScript动态创建HTML的几乎全部文档内容。其根本在于元素与页面其他元素没有什么不同。 ...如果收到一个有效的响应，那么就创建一个新的元素，将它的文本属性设置为从服务器接受到的resposeText字符串。这样做实际上会创建一个带有内联代码的元素。...采用无阻塞下载 JavaScript 脚本的方法：使用标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）；使用动态创建的元素来下载并执行代码

7732 0

浏览器特性

需要注意的是：这两个属性不能用在内嵌脚本中，只能用在外联脚本标签上。带有 defer 属性的脚本将在文档完成解析后，触发 DOMContentLoaded 事件之前执行。.../async.js"; document.body.appendChild(script); 动态生成的标签相当于带有 async 属性的 <script...当被插入到文档中后脚本就会自动执行。元素的 load 事件动态生成的标签可以接受一个 onload 事件，表示脚本加载完成时会被触发。...; } document.body.appendChild(script); 通过 XMLHttpRequest 实现脚本注入通过 Ajax 请求也可以动态加载 js...这不仅包括直接加载到元素中的 URL ，还包括可以触发脚本执行的内联脚本事件处理程序（onclick）； frame-src 指定有效来源的； img-src 指定图像和图标的有效来源

1.3K1 0

《Javascript高级程序设计（第四版）》学习笔记（一）第1、2章

6372 0

Java与JQuery：探秘事件绑定、入口函数与样式控制

-- JQuery代码示例：为按钮添加点击事件 -->// myscript.js代码示例：使用入口函数$(document).ready(function () { // 在页面加载完毕后执行的代码...修改样式属性JQuery提供了丰富的方法来修改页面元素的样式属性，例如改变颜色、大小、位置等。通过css()方法，我们可以动态地改变页面元素的样式，实现页面的动态效果。...-- JQuery代码示例：添加和移除样式类 -->

1730 0

【Java 进阶篇】Java与JQuery：探秘事件绑定、入口函数与样式控制

-- JQuery代码示例：为按钮添加点击事件 --> // myscript.js代码示例：使用入口函数 $(document).ready(function () { // 在页面加载完毕后执行的代码...修改样式属性 JQuery提供了丰富的方法来修改页面元素的样式属性，例如改变颜色、大小、位置等。 <!...添加和移除样式类除了直接修改样式属性外，JQuery还支持添加和移除样式类。这使得样式的管理更加清晰和灵活。 <script

2546 0

第86节：Java中的JQuery基础

">hello jquery代码 $("p").show() jquery库可以通过一行简单的代码添加到网页中，库包含html元素选取和操作，css操作，html事件函数，JavaScript特效和动画...网页中添加jquery库简单案例： <head...") class="kk" 的元素属性选择器 $("[href]") 选取带有 href 属性的元素 $("[href='#']") 选取带有 href 值等于 "#" 的元素 $("[...") 所有带有以 ".jpg" 结尾的 href 属性的属性事件 jquery事件处理函数是jquery中和核心函数。...文件： <script type="text/javascript" src

2.9K3 0

echarts3 地图只显示南沙群岛，刷新页面显示正常

ECharts 3 中因为地图精度的提高，不再内置地图数据增大代码体积，使用地图时有两种方式： JavaScript 引入示例这种方式引入，这也就是图1中Type列所示的script方式，这是一种阻塞方式，遇到这种script...("head")[0].appendChild(script); 新的元素加载 script1.js 源文件。...此文件当元素添加到页面之后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程--异步。...如果收到了一个有效的响应，那么就创建一个新的元素，将它的文本属性设置为从服务器接收到的 responseText 字符串。这样做实际上会创建一个带有内联代码的元素。

1.5K4 0

2.HTML根部头部主体标签元素介绍

HTML文档中的元数据 : 定义了客户端的js脚本文件：定义了客户端不支持或者禁用js时执行的替代内容 : 定义了HTML文档的样式文件温馨提示...答: 在页面加载完成的时候，head 标签里的内容，是不会在页面中显示出来的。...在多文件时，页面可能出现长白屏时间的问题。 --> <!...-- 示例3.使用 defer 属性的script标签（推迟执行脚本）如果标签带有 defer 属性，浏览器会另外开辟一个进程来加载 js 资源，而不会阻塞 html 加载注：带有 defer 属性的...-- 示例4.使用 async 属性的script标签（异步执行脚本）如果标签带有 async 属性，浏览器会另外开辟一个进程来加载 js 资源，资源加载完成后会暂停 html 渲染，并执行 script

1.2K2 0

Svelte中文文档 1基础介绍

理解组件在Svelte中，一个应用程序由一个或更多的组件组成。组件是一个可复用的独立的代码块，他由HTML，CSS，JavaScript封装而成。文件后缀写为.svelte。...如下图： 3.动态属性你可以使用花括号{}来控制元素属性，就像你使用它来控制文本一样。...我们的图片缺少一个src属性，让我们使用下面的命令给他添加一个：这样很棒，但是Svelte给了我们这样一个警告： A11y：img标签应该有一个alt属性当我们构建一个应用程序时...---一定要记得在script标签内申明name这个变量。简写属性由于我们在编写代码的过程中，属性名和属性值名称相同的情况下并不少见，例如src={src}。... 重要的是，这些样式是局部的作用域当前组件。他不会在你的应用程序内，改变其他地方的元素的样式。我们将会在下面的内容了解到。

1.8K7 1

JavaScript的引入方式和基本属性

js的引入方式，最常用的有两种： 1、在页面中直接写入： alert("www.w3h5.com"); 2、引入外部js文件：通过 src 引入，此时 script... src='test.js'>"); 2、动态改变已有 script 的 src 属性： s1.src="test.js"; 3、动态创建script元素： var oHead = ... = "text/javascript"; oScript.src="test.js"; oHead.appendChild(oScript); 其实原理就是利用DOM动态的引入一个js到文件中来，就能和原有的...; alert("主页面动态加载a.js并取其中的变量：" + str); 引入js的基本属性 1、js引入时会有一个 type 属性，来告诉浏览器引入的是一个js文件，这个属性是默认的，所以不写也可以... 2、异步加载 async ，js文件加载完成就可以往下执行。

2.2K0 0

桌面端前端性能优化策略

标签直接引入在 HTML 文件中引用外部资源可以有效利用浏览器的静态资源缓存避免页面中空的 href 和 src 当 link 标签的 href 属性为空，或 script、img、iframe 标签的...src 属性为空时，浏览器在渲染的过程中仍会将 href 属性或 src 属性中的空内容进行加载，直至加载失败，这样就阻塞了页面中其他资源的下载进程，而且最终加载到的内容是无效的，因此要尽量避免 //...例如：使用 async 时，加载和渲染后续文档元素的过程和...引用加载 CSS CSS 中的 @import 可以从另一个样式文件引入样式，但应该避免这种用法，因为这样会增加 CSS 资源加载的关键路径长度，带有 @import 的 CSS 样式需要在 CSS...，应该尽量避免使用它，可以考虑使用列表元素 ul 代替尽量使用异步的方式动态添加 iframe，因为 iframe 内资源的下载进程会阻塞父页面静态资源的下载与 CSS 及 HTML DOM 的解析

2K2 0

【Java 进阶篇】JavaScript 与 HTML 的结合方式

标签内定义了一个JavaScript函数greet()，并在元素的onclick属性中调用该函数。...; } 在这个例子中，我们将JavaScript代码放入了一个名为script.js的外部文件，并通过标签的src属性引入该文件。...1.3 异步和延迟加载可以通过添加async或defer属性来改变脚本的加载方式： async：脚本将异步加载，不会阻止HTML解析。脚本将在下载完成后立即执行，不保证执行顺序。...onload：文档加载完成时触发。你可以使用内联方式或外部文件方式添加事件处理程序。以下是一个使用内联方式的示例： <!...DOM 操作文档对象模型（DOM）是HTML和XML文档的编程接口，它允许JavaScript通过操作文档的元素和属性来动态改变页面内容。

6744 0

Hexo异步加载方案

写在最前在博客魔改过程中，不可避免的会引入大量的第三方脚本（js），而基于页面读取js的加载顺序，每当浏览器在加载html的过程中遇到js代码片段这样的标签时，浏览器会暂停继续构建...至于外部脚本这样的写法，更是要先下载脚本，然后再执行，之后才能继续处理剩余的页面。无形中，多出了一大把的加载时间。...因此可以通过给添加defer和ansyc属性来实现异步加载，调整js的加载时间和顺序，确保浏览器构建HTML的过程一切顺利。...这个很适合使用到Vue和jquery等js框架的js脚本，给它们添加defer属性以后，可以确保HTML加载完毕，且js下载完毕后，各个js脚本继续按照引入的顺序执行，从而确保不会因为依赖缺失而报错。...推测是由于部分HTML元素需要由js动态写入，抑或部分整合在各个pug中的script片段无法添加defer导致。

1.7K2 0

浏览器渲染页面与DOM相关常见的面试题以及问题

对于动态创建的link标签不会阻塞其后动态创建的script的加载与执行，不管script标签是否具有async属性。 js添加async属性之后，script加载的外部文件成为了异步加载，这时相当于它于原本的html解析过程同步进行。...另外，如果它要输出动态的dom节点，就无法保证节点的位置，因为它添加的节点，是在html已解析的节点下顺序添加的。... js添加defer属性之后，script加载的外部文件成为了异步加载，执行是同步的...DOM的作用 DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建，移动或修改。

1.2K3 0

JavaScript冷门知识

直接在script标签内写JS代码在另一个文件中写JS代码，再引入那么，如果两种方式一起用会怎样呢？...有 defer属性的话，会异步加载js文件，即和加载渲染后续文档元素并行进行。.../js/mytest3.js"> 可以发现，任何的元素都没有加载就开始执行js代码了，也就是说js加载会阻塞元素的加载和渲染 defer属性 <script defer src="....使用 defer属性的 js代码会按顺序执行 async属性 <script async src="....和 defer属性来实现异步加载js外，也可以通过动态创建脚本的形式来实现。

9591 0

jqueryjsonajax

jQuery 使用 XPath 表达式来选择带有给定属性的元素。...$("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!...='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。...类：this.变量（内部定义成员变量）【js中的两种集成方式】对象冒充：apply和call（把非对象方法的函数当做成员用，apply使用参数数组），可以实现多继承原型链继承：类型原型...文件） js相互调用：<script language="JAVASCRIPT" src='b.js？

1.9K3 0

前端面试实录HTML篇

• 添加 defer 或 async： • 有 defer: 加载其他文档和 js 脚本会同时进行的，但在此过程中 js 脚本是不执行的...js 脚本的执行会在加载解析完所有的元素后才会执行。... • 有 async: 加载其他文档和 js 脚本会同时进行，但在此过程中，js 脚本会并行加载——编译——执行的。... • 区别： • 在于 js 脚本加载完成后何时执行，defer 不会在加载后立即执行，而 async 会在加载后立即执行...defer 符合是最接近我们对于 js 脚本执行的理解 • 如果有添加多个 defer 属性的 js 脚本，他们会按照加载顺序执行，而 async，他们只要加载完成后就会立刻执行 • 相同点： • 在加载这块是相同的

1041 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云