当前位置： 首页 > news >正文

外部引入的 JavaScript 放置位置

news 2026/2/8 10:22:26

部引入的 JavaScript 通常有两种常见的放置位置，每个位置都有其优缺点，具体取决于页面的需求和性能优化目标：

1. 放在页面的 <head> 标签中

  • 这种方式在 HTML 文档的 <head> 部分引入 JavaScript 文件。
<head><script src="example.js"></script>
</head>
<body><div id="myDiv">Hello World</div>
</body>
优点：
  • 在页面加载前执行 JavaScript，确保页面初始化时所有的脚本都已经加载完毕。
  • 适合一些需要在页面渲染之前就初始化的 JavaScript，比如追踪代码或检测设备信息。
缺点：
  • JavaScript 会阻塞 HTML 的解析，导致页面内容显示延迟，影响用户体验，尤其是当 JavaScript 文件较大或网络速度较慢时。
  • 不推荐用于非关键脚本。

2. 放在页面的 <body> 底部（推荐做法）

  • 这种方式将 JavaScript 文件放在页面的最后，即 <body> 标签的末尾。
<body><div id="myDiv">Hello World</div><script src="example.js"></script>
</body>
优点：
  • HTML 先解析并显示页面内容，用户可以快速看到页面内容，提升用户体验。
  • JavaScript 不会阻塞 HTML 解析，尤其对于较大文件或复杂脚本，页面的初始加载速度会更快。
  • 对于需要操作 DOM 的 JavaScript，这种方式可以保证页面元素已解析完毕，避免找不到 DOM 元素的问题。
缺点：
  • 脚本执行较晚，可能会推迟某些交互行为的初始化。
  • 如果页面的交互依赖 JavaScript，用户可能会在 JavaScript 执行前无法使用页面上的功能。

3. 使用 defer 或 async 属性（优化方案）

如果希望在 <head> 中引入 JavaScript 文件，但不想阻塞 HTML 的解析，可以使用以下两种属性：

defer 属性：
  • JavaScript 文件会与 HTML 并行加载，但会在 HTML 完全解析完毕后才执行。
  • 推荐使用 defer，因为它不会阻塞 HTML 解析，并且会按照脚本的引入顺序依次执行。
<head><script src="example.js" defer></script>
</head>
优点：
  • 不阻塞 HTML 解析，提升页面加载性能。
  • JavaScript 执行时，所有 DOM 元素已经被解析完毕，避免找不到 DOM 的问题。
  • 执行顺序保持一致（按顺序执行）。
async 属性：
  • JavaScript 文件也会与 HTML 并行加载，但一旦文件加载完毕，就立即执行，而不等待 HTML 完全解析。
  • 适合独立、不依赖其他脚本或 DOM 操作的 JavaScript 文件，如分析工具或广告脚本。
<head><script src="example.js" async></script>
</head>
优点：
  • 不阻塞 HTML 解析，提升页面性能。
  • 适合不依赖 DOM 的脚本。
缺点：
  • 执行顺序不确定，因为脚本会根据其加载完成的时间执行，可能打乱多文件的执行顺序。

总结：

  • 最佳实践是将 外部 JavaScript 文件放在 <body> 底部，以确保页面内容快速加载，避免阻塞 HTML 解析。
  • 如果希望放在 <head> 中，可以使用 defer 属性 来确保 JavaScript 不阻塞页面加载，同时保证脚本在 DOM 完全解析后才执行。
  • 使用 async 属性 适合不依赖 DOM 或其他脚本的独立脚本，能够进一步优化页面加载性能。

相关文章：

外部引入的 JavaScript 放置位置

部引入的 JavaScript 通常有两种常见的放置位置&#xff0c;每个位置都有其优缺点&#xff0c;具体取决于页面的需求和性能优化目标&#xff1a; 1. 放在页面的 <head> 标签中 这种方式在 HTML 文档的 <head> 部分引入 JavaScript 文件。 <head><scrip…...

编程日记 2024/10/1 17:44:02

【tbNick专享】虚拟机域控、成员服务器、降级等管理

在 VMware 中完成四台域控服务器、一台成员服务器的创建、降级域控为成员服务器&#xff0c;并创建子域的操作。 1. 创建四台域控和一台成员服务器 1.1 在 VMware 中创建虚拟机 启动 VMware Workstation&#xff1a; 打开 VMware Workstation&#xff0c;点击 “创建新的虚拟…...

编程日记 2024/10/1 17:42:00

Raspberry Pi3B+之Rpanion(gst)和ffmpeg验证

Raspberry Pi3B之Rpanion-gst和ffmpeg验证 1. 源由2. 分析3. 环境搭建步骤1&#xff1a;安装镜像步骤2&#xff1a;系统更新步骤3&#xff1a;安装numpy组件步骤4&#xff1a;安装python3-picamera2组件步骤4&#xff1a;安装cv2组件步骤5&#xff1a;安装ffmpeg组件步骤6&…...

编程日记 2024/10/1 17:40:59

数据结构编程实践20讲(Python版)—04队列

本文目录 04 队列 QueueS1 说明S2 示例普通队列循环队列双端队列优先队列S3 问题：基于普通队列实现的打印机任务管理Python3程序S4 问题：使用循环队列管理玩家移动轨迹Python3程序S5 问题：使用双端队列来管理文档操作历史Python3程序S6 问题：使用优先队列管理车辆调度Pytho…...

编程日记 2024/10/1 17:38:57

Ubuntu开机进入紧急模式处理

文章目录 Ubuntu开机进入紧急模式处理一、问题描述二、解决办法参考 Ubuntu开机进入紧急模式处理 一、问题描述 Ubuntu开机不能够正常启动&#xff0c;自动进入紧急模式&#xff08;You are in emergency mode&#xff09;。具体如下所示&#xff1a; 二、解决办法 按CtrlD进…...

编程日记 2024/10/1 17:37:56

解决无网条件下离线安装缺失的python包

首先在有网的机器上使用conda create --name xx pythonx.x.x 命令创建一个和目标机器(无网)一样的环境 使用 下面命令 pip download opencv-python -d C:\Users\xuhaitao\Desktop\installer pip download pyinstaller -d C:\Users\xuhaitao\Desktop\installer 在目标…...

编程日记 2024/10/1 17:35:54

海外媒体投稿：如何运用3种国内外媒体套餐发稿突出重围？

在当今瞬息万变的经营环境中&#xff0c;突出重围营销推广是每家企业都需要思考的问题。为了能突出重围并提升影响力&#xff0c;国内外媒体套餐内容成为了一个非常受欢迎的挑选。下面我们就为大家讲解如何运用三种不同种类的国内外媒体套餐内容来推广突出重围。 2.微博营销新浪…...

编程日记 2024/10/1 17:34:52

Spring DI 笔记

目录 1.什么是DI? 2.依赖注入的三种⽅式 2.1属性注⼊ 2.2构造⽅法注⼊ 2.3Setter 注⼊ 2.4三种注⼊优缺点分析 3.Autowired存在问题 1.什么是DI? DI: 依赖注⼊ 依赖注⼊是⼀个过程&#xff0c;是指IoC容器在创建Bean时, 去提供运⾏时所依赖的资源&#xff0c;⽽资源指的…...

编程日记 2024/10/1 17:32:50

psutil库的使用说明

前言 psutil是一个跨平台的库&#xff0c;用于获取系统的进程和系统利用率&#xff08;包括 CPU、内存、磁盘、网络等&#xff09;信息。 目录 安装 应用场景 常用方法 一、系统信息相关函数 二、进程信息相关函数 三、网络信息相关函数 四、其他实用函数 使用样例 监控应…...

编程日记 2024/10/1 17:30:48

PMP--三模--解题--71-80

文章目录 7.成本管理--S曲线--S曲线对累计值进行监督和报告--S曲线可以同时报告成本与进度情况。适用于预测和敏捷项目。14.敏捷--信息发射源--是一种可见的实物展示其向组织内其他成员提供信息在不干扰团队的情况下即时实现知识共享。71、 [单选] 项目经理正在为刚刚进入第三次…...

编程日记 2024/10/1 17:28:47

iTextPDF 一个功能强大的 Java PDF 库

iTextPDF 是一个功能强大的 Java PDF 库&#xff0c;它提供了丰富的 API 用于创建和操作 PDF 文档。以下是一些 iTextPDF 的常用功能&#xff1a; 创建 PDF 文档&#xff1a;可以创建新的 PDF 文档&#xff0c;并设置页面大小、边距、背景颜色等 。 添加文本&#xff1a;在 PD…...

编程日记 2024/10/1 17:27:45

QT C++ 自学积累 『非技术文』

QT C 自学积累 『非技术文』 最近一段时间参与了一个 QT 项目的开发&#xff0c;使用的是 C 语法&#xff0c;很遗憾的是我之前从来没有接触过 C &#xff0c;大学没有开过这堂课&#xff0c;也没用自己学习过&#xff0c;所有说上手贼慢&#xff0c;到现在为止其实也不是很清楚…...

编程日记 2024/10/1 17:21:39

浅谈虚拟内存（操作系统、Redis）

浅谈虚拟内存&#xff08;操作系统、Redis&#xff09; 参考&鸣谢 4.1 为什么要有虚拟内存&#xff1f; xiaolincoding 【简单说下】REDIS的虚拟内存机制,会吗?别翻书 aristo_boyunv Redis 虚拟内存 Java杨永杰 浅谈虚拟内存&#xff1a;操作系统与 Redis 在计算机系统中…...

编程日记 2024/10/1 17:19:37

【LeetCode HOT 100】详细题解之链表篇

LeetCode HOT 100题解之链表篇 160 相交链表题目分析代码 206 反转链表方法一&#xff1a;迭代 234 回文链表方法一&#xff1a;将值复制到数组中方法二&#xff1a;快慢指针 141 环形链表方法一&#xff1a;哈希表方法二&#xff1a;快慢指针 142 环形链表II方法一&#xff1a…...

编程日记 2024/10/1 17:16:35

二叉树的递归遍历

方法论 确定递归函数的参数和返回值 确定哪些参数是递归的过程中需要处理的&#xff0c;那么就在递归函数里加上这个参数&#xff0c; 并且还要明确每次递归的返回值是什么进而确定递归函数的返回类型。 确定终止条件 写完了递归算法, 运行的时候&#xff0c;经常会遇到栈溢…...

编程日记 2024/10/1 17:15:34

国内访问OpenAI API

最近在学习LLM。绕不过去的肯定要学习OpenAI。 国内想直接使用官方API十分麻烦。就到处查资料及网友的分享。发现了这个代理可以在国内很方便的使用OpenAI API。 代理的地址如下&#xff1a; https://referer.shadowai.xyz/r/1014150 经过一段实际体验下来&#xff0c;这个…...

编程日记 2024/10/1 17:14:32

深入 Spring RestTemplate 源码：掌握 HTTP 通信核心技术

在上一篇文章《Spring Boot 项目高效 HTTP 通信&#xff1a;常用客户端大比拼&#xff01;》里&#xff0c;我们提到了RestTemplate&#xff0c;它是Spring框架提供的Http客户端&#xff0c;在springboot项目开发过程中&#xff0c;属于使用最为广泛的 HTTP 客户端之一了。今天…...

编程日记 2024/10/1 17:13:32

计算机网络：计算机网络概述 —— 初识计算机网络

文章目录 计算机网络组成部分网络架构协议与标准网络设备网络类型作用实际应用案例 计算机网络 计算机网络是指将多台计算机通过通信设备和通信链路连接起来&#xff0c;以实现数据和信息的交换和共享的技术和系统。它是现代信息社会的基础设施之一&#xff0c;也是互联网的基…...

编程日记 2024/10/1 17:12:31

set和map结构的使用

个人主页&#xff1a;敲上瘾-CSDN博客 个人专栏&#xff1a;游戏、数据结构、c语言基础、c学习、算法 目录 一、序列式容器和关联式容器 二、set和multiset 1.insert 2.erase 3.find 4.count 三、map和mapmulti 1.pair 2.insert 3.find 4.operator[ ] 5.erase 6.lo…...

编程日记 2024/10/1 17:11:30

2. qt_c++反射实例

目录 使用场景元对象相关类及宏常用功能获取类相关内容以及委托调用 使用场景 Qt基于强大的元对象系统实现反射机制&#xff1b; 在复杂的开发需求中&#xff0c;我们希望通过一些手段映射出我们的类&#xff08;映射对象&#xff09; 然后直接使用&#xff0c;通过&#xff0…...

编程日记 2024/10/1 17:10:29

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2026/2/8 4:37:29

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2026/2/8 4:37:27

Linux 文件类型，目录与路径，文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

编程新知 2026/2/4 16:06:56

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/8/27 0:58:09

C++.OpenGL （10/64）基础光照（Basic Lighting）

基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

编程新知 2026/1/20 2:37:04

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/10/14 6:46:13

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/10/24 12:31:26

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2026/1/25 2:04:42

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/11/26 18:23:29