javascript簡單效能問題及學習筆記

javascript簡單效能問題及學習筆記

 最近在看一本書：《高效能javaScript》，發現自己平時寫js存在很多小細節上的問題，雖然這些問題不會導致程式運行出錯，但是會導致介面載入變慢，使用者體驗變差，那麼我們就來細細數一下應該注意的地方吧

1、<script>標籤應越少越好（雖然有多個也不會導致程式報錯），因為每個<script>標籤初始下載時都會阻塞頁面渲染 

2、<script>標籤盡量不要放在頁面上方，盡量放在<body>內的最下面，因為每個<script>在執行的時候，都會下載對應的js檔案，瀏覽器會等待所有js/css下載完成才顯示出頁面 

3、當需要匯入多個js檔案的時候，一般情況下我們都是寫兩個<script src="..." />，實際上是支援一次性匯入多個的，例如：<script src="file1.js&file2.js" /> 

4、<script>標籤中有一個屬性：defer，該屬性指明本元素所含的指令碼不會修改DOM，因此代碼能安全地順延強制，但是該屬性只有IE4+和Firefox3.5+瀏覽器支援，希望大家使用的時候注意，如果其他瀏覽器，則會被直接忽略，使用例子：

 

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

 

，測實驗證defer屬性樣本：

 

 代碼如下:

<script defer>alert("defer");</script>  

<script>alert("script");</script>  

<script>  

window.onload = function() {  

alert("load");  

};  

</script>

 

 

這段代碼在我們正常理解下執行順序應該是：defer、script、load，但是如果在支援defer的瀏覽器上順序則是：script、defer、load，這裡需要注意的是：defer不是跟在script後面執行，而是在onload事件處理之前被調用。

 

時間有限，今天先記錄這麼多吧