JavaScript 指令碼下載解釋執行阻塞頁面優化
阿新 • • 發佈：2019-01-08
優化原因：在前端頁面載入過程中，JavaScript程式碼的下載、解釋和執行會阻塞頁面的其他執行（此時頁面會一片空白），瀏覽器在遇到<body>標籤才開始呈現內容。
優化建議：
1、把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>
2、使用defer屬性（只適合引用外部指令碼檔案，不能保證按順序執行指令碼，建議只有一個指令碼引用使用defer屬性），延遲指令碼，js指令碼會被延遲到整個頁面都解釋完畢後（瀏覽器遇到</html>標籤後）再執行：
<!DOCTYPE html> <html> <head> <title>Example HTML Page</title> <script type="text/javascript" defer="defer" src="example1.js"></script> <script type="text/javascript" defer="defer" src="example2.js"></script> </head> <body> <!-- 這裡放內容 --> </body> </html>
3、使用async屬性（只適合引用外部指令碼檔案，不能保證按順序執行指令碼，請確保指令碼之間不含依賴），非同步指令碼，非同步指令碼一定會在頁面的load事件前執行：
<!DOCTYPE html> <html> <head> <title>Example HTML Page</title> <script type="text/javascript" async src="example1.js"></script> <script type="text/javascript" async src="example2.js"></script> </head> <body> <!-- 這裡放內容 --> </body> </html>
注意：使用defer屬性引入的指令碼會比使用async屬性引入的指令碼先執行。