Hướng dẫn javascript load page
Khi bạn nghĩ đến việc cải thiện tốc độ load trang web, bạn có lẽ sẽ thử việc tối ưu code backend, tối ưu câu truy vấn cơ sở dữ liệu,... Nhưng một trong những cách đơn giản nhất để cải thiện tốc độ load trang là thay đổi một chút cách trang web load các đoạn JavaScript sử dụng thẻ Show
Vấn đề đối với cách Loading JavaScript thông thườngKhi bạn load JavaScript vào trong một trang HTML, có thể bạn thường thêm thẻ Khi trình duyệt mở một trang web, nó sẽ bắt đầu render trang theo từng thẻ một và bắt đầu dựng nên DOM. Và bất cứ khi nào bộ render gặp một thẻ cần load ảnh hay css, những request này được sử lý song song với quá trình render. Nhưng khi bộ render gặp bắt gặp một thẻ script, quá trình render HTML sẽ dừng lại và đợi cho đến khi nào tất cả script được lấy xuống và thực thi xong. Sau đó thì quá trình render mới tiếp tục xử lý những phần tiếp theo. Bạn có thể hiểu quá trình này theo một cách rõ hơn bằng ví dụ dưới đây.
Tác động của quá trình load trang khi gặp thẻ script có thể khá lớn và chủ yếu là tác động tới từ quá trình thực thi đoạn script đó. Và lượng content thực tế của trang HTML có thể lớn hơn trong một số trường hợp. Vì thế tất cả thời gian load và render có thể ảnh hưởng tới trải nghiệm của người dùng vì thời gian chờ quá lâu. Vậy thì chúng ta có thể sử dung một số cách dưới đây để tối ưu hóa quá trình loading JavaScript của trang web. 1. Đặt thẻ script ở cuối cùng của trangKhi đặt
thẻ
Việc đặt thẻ 2. Thêm thuộc tính async vào trong thẻ scriptKhi quá trình render gặp một thẻ
Tuy nhiên vì sự khác biệt về kích thước giữa các file script khác nhau và 3. Thêm thuộc tính defer vào trong thẻ scriptKhi render gặp một thẻ
Khi bạn sử dụng attribute Tổng kếtCùng tổng hợp lại những thứ bên trên:
|