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

外部引入的 JavaScript 放置位置

news 2026/3/27 20:09:27

部引入的 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

光储充系统实战笔记：当光伏遇到充电桩的硬核玩法

光储充交直流三相并网/离网系统 基于Matlab三相光伏储能充电桩&#xff08;光储充一体化&#xff09; 关键词&#xff1a;光伏大功率 储能 充电桩 LLC 电池 并网PQ控制 SPWM 恒压/恒流充电 提供两个仿真可对比看效果&#xff0c;如图一&#xff0c;二。 点击“加好友”可先看…...

编程新知 2026/3/27 20:07:07

9大核心优势！Outfit字体全方位应用指南：从安装到精通

9大核心优势&#xff01;Outfit字体全方位应用指南&#xff1a;从安装到精通 【免费下载链接】Outfit-Fonts The most on-brand typeface 项目地址: https://gitcode.com/gh_mirrors/ou/Outfit-Fonts Outfit字体作为一款专业开源无衬线字体&#xff0c;凭借9种完整字重体…...

编程新知 2026/3/27 18:50:39

从源码到上架：手把手教你用Android Studio打包绿豆TVBox APK，并修改Logo、启动图和包名

从零打造个性化TV应用&#xff1a;Android Studio深度定制指南 在流媒体内容消费爆发的时代&#xff0c;拥有一个专属的影视聚合平台成为许多技术爱好者的追求。绿豆TVBox这类开源项目为开发者提供了快速入门的跳板&#xff0c;但真正实现个性化部署需要跨越从源码编译到定制化…...

编程新知 2026/3/27 18:16:14

手把手教你为i.MX6ULL开发板适配非标准分辨率LCD（以1024x600 OV5640为例）

i.MX6ULL开发板非标准分辨率LCD适配实战&#xff1a;从寄存器配置到图像稳定输出 在嵌入式视觉系统开发中&#xff0c;摄像头与显示设备的适配往往成为项目落地的关键瓶颈。当面对非标准分辨率的LCD屏幕时&#xff0c;开发者需要深入理解图像采集与显示的全链路原理&#xff0c…...

编程新知 2026/3/27 17:29:57

VSCode配置STM32标准库开发环境：手把手解决core_cm3.c编译报错与头文件路径问题

VSCode搭建STM32开发环境&#xff1a;解决标准库兼容性与智能感知难题 当开发者从Keil或IAR转向VSCode时&#xff0c;往往会遇到两个棘手的拦路虎&#xff1a;标准库与GCC的兼容性问题&#xff0c;以及代码智能感知的缺失。本文将深入解决这两个核心痛点&#xff0c;带你构建一…...

编程新知 2026/3/27 16:07:19

从SolidWorks到Gazebo：手把手教你用SW2URDF插件为ROS2 Humble机械臂建模（含ROS2适配避坑指南）

从SolidWorks到Gazebo&#xff1a;ROS2 Humble机械臂建模全流程实战 1. 工业设计与机器人仿真的桥梁搭建 当机械工程师第一次接触机器人仿真时&#xff0c;往往会面临一个关键挑战&#xff1a;如何将精心设计的SolidWorks模型转化为可在Gazebo中运行的仿真模型&#xff1f;这个…...

编程新知 2026/3/27 15:16:55

4步构建高效视频处理流水线：VideoFusion全功能指南

4步构建高效视频处理流水线&#xff1a;VideoFusion全功能指南 【免费下载链接】VideoFusion 一站式短视频拼接软件 无依赖,点击即用,自动去黑边,自动帧同步,自动调整分辨率,批量变更视频为横屏/竖屏 项目地址: https://gitcode.com/gh_mirrors/vi/VideoFusion 功能特性…...

编程新知 2026/3/27 15:00:49

4个关键步骤解决Calibre中文路径乱码难题

4个关键步骤解决Calibre中文路径乱码难题 【免费下载链接】calibre-do-not-translate-my-path Switch my calibre library from ascii path to plain Unicode path. 将我的书库从拼音目录切换至非纯英文&#xff08;中文&#xff09;命名 项目地址: https://gitcode.com/gh_m…...

编程新知 2026/3/27 14:42:45

软件工程实战：如何用数据流图搞定图书馆管理系统设计（附避坑指南）

软件工程实战&#xff1a;如何用数据流图搞定图书馆管理系统设计&#xff08;附避坑指南&#xff09; 图书馆管理系统是软件工程课程中的经典案例&#xff0c;但许多初学者在绘制数据流图时容易陷入"画了等于没画"的困境——要么遗漏关键外部实体&#xff0c;要么数据…...

编程新知 2026/3/27 14:22:24

NSudo：Windows权限管理的神兵利器与系统级操作革命

NSudo&#xff1a;Windows权限管理的神兵利器与系统级操作革命 【免费下载链接】NSudo [Deprecated, work in progress alternative: https://github.com/M2Team/NanaRun] Series of System Administration Tools 项目地址: https://gitcode.com/gh_mirrors/ns/NSudo 在…...

编程新知 2026/3/27 14:05:32