前端效能優化個人總結
阿新 • • 發佈：2019-01-03
一、<script>標籤的位置。
按照傳統的做法，所有<script>元素都應該放在頁面的<head>元素中，例如：
<!DOCTYPE html> <html> <head> <title>Example HTML Page</title> <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src="example2.js"></script> </head> <body> <! --這裡放內容--> </body> </html>
這種做法的目的就是把所有外部檔案（包括CSS檔案和JavaScript檔案）的引用都放在相同的地方。可是，在文件的<head>元素中包含所有JavaScript檔案，意味著必須等到全部JavaScript程式碼都被下載、解析和執行完成以後，才能開始呈現頁面的內容（瀏覽器在遇到<body>標籤時才開始呈現內容）。對於那些需要很多JavaScript程式碼的頁面來說，這無疑會導致瀏覽器在呈現頁面時出現明顯的延遲，而延遲期間的瀏覽器視窗中將是一片空白。為了避免這個問題，現代Web應用程式一般都把全部JavaScript引用放在<body>元素中頁面內容的後面，例如：
<!DOCTYPE html> <html> <head> <title>Example HTML Page</title> </head> <body> <! --這裡放內容--> <script type="text/javascript" src="example1.js"></script> <script type="text/javascript" src="example2.js"></script> </body> </html>
這樣，在解析包含的JavaScript程式碼之前，頁面的內容將完全呈現在瀏覽器中。而使用者也會因為瀏覽器視窗顯示空白頁面的時間縮短而感到開啟頁面的速度加快了。
二、最佳實踐是使用外部檔案而非在HTML頁面中直接嵌入JavaScript程式碼。
在HTML中嵌入JavaScript程式碼雖然沒有問題，但一般認為最好的做法還是儘可能使用外部檔案來包含JavaScript程式碼。瀏覽器能夠根據具體的設定快取連結的所有外部JavaScript檔案。也就是說，如果有兩個頁面都使用同一個檔案，那麼這個檔案只需下載一次。因此，最終結果就是能夠加快頁面載入的速度。
三、語句結尾加分號
雖然語句結尾的分號不是必需的，但建議任何時候都不要省略它。加上分號也會在某些情況下增進程式碼的效能，因為這樣解析器就不必再花時間推測應該在哪裡插入分號了。
未完待續。。。。。。。。。。。。。。