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

外部引入的 JavaScript 放置位置

news 2025/7/7 10:17:15

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

linux 错误码总结

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

编程新知 2025/6/15 21:42:14

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

编程新知 2025/6/17 16:58:36

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/6/21 5:44:18

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

编程新知 2025/6/20 15:14:31

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言&#xff1a; 最近在做行为检测相关的模型&#xff0c;用的是时空图卷积网络&#xff08;STGCN&#xff09;&#xff0c;但原有kinetic-400数据集数据质量较低&#xff0c;需要进行细粒度的标注&#xff0c;同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2025/7/7 8:22:46

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/7/6 18:42:38

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2025/7/7 5:34:17

CSS | transition 和 transform的用处和区别

省流总结&#xff1a; transform用于变换/变形&#xff0c;transition是动画控制器 transform 用来对元素进行变形&#xff0c;常见的操作如下&#xff0c;它是立即生效的样式变形属性。 旋转 rotate(角度deg)、平移 translateX(像素px)、缩放 scale(倍数)、倾斜 skewX(角度…...

编程新知 2025/7/6 12:38:55

Webpack性能优化：构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

编程新知 2025/7/7 1:01:12

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2025/7/6 4:31:52