腳本合并提升javascript性能示例
更新時間：2014年02月24日 15:49:05 作者：
腳本合并可以有效提升javascript性能，下面有個不錯的示例，大家可以參考下
每個<script>標簽初始下載時都會阻塞頁面渲染，所以減少頁面包含的<script>標簽數(shù)量有助于改善這一情況。這不僅僅針對外鏈腳本，內(nèi)嵌腳本的數(shù)量同樣也要限制。瀏覽器在解析HTML頁面的過程中每遇到一個<script>標簽，都會因執(zhí)行腳本而導致一定的延時，因此最小化延遲時間將會明顯改善頁面的總體性能。
通常一個大型網(wǎng)站或網(wǎng)絡應用需要依賴數(shù)個javascript文件。你可以把多個文件合并成一個，這樣只需引用一個<script>標簽，就可以減少性能消耗。文件合并的工作可通過離線打包工具或者類似像YaHoo!combo handle的實時在線服務來實現(xiàn)。
<!-- 優(yōu)化前： -->
<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>
<!-- 優(yōu)化后： -->
<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>
通常一個大型網(wǎng)站或網(wǎng)絡應用需要依賴數(shù)個javascript文件。你可以把多個文件合并成一個，這樣只需引用一個<script>標簽，就可以減少性能消耗。文件合并的工作可通過離線打包工具或者類似像YaHoo!combo handle的實時在線服務來實現(xiàn)。
復制代碼 代碼如下:
<!-- 優(yōu)化前： -->
<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>
<!-- 優(yōu)化后： -->
<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>
相關文章
下面小編就為大家?guī)硪黄庋b獲取dom元素的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
在我們開發(fā)微信小程序時,獲取用戶手機號碼是常見的需求之一,這篇文章主要給大家介紹了關于微信小程序獲取用戶手機號碼的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了使用 JavaScript如何獲取當月的第一天和最后一天,通過本文學習了如何使用 JavaScript 中的Date.getFullYear()和?Date.getMonth()方法獲得某個特定月份的第一天和最后一天，需要的朋友可以參考下2023-05-05
JavaScript Konami Code 實現(xiàn)代碼
JavaScript Konami Code 實現(xiàn)代碼2009-07-07
在小程序云開發(fā)中，要實現(xiàn)上傳文件至云存儲，有兩種方案：云函數(shù)和HTTP?API，本文主要講講如何使用HTTP?API實現(xiàn)小程序外上傳文件至云存儲，感興趣的可以了解一下2022-01-01
這篇文章主要介紹了es6中l(wèi)et和const的使用方法,結合實例形式詳細分析了es6中l(wèi)et和const的基本功能、原理、使用方法及操作注意事項,需要的朋友可以參考下2020-02-02
原創(chuàng)javascript小游戲實現(xiàn)代碼
javascript小游戲實現(xiàn)代碼，喜歡用javascript實現(xiàn)游戲效果代碼的朋友可以參考下。2010-08-08
JavaScript的concat方法實例代碼(數(shù)組連接)
這篇文章主要介紹了JavaScript的concat方法實例代碼，包括數(shù)組連與字符連接,需要的朋友可以參考下2023-03-03
無縫滾動改進版，封裝成函數(shù)，同時支持上下左右無縫滾動。2012-12-12
這篇文章主要介紹了Bootstrap導航欄各元素操作方法，針對表單、按鈕、文本進行操作，感興趣的小伙伴們可以參考一下2015-12-12