js加载失败，如何合理的进行重试？ #前端

s错误。

这个完全可以作为难点和亮点写在你的项目里面。有的时候项目打完包上线的时候可能会外链一些第三方的包，这时候有可能第三方的服务会出错导致js脚本加载失败，这时候可能有备用的方案进行js加载错误的重试。

·一种方案是可以在上面加on error这种标签，比如这里面有定了a.js，还有1.js，还有b，还有c。在这里面比如打印on error的时候在script标签上加on error，这时候可以去监听到了，打印这地方能监听到错误。

但是要知道在工程化的环境里面dist下面的index.html是通过build打包生成的，不可能打完包之后还改里面的东西。

·这是可能还另外一个方案，就是在这个方案window.addEventLIstener里面去做处理，在这里面同样可以见到错误，把这个地方删掉。同样的这里面是打印了error，error其实就是监听到资源加载失败了，这里面会有一个error，e里面有一个tag name，通过tag name可以准确的判断js的错误，对js再做一些重试的处理。

重试的时候需要注意，在这个地方写的时候千万不要使用script的创建标签这样的方式，这样方式会发现它的执行顺序是有问题的。既然执行先执行a，再执行1.js，因为它有依赖关系，所以如果使用这种方式会把错误的执行放到最后面。

所以一般要涉及到用document.write方式来进行重试的方案，这点需要注意的。怎么样监听js错误的？像这种方案具体的实现，包括这样的技术实现细节都要和面试官聊明白，聊清楚考察你的。

就是这些非常细小的知识点，面试的时候得拿出点干货出来，没有干货和别的程序员拉不开差距，所以这点是非常非常重要的。需要代码的可以留言。

istory API

HTML5 History API无疑是现代网站的发展方向，因为它完成了手头的任务，同时还提供了额外的功能。您可以根据需求使用history.pushState()或history.replaceState()在浏览器中修改URL：

// 当前 URL: https://my-website.com/page_a

// 修改后的URL
const nextURL='https://my-website.com/page_b';	
const nextTitle='My new page title';
const nextState={ additionalInformation: 'Updated the URL with JS' };

// 这将在浏览器的历史记录中创建一个新条目，而无需重新加载
window.history.pushState(nextState, nextTitle, nextURL);

// 这将替换浏览器历史记录中的当前条目，而无需重新加载
window.history.replaceState(nextState, nextTitle, nextURL);

两个方法的参数相同，允许您传递自定义的可序列化状态对象作为第一个参数、自定义标题（尽管大多数浏览器会忽略此参数）以及要在浏览器历史记录中添加/替换的URL。请记住，History API只允许相同的源URL，因此您无法导航到完全不同的网站。

Location API

旧的Location API不是该作业的最佳方案，因为它会重新加载页面，但是它仍然允许您修改当前URL，并且在使用旧浏览器时可能会很有用。您可以使用window.location.href、location.assign()或location.replace()修改URL：

// 当前 URL: https://my-website.com/page_a

// 修改后的URL
const nextURL='https://my-website.com/page_b';

// 这将在浏览器的历史记录中创建一个新条目，然后重新加载
window.location.href=nextURL;

// 这将替换浏览器历史记录中的当前条目，然后重新加载
window.location.assign(nextURL);

// 这将替换浏览器历史记录中的当前条目，然后重新加载
window.location.replace(nextURL);

如上所述，这三个选项都将导致页面重新加载，这可能是不希望的。此外，与使用History API不同，您只能设置URL，而不需要任何附加参数。最后，Location API不会限制您使用相同的源URL，但使用不同的源URL，这可能会导致安全问题。

么是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事件。

在线咨询

上一篇：一个HTML5动画，布局只要一行代码，你还真别不信
下一篇：c# 10 教程：7 集合

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商