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