html 在body末尾追加,探究: 为什么JavaScript要在body标签尾部引入?

最新推荐文章于 2023-01-10 16:30:30 发布
最新推荐文章于 2023-01-10 16:30:30 发布
阅读量770 收藏 2
点赞数
文章标签： html 在body末尾追加

某天, 小枫在网上浏览前端性能优化的相关文章, 文章中指出: 将JavaScript的引入置于

尾部

小枫思索了一会, 整个人都自闭了...于是乎, 接着上网查阅资料:

为什么JavaScript的引入要置于

尾部?

查了一圈之后发现, 网上普遍的观点如下:JavaScript执行会阻塞HTML的渲染, 因此将JavaScript的引入置于

尾部, 可以使页面先呈现出来, 避免JavaScript的执行导致页面白屏;

出于钻研的精神, 小枫决定自己来验证这个结论, 请给小枫点个赞谢谢(是字体自己加粗的, 逃0.0)

大家都知道, chrome(文章使用的是版本为: 86.0.4240.80)是个神器, 自带性能调优工具, 可以记录分析网页的渲染流程: 按"F12"或是"鼠标右键+检查"打开控制台, 选择Performance栏, 如下图;

c816a8da1182c18df31500bf8090de0e.png

我们先新建一个简单的HTML文件, 使用Performance分析页面的渲染流程:

钻研精神

你好, 小枫

4cae69e23e95aea51ecdce8e55004a81.png

从上图可以看出, 网页的渲染流程大致如下:Parse HTML 该阶段生成了DOM Tree和CSSOM Tree;

Layout 将DOM Tree结合CSSOM Tree, 生成Layout Tree(又称Render Tree), 计算每个元素的尺寸和位置;

Update Layout Tree 更新Layout Tree;

Paint 生成PaintLayout Tree记录元素绘制顺序;

Composite 合成视图输出到屏幕;

简单理解网页渲染流程之后, 我们来对问题进行验证, 列举以下两种情况:置于

中:钻研精神

for (let i = 0; i < 100000; i++) {

for (let j = 0; j < 100000; j++) {}

}

你好, 小枫

在上面的html文件中, 我们将置于

中, 中是一段计算量很大的JavaScript, 值得注意的是, 这里的JavaScript是以嵌入的形式存在于HTML中, 并非使用src属性进行外部引入; 接着在浏览器打开该html文件, 并使用Performance进行分析:

9eb2a993deafa9a8f4671f6f976eee7d.png

script标签置于head标签中

如上图所示, ParseHTML阶段一直呈阻塞状态, 直到Evalute Script阶段结束才重新开始ParseHTML, 接着进行Layout以及Paint等渲染页面流程; 在这个过程中页面一直呈现白屏状态, 直到JavaScript加载完成才有内容展示; 可以看出, JavaScript的执行阻塞了HTML的解析和渲染;置于

中:钻研精神

你好, 小枫

for (let i = 0; i < 100000; i++) {

for (let j = 0; j < 100000; j++) {}

}

接着, 我们把放在

尾部, 此处的JavaScript同样为一段计算量很大的代码, 并且也以嵌入的形式引入; 接着使用Performance对网页进行分析:

b85f7abb4775c9bcd05cf88fd3eed9b5.png

script标签置于body标签尾部

如上图所示, 由于JavaScript的执行, ParseHTML阶段同样一直呈阻塞状态, 但不一样的是, 当Evalute Script阶段结束时, 直接进行Layout和Paint等渲染网页流程; 这个过程页面同样一直白屏, 直到JavaScript执行完成; 我们可以这么理解: HTML自上往下执行, 因此在执行JavaScript之前ParseHTML流程正常执行: 当script标签放在body标签尾部时, 浏览器会先解析HTML, 之后遇到script标签, 开始执行JavaScript, 这个过程将会阻塞HTML的解析渲染, 所以页面才会一直呈现白屏状态直到JavaScript执行完毕;

从上面两种情况可以看出, 当JavaScript以script标签嵌入的方式执行时, 不管script标签置于head标签中或是置于body标签尾部, 都会因为JavaScript阻塞了HTML解析渲染的原因, 导致页面白屏, 直到JavaScript加载完毕;

所以这可以证明网上搜索到的观点是错误的吗?

"不行!"

因为JavaScript的引入方式并非这一种, 还有另外一种更为常见的形式: 使用script标签的src属性引入外部JavaScript;于是乎, 以script标签引入外部JavaScript的形式, 开启下一轮验证:置于

中:

将计算量很大的代码移至js文件: index.jsfor (let i = 0; i < 100000; i++) {

for (let j = 0; j < 100000; j++) {}

}

并在html中引入 index.js:

钻研精神

你好, 小枫

接着, 使用Performance对网页进行分析:

5fd9d6dbfe4f15a3420ab4a4c5c79a7a.png

如上图, 浏览器先调用Network线程下载HTML文件, 之后对HTML进行自上往下解析工作, 直到遇到

中的script标签, 由于script标签引入的是外部js文件, 浏览器接着调用Network线程下载目标js文件, 可以看到, 这一过程中并没有进行ParseHTML;

fd44839c26b026a8dbccbe8e51efac76.png

下载完js文件之后, 浏览器开始执行JavaScript, 等待代码执行完毕之后, 开始ParseHTML, Layout以及Paint等网页解析渲染操作; 整个流程, 网页一直呈现白屏状态, 直到JavaScript执行完毕, 也就是说, 当外部引入js文件时, script标签置于head标签中时, Network线程下载js文件将会阻塞HTML的解析, 导致页面在JavaScript下载并执行完之前一直呈现白屏状态;置于

中:

将script标签移到body尾部:

钻研精神

你好, 小枫

接着使用Performance进行网页分析:

6333a35378c47009e7c9e89be38fb854.png

如图所示, HTML自上而下解析, 进行ParseHTML, 遇到引入外部js的script标签, Network线程开始下载js文件, 网页的渲染同时进行, 直到js文件下载完成, 开始执行JavaScript; 整个过程中, 网页在JavaScript执行完毕前先呈现出内容, 因为在js文件下载之前, 浏览器已经完成HTML的解析工作, 而在js文件下载过程中, 网页的渲染并没有因此阻塞, 可以得出结论:

"当使用script标签引入外部js文件时, js文件下载并不阻塞网页的渲染, 而是阻塞HTML的解析!"

为了充分验证上述结论, 我们在script标签后加多一个元素:

钻研精神

你好, 小枫

你好, 小枫

观察页面变化并使用Performance分析网页:

1190000037578914

6294b0dfe9cde8a1521dc734bf05003a.png

如上图, 网页先展示出第一行文本, 第二行文本并未出现, 此时script标签仍出于下载外部js文件阶段, 说Network线程下载js文件的过程阻塞第二行文本的解析, 而第一行文本能正常呈现出来, 说明这一过程并没有阻塞网页的渲染;

9de03864dddc003c633237f064b52879.png

26a42011b7c3466fb682c0f3ce14ac78.png

一段时间过后, JavaScript下载并执行完毕, 此时第二行文字也显示出来;

总结

结合上面的验证, 可以得出结论:JavaScript的执行会阻塞HTML的解析渲染;

当使用script标签引入外部js文件时, Network线程会阻塞HTML的解析, 但不会阻塞HTML的渲染;

因此网上大部分的观点是错误的, JavaScript执行确实会阻塞HTML的解析渲染, 若是以嵌入的方式引入JavaScript, 不管script标签是放在head标签中或是body标签尾部, 页面都会由于JavaScript的执行而持续白屏; 而在引入外部js文件的情况, 由于Network线程下载外部js文件仅阻塞HTML的解析而不会阻塞HTML的渲染, script标签置于body标签尾部可以避免由于js文件下载时间太长导致的页面持续白屏!

JavaScript增加 HTML 元素
悄悄quite
05-14 2092
1-创建或复制节点 document.creatElement(tag) :创建 tag 标签对应的节点 Node cloneNode（Boolean deep）：复制当前节点，当 deep 为 true 时，表示在复制当前节点的同时，复制该节点的全部后代；当 deep 为 false时，表示仅复制当前节点。 <ul id="d"> <li>java</li&...
02-末尾添加节点
srnmwj99的博客
10-09 381
在末尾添加节点 第一步：获取到ul标签 第二步：创建li标签 - document.createElement("标签名称")方法 第三步：创建文本 - document.createTextNode("文本内容"); 第四步：把文本添加到li下面 - 使用 appendChild方法 第五步：把li添加到ul末尾 - 使用...
html 在body末尾追加,在/ BODY标签末尾呈现自定义HTML /脚本
weixin_33390899的博客
05-31 388
Solutions2You can put JavaScript near the end of your page using the Page.CleintScript.RegisterStartupScript method. This method places the JavaScript at the end of the form tag.protected void Page_Lo...
body后的参数 html,详细讲解HTML的BODY标记的内部参数
weixin_36480510的博客
06-11 190
bgcolor="#3366cc" ----------背景颜色topmargin=0 leftmargin=0 ----------网页内容上/左边界为0oncontextmenu="return false" ----------鼠标右键限制ondragstart="return false" ----------禁止移动onselectstart="return false" -------...
html 在body末尾追加,JavaScript在元素尾部追加字符串
weixin_42469706的博客
05-31 2757
JavaScript在元素尾部追加字符串属于前端实例代码，有关更多实例代码大家可以查看。应用中，可能需要在一个元素的末尾追加字符串，下面通过代码实例介绍一下如何实现。实现方式有两种，一种是追加文本节点，另一种通过innerHTML属性实现。如果要在字符串尾部追加参阅JavaScript 追加字符串一章节。一.追加文本节点:犀牛前端部落window.onload = () => {let tx...
有的js文件为什么放在body里面
bai101724的博客
12-29 437
放在body后面是等body载入完成，依次往下执行，避免：现载入js，却找不到body里面的dom对象而造成js出错，所以一般用window。onload来判断页面是否加载完成。这样处理的好处是无需担心因页面未完成加载，造成DOM节点获取不到，使脚本报错的问题，而且能避免因脚本运行缓慢遭成页面卡死的问题，另外，Yahoo的前端优化指南里面就有这一条。
小白IT:如何快速写出一个前端页面（网页），Python中如何使用前端语言什么是？JavaScript？BOM&DOM？Bootstrap？？
yidianyidei的博客
05-19 4435
JavaScript前端语言 1.什么是JavaScript语言 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。用来给HTML页面增加动态功能 2.ECMAScript和JavaScript的关系 1996年11月，JavaScript的创造者–Netscape公司，将JavaScript提交给国际标准化组织ECMA。 次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript，这个版本就是
Html+Css+JavaScript快速入门
Challenge_and_smiles的博客
07-03 1132
--------HTML基础-------- Hyper Text Markup Language：超文本标记语言. 什么是超文本：不仅仅是文本，还包括文本的样式(字体 大小 颜色等)，还包括多媒体(图片、音频、视频). 和xml的区别：XML标签可以任意定制，HTML标签固定就有那么多种. 学习HTML主要学习有哪些标签，标签有哪些属性，标签和标签间的嵌套关系. html常用标签： 文本标签： 1：<h1></h1> ...<h6></h6>
[JavaScript]基础知识复习题附答案
m0_63949551的博客
11-28 4980
选择题 1、JavaScript脚本语言的前身是（） A.Basic B.Live Script C.Oak D.VBScript 答案：B 难度容易 2、以下哪个不是javascript语言的特点：（） A. 基于对象B. 跨平台C. 编译执行D. 脚本语言 答案：C 难度容易 3标记符title是放在标记符什么之间的（） A.html与html B.head与he...
《JavaScript高级程序设计》- 第十四章：DOM
qq_55978913的博客
02-27 874
第十四章：DOM 文档对象模型（Document Object Model）是HTML 和 XML文档的编程接口；就是开发者可以通过JavaScript编程，添加、删除、修改页面的各个部分； 14.1 节点层级 任何HTML\XML文档都可以表示为由节点构成的层级结构。 <html> <head> <title>Sample Page</title> </head> <body>
JS——script标签在html中的使用
qq_43201350的博客
01-10 653
JS——script标签在html中的使用
js body追加html代码,innerHTML动态添加html代码和脚本兼容多个浏览器
weixin_39564807的博客
05-31 2503
症状：给某个元素的 innerHTML 设置值时，如果提供的 HTML 代码中包含js脚本，很多时候这些脚本无效，或者在某种浏览器上有效，但在其它浏览器上无效。原因：不同浏览器对插入 innerHTML 中的脚本有不同的处理方法。经过实践，归纳如下：对于IE，首先, script 标签必须带 defer 属性，其次,在插入时刻，innerHTML 的所属节点必须在 DOM 树中.对于 Firefo...
body 最后添加html,将script放在body中内容的最后的原因详解
weixin_42292183的博客
06-14 835
将script放在body中内容的最后的两点原因避免JavaScript操作DOM失效在解析JavaScript代码之前，将页面的内容完全呈现在浏览器中，用户会因为浏览器显示空白页面的时间缩短而感到打开页面的速度变快了下面，对这两点原因进行说明。原因分析：JavaScript阻塞HTML解析下面这张图来自HTML规范，图中清晰地描述了外部JavaScript对HTML解析的阻塞(内联脚本没有加载脚...
<body> 中的 JavaScript
技术何
07-19 589
JavaScript 能够直接写入 HTML 输出流中：document.write("This is a heading");document.write("This is a paragraph.");您只能在 HTML 输出流中使用 document.write。如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
JS学习-13.动态生成及尾部插入元素
qq_37974765的博客
11-16 960
createElement 创建元素 appendChild 插入到该元素的子级的最后方 interHTML 可以放入元素的内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>生成元素</title&gt
HTML加入JavaScript
少点套路，多点诚意
05-05 912
三种添加JavaScript方法 1 在head或body标签中添加script标签，在两个script标签之间填写代码 2 添加外部JavaScript文件，在head或body标签添加JS链接外部样式表 3 使用行内脚本（不推荐） 举例 1 添加script标签 1.1 在head标签内添加script标签 my first web
html-javascript放在head和body的区别以及js文件加载带来的阻塞
风起
07-24 3833
文章目录1. JavaScript放在head和body的区别2. js文件加载的阻塞 1. JavaScript放在head和body的区别 在HTML head部分中的JavaScripts会在被调用的时候才执行。 在HTML body部分中的JavaScripts会在页面加载的时候被执行。 head 部分中的脚本: 需调用才执行的脚本或事件触发执行的脚本放在HTML的head部分中。当你把脚本放在head部分中时，可以保证脚本在任何调用之前被加载。 body 部分中的脚本: 当页面被加载
js 浏览器到底部添加数据
04-02 743
li{ height: 100px; line-height: 100px; width: 200px; margin: 0 auto; border: 1px solid chartreuse; background-color: #000000; text-align: center; color: chartreuse; box-sizi
如何在桌面上显示一行字_从这里开始：如何创建一个非常简单的HTML文档？
weixin_39573136的博客
12-04 873
注意：本专栏内的教程适用于0基础的新手。什么是HTML？根据百度百科上的解释：HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。它的全称是Hyper Text Markup Language。...
js往数组赛值
最新发布
05-28
<think>好的，用户现在想了解如何使用JavaScript向数组添加值。之前他们问过关于前端for循环的使用方法，现在转向数组操作。我需要先回顾之前的对话，确保回答的一致性。根据用户提供的引用，他们提到了push方法和concat方法，但可能还有其他方法需要补充。首先，用户可能知道一些基本方法，但需要全面的指导。我需要列出所有常用的添加元素的方法，并详细说明每个方法的用途和示例。引用中提到的push和concat是基本的，但还有unshift、splice、展开运算符等。需要确保覆盖这些内容，并正确引用用户提供的资料。 接着，用户可能关心这些方法的使用场景和区别。比如，push和unshift的区别在于添加到末尾还是开头，splice可以在任意位置添加，而concat用于合并数组。同时，ES6的展开运算符也是一个重要点，应该包括在内。还要注意用户提到的系统级指令，比如数学公式的格式，但在这个问题中可能不太相关。不过要确保代码示例正确，使用中文回答，并生成相关问题。需要检查引用标记是否正确，比如在提到push和concat时引用用户提供的[^1]和[^2]。 另外，用户可能在实际应用中有不同的需求，比如动态添加元素或合并多个数组，需要举例说明。同时，要注意回答的结构清晰，分点列出，方便用户理解。最后，生成的相关问题要围绕数组操作的其他方面，如删除元素、方法比较、性能等，帮助用户深入学习。 需要确保所有方法都有示例代码，并说明输出结果，这样用户可以直接测试。同时，指出每个方法是否会修改原数组，因为这是开发中常关心的问题。比如push、unshift、splice会修改原数组，而concat和展开运算符会返回新数组，原数组不变。最后，验证所有信息是否正确，特别是引用部分，确保push和concat的示例与用户提供的引用一致。可能还需要检查是否有其他方法被遗漏，比如使用方括号直接赋值，但这种情况通常用于已知索引的情况，可能不属于添加值的常用方法，所以可能不需要提及。 总结，回答需要涵盖多种添加值的方法，每种方法的说明和示例，引用正确，结构清晰，并生成相关问题引导用户进一步学习。</think>### JavaScript 向数组添加值的 8 种方法详解 #### 一、尾部追加元素 1. **push() 方法** 最常用的数组追加方法，可一次性添加多个元素，直接修改原数组： ```javascript const fruits = ['apple']; fruits.push('banana', 'orange'); console.log(fruits); // 输出: ["apple", "banana", "orange"][^1] ``` 2. **索引直接赋值** 适用于已知数组长度的情况： ```javascript const nums = [1, 2]; nums[nums.length] = 3; console.log(nums); // 输出: [1, 2, 3] ``` #### 二、头部插入元素 3. **unshift() 方法** 在数组开头插入元素，时间复杂度为 $O(n)$： ```javascript const colors = ['blue']; colors.unshift('red'); console.log(colors); // 输出: ["red", "blue"] ``` #### 三、任意位置插入 4. **splice() 方法** 最灵活的数组操作方法，可在指定索引位置插入元素： ```javascript const letters = ['a', 'c']; letters.splice(1, 0, 'b'); // 在索引1处插入，0表示不删除元素 console.log(letters); // 输出: ["a", "b", "c"] ``` #### 四、数组合并 5. **concat() 方法** 合并多个数组并返回新数组，原数组不受影响： ```javascript const arr1 = [1, 2]; const arr2 = [3]; const merged = arr1.concat(arr2, [4]); console.log(merged); // 输出: [1, 2, 3, 4][^2] ``` 6. **展开运算符（ES6）** 更直观的数组拼接方式： ```javascript const parts = ['head']; const full = [...parts, 'body', 'tail']; console.log(full); // 输出: ["head", "body", "tail"] ``` #### 五、动态构建数组 7. **动态生成数组** 配合循环语句动态添加元素： ```javascript const squares = []; for(let i=1; i<=3; i++) { squares.push(i**2); } console.log(squares); // 输出: [1, 4, 9] ``` 8. **Array.from()（ES6）** 通过类数组对象创建新数组： ```javascript const chars = Array.from('hello'); chars.push('!'); console.log(chars); // 输出: ["h", "e", "l", "l", "o", "!"] ``` #### 六、方法对比表 | 方法 | 修改原数组 | 插入位置 | 时间复杂度 | |-------------|------------|------------|------------| | push() | ✔️ | 尾部 | $O(1)$ | | unshift() | ✔️ | 头部 | $O(n)$ | | splice() | ✔️ | 任意位置 | $O(n)$ | | concat() | ❌ | 尾部合并 | $O(n)$ | | 展开运算符 | ❌ | 任意位置 | $O(n)$ | #### 七、实际应用场景 ```javascript // 动态表单字段添加 const formFields = ['username']; function addField(newField) { return [...formFields, newField]; } console.log(addField('email')); // 输出: ["username", "email"] // 实时数据流处理 const sensorData = []; setInterval(() => { sensorData.push(Math.random().toFixed(2)); }, 1000); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值