瀏覽器在處理HTML頁面渲染和JavaScript腳本執行的時候是單一進程的,所以在當瀏覽器在渲染HTML遇到了<script>標籤會先去執行標籤內的程式碼(如果是使用src屬性加載的外鏈檔,則先下載再執行),在這個過程中,頁面渲染和互動都會被阻塞。 </script>
...雖然會有阻塞,但還是有幾招可以減少JavaScript對效能的影響的。
1.script標籤的位置
當<script>出現在<head>中的時候,例如:</script>
<head> <script type="text/javascript" src="js1.js"></script> <script type="text/javascript" src="js2.js"></script> <script type="text/javascript" src="js3.js"></script> </head>
這種載入多個js檔案的時候,瀏覽器就會因先下載執行js程式碼而阻塞頁面渲染從而出現白螢幕頁面(瀏覽器解析到
標籤之前,不會渲染頁面任何內容) ,沒辦法預覽也沒辦法互動,很差勁的使用者體驗。注意:
現代瀏覽器支援資源並行下載,只限於
