每個<script>標籤初始下載時都會阻塞頁面渲染,所以減少頁麵包含的<script>標籤數量有助於改善這一情況。這不僅僅針對外鏈腳本,內嵌腳本的數量同樣也要限制。瀏覽器在解析HTML頁面的過程中每遇到一個<script>標籤,都會因執行腳本而導致一定的延時,因此最小化延遲時間將會明顯改善頁面的總體性能。
通常一個大型網站或網絡應用需要依賴數個javascript文件。你可以把多個文件合併成一個,這樣只需引用一個<script>標籤,就可以減少性能消耗。文件合併的工作可通過離線打包工具或者類似像YaHoo!combo handle的實時在線服務來實現。
複製代碼代碼如下:
<!-- 優化前: -->
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>Hello world!</p>
<script type="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js"></script>
<script type="http://yui.yahooapis.com/combo?2.7.0/build/event/event-min.js"></script>
</body>
</html>
<!-- 優化後: -->
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>Hello world!</p>
<script src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js" type="text/javascript" ></script>
</body>
</html>