在HTML中动态添加js脚本标签元素-幕后会发生什么？

在HTML中动态添加js脚本标签元素后，会发生以下几个步骤：

解析：浏览器解析HTML代码时，遇到动态添加的js脚本标签元素会立即停止解析HTML，并开始下载该脚本文件。
下载：浏览器开始下载js脚本文件，这个过程是异步的，不会阻塞页面的加载。
编译：下载完成后，浏览器会对js脚本进行编译，将其转换为可执行的机器码。
执行：编译完成后，浏览器会执行js脚本中的代码。如果脚本中有全局变量或函数的定义，它们会被添加到全局作用域中。
影响页面：执行js脚本可能会对页面进行修改，例如添加、删除或修改DOM元素，修改样式等。这些修改会立即反映在页面上。

需要注意的是，动态添加的js脚本标签元素的加载和执行是异步的，因此不能保证脚本一定会在页面加载完成之前执行。如果需要确保脚本在页面加载完成后再执行，可以使用defer或async属性来控制脚本的加载和执行时机。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云云函数（SCF）、腾讯云云存储（COS）。

腾讯云云服务器（CVM）：提供弹性、安全、稳定的云服务器，可满足各种规模和业务需求。

腾讯云云函数（SCF）：无需管理服务器，按需运行代码的事件驱动型计算服务，可用于处理动态添加的js脚本标签元素的相关逻辑。

腾讯云云存储（COS）：提供安全可靠、低成本的云端存储服务，可用于存储动态添加的js脚本文件。

更多产品介绍和详细信息，请参考腾讯云官方网站：https://cloud.tencent.com/

相关·内容

网站性能优化(二)一定要将CSS置于顶部，JS置于底部吗？

“CSS文件在header中引入，JS文件在body底部引入”，这条建议在前端界几乎是黄金法则。首先，笔者声明，坚决支持这条法则！...误区：浏览器在解析完整个HTML才会渲染页面其实，“为达到更好的用户体验，render引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后，就会开始构建呈现树和设置布局。...一般，前端主要关心首屏（也就是可视区域内的页面）渲染速度，这也是，为什么要提倡“图片懒加载”的原因。 2. 误区：按照顺序依次下载CSS和JS文件其实外部脚本文件和CSS文件是并行下载的。...并且，尽量不要加载那些会频繁操作DOM节点定位或样式（尤其是首屏的DOM元素）的JS文件，否则，会导致页面做多次重排和重绘工作，影响渲染速度。那么，如何异步加载脚本或者CSS文件？...加载事件一般在window.onload事件中触发，这时，页面已经完全呈现（相应的资源文件下载完毕），只需要动态创建标签或者标签即可，如下（注意：动态加载文件也可以利用浏览器缓存

8414 0

浏览器渲染原理及流程

在一些高性能的电脑上也许还没什么，但是如果 Reflow 发生在手机上，那么这个过程是延慢加载和耗电的。可以在csstrigger上查找某个css属性会触发什么事件。...如果没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的HTML元素之前，也就是说不等待后续载入的HTML元素，读到就加载并执行。...值得注意的是，向 document 动态添加 script 标签时，async 属性默认是 true。...console.log(document.createElement("script").async); // true 所以，通过动态添加 script 标签引入 JavaScript 文件默认是不会阻塞页面的...避免强制同步布局事件的发生根据渲染流程，JS脚本是在layout之前执行，但是我们可以强制浏览器在执行JS脚本之前先执行布局过程，这就是所谓的强制同步布局。

4.5K3 2

【Web性能】Javascript 代码性能优化条目（一）

浏览器在解析HTML页面的过程中每遇到一个script标签，都会因执行脚本而导致一定的延时，因此最小化延迟时间将会明显改善页面的总体性能。...因此，避免这种情况，你需要向页面中逐步加载JS文件。无阻塞脚本的好处在于页面加载完成后才会加载JS代码。即，在window.load事件触发后才会下载脚本。...2 延迟脚本 HTML4中引入一个script标签扩展属性:defer。该属性指明元素所含的脚本不会修改DOM，代码能安全地延迟执行。同时，HTML5中引入async属性，用于异步加载脚本。...因为，一般而言，把新建的标签添加到标签里比添加到里保险，尤其是在页面加载过程中执行代码时更是如此。...当中的内容没有全部加载完成，IE可能会抛出一个“操作已终止”的错误信息。使用动态脚本加载文件，返回的代码通常会立即执行。但是，当代码只包含供页面其他脚本调用的接口时，就会出问题。

4992 0

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

响应 ; 浏览器开始渲染HTML，显示HTML 浏览器发送请求，以获取嵌入在HTML中的对象,在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签,这时，浏览器会发送一个获取请求来重新获得这些文件...构建过程中可能会产生的阻塞 html的代码，是从上到下一行行执行的，也就是说如果js代码写在head头里，且没有用加在window.onload方法里，那么他是无法读取到body里的标签的。...script标签会阻塞html解析，因为js可能会改变dom和css，因此浏览器会先解析script，避免浪费时间。要想避免阻塞的话，可使用defer和 async。...另外，如果它要输出动态的dom节点，就无法保证节点的位置，因为它添加的节点，是在html已解析的节点下顺序添加的。...事件监听器可以被添加到节点上并在给定事件发生时触发。什么是DOM渲染？ DOM渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。 DOM树的构建是文档加载完成开始的？

1.2K3 0

通过 DOM Clobbering 发现 GMail AMP4Email 的 XSS 漏洞

什么是 AMP4Email AMP4Email（也称为动态邮件）是 Gmail 的一项新功能，可以让电子邮件包含动态 HTML 内容。...尽管撰写包含 HTML 标签的电子邮件已经很多年了，但通常认为 HTML 仅包含静态内容，即某种格式，图像等，没有任何脚本或表单。AMP4Email 打算更进一步，允许电子邮件中包含动态内容。...AMP4Email 具有强验证器，简而言之，它是允许在动态邮件中使用的标签和属性的强大白名单。...AMP 验证器禁止使用任意脚本标签在使用 AMP4Email 并尝试各种方法绕过它时，我注意到标签中不允许 id 属性（图3）。 ?...最常被引用的解决方法是使用标签。标签的每个子元素都被添加为的属性，该属性的名称和的 name 属性相同。

1.1K2 0

什么是 JavaScript？

当浏览器加载一个 URL 地址时发生了什么事？ img 浏览器在读取一个网页时，代码（HTML, CSS 和 JavaScript）将在一个运行环境（浏览器标签页）中得到执行。...在这里需要明确的是：css 样式文件、网络图片、使用 script 标签加载且已添加了 async 或 defer 标记的 js 脚本，都是不会阻塞 HTML 页面解析的。有什么启示？...回流：当 js 加载完成后，会在页面的 HTML 和 CSS 全面准备好以后执行，如果 js 在 onload 事件中改变了某页面元素的大小，或者刚才没有加载完成的网络图片现在加载好了，则会触发页面回流...这给我们什么启示？如果页面中有动画，尽量往下放，往底部放，这里指在 HTML 标签中的位置。 image-20230602081007700 JS 是一种编译型语言，还是一种解释型语言？...内部在页面内部直接使用 script 标签添加： // 在此编写 JS 代码这和使用 style 标签在页面内添加样式代码是类似的： /

3042 0

JavaScript预备知识

ajax核心技术之一 ajax: 在浏览器中运行的js脚本，通过http请求异步地访问服务器组件，服务器组件返回xml文件或者json格式的数据，js接收后通过解析xml或json来局部刷新页面，提高用户体验...获取浏览器的一些相关信息 1.4 脚本调用策略 HTML 元素是按其在页面中出现的次序调用的，如果用 JavaScript 来管理页面上的元素（更精确的说法是使用文档对象模型 DOM），若 JavaScript...--添加 defer 属性的脚本将按照在页面中出现的顺序加载--> <script defer src...如果脚本需要等待页面解析，且依赖于其它脚本，调用这些脚本时应使用 defer，将关联的脚本按所需顺序置于 HTML 中。...; 将一个标签追加到父标签当中 2）父标签.removeChild(子节点); 删除子节点 3）父标签.insertBefore(newElement,targetElement); 在目标元素之前插入一个新元素

5041 0

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

> 　当浏览器遇到一个标签时,正如上面 HTML 页面中那样,无法预知 JavaScript 是否在标签中添加内容。...同样的事情发生在使用 src 属性加载 JavaScript 的过程中。浏览器必须首先下载外部文件的代码,这要占用一些时间,然后解析并运行此代码。..."text/javascript" src="file3.js"> 13 14 此代码展示了所推荐的标签在 HTML 文件中的位置...但诸如大型网页有大量的Js代码，保持源码短小并不总是一种最佳选择。So，非阻塞脚本应运而生，我们需要的是向页面中逐步添加javascript，某种程度上而言不会阻塞浏览器。...有几种方法可以使用非阻塞方式下载Javascript：为标签添加defer属性动态创建元素，用它下载并执行代码用XHR对象下载代码，并注入到页面通过上述策略，可以极大提高那些使用

9443 0

浏览器特性

标签 HTML中的标签用来加载外部脚本或者编写内联脚本。页面在执行时，遇到标签都会让页面等待脚本的解析和执行。...当被插入到文档中后脚本就会自动执行。元素的 load 事件动态生成的标签可以接受一个 onload 事件，表示脚本加载完成时会被触发。...组织脚本由于每个脚本都会阻塞页面渲染（当然除了有 defer 和 async 属性的标签）。那么在开发中应怎样改善这一情况呢？...把一段内嵌脚本放在标签之后会导致页面阻塞去等待样式表的下载，这样做是可以确保内嵌脚本在执行时能获得最精确的样式信息。 3. 浏览器渲染机制当打开一个网页时，浏览器都做了些什么？...script 标签中的 src 和 img 标签的 src 属性并没有跨域的限制，因此完全可以引入其他域下的图片和脚本。但要慎重，如果第三方脚本是恶意的，那么很可能会带来安全隐患。

1.3K1 0

HTML5 CSS3

答：Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。 9. HTML5 存储类型有什么区别？...js文件的形式获取js脚本，并且这个js脚本中的内容是函数调用，该函数调用的参数是服务器返回的数据，为了获取这里的参数数据，需要事先在页面中定义回调函数，在回调函数中处理服务器返回的数据，这就是解决跨域问题的主流解决方案...异步加载的方案：动态插入 script 标签 2. 通过 ajax 去获取 js 代码，然后通过 eval 执行 3. script 标签上添加 defer 或者 async 属性 4....然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术 14、什么是...答案：在js中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行

3.4K4 0

再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

如果页面中静态的写有script标签，DOMContentLoaded事件需要等待JS执行完才触发。而且script标签中的JS需要等待位于其前面的CSS的加载完成。...这就意味着：在执行中内容时，浏览器会切换到JavaScript引擎所在的线程，此时渲染引擎所在的线程会阻塞，故其后元素的解析和渲染会暂停。...这时候如果脚本执行时间太长的话，不仅后面的元素会一直看不到，对DOM的解析工作也会一直完不成。用户会陷入焦急的等待中。...这样的好处就是，用户能即使看到页面上的UI元素，而防止出现了浏览器白屏等现象。 2、动态脚本元素-不重要的js动态插入。 ...defer或asyn两个属性(html4.0中定义了defer；html5.0中定义了async) 如果 script 标签中包含 defer，那么这一块脚本将不会影响 HTML 文档的解析，而是等到

1.6K2 0

高频前端开发面试问题

在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。...`为`hidden`或者auto IE 8以下版本的浏览器中的盒模型有什么不同 IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框 DOM操作——怎样添加、移除、移动、复制、创建和查找节点...：从输入 URL 到浏览器接收的过程中发生了什么事情？...而当把嵌入JS放到CSS前面，就不会出现阻塞的情况了。根本原因：因为浏览器会维持html中css和js的顺序，样式表必须在嵌入的JS执行前先加载、解析完。...（1）defer属性：支持IE4和fierfox3.5更高版本浏览器（2）动态脚本元素：文档对象模型（DOM）允许你使用js动态创建HTML的几乎全部文档内容。

1.4K1 0

最详尽的浏览器页面渲染机制分析

在这一过程中，浏览器得递归 CSSOM 树，然后确定具体的元素到底是什么样式。注意：CSS匹配HTML元素是一个相当复杂和有性能问题的事情。...当然在当下，并不是说 script 标签必须放在底部，因为你可以给 script 标签添加 defer 或者 async 属性（下文会介绍这两者的区别）。...defer 与相比普通 script，有两点区别：载入 JavaScript 文件时不阻塞 HTML 的解析，执行阶段被放到 HTML 标签解析完成之后；在加载多个JS脚本的时候，async是无顺序的加载...1）常见引起回流属性和方法任何会改变元素几何信息(元素的位置和尺寸大小)的操作，都会触发回流，添加或者删除可见的DOM元素；元素尺寸改变——边距、填充、边框、宽度和高度内容变化，比如用户在input...JS优化：标签加上 defer属性和 async属性用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。

1.5K1 0

Vue隐藏技能：运行时渲染用户写入的组件代码！

内部变量保存，props 修改了，这个值却不会被修改，因此需要打通 props 关联，通过添加 watch 的方式解决，这里为什么没有放在 component 的计算属性中做，一是违背计算属性设计原则，...（当然，也可以通过提供 appendStyle 函数实现动态添加 style 标签，但这样并没有更方便，因此没有必要） Errors compiling template: Templates...如果设置了 src，则可以将依赖通过 script 标签和 link 标签提前写到静态页面文件中，使依赖资源在加载 iframe 时自动完成加载。...body 的第一个子元素的方式，这么做的原因是一些第三方的库（如 ant-design-vue）也会向 body 中动态添加 element，虽然采用docment.body.innerHTML=''...此限制带来的变化有以下几点依赖的资源需要提前内置在 iframe 内。内置指的是将依赖的资源通过 script，link 标签添加到 html 文件中，随 html 一并加载。

3.6K1 0

浏览器原理0. 前言1. 解析过程2. 渲染树2.1 CSS样式计算2.2 构建渲染树3. 布局（重要）4. 重绘与重排（重要）5. paint（绘制）6. composite（重要）7. 浏览器加载

确定了每个DOM元素的样式规则后，计算每个DOM元素最终在屏幕上显示的大小和位置。Web页面中元素的布局是相对的，因此一个元素的布局发生变化，会联动地引发其他元素的布局发生变化。...由于容错性，就算我们的没head标签，系统也会隐式创建一个 HTMLHeadElement，并将其添加到树中。进入了“in head”模式，然后转入“after head”模式。...而脚本在文档解析阶段会请求样式信息时还没有加载和解析样式，脚本就会获得错误的回复。Firefox 在样式表加载和解析的过程中，会禁止所有脚本。...其实也是因为普通的script标签解析完成就马上执行，我们在服务器那边大概是这样子返回： res.end（'callback（'+data+'）'）整个过程，就是：动态创建script标签，src为服务器的一个...如“select”元素有 3 个呈现器：一个用于显示区域，一个用于下拉列表框，还有一个用于按钮。如果由于宽度不够，文本无法在一行中显示而分为多行，那么新的行也会作为新的呈现器而添加。

5K4 1

高频前端开发面试问题及答案整理

1.5K2 0

浏览器原理

2K2 1

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

浏览器在解析 HTML 页面的过程中每遇到一个标签，都会因执行脚本而导致一定的延时，因此最小化延迟时间将会明显改善页面的总体性能。...从加载方式上优化：动态添加脚本元素把代码以动态的方式添加的好处是：无论这段脚本是在何时启动下载，它的下载和执行过程都不会阻塞页面的其他进程，我们甚至可以直接添加带头部 head 标签中，都不会影响其他部分...但是在现代浏览器中，这段脚本会等待所有动态节点加载完成后再执行。这种情况下，为了确保当前代码中包含的别的代码的接口或者方法能够被成功调用，就必须在别的代码加载前完成这段代码的准备。...，因为我们知道新创建的 script 标签只要添加到文档界面中它就会立即执行，因此，在添加到文档界面之前，也就是在 appendChild()之前，我们可以根据自己实际的业务逻辑去实现需求，到想要让它执行的时候...采用无阻塞下载 JavaScript 脚本的方法：使用标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）；使用动态创建的元素来下载并执行代码

6471 0

如何自动化Salesforce应用程序

动态元素对于自动化工程师来说，没有什么比带有动态元素的UI烦人的多了，动态元素会在每次运行测试脚本时更改其定位符。 Salesforce开发的应用程序是该部门的惯常行为。...在一次运行中，标识可能是gino1，而在下一运行中，标识可能是gabagool5。更改名称没有任何押韵或理由。不断变化的名称往往是动态的和不确定的。所以你会怎么做？...自动执行此操作可能会出现问题，因为此技术允许将隐藏的DOM树与标准DOM中的元素相关联，这意味着许多元素不易用于创建“点击”类型的脚本。开发人员还经常添加自定义HTML标签。...Selenium无法直接识别自定义Shadow DOM HTML标签。...在大多数情况下，TestProject记录器也会自动为您处理这些情况。 TestProject记录器为您处理幕后的阴影DOM交互，而您无需担心。

1.5K3 0

HTML 面试知识点总结

DOCTYPE>声明位于 HTML 文档中的第一行，处于标签之前。告知浏览器的解析器用什么文档标准解析这个文档。 DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。...空元素定义标签内没有内容的 HTML 标签被称为空元素。空元素是在开始标签中关闭的。...；也可能是把 js 文件放在头部，脚本的加载会阻塞后面文档内容的解析，从而页面迟迟未渲染出来，出现白屏问题。...（1）添加或者删除可见的 DOM 元素；（2）元素尺寸改变——边距、填充、边框、宽度和高度（3）内容变化，比如用户在 input 框中输入文字（4）浏览器窗口尺寸改变——resize事件发生时...attribute 是 dom 元素在文档中作为 html 标签拥有的属性； property 就是 dom 元素在 js 中作为对象拥有的属性。

1.9K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云