总结:js延迟加载的方式有哪些?

该面试题主要考察的是程序的性能方面。性能优化的核心思想就是快,常见的优化手段有预先准备数据(如缓存),按需获取,分段、异步获取等

由于JavaScript的阻塞特性(单线程运行),在每一个

<head>
//脚本1
<script defer src="js/vendor/jquery.js"></script>
//脚本2
<script defer src="js/script2.js"></script>
//脚本3
<script defer src="js/script3.js"></script></head>

动态添加脚本元素
优点:无论这段脚本是在何时启动下载,它的下载和执行过程都不会阻塞页面的其他进程,我们甚至可以直接添加到头部head标签中,都不会影响其他部分。

通过这种方式下载文件后,代码就会自动执行。但是在现代浏览器中,这段脚本会等待所有动态节点加载完成后再执行。这种情况下,为了确保当前代码中包含的别的代码的接口或者方法能够被成功调用,就必须在别的代码加载前完成这段代码的准备

解决的具体操作思路是:现代浏览器会在script标签内容下载完成后接收一个load事件,我们就可以在load事件后再去执行我们想要执行的代码加载和运行,在IE中,它会接收loaded和complete事件,理论上是loaded完成后才会有completed,但实践告诉我们他两似乎并没有个先后,甚至有时候只会拿到其中的一个事件,我们可以单独的封装一个专门的函数来体现这个功能的实践性

function LoadScript(url, callback) {var script = document.createElement('script');script.type = 'text/javascript';// IE浏览器下if (script.readyState) {script.onreadystatechange = function () {if (script.readyState == 'loaded' || script.readyState == 'complete') {// 确保执行两次script.onreadystatechange = null;// todo 执行要执行的代码callback()}}} else {script.onload = function () {callback();}}script.src = 'file.js';document.getElementsByTagName('head')[0].appendChild(script);}
    使用setTimeout延迟方法的加载时间<script type="text/javascript" >function A(){$.post("/lord/login",{name:username,pwd:password},function(){alert("Hello");});}$(function (){setTimeout('A()', 1000); //延迟1秒})
</script>

XMLHttpRequest脚本注入,动态添加script标签
优点:(1)可以控制脚本是否要立即执行。因为我们知道新创建的script标签只要添加到文档界面中它就会立即执行,因此,在添加到文档界面之前,也就是在appendChild()之前,我们可以根据自己实际的业务逻辑去实现需求,到了想要让它执行的时候,再appendChild()即可(2)它的兼容性很好,所有主流浏览器都支持,它不需要像动态添加脚本的方式那样,我们自己去写特性检测代码。

缺点:由于是使用了XHR对象,获取这种资源有“域”的限制。资源必须在同一个域下才可以,不可以跨域操作。

var xhr = new XMLHttpRequest();
xhr.open('get','test.js',true);
xhr.onreadystatachange = function(){if(xhr.readyState == 4){// 表示响应已经完成,可以获取并使用服务器的响应了if(xhr.state >= 200 && xhr.state < 300 || xhr.state == 304){//200表示成功/OKvar script = document.createElement('script');script.type = 'text/javascript';script.text = xhr.requestText;document.body.appendChild(script);}}
}
补充方法XHR.readyState的五种状态
XHR.readyState == 状态(0,1,2,3,4)
0:请求未初始化,还没有调用 open()
1:请求已经建立,但是还没有发送,还没有调用 send()
2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)
3:请求在处理中;通常响应中已有部分数据可用了,没有全部完成
4:响应已完成;可以获取并使用服务器的响应了补充方法XHR.status常见的几种状态
XHR.status == 200,300,404
100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本
200——成功
201——提示知道新文件的URL
300——请求的资源可在多处得到
301——删除请求数据
404——没有发现文件、查询或URl
500——服务器产生内部错误 index.php

总结

JS延迟加载的方式有:

1)为<script>标签添加defer和async属性
(2)动态添加脚本元素
(3)使用setTimeout延迟方法的加载时间
(4)XMLHttpRequest脚本注入,动态添加script标签

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/409279.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android中简单的日期格式化

自己遇到的一点格式化日期的方法&#xff0c;记下来 // 今天的信息 显示时间 dateStr DateFormat.getTimeFormat(context).format(date); // 日期 dateStr DateFormat.getDateFormat(context).format(date)" "DateFormat.getTimeF…

集群没有leader_面试官问:说说你对ZooKeeper集群与Leader选举的理解?

ZooKeeper是一个开源分布式协调服务、分布式数据一致性解决方案。可基于ZooKeeper实现命名服务、集群管理、Master选举、分布式锁等功能。高可用为了保证ZooKeeper的可用性&#xff0c;在生产环境中我们使用ZooKeeper集群模式对外提供服务&#xff0c;并且集群规模至少由3个Zoo…

t3修改计算机后就无法登录了,电脑更换系统后,用友T3登录不上了,一直显示这个,怎么处理,这个怎么解决...

我用的是类似用友的FineReport报表软件&#xff0c;没用过您那款软件&#xff0c;我帮您搜了一下您看看能不能帮到您&#xff1a;运行软件常出现的提示Run-time error429运行一些软件常出现这样的提示&#xff1a;Run-time error429:Activex componert cant create object是说你…

浅谈webpack打包原理

模块化机制 webpack并不强制你使用某种模块化方案&#xff0c;而是通过兼容所有模块化方案让你无痛接入项目。有了webpack&#xff0c;你可以随意选择你喜欢的模块化方案&#xff0c;至于怎么处理模块之间的依赖关系及如何按需打包&#xff0c;webpack会帮你处理好的。 关于模…

ubuntu rsync

rsync&#xff0c;remote synchronize顾名思意就知道它是一款实现远程同步功能的软件&#xff0c;它在同步文件的同时&#xff0c;可以保持原来文件的权限、时间、软硬链接等附加信息。 rsync是用 “rsync 算法”提供了一个客户机和远程文件服务器的文件同步的快速方法&#xf…

android音频杂音问题_Android 音视频去回声、降噪(Android音频采集及回音消除)(转)...

好久没写文章了&#xff0c;其实是想记录一下自己在Android开发的成长历程。谈到音视频这块&#xff0c;对于新手来说刚接触到这一块&#xff0c;那是非常非常的恶心~我自己弄这一块也是从头开始&#xff0c;在 网上也翻阅了无数的资料、浏览了无数的博客&#xff0c;尝试了多种…

CImage类 from http://www.cnblogs.com/afarmer/archive/2012/03/31/2427273.html

CImage类 Visual C的CBitmap类的功能是比较弱的,它只能显示出在资源中的图标、位图、光标以及图元文件的内容&#xff0c;而不像VB中的Image控件可以显示出绝大多数的外部图像文件(BMP、GIF、JPEG等)。如果想要在对话框或其他窗口中显示外部图像文件则只能借助于第三方提供的控…

新华计算机学校环境好吗,新华电脑校园环境好不好?(二)

随着学校规模的不断扩大和办学层次的逐步提高&#xff0c;新华的办学理念已发生了根本性的变化。在新华全国院校中&#xff0c;校园环境的美化和建设对大学生文化素质的教育有着不可替代的推动作用。在校园总体现划上&#xff0c;特别注重建筑布局和美化布局的相互映衬&#xf…

实现深拷贝的几种方法

1.我们怎么去实现深拷贝呢&#xff0c;这里可以递归递归去复制所有层级属性。 这么我们封装一个深拷贝的函数(PS&#xff1a;只是一个基本实现的展示&#xff0c;并非最佳实践) 复制代码 function deepClone(obj){let objClone Array.isArray(obj)?[]:{};if(obj &&…

投资合伙人股份分配_合伙人股权分配,你必须知道的三大要点!

原标题&#xff1a;合伙人股权分配&#xff0c;你必须知道的三大要点&#xff01;随着社会的发展&#xff0c;越来越多的年轻人选择创业&#xff0c;也有很多人选择合伙创办企业&#xff0c;但是很多也是因为股权和钱如何分的问题最后不欢而散&#xff0c;合伙创办企业好处很多…

前端-给定一个字符串str,如何实现每个单词首字母都大写,其余部分小写。

确保字符串的每个单词首字母都大写&#xff0c;其余部分小写。 function f(str){ var arr str.toLowerCase().split(" “); //转小写&#xff0c;分割成字符串数组 for(var i0; i<arr.length; i){ arr[i] arr[i].charAt(0).toUpperCase()arr[i].slice(1); //重新组合…

计算机无法同步时间,为什么在Win7中无法同步计算机时间?

[文章摘要]在win7中&#xff0c;为什么不能同步计算机时间&#xff1f;有什么解决办法吗&#xff1f;接下来&#xff0c;我将向您介绍为什么无法在win7中同步计算机时间的主要症状&#xff0c;可能的原因和解决方法.在win7中&#xff0c;为什么不能同步计算机时间&#xff1f;有…

中国移动集中化BI探索:数据仓库与Hadoop混搭

随着移动互联网、物联网/传感器等技术的发展&#xff0c;全球数据生产速度正在高速增长&#xff0c;信息已成为企业的战略资产。而运营商作为网络时代的数据交换中心&#xff0c;其网络管道、业务平台、支撑系统中每天都在产生大量有价值的数据&#xff0c;基于这些数据的商业智…

计算机管理器win8.1,没事折腾?Win8.1文件管理器设置几招

有人说玩系统的高端表现就是在保证运行的前提下上没事折腾&#xff0c;今天就支几招Win8.1文件管理器的设置技巧给大家。可能有些人对捣鼓系统感到不解&#xff0c;在他们看来这种举动就像是折腾&#xff0c;明明拿来就能用的东西非要动手改造一下。其实对于中高级用户来说&…

Linux下如何创建loop device

在Linux中&#xff0c;有一种特殊的块设备叫loop device,这种loop device设备是通过影射操作系统上的正常的文件而形成的虚拟块设备 。因为这种设备的存在&#xff0c;就为我们提供了一种创建一个存在于其他文件中的虚拟文件系统的机制.下面是一个示例: 第一步&#xff1a;用dd…

在职研究生和全日制研究生的区别_“在职研究生”与“全日制研究生”有什么区别?...

“硕士研究生”是介于本科与博士之间的一个学位&#xff0c;与本科教育相比&#xff0c;研究生教育更加注重培养学生研究问题和分析问题的能力。在我国&#xff0c; 研究生可以分为两种形式&#xff1a;在职研究生、全日制研究生。其中&#xff0c;报考“在职研究生”是社会工作…

计算机多媒体设计徽章,酷毙了:Hackaday将会议徽章设计成一台可编程的电脑

Hackaday徽章可以直接挂在你的脖子上&#xff0c;但看起来更像一台小型的掌机&#xff0c;这是Hackaday Superconference的徽章。参加会议的每个人都获得这种徽章&#xff0c;它具有320 x 240彩色显示屏&#xff0c;完整的qwerty键盘和无限的可编程潜力&#xff01;内置的固件运…