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