Document    

在这种方法中,在解析代码时,首先在正文中的 html 之前加载 JavaScript 文件,如果 JavaScript 尝试操作正文中尚未解析的元素,则可能会导致错误,因为 HTML 内容尚未完全解析已加载。

这种阻塞行为会延迟页面其余部分的解析和渲染,影响性能和用户体验。

2.中的(在末​​尾)

             Document     

在此方法中,在加载和执行 JavaScript 之前完全解析 HTML,从而防止与丢失 DOM 元素相关的错误。这种方法很好,但由于 HTML 解析和 JavaScript 加载是顺序发生的,因此总体上可能需要更长的持续时间,因为这两个过程发生在不同的时间

3.中的

            Document    

在这种方法中,我们使 JavaScript 异步,因此它不会阻止 HTML 加载。 HTML 解析和 JavaScript 加载是并行发生的。但是,如果 JavaScript 在 HTML 完全解析之前执行,并且 js 尝试操作尚未加载的 html 元素,则可能会导致错误。
注意:—这种方法可以节省时间,但同时加载 html、js 但更容易出错

4.中的

            Document    

这种方法类似于第三种方法,其中 HTML 解析和 JavaScript 加载是并行发生的。然而,即使 JavaScript 先加载,浏览器也会等到 HTML 完全解析后再执行脚本

摘要:最佳方法

最好的方法通常是使用:


为什么:

如果脚本独立于 DOM 内容(例如跟踪脚本或广告),您可以使用异步以获得更好的性能。

","image":"http://www.luping.net/uploads/20241116/17317612906738948a85e57.jpg","datePublished":"2024-11-16T21:40:39+08:00","dateModified":"2024-11-16T21:40:39+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 在 HTML 中添加 Javascript 文件的最佳方法

在 HTML 中添加 Javascript 文件的最佳方法

发布于2024-11-16
浏览:315

Best Way to add Javascript file in HTML

在 HTML 中,有多种方法可以包含 JavaScript 文件。我将解释四种不同的方法及其缺点,最后强调最佳方法。

1.

中的
 


    
    
    Document
    





在这种方法中,在解析代码时,首先在正文中的 html 之前加载 JavaScript 文件,如果 JavaScript 尝试操作正文中尚未解析的元素,则可能会导致错误,因为 HTML 内容尚未完全解析已加载。

这种阻塞行为会延迟页面其余部分的解析和渲染,影响性能和用户体验。

2.

中的(在末​​尾)
 


    
    
    Document 


    


在此方法中,在加载和执行 JavaScript 之前完全解析 HTML,从而防止与丢失 DOM 元素相关的错误。这种方法很好,但由于 HTML 解析和 JavaScript 加载是顺序发生的,因此总体上可能需要更长的持续时间,因为这两个过程发生在不同的时间

3.

中的


    
    
    Document
    




在这种方法中,我们使 JavaScript 异步,因此它不会阻止 HTML 加载。 HTML 解析和 JavaScript 加载是并行发生的。但是,如果 JavaScript 在 HTML 完全解析之前执行,并且 js 尝试操作尚未加载的 html 元素,则可能会导致错误。
注意:—这种方法可以节省时间,但同时加载 html、js 但更容易出错

4.

中的


    
    
    Document
    





这种方法类似于第三种方法,其中 HTML 解析和 JavaScript 加载是并行发生的。然而,即使 JavaScript 先加载,浏览器也会等到 HTML 完全解析后再执行脚本

摘要:最佳方法

最好的方法通常是使用:


为什么:

  • 它不会阻止 HTML 解析(非阻塞下载)。
  • 它确保脚本在 DOM 完全解析后运行,从而更安全地操作 DOM 元素。
  • 如果您有多个延迟脚本,它会保留脚本执行顺序。

如果脚本独立于 DOM 内容(例如跟踪脚本或广告),您可以使用异步以获得更好的性能。

版本声明 本文转载于:https://dev.to/sagar7170/best-way-to-add-javascript-file-in-html-328?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 在JavaScript中如何并发运行异步操作并正确处理错误?
    在JavaScript中如何并发运行异步操作并正确处理错误?
    同意操作execution 在执行asynchronous操作时,相关的代码段落会遇到一个问题,当执行asynchronous操作:此实现在启动下一个操作之前依次等待每个操作的完成。要启用并发执行,需要进行修改的方法。 第一个解决方案试图通过获得每个操作的承诺来解决此问题,然后单独等待它们: co...
    编程 发布于2025-07-23
  • 您可以使用CSS在Chrome和Firefox中染色控制台输出吗?
    您可以使用CSS在Chrome和Firefox中染色控制台输出吗?
    在javascript console 中显示颜色是可以使用chrome的控制台显示彩色文本,例如红色的redors,for for for for错误消息?回答是的,可以使用CSS将颜色添加到Chrome和Firefox中的控制台显示的消息(版本31或更高版本)中。要实现这一目标,请使用以下模...
    编程 发布于2025-07-23
  • 在细胞编辑后,如何维护自定义的JTable细胞渲染?
    在细胞编辑后,如何维护自定义的JTable细胞渲染?
    在JTable中维护jtable单元格渲染后,在JTable中,在JTable中实现自定义单元格渲染和编辑功能可以增强用户体验。但是,至关重要的是要确保即使在编辑操作后也保留所需的格式。在设置用于格式化“价格”列的“价格”列,用户遇到的数字格式丢失的“价格”列的“价格”之后,问题在设置自定义单元格...
    编程 发布于2025-07-23
  • 如何在JavaScript对象中动态设置键?
    如何在JavaScript对象中动态设置键?
    在尝试为JavaScript对象创建动态键时,如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正确的方法采用方括号: jsobj ['key''i] ='example'1; 在JavaScript中,数组是一...
    编程 发布于2025-07-23
  • Python高效去除文本中HTML标签方法
    Python高效去除文本中HTML标签方法
    在Python中剥离HTML标签,以获取原始的文本表示Achieving Text-Only Extraction with Python's MLStripperTo streamline the stripping process, the Python standard librar...
    编程 发布于2025-07-23
  • C++中如何将独占指针作为函数或构造函数参数传递?
    C++中如何将独占指针作为函数或构造函数参数传递?
    在构造函数和函数中将唯一的指数管理为参数 unique pointers( unique_ptr [2启示。通过值: base(std :: simelor_ptr n) :next(std :: move(n)){} 此方法将唯一指针的所有权转移到函数/对象。指针的内容被移至功能中,在操作...
    编程 发布于2025-07-23
  • 如何同步迭代并从PHP中的两个等级阵列打印值?
    如何同步迭代并从PHP中的两个等级阵列打印值?
    同步的迭代和打印值来自相同大小的两个数组使用两个数组相等大小的selectbox时,一个包含country代码的数组,另一个包含乡村代码,另一个包含其相应名称的数组,可能会因不当提供了exply for for for the uncore for the forsion for for ytry...
    编程 发布于2025-07-23
  • Java中如何使用观察者模式实现自定义事件?
    Java中如何使用观察者模式实现自定义事件?
    在Java 中创建自定义事件的自定义事件在许多编程场景中都是无关紧要的,使组件能够基于特定的触发器相互通信。本文旨在解决以下内容:问题语句我们如何在Java中实现自定义事件以促进基于特定事件的对象之间的交互,定义了管理订阅者的类界面。以下代码片段演示了如何使用观察者模式创建自定义事件: args)...
    编程 发布于2025-07-23
  • 表单刷新后如何防止重复提交?
    表单刷新后如何防止重复提交?
    在Web开发中预防重复提交 在表格提交后刷新页面时,遇到重复提交的问题是常见的。要解决这个问题,请考虑以下方法: 想象一下具有这样的代码段,看起来像这样的代码段:)){ //数据库操作... 回声“操作完成”; 死(); } ?> ...
    编程 发布于2025-07-23
  • 为什么我在Silverlight Linq查询中获得“无法找到查询模式的实现”错误?
    为什么我在Silverlight Linq查询中获得“无法找到查询模式的实现”错误?
    查询模式实现缺失:解决“无法找到”错误在银光应用程序中,尝试使用LINQ建立错误的数据库连接的尝试,无法找到以查询模式的实现。”当省略LINQ名称空间或查询类型缺少IEnumerable 实现时,通常会发生此错误。 解决问题来验证该类型的质量是至关重要的。在此特定实例中,tblpersoon可能需...
    编程 发布于2025-07-23
  • FastAPI自定义404页面创建指南
    FastAPI自定义404页面创建指南
    response = await call_next(request) if response.status_code == 404: return RedirectResponse("https://fastapi.tiangolo.com") else: ...
    编程 发布于2025-07-23
  • 编译器报错“usr/bin/ld: cannot find -l”解决方法
    编译器报错“usr/bin/ld: cannot find -l”解决方法
    错误:“ usr/bin/ld:找不到-l “ 此错误表明链接器在链接您的可执行文件时无法找到指定的库。为了解决此问题,我们将深入研究如何指定库路径并将链接引导到正确位置的详细信息。添加库搜索路径的一个可能的原因是,此错误是您的makefile中缺少库搜索路径。要解决它,您可以在链接器命令中添加...
    编程 发布于2025-07-23
  • 如何在Chrome中居中选择框文本?
    如何在Chrome中居中选择框文本?
    选择框的文本对齐:局部chrome-inly-ly-ly-lyly solument 您可能希望将文本中心集中在选择框中,以获取优化的原因或提高可访问性。但是,在CSS中的选择元素中手动添加一个文本 - 对属性可能无法正常工作。初始尝试 state)</option> < op...
    编程 发布于2025-07-23
  • 如何从PHP中的数组中提取随机元素?
    如何从PHP中的数组中提取随机元素?
    从阵列中的随机选择,可以轻松从数组中获取随机项目。考虑以下数组:; 从此数组中检索一个随机项目,利用array_rand( array_rand()函数从数组返回一个随机键。通过将$项目数组索引使用此键,我们可以从数组中访问一个随机元素。这种方法为选择随机项目提供了一种直接且可靠的方法。
    编程 发布于2025-07-23
  • 用户本地时间格式及时区偏移显示指南
    用户本地时间格式及时区偏移显示指南
    在用户的语言环境格式中显示日期/时间,并使用时间偏移在向最终用户展示日期和时间时,以其localzone and格式显示它们至关重要。这确保了不同地理位置的清晰度和无缝用户体验。以下是使用JavaScript实现此目的的方法。方法:推荐方法是处理客户端的Javascript中的日期/时间格式化和时...
    编程 发布于2025-07-23

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3