腳本合并提升javascript性能示例
更新時間：2014年02月24日 15:49:05 作者：
腳本合并可以有效提升javascript性能，下面有個不錯的示例，大家可以參考下
每個<script>標(biāo)簽初始下載時都會阻塞頁面渲染，所以減少頁面包含的<script>標(biāo)簽數(shù)量有助于改善這一情況。這不僅僅針對外鏈腳本，內(nèi)嵌腳本的數(shù)量同樣也要限制。瀏覽器在解析HTML頁面的過程中每遇到一個<script>標(biāo)簽，都會因執(zhí)行腳本而導(dǎo)致一定的延時，因此最小化延遲時間將會明顯改善頁面的總體性能。
通常一個大型網(wǎng)站或網(wǎng)絡(luò)應(yīng)用需要依賴數(shù)個javascript文件。你可以把多個文件合并成一個，這樣只需引用一個<script>標(biāo)簽，就可以減少性能消耗。文件合并的工作可通過離線打包工具或者類似像YaHoo!combo handle的實(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>
通常一個大型網(wǎng)站或網(wǎng)絡(luò)應(yīng)用需要依賴數(shù)個javascript文件。你可以把多個文件合并成一個，這樣只需引用一個<script>標(biāo)簽，就可以減少性能消耗。文件合并的工作可通過離線打包工具或者類似像YaHoo!combo handle的實(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)文章
聲明一個數(shù)值類型的變量我看到三種;我嘴角微微一笑：少年你還嫩了點(diǎn)，哪止三種，我知道的至少有五種,好奇的你可以參考下哈，希望本文可以幫助到你2013-02-02
如何在TypeScript?中實(shí)現(xiàn)接口的類
這篇文章主要介紹了TypeScript?中實(shí)現(xiàn)接口的類,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
echarts中幾種漸變方式的具體實(shí)現(xiàn)方式
在使用echarts繪制圖表時,有的時候需要使用漸變色,下面這篇文章主要給大家介紹了關(guān)于echarts中幾種漸變方式的具體實(shí)現(xiàn)方式,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要介紹了JavaScript編寫頁面半透明遮罩效果的簡單示例,包括一個全屏幕div層遮蓋的方法展示,需要的朋友可以參考下2016-05-05
JS實(shí)現(xiàn)很酷的水波文字特效實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)很酷的水波文字特效,實(shí)例分析了javascript操作圖層特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了小程序之簡單登錄注冊表單驗(yàn)證，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
許愿墻中用到的函數(shù)...2006-10-10
這篇文章主要介紹了JavaScript獲取網(wǎng)頁表單提交方式的方法,可判斷表單提交方式是get還是post,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
一般來說，顯示在最前面的窗口都是因?yàn)榇翱诒患せ瞰@得焦點(diǎn)，要使窗口永遠(yuǎn)顯示在最前面，可以人為的設(shè)置窗口在blur時立刻focus，或者用模式、無模式對話框?qū)崿F(xiàn)2013-07-07
JavaScript代碼輕松實(shí)現(xiàn)網(wǎng)頁內(nèi)容禁止復(fù)制(代碼簡單)
有些時候我們寫的內(nèi)容不想被別人復(fù)制，在代碼中怎么實(shí)現(xiàn)的呢？下面小編給大家介紹javascript代碼輕松實(shí)現(xiàn)網(wǎng)頁內(nèi)容禁止復(fù)制，感興趣的童鞋一起看看吧2015-10-10