Render Block Javascript
White

KawaiNT viết ngày 04/01/2016

Một kỹ thuật không thể thiếu trong quá trình cải tiến tốc độ load trang đó là Render Block Javascript.
Đây là thành phần quan trọng thứ 2 sau CSS. Ta nên đặt các file Javascript này dưới cuối file index.html
Sau đây là một vài kỹ thuật trong Render Block Javascript.

1. Minifile JS

Trước khi minifile ta nên nối các file javascript lại với nhau.
Khi sử dụng các thư viện như Bootstrap, Jquery, Angular ta nên dùng cdn của google để tốc độ load nhanh và ổn định.
=> Tăng tốc độ load trang và giảm thiếu số lượng request.

2. Hàm javascript

Điều kiện cần và đủ để một trang web load hoàn chỉnh là khi file index.html và các file css được tải xong. Nhưng thông thường thì khi file CSS chưa được tải xong thì cùng lúc đó file Javascript được tải xuống. Điều đó làm cho tốc độ load trang giảm xuống. Làm sao để khắc phục tình trạng đó?

Chúng ta sẽ sử dụng một hàm Javascript có tên là: downloadJSAtOnload.
Hàm này có nhiệm vụ là không cho tải file JS cho đến khi các file CSS được tải xong.
Đoạn script này nên đặt trước thẻ đóng body (/body)

function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

KawaiNT

3 bài viết.
7 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
17 9
Web Performance là gì ? Chất lượng cuộc sống ngày một nâng cao và hiện đại hơn. Công nghệ cũng ngày càng phát triển hơn trước như cơ khí, điện tử,...
KawaiNT viết 2 năm trước
17 9
White
5 4
Hôm nay, mình giới thiệu một kỹ thuật nhỏ để làm tăng tốc độ load trang web của chúng ta nhanh hơn. Đó là “Render Blocking CSS” 1. Render Blocking...
KawaiNT viết 2 năm trước
5 4
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
3 bài viết.
7 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!