腳本合并提升javascript性能示例

2019-11-20 21:02:58

字體：大中小

來源：轉載

供稿：網友

每個<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> 