服务器传输速率低文件加载慢

最新推荐文章于 2024-04-12 17:27:32 发布

一只肥鹤

最新推荐文章于 2024-04-12 17:27:32 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_43322208/article/details/97908362

本文探讨了1Mbps服务器带宽导致的文件加载慢问题，指出页面加载的js和图片容易超过128Kb/s的限制，影响用户体验。通过浏览器调试窗口分析，发现文件下载耗时过长。提出了使用CDN加速和加载进度条动画两种解决方案，以改善用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我的服务器带宽是1Mbps，Mbps=Mbit/s即兆比特每秒Million bits per second。也就是128Kb/s。（传输速率）

Mbps数据传输速率的单位，字母b的大小写代表字节或比特，MBps每秒百万个字节； Mbps每秒百万个比特。

一个页面加载的js和图片文件是很容易超过这个128k限制的，超过1s就会使用户觉得卡顿。

（帧率能够达到 50 ～ 60 FPS 的动画将会相当流畅，让人倍感舒适。目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲 FPS 为 60 frame/s 时动画效果最好，也就是每帧的消耗时间为 16.67ms。）

打开浏览器调试窗口network栏，可以看到Waterfall列（分割重要的请求耗时,查看具体请求耗时在哪个地方）鼠标指到相关区域可以看到具体耗时。

可以看到Content Download，也就是文件下载消耗了太多时间。一个200k的文件就消耗2s，如果一个页面用到了很多js文件那么就需要十几秒。

如何解决？

1.使用cdn加速

2.在页面加载前放一个加载进度条的动画。给用户更好的体验

根据具体文件显示过程百分比：

 <!DOCTYPE HTML>
<html>
<head>
	<meta charset = "utf-8">
	<title>loading</title>
	<style type ="text/css">
		*{
			padding:0;
			margin:0;
		}
		.page{
			background-color: lightblue;
			height: auto;
		}
		img{
			width: 100%;
			height:100%;
		}
		.loading{
			position: fixed;
			width: 100%;
			height: 100%;
			top:0;
			left: 0;
			background-color: #fff;
			z-index:10;
			
		}
		.loading .pic{
			position:inherit;
			width: 100px;
			height: 100px;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			font-size: 25px;
			line-height: 100px;
			text-align: center;
		}
		.loading .pic span{
			position: absolute;
			top: 10px;
			left: 10px;
			height: 80px;
			width: 80px;
			border-radius: 50%;
			/*box-shadow: 0 3px  #666;*/    /*写法1*/
			border-bottom: #666 3px solid;  /*写法2*/
			animation: rotate 1s infinite linear;
			-webkit-animation: rotate 1s infinite linear;
		}
		@keyframes rotate{
			from {-webkit-transform: rotate(0deg)}
			to {-webkit-transform: rotate(360deg)}
		}
		@-webkit-keyframes rotate{
			from {transform: rotate(0deg)}
			to {transform: rotate(360deg)}
		}
	
	</style>

</head>
<body class="page">
	<div class="loading">
		<div class="pic">
			<span>
			</span>
			<b></b>
		</div>
	</div>
	<!--<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366080417&di=75bbca7a79b44f5ef71ed2290a866238&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D751435233%2C2123029106%26fm%3D214%26gp%3D0.jpg">
	<img src="http://p.ananas.chaoxing.com/star3/origin/54758345a310e0448134ae6d.png">
	<img src="http://pic.90sjimg.com/design/01/24/80/47/59107578095e7.png">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542960732&di=212aaefb5f9bd823df223318898a4f39&imgtype=jpg&er=1&src=http%3A%2F%2Fconnect-cdn-china2.unity.com%2Fp%2Fimages%2Fc197dc39-f62d-4b42-acb1-2f13d55c0272_Polyverse_Skies_4K___Sky_02.jpg">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366013486&di=f4df9c0a4b47af0a920ae385df4bba5b&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0313731592180a1b5b3086ed4baaa5c.jpg">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366013485&di=49a09d9c97b9b65b74207889ad54a12a&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F78%2F05%2F88%2F58c776a7b281b.png">
-->

<!--改变加载百分比 写法1
	<script type="text/css" src="src/spinner.css"></script>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>$(".loading b").html('10%')</script>
	<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>
	<script>$(".loading b").html('40%')</script>
	<script type="text/javascript"	src="src/echarts-gl-min.js"></script>
	<script>$(".loading b").html('70%')</script>-->
<!--改变加载百分比  写法2 动态加载 -->
	<script type="text/css" src="src/spinner.css"></script>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
        var loadNum = 0;
		var srcArr = ['https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js','src/echarts-gl-min.js'];
		$(".loading b").html((loadNum/srcArr.length*100)+'%');
		function loadJs(srcArr) {
			for(let i=0;i<srcArr.length;i++){
				var el = document.createElement('script');
				el.setAttribute('type', 'text/javascript');
				el.setAttribute('src', srcArr[i]);
				el.onload = el.readystatechange = function () {
					if (!el.readyState || /loaded|complete/.test(el.readyState)) {
						console.log('load : ',srcArr[i]);
						loadNum++;
						console.log(loadNum);
						console.log(parseInt(loadNum/srcArr.length*100)+'%');
						$("b").text(parseInt(loadNum/srcArr.length*100)+'%');
						el.onload = el.readystatechange = null;
					}
				};
				document.getElementsByTagName('head')[0].appendChild(el);/*要加载才会触发onload*/
				//el = null;
			}
		}
		loadJs(srcArr)
		// loadJs('https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js');
		// loadJs('src/echarts-gl-min.js');


	</script>
	<!--<script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script>-->
	<!--<script type="text/javascript"	src="src/echarts-gl-min.js"></script>-->

</body>
	
</html>

一个转圈的动画：

实现代码：

<!DOCTYPE HTML>
<html>
<head>
	<meta charset = "utf-8">
	<title>loading</title>
	<script type="text/css" src="src/spinner.css"></script>
	<style type="text/css">
	@keyframes lds-spinner {
	   0% {
		opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@-webkit-keyframes lds-spinner {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	.lds-spinner {
		position: relative;
		width: 200px !important;
		height: 200px !important;
	}
	.lds-spinner div {
		left: 94px;
		top: 48px;
		position: absolute;
		-webkit-animation: lds-spinner linear 1s infinite;
		animation: lds-spinner linear 1s infinite;
		background: #51CACC;
		width: 12px;
		height: 24px;
		border-radius: 40%;
		-webkit-transform-origin: 6px 52px;
		transform-origin: 6px 52px;
	}
	.lds-spinner div:nth-child(1) {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		animation-delay: 0s;
	}
	.lds-spinner div:nth-child(2) {
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg);
		animation-delay: 0.0833333333333333s;
	}
	.lds-spinner div:nth-child(3) {
		-webkit-transform: rotate(60deg);
		transform: rotate(60deg);
		animation-delay: 0.01666s;
	}
	.lds-spinner div:nth-child(4) {
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
		animation-delay: 0.25s;
	}
	.lds-spinner div:nth-child(5) {
		-webkit-transform: rotate(120deg);
		transform: rotate(120deg);
		animation-delay: 0.3333s;
	}
	.lds-spinner div:nth-child(6) {
		-webkit-transform: rotate(150deg);
		transform: rotate(150deg);
		-webkit-animation-delay: -0.5s;
		animation-delay: 0.416666s;
	}
	.lds-spinner div:nth-child(7) {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		animation-delay: 0.5s;
	}
	.lds-spinner div:nth-child(8) {
		-webkit-transform: rotate(210deg);
		transform: rotate(210deg);
		animation-delay: 0.58333333s;
	}
	.lds-spinner div:nth-child(9) {
		-webkit-transform: rotate(240deg);
		transform: rotate(240deg);
		-webkit-animation-delay: -0.25s;
		animation-delay: 0.66667s;
	}
	.lds-spinner div:nth-child(10) {
		-webkit-transform: rotate(270deg);
		transform: rotate(270deg);
		animation-delay: 0.75s;
	}
	.lds-spinner div:nth-child(11) {
		-webkit-transform: rotate(300deg);
		transform: rotate(300deg);
		animation-delay: 0.83333333s;
	}
	.lds-spinner div:nth-child(12) {
		-webkit-transform: rotate(330deg);
		transform: rotate(330deg);
		animation-delay: 0.916666667s;
	}

	</style>
</head>
<body class="page">
	<div class="loading">
		<div class="pic">
			<div class="lds-spinner" style="width: 100%;height:100%">
				<div></div><div></div><div></div><div></div><div></div><div></div>
				<div></div><div></div><div></div><div></div><div></div><div></div>
			</div>
		</div>
	</div>
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366013486&di=1e4fb933f5a0cdf29027846b7bb2ef87&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0142f759af7c3ea8012028a922928a.JPG%403000w_1l_2o_100sh.jpg
	">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366080417&di=75bbca7a79b44f5ef71ed2290a866238&imgtype=jpg&src=http%3A%2F%2Fimg3.imgtn.bdimg.com%2Fit%2Fu%3D751435233%2C2123029106%26fm%3D214%26gp%3D0.jpg">
	<img src="http://p.ananas.chaoxing.com/star3/origin/54758345a310e0448134ae6d.png">
	<img src="http://pic.90sjimg.com/design/01/24/80/47/59107578095e7.png">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542960732&di=212aaefb5f9bd823df223318898a4f39&imgtype=jpg&er=1&src=http%3A%2F%2Fconnect-cdn-china2.unity.com%2Fp%2Fimages%2Fc197dc39-f62d-4b42-acb1-2f13d55c0272_Polyverse_Skies_4K___Sky_02.jpg">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366013486&di=f4df9c0a4b47af0a920ae385df4bba5b&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0313731592180a1b5b3086ed4baaa5c.jpg">
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542366013485&di=49a09d9c97b9b65b74207889ad54a12a&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fdesign%2F00%2F78%2F05%2F88%2F58c776a7b281b.png">
</body>
	
</html>