页面加载js执行
页面加载时JavaScript的执行涉及多个基础概念和步骤，以下是对这一过程的详细解释：
基础概念
- DOM（文档对象模型）：
- 浏览器解析HTML文档后形成的树状结构。
- JavaScript可以通过DOM操作来修改页面内容。
- CSSOM（CSS对象模型）：
- 描述了页面上所有CSS规则和样式的对象模型。
- 同样可以被JavaScript访问和修改。
- JavaScript执行开销：
- 解析、编译和执行JavaScript代码都需要消耗时间和资源。
- 事件循环（Event Loop）：
- JavaScript运行时环境用来处理异步操作的核心机制。
执行过程
- 解析HTML：
- 浏览器边下载边解析HTML文档。
- 构建DOM树。
- 遇到
<script>标签：
- 如果是内联脚本，浏览器会暂停DOM构建，立即执行脚本。
- 如果是外部脚本，浏览器会先去下载脚本文件，下载完成后执行。
- 执行JavaScript：
- 脚本可能会修改DOM或CSSOM，导致页面重新渲染。
- 执行完毕后，浏览器继续构建DOM树。
- 加载和执行完毕：
- 当所有资源（包括图片、样式表、脚本等）都加载并执行完毕后，页面渲染完成。
优势
- 动态交互：JavaScript可以让网页具有动态交互能力。
- 实时更新：无需刷新页面即可更新部分内容。
类型
- 同步脚本：按照顺序执行，阻塞页面渲染。
- 异步脚本：通过
async或defer属性实现非阻塞加载。
应用场景
- 表单验证：在提交前检查用户输入的有效性。
- 动态内容加载：根据用户操作动态加载新内容。
- 交互效果：实现动画、弹窗等视觉效果。
常见问题及解决方法
问题1：页面加载缓慢，JavaScript执行时间长
原因：
- 脚本文件过大。
- 复杂的计算或大量的DOM操作。
解决方法：
- 压缩和合并JavaScript文件。
- 使用Web Workers进行后台处理。
- 优化算法和减少不必要的DOM操作。
问题2：JavaScript阻塞页面渲染
原因：
- 同步加载的外部脚本。
- 大量同步执行的JavaScript代码。
解决方法：
- 使用
async属性加载不依赖DOM的脚本。 - 使用
defer属性加载依赖DOM的脚本，确保DOM加载完成后再执行。 - 将脚本放在文档底部，让页面先渲染。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript Execution</title>
<script src="script.js" defer></script> <!-- 使用defer属性 -->
</head>
<body>
<h1>Hello World</h1>
<script>
// 同步脚本示例
console.log("Sync script executed");
</script>
</body>
</html>总结
合理管理JavaScript的执行时机和方式，可以显著提升页面加载速度和用户体验。通过使用async和defer属性，以及优化脚本代码，可以有效避免阻塞页面渲染的问题。
相关·内容
问题:如果我有两个脚本：<script async src="url2.js"><script> // 2kb第二个script必须在第一个之后执行(它使用了一些Objects或functions )--在页面加载之后会执行吗？第一个脚本是先在加载后<
浏览 10提问于2015-11-16得票数 5
回答已采纳
我有一个不会有太多变化的html页面，我想为ex缓存一周。在这个html中，我有一些JS脚本，它们执行一些ajax请求并修改html。当浏览器加载此页面时，JS脚本是否会运行？
10倍
浏览 2提问于2013-01-03得票数 2
回答已采纳
当添加动态加载的脚本时，我可以在执行期间访问主对象，但是一旦加载了页面，如果我试图从控制台访问它，它就会抛出undefined。js = d.createElement('script'); js.id = id; js.onload，并在页
浏览 2提问于2016-11-08得票数 0
我目前正在使用PhantomJS来处理一些文档的报告，并查看了一些我发现的例子。 page.render(output); phantom.exit();我想知道为什么要使用window.setTimeout?？它会影响web渲染？？
浏览 4提问于2014-02-25得票数 4
回答已采纳
我有默认的Rails项目结构，并创建了一个简单的assets/javascript/test.js文件。资产/javascript/test.js：console.log(elements[0]);使用：还在控制台中显示null。
浏览 1提问于2015-11-13得票数 3
回答已采纳
打开模式的代码是在js文件中编写的。- xyz.js
</script>
但是，jsp中的document.ready调用早于基于setTimeout的加载模型的函数有人能告诉我如
浏览 1提问于2018-08-02得票数 0
回答已采纳
我创建了一个动态操作，即执行Javascript代码并启用Fire on Initialization函数。“初始化的含义与定义动态操作的方式略有不同。对于所有其他动态操作，该操作指定该操作是否在加载页面时触发。”
目前，我必须单击网格的某个单元格，以便激活网格行进行编辑，并触发fire on initialization。有人知道如何在页面加载时立即启用fire on initialization吗？
浏览 6提问于2019-11-07得票数 1
回答已采纳
我有一个小的弹出式窗口，我是在用户点击页面上的链接加载。但是大约一半的时间，我在firebug的console.log中得到"OpenLayers.Layer.OSM.Mapnik不是一个构造器“。如果我完全刷新页面，我会在第一次单击时出现错误，但关闭后就会得到地图。var map = undefined,
functi
浏览 0提问于2011-03-22得票数 1
我有一个包含脚本javascript语句的页面：我用以下命令呈现该页面：我想把这句话替换为：而且window.print在页面加载时不做任何事情。
浏览 0提问于2016-05-23得票数 4
2回答
我在php中动态地从DB加载一个表。表中的一列是复选框。在列标题上，单击我从DB中删除选中的条目。在函数的末尾，我调用location.reload()，希望刷新表，但这不会发生。
浏览 2提问于2015-02-11得票数 0
回答已采纳
我正在尝试在Vaadin6.x中添加jquery，但Vaadin在加载页面之前执行js，因此jquery标签无法识别，也不会加载到页面上。我正在执行如下的jquery函数 getApplication().getMainWindow().executeJavaScript("alert('attached');$('a.media').media();");
但是al
浏览 0提问于2012-09-24得票数 0
2回答
我正在尝试优化JS的一部分(它是一个公司的详细信息-地址，电话号码等验证徽章)。我真的不需要它，但它从两个不同的CDN中提取信息，这加起来就是我的页面速度。这行代码看起来像这样：有没有可能(jquery已经为其他东西加载了)，只有在页
浏览 19提问于2017-08-24得票数 0
回答已采纳
在我的站点上，有一个区域可以通过AJAX加载几个不同的小部件。一些小部件需要一个外部JS脚本，而我的页面的其余部分则不需要，所以我不希望在特定小部件的窗口打开之前加载该脚本。：
<script type="text/javascript" src="http://www.bandsintown.com/javascripts/bit_widget.js"></script>javas
浏览 0提问于2011-06-21得票数 0
回答已采纳
1回答
我正在构建一个由几个jquery移动页面组成的项目，每个页面都有一个导航栏。当我刷新页面时，该函数正常工作。，这是我加载的第一页：
<!/jquery-1.8.2.min.js" type=&quo
浏览 1提问于2013-04-06得票数 3
回答已采纳
然后通过jquery ()函数将该内容加载到index.html。如何在a.js文件中获得“. the”类元素？<html> ...</head>
<script src="js/jquery.min.js"></script
浏览 1提问于2021-06-04得票数 0
回答已采纳
我正在尝试使用它，以便只加载页面所需的javascript。我的想法是创建一个main.js文件来加载当前页面的js，但是我想知道如何告诉main.js要加载哪个文件。使用url参数来猜测页面?我该怎么办？
浏览 1提问于2012-06-07得票数 1
回答已采纳
我有一个索引页面，它加载了一堆记录。每一张唱片都有一个“最喜欢”的图标。单击“收藏”会向服务器发送一个POST并重新加载页面。 path, remote: trueapp/views/records/favorite.js.erb.update("<%= j render 'icon'
浏览 2提问于2015-09-12得票数 2
回答已采纳
1回答
这是我的难题：每个页面都有自己的特定javascript文件。例如：'dashboard.index.js'，'inbox.index.js‘等等。注意:所有库都是通过PreloadJS在页面的第一次加载时预加载的，以避免javascript编译开销。页面的第一个加载是完美的，不用担心，因为它是一个普通的HTML<e
浏览 2提问于2014-07-24得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
