JavaScript异步加载与性能优化探讨

dom

dom对象

30 浏览量更新于2024-08-31 收藏 103KB PDF 举报

身份认证购VIP最低享 7 折!

30元优惠券

本文主要探讨JavaScript的异步加载机制，涉及同步脚本与异步脚本的优缺点，以及它们如何影响文件加载、文件依赖和执行顺序，同时关注性能优化问题。 JavaScript脚本加载有两种主要方式：同步和异步。同步脚本在HTML解析过程中被阻塞，直到脚本加载和执行完毕，这可能导致页面渲染的延迟，尤其是当脚本位于`<head>`标签中时。相反，将脚本放置在`<body>`标签底部可以减少这种影响，因为浏览器会先解析和显示页面内容，然后执行脚本。异步加载（async）是一种解决方法，它允许脚本在不影响页面渲染的情况下加载和执行。例如，通过添加`async`属性到`<script>`标签，如下所示： ```html <script async src="js/myApp.js"></script> ``` 异步脚本的执行顺序是不确定的，可能在HTML解析的任意时刻完成，不保证按照它们在页面中出现的顺序执行。这意味着异步脚本之间不能有依赖关系，因为它们可能以不同的顺序完成。另一种异步加载方式是 defer 属性，它也用于`<script>`标签，如下： ```html <script defer src="js/myApp.js"></script> ``` 使用`defer`的脚本会等到整个HTML文档解析完成后才执行，但会在`DOMContentLoaded`事件触发之前，这样可以确保脚本按照在文档中的顺序执行，解决了依赖问题。在考虑性能优化时，需要平衡脚本加载与用户体验。对页面展示影响较小的脚本，如分析工具或可选功能，可以设置为异步加载。对于直接影响页面布局和功能的核心脚本，应确保它们能在正确的时间执行，避免破坏页面结构。此外，还可以利用动态插入`<script>`标签来控制脚本的加载时机，例如在页面滚动到特定位置或用户触发某个交互时才加载。理解JavaScript的异步加载机制对于优化网页性能至关重要。合理使用异步和延迟加载策略，能提高页面加载速度，改善用户体验，并且有助于实现更高效的前端架构。

资源详情

资源推荐

JavaScript异步加载浅析异步加载浅析

前言前言

关于JavaScript脚本加载的问题，相信大家碰到很多。主要在几个点——

1> 同步脚本和异步脚本带来的文件加载、文件依赖及执行顺序问题

2> 同步脚本和异步脚本带来的性能优化问题

深入理解脚本加载相关的方方面面问题，不仅利于解决实际问题，更加利于对性能优化的把握并执行。

先看随便一个script标签代码——

代码如下:

如果放在<head>上面，会阻塞所有页面渲染工作，使得用户在脚本加载完毕并执行完毕之前一直处于“白屏死机”状态。而

<body>末尾的打脚本只会让用户看到毫无生命力的静态页面，原本应该进行客户端渲染的地方却散布着不起作用的控件和空

空如也的方框。拿一个测试用例——

代码如下:

<!DOCTYPE html>

<html>

<title>异步加载script</title>

</head>

<body>

</body>

</html>

其中,test.js中的内容——

代码如下:

alert(‘我是head里面的脚本代码，执行这里的js之后，才开始进行body的内容渲染!’);

我们会看到,alert是一个暂停点，此时，页面是空白的。但是要注意，此时整个页面已经加载完毕，如果body中包含某些src属

性的标签(如上面的img标签)，此时浏览器已经开始加载相关内容了。总之要注意——js引擎和渲染引擎的工作时机是互斥的

（一些书上叫它为UI线程）。

因此,我们需要——那些负责让页面更好看、更好用的脚本应该立即加载，而那些可以待会儿再加载的脚本稍后再加载。

一、脚本延迟执行一、脚本延迟执行

现在越来越流行把脚本放在页面<body>标签的尾部。这样，一方面用户可以更快地看到页面，另一方面脚本可以直接操作已

经加载完成的dom元素。对于大多数脚本而言，这次“搬家”是个巨大的进步。该页面模型如下——

代码如下:

<!DOCTYPE html>

<html>

<!–metadata and scriptsheets go here–>

</head>

<body>

<!–content goes here–>

</body>

</html>

这确实大大加快了页面的渲染时间，但是注意一点，这可能让用户有机会在加载bodyScript之前与页面交互。源于浏览器在加

载完整个文档之前无法加载这些脚本，这对那些通过慢速连接传送的大型文档来说会是一大瓶颈。

理想情况下，脚本的加载应该与文档的加载同时进行，并且不影响DOM的渲染。这样，一旦文档就绪就可以运行脚本，因为

已经按照<script>标签的次序加载了相应脚本。

我们使用defer便能够完成这样的需求，即——

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38725902

粉丝: 4
资源: 929

JavaScript异步加载与性能优化探讨

浅析JavaScript异步代码优化

浅析JS异步加载进度条

异步加载特点及实现方式

说说你对异步加载的理解

唯品会网站中的JavaScript的缓存策略 代码整洁性 异步加载

echarts中多个图表异步加载

uni data select 异步加载

路由懒加载 require异步加载例子

所有的异步加载都会向后台发送请求。（）

vue2动态异步加载组件

vue3动态异步加载组件

采用什么技术可以实现异步加载

生成angularjs异步加载代码

echarts异步加载数据

cesium异步加载

vue异步加载组件白屏

cocoscreator 什么是异步加载资源？对写代码有和影响

echarts数据通过异步加载获得

JavaScript 异步迭代器

selenium模拟浏览器异步加载

最新资源

唯品会网站中的JavaScript的缓存策略代码整洁性异步加载