網頁裏面 音/視頻 加載同步阻塞問題分析以及優化

在開發中，經常會有加載網頁完成之後會走加載完成的回調，我們在這個回調裏面做一些事情，由於網頁是順序同步加載，這個回調會很慢。

測試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羣: