JS延迟加载方式

问题：

当浏览器解析html文件时，遇到纯script标签会先暂停html文件的解析去请求获取js文件并执行。在js代码执行完毕后才会继续解析html文件，这就会阻塞DOM的加载。所以我们希望JS延迟加载来提高页面的加载速度。

写法：

<script src='xxx'></script>

执行过程：

暂停html解析 → 发送网络请求获取js文件 → js引擎执行该js代码 → js代码执行完毕 → 继续解析html文件

缺点：

当js文件请求响应时间过慢，或js代码执行时间过长时，html文件的解析渲染会阻塞，导致白屏，用户体验感差。

JS延迟加载方式：

1. 利用html文件从上到下解析的特点，将script标签放在页面的最底部。
2. 动态创建script标签：监听DOM加载完毕再引入js文件。

3. 利用script标签的async属性。
1. 写法：
```
<script src='xxx' async></script>
```
  作用：
  
  当遇到带有async属性的script标签时，浏览器会在解析html文件的同时，发起js文件的异步下载。当js文件下载文件完成后，会立即执行js代码。这时候html文件的解析可能已经完成，也可能未完成。若html文件未解析完成，会导致阻塞DOM的加载。
  
  缺点：
  
  async不可控，因为js的执行时间和顺序不确定。
2. 1.多个带有async属性的script标签的先后执行顺序不一定，谁先下载完成就先执行。
3. 2. 在js代码请求完成立即执行时，不确定html文件是否解析渲染完成。在js中获取某个DOM元素能否成功不一定。
4. 利用script标签的defer属性
1. 写法：
```
<script src='xxx' defer></script>
```
  作用：
  
  当遇到带有defer属性的script标签时，浏览器在解析html文件的同时，发起js文件的异步下载。当js文件下载文件完成后，会等html文件解析完毕，才执行js代码。
  
  优点：
  
  defer属性是可控的，执行时间在html解析完成后，执行顺序是html中出现的顺序。

html-JS延迟加载方式相关推荐

面试：js 延迟加载方式
相关知识点: js 延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件. js 延迟加载有助于提高页面加载速度一般有以下几种方式: defer 属性 async 属性动态创建 D ...
JS延迟加载的几种方式
JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件.有助于提高页面加载速度. 一般有以下几种方式: 1:defer 属性,async 属性 2:动态创建DOM方式 3:使用jQu ...
ajax异步加载延时问题,关于js延迟加载（异步操作）的方式
一.概述最近重新开始学习js,在第一章的一个小节里写到了"脚本调用策略",书上写的这部分不多,但是发现在我之前的(笔)面试中,问到的频率还是比较高的.自己一直习惯于直接把所有js ...
解决js延迟加载的方式
1.什么是JS延迟加载? JS延迟加载就是页面加载完成之后再加载js文件,有助于提高页面加载速度. 因为js是单线程,会阻塞DOM解析,因此也会阻塞DOM的加载. HTML元素是按其在页面中出现的次序 ...
js 延迟加载的方式有哪些
js延迟加载就是当页面全部加载完毕,然后再加载js文件,这样做有助于提高页面加载的速度. 下面将总结js中延迟加载的几种方式. 1.defer属性在script标签上,设置defer属性,可以达到异 ...
js延迟加载优化页面响应速度
网页打开速度是衡量网站性能的一个极为重要的指标,今天就来说说如何通过JS延迟加载的方式提高页面响应速度: JS延迟加载的含义:即等页面加载完成之后再加载 JavaScript 文件. 作用:JS延迟 ...
JS延迟加载百度分享代码，提高网页速度
相信大家经常在一些网站上看到有快捷分享到各大流行网站的按钮,目前流行的有JiaThis.百度分享.Bshare等,目前用百度分享的居多. 发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固 ...
【jQuery】利用lazyload.js延迟加载技术应对多图杀猫的单一页面
有时候不可避免地在某一页面摆上大量图片,众所周知,一张网页如果上面的元素超过100KB,那么,你的网页会加载得很慢,纵使现在的网络已经不是当年的猫,然而,你也应该尽可能地提高你的网页加载速度.对于多图 ...
js延迟加载、js异步加载
1.js延迟加载 (1)js延迟加载是js性能优化的一种方式 (2)作用:为了提高网页的加载速度 (3)原理:等网页加载完成之后再加载js文件 ··需要优化的原 ...

html-JS延迟加载方式

JS延迟加载方式

html-JS延迟加载方式相关推荐

最新文章

热门文章