优化浏览器标签loading效果时间过长思路

最新推荐文章于 2024-04-18 06:58:52 发布

原创最新推荐文章于 2024-04-18 06:58:52 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

26 篇文章

订阅专栏

个人感悟

2 篇文章

订阅专栏

本文探讨了浏览器loading效果过长的原因，指出当document.readyState未达到'complete'时，加载图标会显示。建议通过减少文档大小，异步加载资源来改善用户体验，确保快速完成加载过程。

首先要弄清楚浏览器loading效果是由什么引起的：

document.readyState ！= complete

一个文档的 readyState 可以是以下之一：

loading / 加载

document 仍在加载。

interactive / 互动

文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。

complete / 完成

文档和所有子资源已完成加载。状态表示 load 事件即将被触发。

我们可以先尝试下面的例子，当页面js还在执行的时候，浏览器标签显示loading效果，直到10秒后结束。

<!doctype html>
<html>
	<head>
	</head>
	<body>
		<script>
			function sleep(delay) {
			  var start = (new Date()).getTime();
			  while ((new Date()).getTime() - start < delay) {
				continue;
			  }
			}
			sleep(10000)
		</script>
	</body>
</html>

而采用异步调用的方式，页面在等待执行sleep（）方法，而document.readyState 此时已经等于complete ，loading效果早已消失。

<!doctype html>
<html>
	<head>
	</head>
	<body>
		<script>
			function sleep(delay) {
			  var start = (new Date()).getTime();
			  while ((new Date()).getTime() - start < delay) {
				continue;
			  }
			}
			setTimeout(function(){
				console.log("b");
				sleep(1000)
			}，5000)
		</script>
	</body>
</html>

所以，要解决这些问题让人觉得页面加载速度快，文档就尽可能轻装上阵，能异步的则异步。