百度360必应搜狗淘宝本站头条
头像打包下载acmecadconverter_8.52绿色版mysql 昨天的日期word文档批量处理大师破解版document.appendchild
当前位置：网站首页 > 技术教程 > 正文

前端:JS延长加载的方式有哪些?

csdh11 2024-12-02 16:38 4 浏览

什么是JS延迟加载？

JS延迟加载，也就是等页面加载完成之后再加载JavaScript文件

为什么让JS实现延迟加载？

js的延迟加载有助于提高页面的加载速度。

Js延迟加载的方式有哪些？一般有以下几种方式：

·defer属性

·async属性

·动态创建DOM方式

·使用jQuery的getScript方法

·使用setTimeout延迟方法

·让JS最后加载

1、defer属性

HTML 4.01为<script>标签定义了defer属性。标签定义了defer属性元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行标签定义了defer属性。

用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行在<script>元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行

<!DOCTYPE html>
<html>
<head>
	<script src="test1.js" defer="defer"></script>
	<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--这里放内容-->
</body>
</html>

说明：虽然<script>元素放在了<head>元素中，但包含的脚本将延迟浏览器遇到</html>标签后再执行HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行defer属性只适用于外部脚本文件。支持HTML5的实现会忽略嵌入脚本设置的defer属性

2、async属性

HTML5 为<script>标签定义了async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。标签定义了async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。

目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。异步脚本一定会在页面 load 事件前执行。不能保证脚本会按顺序执行

<!DOCTYPE html>
<html>
	<head>
		<script src="test1.js" async></script>
		<script src="test2.js" async></script>
	</head>
<body>
<!--这里放内容-->
</body>
</html>

async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。

缺点：不能控制加载的顺序

3、动态创建DOM方式

//这些代码应被放置在</ body>标签前(接近HTML文件底部)
<script type="text/javascript">
	function downloadJSAtOnload() {
		varelement = document .createElement("script");
		element.src = "defer.js";
		document.body.appendChild(element);
	}
	if (window. addEventListener)
		window.addEventListener("load" ,downloadJSAtOnload, false);
	else if (window.attachEvent)
		window.attachEvent("onload", downloadJSAtOnload) ;
	else
		window. onload =downloadJSAtOnload;
</script>

4、使用jQuery的getScript()方法

$.getScript("outer.js" , function(){	//回调函数，成功获取文件后执行的函数
	console.log(“脚本加载完成")
});

5、使用setTimeout延迟方法的加载时间延迟加载js代码，给网页加载留出更多时间

<script type="text/javascript" >
	function A(){
		$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
			alert("Hello");
		});
	}
	$(function (){
		setTimeout('A()', 1000);	//延迟1秒
	})
</script>

6、让JS最后加载

把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行JavaScript的代码。所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度。

上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。

//这些代码应被放置在</body>标签前(接近HTML文件底部)

<script type= "text/javascript">
	function downloadJSAtonload() {
		var element = document.createElement("script");
		element.src = "defer.js";
		document.body.appendChild(element);
	}
	if (window.addEventListener)
		window.addEventListener("load", downloadJSAtOnload, false);
	else if (window.attachEvent )
		window.attachEvent("onload", downloadJSAtonload);
	else window.onload = downloadJSAtOnload;
</script>

这段代码意思等到整个文档加载完后，再加载外部文件“defer.js”。

使用此段代码的步骤：

6.1）复制上面代码

6.2）粘贴代码到HTML的标签前 (靠近HTML文件底部)

6.3）修改“defer.js”为你的外部JS文件名

6.4）确保文件路径是正确的。例如：如果你仅输入“defer.js”，那么“defer.js”文件一定与HTML文件在同一文件夹下。

注意：

这段代码直到文档加载完才会加载指定的外部js文件。因此，不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码，另外一组是在页面加载后进行操作的javascript代码(例如添加click事件。

相关推荐

Micheal Nielsen&#39;s神经网络学习之二

依然是跟着MichaelNielsen的神经网络学习，基于前一篇的学习，已经大概明白了神经网络的基本结构和BP算法，也能通过神经网络训练数字识别功能，之后我试验了一下使用神经网络训练之前的文本分类，...

CocoaPods + XCTest进行单元测试 c单元测试工具

在使用XCTest进行单元测试时，我们经常会遇到一些CocoaPods中的开源框架的调用，比如“Realm”或“Alamofire”在测试的时候，如果配置不当，会导致“frameworknotfo...

Java基础知识回顾第四篇 java基础讲解

1、&和&&的区别作为逻辑运算符：&(不管左边是什么，右边都参与运算)，&&(如果左边为false，右边则不参与运算，短路)另外&可作为位运算符...

项目中的流程及类似业务的设计模式总结

说到业务流程，可能是我做过的项目中涉及业务最多的一个方面了。除了在流程设计之外，在一些考核系统、产业审批、还有很多地方，都用到相似的设计思路，在此一并总结一下。再说到模式，并不是因为流行才用这个词，而...

联想三款显示器首批获得 Eyesafe Certified 2.0 认证

IT之家7月31日消息，据外媒报道，三款全新联想显示器是全球首批满足EyesafeCertified2.0的设备。据报道，联想获得EyesafeCertified2.0认证的显...

maven的生命周期,插件介绍(二) 一个典型的maven构建生命周期

1.maven生命周期一个完整的项目构建过程通常包括清理、编译、测试、打包、集成测试、验证、部署等步骤，Maven从中抽取了一套完善的、易扩展的生命周期。Maven的生命周期是抽象的，其中的具体任务都...

多线程(3)-基于Object的线程等待与唤醒

概述在使用synchronized进行线程同步中介绍了依赖对象锁定线程，本篇文章介绍如何依赖对象协调线程。同synchronized悲观锁一样，线程本身不能等待与唤醒，也是需要对象才能完成等待与唤醒的...

jquery mobile + 百度地图 + phonegap 写的一个&quot;校园助手&quot;的app

1jquerymobile+百度地图+phonegap写的一个"校园助手"的app，使用的是基于Flat-UI的jQueryMobile，请参考：https://github.com/...

Apache 服务启动不了 apache系统服务启动不了

{我是新手，从未遇到此问题，请各位大大勿喷}事由：今天早上上班突然发现公司网站出现问题。经过排查，发现是Apache出现问题。首先检查配置文件没有出问题后，启动服务发现Apache服务能启动，但是没法...

健康债和技术债都不能欠 公众号: 我是攻城师(woshigcs)

在Solr4.4之后，Solr提供了SolrCloud分布式集群的模式，它带来的主要好处是：（1）大数据量下更高的性能（2）更好扩展性（3）更高的可靠性（4）更简单易用什么时候应该使用Sol...

Eye Experience怎么用?HTC告诉你 eyebeam怎么用

IT之家（www.ithome.com）：EyeExperience怎么用？HTC告诉你HTC上周除了发布HTCDesireEYE自拍机和HTCRE管状运动相机之外，还发布了一系列新的智能手机...

Android系统应用隐藏和应用禁止卸载

1、应用隐藏与禁用Android设置中的应用管理器提供了一个功能，就是【应用停用】功能，这是针对某些系统应用的。当应用停用之后，应用的图标会被隐藏，但apk还是存在，不会删除，核心接口就是Packag...

计算机软件技术分享--赠人玫瑰,手遗余香

一、Netty介绍Netty是由JBOSS提供的一个java开源框架。Netty提供异步的、事件驱动的网络应用程序框架和工具，用以快速开发高性能、高可靠性的网络服务器和客户端程序。也就是说，Netty...

Gecco爬虫框架的线程和队列模型 爬虫通用框架

简述爬虫在抓取一个页面后一般有两个任务，一个是解析页面内容，一个是将需要继续抓取的url放入队列继续抓取。因此，当爬取的网页很多的情况下，待抓取url的管理也是爬虫框架需要解决的问题。本文主要说的是g...

一点感悟(一) 初识 初读感知的意思

时间过得很快，在IT业已从业了两年多。人这一辈子到底需要什么，在路边看着人来人往，大部分人脸上都是很匆忙。上海真是一个魔都，它有魅力，有底蕴，但是一个外地人在这里扎根置业，真的是举全家之力，还贷3...

一周热门
最近发表
标签列表