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
浏览:732

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]删除
最新教程 更多>
  • Java中的同步静态方法如何处理线程同步?
    Java中的同步静态方法如何处理线程同步?
    Java 中的同步静态方法:解锁对象类困境Java 文档指出,在同一对象上多次调用同步方法不会交错。但是,当涉及静态方法时会发生什么?静态方法不与具体对象关联,那么synchronized关键字是指对象还是类呢?分解答案根据Java语言规范(8.4.3.6),同步方法在执行之前获取监视器。对于静态方...
    编程 发布于2024-11-16
  • 如何修复 macOS 上 Django 中的“配置不正确:加载 MySQLdb 模块时出错”?
    如何修复 macOS 上 Django 中的“配置不正确:加载 MySQLdb 模块时出错”?
    MySQL配置不正确:相对路径的问题在Django中运行python manage.py runserver时,可能会遇到以下错误:ImproperlyConfigured: Error loading MySQLdb module: dlopen(/Library/Python/2.7/site-...
    编程 发布于2024-11-16
  • 如何使用 Python 获取目录中按创建日期排序的文件列表?
    如何使用 Python 获取目录中按创建日期排序的文件列表?
    使用 Python 获取按创建日期排序的目录列表导航目录时,经常需要获取排序后的内容列表根据特定标准,例如创建日期。在Python中,这个任务可以轻松完成。建议方法:为了实现这一点,Python内置的文件系统操作模块和排序功能的组合是受雇。下面的代码片段说明了这个过程:import glob imp...
    编程 发布于2024-11-16
  • 如何在初始页面加载后动态加载 Less.js 规则?
    如何在初始页面加载后动态加载 Less.js 规则?
    动态加载Less.js规则将Less.js合并到网站中可以增强其样式功能。然而,遇到的一个限制是需要在 Less.js 脚本之前加载所有 LESS 样式表。当某些样式需要在初始页面加载后动态加载时,这可能会带来挑战。当前限制目前,Less.js 规定加载外部的顺序样式表和脚本起着至关重要的作用。颠倒...
    编程 发布于2024-11-16
  • 如何在 PHP 中清除浏览器缓存?
    如何在 PHP 中清除浏览器缓存?
    在 PHP 中清除浏览器缓存您可能会遇到需要清除浏览器缓存以强制浏览器重新加载最新版本的情况您的网页。当您开发 Web 应用程序并且希望确保用户看到您所做的最新更改时,这尤其有用。清除浏览器缓存的 PHP 代码要使用PHP清除浏览器缓存,可以使用以下代码:header("Cache-Con...
    编程 发布于2024-11-16
  • 如何使用 MySQL 查找今天生日的用户?
    如何使用 MySQL 查找今天生日的用户?
    如何使用 MySQL 识别今天生日的用户使用 MySQL 确定今天是否是用户的生日涉及查找生日匹配的所有行今天的日期。这可以通过一个简单的 MySQL 查询来实现,该查询将存储为 UNIX 时间戳的生日与今天的日期进行比较。以下 SQL 查询将获取今天有生日的所有用户: FROM USERS ...
    编程 发布于2024-11-16
  • 大批
    大批
    方法是可以在对象上调用的 fns 数组是对象,因此它们在 JS 中也有方法。 slice(begin):将数组的一部分提取到新数组中,而不改变原始数组。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index p...
    编程 发布于2024-11-16
  • 如何在 MySQL PDO 查询中正确使用 LIKE 和 BindParam?
    如何在 MySQL PDO 查询中正确使用 LIKE 和 BindParam?
    在 MySQL PDO 查询中正确使用 LIKE 和 BindParam当尝试在 MySQL PDO 查询中使用 BindParam 执行 LIKE 搜索时,必须使用正确的语法以确保准确的结果。优化语法要使用bindParam匹配以“a”开头的用户名,正确的语法是:$term = "a%&...
    编程 发布于2024-11-16
  • 如何使用 Selenium 和 Python 更改 Chrome 中的用户代理?
    如何使用 Selenium 和 Python 更改 Chrome 中的用户代理?
    使用 Selenium 更改 Chrome 中的用户代理在自动化需要特定浏览器配置的任务时,更改 Chrome 中的用户代理至关重要。这可以通过使用 Selenium 和 Python 来实现。要启用用户代理开关,请修改选项设置:from selenium import webdriver from...
    编程 发布于2024-11-16
  • 除了“if”语句之外:还有哪些地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    除了“if”语句之外:还有哪些地方可以在不进行强制转换的情况下使用具有显式“bool”转换的类型?
    无需强制转换即可上下文转换为 bool您的类定义了对 bool 的显式转换,使您能够在条件语句中直接使用其实例“t”。然而,这种显式转换提出了一个问题:“t”在哪里可以在不进行强制转换的情况下用作 bool?上下文转换场景C 标准指定了四种值可以根据上下文转换为 bool 的主要场景:语句:if、w...
    编程 发布于2024-11-16
  • .then(function(a){ return a; }) 是 Promises 的 No-Op 吗?
    .then(function(a){ return a; }) 是 Promises 的 No-Op 吗?
    .then(function(a){ return a; }) 是 Promises 的 No-Op 吗?在 Promise 领域,就出现了 .then(function(a){ return a; }) 是否为空操作的问题。让我们阐明这个奇怪的查询:是的,它通常是一个无操作。相关代码接收前一个承诺...
    编程 发布于2024-11-16
  • 如何在 Matplotlib 中创建自定义颜色图并添加色标?
    如何在 Matplotlib 中创建自定义颜色图并添加色标?
    创建自定义颜色图并合并色标要创建自己的颜色图,一种方法是利用 matplotlib.colors 模块中的 LinearSegmentedColormap 函数。这种方法更简单,并产生连续的色标。import numpy as np import matplotlib.pyplot as plt i...
    编程 发布于2024-11-16
  • 如何用PHP获取客户端的当地时间?
    如何用PHP获取客户端的当地时间?
    在 PHP 中检索客户端的本地时间在 PHP 应用程序中处理日期和时间时,必须记住 PHP 主要运行于服务器端。因此,默认情况下,与时间相关的函数(如 date())根据服务器的位置和时区提供时间。但是,在需要捕获客户端(用户)本地时间的情况下,需要采用替代方法。这里有一个使用 JavaScript...
    编程 发布于2024-11-16
  • 所有可变参数函数都会将“float”参数提升为“double”吗?
    所有可变参数函数都会将“float”参数提升为“double”吗?
    在可变参数函数中将浮点参数提升为 Double在之前的讨论中,注意到 printf() 将浮点参数提升为在接受之前加倍。这就提出了一个问题:所有可变参数函数都执行此提升吗?可变参数参数提升是的,根据 C99 和 C 标准,浮点参数传递给可变参数函数提升为双精度。标准规范C99(第 6.5.2.2 节...
    编程 发布于2024-11-16
  • MySQL 表悖论:如何修复既存在又不存在的表?
    MySQL 表悖论:如何修复既存在又不存在的表?
    薛定谔的MySQL表:存在之谜在数据库管理领域,MySQL表可以表现出一种矛盾的存在。正如您所遇到的,表似乎同时存在和不存在的谜团可能会带来令人沮丧的挑战。让我们深入研究根本问题并探索潜在的解决方案。当遇到令人困惑的错误“表已存在”而“DROP TABLE”返回“未知表”时,很可能是表定义之间存在差...
    编程 发布于2024-11-16

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

Copyright© 2022 湘ICP备2022001581号-3