多個JS文件性能優化

一個頁面加載多個js,有一定影響的，加載速度會慢。js過多既延長了用戶的等待時間，又大量消耗cpu。而且放在頁面的前面的話，會影響頁面渲染造成用戶體驗很差，用戶會感覺東西遲遲沒有出來 。最好壓縮一下js或者把多個 js 文件合成一個，儘量減少客戶端與服務器的交互。

頁面中引入的JS文件是阻塞式加載的，這樣會影響頁面性能。以下是JS文件性能優化方法：

一：將所有的<script>標籤放到頁面底部，也就是</body>閉合標籤之前，這能確保在腳本執行前頁面完成了渲染

　　由於JS文件是阻塞式加載，當加載JS文件時，頁面停止渲染，這樣頁面會出現不完整狀態。將JS文件的<script>放在頁面底部，這樣能在加載JS文件時確保頁面渲染完成。

二：儘可能的合併腳本文件。頁面中<script>標籤越少，加載也就越快，響應速度就越快。無論是外鏈腳本還是內嵌腳本都是如此。

　　　　通常一個大型網站或應用需要依賴多個JS文件。可以把多個文件合併成一個，這樣只需要引用一個<script>標籤，就可以減少性能消耗。文件合併的工作可通過離線的打包工具或者一些實時的在線服務來實現。

　　注意：內嵌腳本放在引用的外鏈樣式表的<link>之後會導致阻塞去等待樣式表單下載。這樣做事爲了確保內嵌腳本在執行時能獲得最精確的樣式信息。因此，建議不要把內嵌腳本緊跟在<link>標籤後面

三：採用無阻塞下載JS腳本的方法。

　　較少JS文件大小並限制HTTP請求數在功能豐富的WEB應用或大型網站上並不是總可行。WEB應用的功能越豐富，所需要的JS代碼就越多，儘管下載單個較大的JS文件只產生一個HTTP請求，卻會鎖死瀏覽器的一大段時間。爲避免這種情況，需要通過一些特定的技術向頁面中逐步加載JS文件，這樣做在某種程度上說不會阻塞瀏覽器。

　　無阻塞加載腳本的本質：在頁面加載完成後才加載JS代碼。這就意味着在window.onload事件觸發後再下載腳本。實現方法

1.延遲加載腳本：

　　HTML5爲<script>標籤定義了一個擴展屬性：defer。如果瀏覽器支持defer屬性，可以這樣寫：

1 <script type="text/javascript" src="script1.js" defer="defer"></script>

　　帶有defer屬性的<script>標籤可以放置在文檔的任何位置。對應的JS文件將在頁面解析到<script>標籤時開始下載，但不會執行。直到DOM加載完成，即onload事件觸發前纔會執行。

　　當帶有defer屬性的JS文件下載時，不會阻塞瀏覽器的其他進程，因此這類文件可以與其他資源文件一起下載。

2.異步加載JS文件：async屬性:使用所有瀏覽器

　　HTML5爲<script>標籤定義了一個新的擴展屬性：async。作用和defer一樣，能夠異步加載和執行腳本，不因爲加載腳本而阻塞頁面渲染。但是：使用async，JS腳本一旦下載好了就好執行，所以很有可能不是按照原本的順序來執行。如果JS腳本前後有依賴性，使用async和有可能會出錯。

1 <script type="text/javascript" src="script1.js" async="true"></script>

四：動態腳本元素

　文檔對象模型（DOM）允許您使用 JavaScript 動態創建 <script>元素。

1 var script = document.createElement ("script");
2    script.type = "text/javascript";
3    script.src = "script1.js";
4    document.getElementsByTagName("head")[0].appendChild(script);

合併多個js文件補充

在平時開發的時候，我們都會有一些js文件的積累，大部份場合是不需要重新寫的。

但我們會把js文件的功能儘可能的細分，以便引入的時候不引入無用的代碼，但這樣造成的問題是在jsp文件
中要寫大量的這樣的句子
<script language='JavaScript' src="two.js" charset="utf-8"></script>
如果你有100個jsp文件，都用到10個js文件，這個時候每個jsp文件寫10句引入，這個是個麻煩的事情
現在，通過js文件的引入可以解決這個問題。定義一個js文件用來引入一些組合，jsp文件則只需要引入1個

這樣的js文件就可以了。js代碼少了100*99行

js集合引入：一個js中引入其他常用的js文件，達到精簡代碼的目的。

不常用的js文件，單獨引入。

第一個js文件(被引入的js文件)，文件名one.js，內容如下