面试：js 延迟加载方式

相关知识点：

js 延迟加载，也就是等页面加载完成之后再加载 JavaScript 文件。
js 延迟加载有助于提高页面加载速度

一般有以下几种方式：

defer 属性

async 属性

动态创建 DOM 方式

使用 setTimeout 延迟方法

让 JS 最后加载

js 的加载、解析和执行会阻塞页面的渲染过程，因此我们希望 js 脚本能够尽可能的延迟加载，提高页面的渲染速度。

第一种方式是我们一般采用的是将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行。

第二种方式是给 js 脚本添加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。

第三种方式是给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js 脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。

第四种方式是动态创建 DOM 标签的方式，我们可以对文档的加载事件进行监听，当文档加载完成后再动态的创建 script 标签来引入 js 脚本。

面试：js 延迟加载方式相关推荐

html-JS延迟加载方式
JS延迟加载方式问题: 当浏览器解析html文件时,遇到纯script标签会先暂停html文件的解析去请求获取js文件并执行.在js代码执行完毕后才会继续解析html文件,这就会阻塞DOM的加载.所 ...
ajax异步加载延时问题,关于js延迟加载（异步操作）的方式
一.概述最近重新开始学习js,在第一章的一个小节里写到了"脚本调用策略",书上写的这部分不多,但是发现在我之前的(笔)面试中,问到的频率还是比较高的.自己一直习惯于直接把所有js ...
JS延迟加载的几种方式
JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件.有助于提高页面加载速度. 一般有以下几种方式: 1:defer 属性,async 属性 2:动态创建DOM方式 3:使用jQu ...
解决js延迟加载的方式
1.什么是JS延迟加载? JS延迟加载就是页面加载完成之后再加载js文件,有助于提高页面加载速度. 因为js是单线程,会阻塞DOM解析,因此也会阻塞DOM的加载. HTML元素是按其在页面中出现的次序 ...
js 延迟加载的方式有哪些
js延迟加载就是当页面全部加载完毕,然后再加载js文件,这样做有助于提高页面加载的速度. 下面将总结js中延迟加载的几种方式. 1.defer属性在script标签上,设置defer属性,可以达到异 ...
js延迟加载的几种方法
这是一个面试经常问到的问题:js的延迟加载方法 (js的延迟加载有助与提高页面的加载速度) 主要考察对程序的性能方面是否有研究,程序的性能是一个项目不断地追求的,通常也是项目完成后需要长期做的一件事情 ...
js延迟加载优化页面响应速度
网页打开速度是衡量网站性能的一个极为重要的指标,今天就来说说如何通过JS延迟加载的方式提高页面响应速度: JS延迟加载的含义:即等页面加载完成之后再加载 JavaScript 文件. 作用:JS延迟 ...
JS延迟加载百度分享代码，提高网页速度
相信大家经常在一些网站上看到有快捷分享到各大流行网站的按钮,目前流行的有JiaThis.百度分享.Bshare等,目前用百度分享的居多. 发现很多网站在放置百度分享代码的时候,简单的将分享代码放置到固 ...
前端面试 - JS总结（1） - 基础 (数据类型, 事件与函数, 原型链)
你不走出舒适圈,又怎么知道自己多坚强?! 前端面试 - JS总结(1) - 基础 (数据类型, 事件与函数, 原型链) 前端面试 - JS总结(2) - ES6 (let, 箭头函数, this) 前 ...

面试：js 延迟加载方式

面试：js 延迟加载方式相关推荐

最新文章

热门文章