JavaScript的加载执行顺序

最新推荐文章于 2023-03-14 16:21:10 发布
最新推荐文章于 2023-03-14 16:21:10 发布
阅读量257 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/red_heel/article/details/73957592
版权

有多种方式可以将JavaScript包含到html页面中，如果不是动态加载脚本或者将其标记为延迟或异步，则按照页面中遇到的顺序加载脚本

< script >
        var button = document . getElementsByTagName ( 'input' );
        button . addEventListener ( 'click' , function () {
            var content = document . getElementsByTagName ( 'p' );
            content . style . background = "red" ;
        })
    < / script >
</ head >

< body >
    < div >
        < p > Welcome to the world!!! </ p >
        < input type = "submit" value = "点我" >
    </ div >
</ body >

按照传统的做法所有<script>元素都应该放在页面的<head>元素中。这种做法的目的是把所有外部文件的引用放在相同的地方，可是，在文档<head>元素中包含JavaScript文件，意味着必须等到全部JavaScript代码都被下载解析和执行完之后，才能开始呈现页面的内容，对于需要很多JavaScript代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟。

因为body是在head之后加载，因此在head的script脚本并不能找到body中的元素，所以当script脚本执行的时候div并不存在。

解决方案：

1. 将script放在body的结尾

好了，另外一个问题出现了，我发现好像这个程序并没有起任何的作用，才发现

document . getElementsByTagName

的类型是NodeListOf，而我们只能给单个element.addEventListener,所以

var button = document . getElementsByTagName ( 'input' )[ 0 ]

才是正确的写法。



red_heel
关注
专栏目录
探析浏览器执行JavaScript脚本加载与代码执行顺序
10-22
浏览器执行JavaScript脚本加载与代码执行顺序是网页开发中至关重要的一环，因为它直接影响到网页的渲染和用户体验。本文主要探讨了两种关键的概念：JavaScript脚本的阻塞性和执行顺序。 1. JavaScript脚本的阻塞性...
高性能的javascript之加载顺序与执行原理篇
11-21
本文主要探讨了JavaScript加载顺序与执行原理，以及如何通过优化策略提升性能。 首先，当浏览器遇到`<script>`标签时，会暂停页面的渲染，先下载并执行脚本。这种行为会导致页面呈现的阻塞，特别是在脚本数量较多或...
Javascript加载执行顺序
weixin_34221775的博客
06-04 145
本文主要内容 一、不同位置的script标签执行顺序 二、document.ready和window.onload的区别 一、不同位置的script标签执行顺序 　　整个加载的过程从解析头部开始，比如html编码格式，meta标签等。当浏览器加载html文件并解析到<head>时,页面也就是<body>并没有被解析,浏览器会等到<head>中的js...
JavaScript加载顺序问题
hello_6_world的博客
12-01 505
alert("head"); </script alert("footer"); </script 关键技术讲解： onload 事件会在页面或图像加载完成后立即发生。 引用顺序： 页面上的JavaScript按引用和编写的顺序从上到下依次执行（在页面加载以前）； onload在页面加载之后执行； 执行结果：head——》footer——》comp
Javascript的加载与执行顺序
Dachuan
02-24 238
链接地址：https://blog.csdn.net/wnvalentin/article/details/79769393   通过以下地址加深理解 测试地址：https://www.cnblogs.com/yxz-turing/p/4735934.html
Javascript位置 body之前、后 执行顺序
alian_1126的专栏
01-22 2521
简介：<br />当页面加载的时候，嵌入html标记的js代码和位于<body></body>之间的js代码将被执行；当调用的时候，位于<head></head>之间代码和外部js文件代码将被执行 <br /> <br />1.根据实际需要放置代码？<br />有时候，您实际上需要把代码放置在不同地方以符合代码运行要求。比如，您需要在代码全部载入浏览器后再运行代码，那就可以<br />将<script>标签放在</html>后面去，如果您需要在页面载入的时候运行代码，可以把js代码放入<head></h
深究Javascript的加载与执行顺序
疑问 搜索 动手 解决 记录
11-16 799
1. 按块加载并执行 对于一个HTML文档，浏览器的解析顺序为：按照文档流，从上到下逐步解析页面的结构。JavaScript代码作为通过标签嵌入或引入的脚本，也HTML文档的组成部分。因此，JavaScript代码在装载时的执行顺序也是根据脚本标签但是，浏览器加载JavaScript时有个特点，那就是载入之后立即就会执行（先编译后执行），因为JavaScript可能会影响DOM树的结构，所以浏览器在执行完后才能继续加载下面的HTML内容。也就是说，浏览器下载并执行JavaScript的过程会阻塞DOM树的继
Javascript代码在页面加载时的执行顺序介绍
10-27
在探讨JavaScript代码在网页加载过程中的执行顺序时，我们首先需要了解JavaScript在HTML文档中的几种嵌入方式，以及它们在页面加载过程中的执行行为。 一、HTML中嵌入JavaScript的方法 1. 直接将JavaScript代码...
关于Javascript加载执行优化的研究报告
10-25
总结来说，JavaScript加载和执行优化涉及多个方面，包括文件放置位置、请求次数、合并与压缩文件、利用缓存以及使用异步或延迟加载属性。通过这些策略的应用，前端开发者可以显著提升网页的响应速度和用户体验。报告...
js脚本加载执行顺序
最新发布
czz19910404的博客
03-14 2179
js脚本加载执行顺序
浏览器环境中javascript加载执行顺序及注意点
lengye7的博客
03-24 3025
1、html中通过script标签引入的javascript代码。 这种js代码是自上而下执行的，不论其加载快慢，始终都是按照顺序执行。 2、不要在加载脚本中使用document.write插入任何javascript代码。 因为这种方式写入的JS代码在执行流程中会出现一些问题，所以最好就是不要使用这种方式在加载过程中插入JS代码。 外部脚本：通过script src引入。 内部脚本：直接script内嵌。 注：document.write写入内容的位置还存在一个问题，加入在<head&.
JS技能点--JS代码加载顺序
程序员大阳
06-27 1736
1. 基本理论 浏览器在解析HTML文档时，是自上而下解析的，从上到下依次加载、解析。 2. 内部JS代码与外部JS代码 不论是<script>和</script>之间的内部JS代码，还是通过src属性引用的外部JS代码，浏览器在解析到<script>标签时，页面的内容加载都会暂停，也就是说必须先解析完JS代码，才能往后继续解析。 所以此时还是符合自上而下解析的基本理论的。 3. 多个<script>标签的解析问题 此处要注意，浏览器会按照<script
关于script在页面的最佳位置以及html执行顺序
LeoSong121的博客
09-17 3206
首先需要知道： html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到&lt;script&gt;脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。 　　　　所以，大部分网上讨论是将script脚本放在&lt;body&gt;之后，那样dom的生成就不会因为长时间执行script脚本而延迟阻塞，...
JavaScript 加载顺序和异步加载详解
Draven
06-23 3647
JavaScript 加载顺序和异步加载详解
js的加载顺序
lizhengxv的博客
08-20 4462
1. js 放在 &lt;head&gt;标签中会立即执行，阻塞后续资源的下载与执行。因为js有可能会操作DOM，如果不阻塞后续的资源下载，DOM的操作顺序不可控。 如果外部脚本加载时间很长，就会造成网页长时间失去响应，浏览器就会呈现“假死”状态。这被称为“阻塞效应”。html 需要等&lt;head&gt;中所有的js和css加载完后才开始绘制。因此要把 js 文件放在 &lt;body&g...
JavaScript 初始化函数 以及加载顺序
彻底拆分，一切可控！
08-13 7332
加载顺序 ;(function(){}()); &gt; $(function()function()） &gt; window.onload &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&amp
script标签加载顺序(defer & async)
热门推荐
zm_miner的博客
10-11 1万+
script 拥有的属性 async：可选，表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。 charset：可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。 defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7 及更早版本对嵌入脚本也支持...
document.ready和onload的区别----JavaScript文档加载完成事件
weixin_30412013的博客
05-19 223
document.ready和onload的区别----JavaScript文档加载完成事件 页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页 面包含图片等文件在内的所有元素都加载完成。(可以说：ready 在onload 前加载！！！) 我的理解： 一般样式控制的，比如...
浏览器执行JavaScript：加载与执行顺序解析
"本文深入探讨了浏览器如何处理JavaScript脚本的加载和执行顺序，强调了JavaScript执行时的阻塞性特点以及不同浏览器对脚本下载和执行顺序的处理差异。" 在HTML页面中，JavaScript的引入主要有两种方式：内联脚本和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值