网页里面 音/视频 加载同步阻塞问题分析以及优化

在开发中，经常会有加载网页完成之后会走加载完成的回调，我们在这个回调里面做一些事情，由于网页是顺序同步加载，这个回调会很慢。

测试demo：

	<script>
		console.time('start')

	</script>
	<div>
		<audio src="../demoMusic1.mp3"></audio>
		<audio src="../demoMusic2.mp3"></audio>
		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates itaque soluta, minus veritatis commodi sit
			delectus iusto autem nesciunt possimus reprehenderit sunt, repellendus quia laborum exercitationem suscipit?
			Temporibus, ex pariatur.
		</p>
	</div>
	<script>
		console.log('执行到javascript - start')
		window.onload = function() {
			console.log('加载完成')
		}
		console.timeEnd('start')
		console.log('执行到javascript - end')

	</script>

例子中使用到console.time、console.timeEnd 启动一个名为start的计时器，来记录加载所有耗时。
这时我们将network是正常的网速，得到运行结果如下：

执行到javascript - start
start: 1.4228515625ms
执行到javascript - end
加载完成

这时我们将network设置成fast 3g，得到运行结果如下：

执行到javascript - start
start: 1.552978515625ms
执行到javascript - end
加载完成

这时我们将network设置成slow 3g，得到运行结果如下：

执行到javascript - start
start: 2.157958984375ms
执行到javascript - end
加载完成

可见window.onload会等待页面中所有东西加载完成之后执行，音视频文件的同步加载会阻塞javascript的执行。
如果音视频是否加载完成对回调函数里面没有影响的话，可以在回调函数执行后使用javascript动态插入音视频。

我们来修改下这个demo

<script>
		console.time('start')

	</script>
	<div>
		<!-- <audio src="../demoMusic1.mp3"></audio> -->
		<!-- <audio src="../demoMusic2.mp3"></audio> -->
		<p>
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates itaque soluta, minus veritatis commodi sit
			delectus iusto autem nesciunt possimus reprehenderit sunt, repellendus quia laborum exercitationem suscipit?
			Temporibus, ex pariatur.
		</p>
	</div>
	<script>
		console.log('执行到javascript - start')
		window.onload = function() {
			console.log('加载完成')
			var myMusic1 = document.createElement("audio");
			myMusic1.src = "../demoMusic1.mp3";
			myMusic1.addEventListener("canplaythrough", function() {
				console.log('音频文件已经准备好');
				myMusic1.play(); //播放 mp3这个音频对象
			}, false);

			var myMusic2 = document.createElement("audio");
			myMusic2.src = "../demoMusic2.mp3";
			myMusic2.addEventListener("canplaythrough", function() {
				console.log('音频文件已经准备好');
				myMusic2.play(); //播放 mp3这个音频对象
			}, false);
		}
		console.timeEnd('start')
		console.log('执行到javascript - end')
	</script>

依次用上面不同的网速段来测试下，依旧用到console.time、console.timeEnd 启动一个名为start的计时器，来记录加载所有耗时：

这时我们将network是正常的网速，得到运行结果如下：

执行到javascript - start
start: 0.422119140625ms
执行到javascript - end
加载完成

这时我们将network设置成fast 3g，得到运行结果如下：

执行到javascript - start
start: 0.455078125ms
执行到javascript - end
加载完成

这时我们将network设置成slow 3g，得到运行结果如下：

执行到javascript - start
start: 0.53466796875ms
执行到javascript - end
加载完成

通过观察加载所用时间，对网页初次加载的速度提升了很多。

如有问题请联系我~

欢迎加入QQ群: