Hôm nay mình giới thiệu thêm những kỹ thuật nằm làm tăng tốc việc hiển thị trang web HTML. Phần này chủ yếu xoay quanh vấn đề về các file javascript, và file CSS.
1 - Đặt các file CSS trên đầu (phần <HEAD>) của trang web
Việc render HTML sẽ được thực hiện tuần tự từ trên xuống, nếu chúng ta đã khai báo các style sheet ngay trên đầu, thì việc hiển thị nội dung tới đâu nó sẽ map với các class của CSS tương ứng và render ngay. Nếu chúng ta đặt CSS ngay cuối trang web (gần thẻ </body>) thì trang web sẽ hiển thị một cách "kinh dị" vì thiếu các file định dạng CSS cho tới khi nó load xong hết các thành phần nội dung thì mới hiển thị định dạng. Ấy là chưa kể có những hình được khai báo trong CSS, nó sẽ không được hiển thị và trông trang web rất xấu. Và đôi khi, đối với trình duyệt IE, nó sẽ hiển thị trang web trắng cho đến khi việc render được thực hiện 100% thì nó mới show ra, điều này càng chậm hơn.
2 - Đặt các file Javascript (JS) dưới cùng của trang web
Ngược lại với các file CSS, chúng ta phải đặt các file JS nằm dưới cùng. Lý giải cho điều này, chúng ta cần biết cơ chế request và download của các trình duyệt. Chúng request song song các thành phần của 1 trang web như hình ảnh, flash, CSS... Nhưng đặc biệt khi load các file JS thì chúng lại chỉ load từng file chứ không áp dụng việc load song song. Tại sao lại như vậy. Câu trả lời đó là trong JS, đôi khi chúng ta tạo động các thành phần của trang web, nên nếu request song song nhiều file JS cùng lúc, sẽ không đảm bảo các thành phần phát sinh động được thực hiện đúng thứ tự. Mặc khác, nếu download song song, thì hẳn nhiên file nào nhỏ nhất sẽ xuống trước, nhưng biết đâu file đó có thứ tự thực thi cuối cùng, đều này cũng dẫn tới lỗi. Cho nên, khi trình duyệt load file JS xuống thì sẽ block lại để không download tiếp các file khác. Và chính điều này sẽ làm chậm đáng kể việc hiển thị nội dung website.
3 - Làm nhỏ dung lượng các file CSS, JS
Dĩ nhiên, 1 file có dung lượng càng nhỏ thì việc download nó xuống càng nhanh, điều này chắc chắn ai cũng biết ^^. Cho nên, nếu chúng ta có thể làm giảm dung lượng của các file này xuống càng thấp thì việc download chúng xuống càng nhanh. Sở dĩ các file này có thể làm nhỏ được đó là bởi vì khi chúng ta lập trình sẽ có những khoảng trắng vô nghĩa đối với trình dịch, những cái xuống dòng, những dòng ghi chú, tên biến thì đặt dài dòng (nhưng dễ hiểu)... điều này tăng kích thước của tập tin. Nếu chúng ta có thể dồn chúng lại, bỏ hết khoảng trắng và xuống dòng, bỏ luôn dòng ghi chú thì sẽ làm giảm dung lượng tập tin đáng kể.
Nhưng nếu viết kiểu đó thì chỉ có "thánh" mới đọc code nổi. Chúng ta cứ viết như bình thường, và sau đó dùng tool gom nó lại là xong. Dưới đây mình giới thiệu mọi người các tool online xử lý cho các chuyện này như sau:
1 - Làm nhỏ dung lượng file CSS: http://tools.arantius.com/css-compressor
2 - Làm nhỏ dung lượng file JS: http://dean.edwards.name/packer/
3 - Bỏ các ghi chú file JS: http://closure-compiler.appspot.com/home
Ghi chú: Nên dùng số 3 trước rồi mới dùng số 2.
4 - Dùng các file CSS, JS external. Không dùng dạng inline
Nếu chúng ta dồn hết các CSS, JS vào trong cùng 1 file HTML thì chúng ta chỉ mất 1 request để download tất cả xuống, và dĩ nhiên sẽ nhanh hơn so với việc chúng ta tách CSS, JS, HTML thành các file riêng lẽ vì khi đó chúng ta sẽ tốn nhiều request để lấy hết các file này. Tuy nhiên, chúng ta dùng external files vì trình duyệt sẽ cache lại chúng, và lần sau request page, nó chỉ request HTML còn CSS, JS thì nó lấy từ cache trình duyệt. Như vậy sẽ nhanh hơn nhiều so với inline.
Optimize front-end to improve performance - Part 4
Optimize front-end to improve performance - Part 2
Optimize front-end to improve performance - Part 1 a
No comments:
Post a Comment