Javascript là một trong những tài nguyên chặn trang, có nghĩa là việc hiển thị HTML có thể bị chặn hoặc làm chậm lại bởi Javascript. Khi trình phân tích cú pháp đọc thẻ <script>, cho dù đó là tệp nội tuyến hay tệp bên ngoài, trình phân tích cú pháp sẽ tạm dừng để lấy tập lệnh và thực thi nó. Nếu chúng ta load một số lượng lớn các tệp Javascript trên trang, đây có thể là một vấn đề, làm tăng thời gian tải trang, mặc dù việc hiển thị html trên trang có thể không thực sự phụ thuộc vào các tệp javascript này. May mắn thay, thẻ <script> có hai thuộc tính là async và defer cho phép chúng ta kiểm soát và tải các tệp này theo ý muốn để tránh chặn quá trình tải trang.
Thẻ script không có các thuộc tính khác sẽ phân tích cú pháp tệp HTML cho đến khi nó gặp thẻ script. Tại thời điểm này, nó sẽ tạm thời sử dụng quá trình phân tích cú pháp để lấy tệp script (nếu là tệp bên ngoài), sau đó thực thi tệp <script> và sau đó tiếp tục quá trình phân tích cú pháp html
<script async>
Với thẻ script có thuộc tính async, khi quá trình parse html gặp phải script này, nó sẽ vẫn tiếp tục parse html cho đến khi script này được download xong, thì quá trình parse html mới tạm dừng để execute những code script này, sau đó lại tiếp tiếp quá trình parse html
<script defer>
Với thẻ script có thuộc tính defer, quá trình parse html sẽ không bị dừng lại mà parse cho đến khi hoàn thành, quá trình download các script file được tiến hành song song, và cuối cùng thì sẽ execute những script code này khi html đã parse xong.
Vậy tôi nên sử dụng nó khi nào? Nó phụ thuộc vào tình hình cụ thể.
Quy tắc như sau:
Nếu script là 1 module tách biệt, không phụ thuộc vào script nào khác thì nên sử dụng async cho load và execute với trang luôn
Nếu script phụ thuộc vào script khác, hoặc bị script khác phụ thuộc, thì nên dùng defer, để load và execute theo thứ tự
Nếu script nhỏ và các script khác phụ thuộc vào nó, thì cho load inline và không cần async hay defer
Ngoài ra nên cân nhắc 1 số câu hỏi trước khi thêm các thuộc tính này
1. Thẻ script đang nằm ở đâu trong trang
Async và defer có thể rất cần thiết nếu thẻ script không nằm ở cuối trang. HMTL document được parse theo thứ tự, từ thẻ mở <html> cho đến thẻ đóng </html>. Nếu script năm ngay gần cuối thẻ đóng </body> thì việc sử dụng async hay defer thì cũng không có ý nghĩa lắm bởi vì việc parse html đã gần xong xuôi, và javascript không còn block gì html nữa.
2. Script đó có độc lập không?
Với những file script không phụ thuộc vào những file khác, thì thuộc tính async dùng cho script đó là việc nên làm, vì nó load và execute script song song, giảm thời gian tải trang, kết quả cuối cùng nhanh hơn.
3. Script có yêu cầu việc load DOM xong mới thực hiện?
Trong nhiều trường hợp, các script chứa đựng code tương tác với DOM, hoặc phụ thuộc vào các thành phần trên trang, yêu cầu trang phải parse xong thì mới execute script. Thông thường thì những file như thế sẽ được đặt ở cuối trang để chắc chắn mọi thử đã được parse. Tuy nhiên chúng ta có thể dùng thuộc tính defer thay thế, đảm bảo script sẽ được execute khi trang đã tải xong.
4.Script nhỏ và các file khác phụ thuộc vào nó?
Nếu script dung lượng nhỏ, và các file khác phụ thuộc vào nó, thì nên để script đó inline. Mặc dù nó block quá trình parse HTML, nhưng nó không đáng kể vì dung lượng nhỏ.
Với việc biết cách sử dụng các thuộc tính async, defer hợp lý thì tốc độ load trang sẽ được cải thiện hơn, mang lại cảm giác thích thú cho người dùng. Vì vậy nó giúp tối ưu SEO, giúp tăng điểm Google Page Speed!
Nguồn: Javascript async và defer