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

外部引入的 JavaScript 放置位置

news 2025/12/15 11:49:42

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

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/12/9 21:15:58

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2025/12/7 20:38:59

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2025/12/9 0:43:43

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

编程新知 2025/12/15 11:01:10

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/12/7 12:35:20

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2025/12/9 5:11:04

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/12/5 5:21:34

学校时钟系统，标准考场时钟系统，AI亮相2025高考，赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

编程新知 2025/12/9 7:25:28