Tốc độ tải website, một vấn đề luôn được chú trọng hàng đầu. Trong bài viết hôm nay tôi sẽ giới thiệu cho bạn cách cắt giảm chi tiêu về dung lượng lưu trữ cho các tệp tin .css và .js trên hệ thống. Thuật ngữ “Nén” dường như không còn gì xa lạ với mọi người. Một thư viện javascript trần thường có thể chiếm dung lượng lên đến cả hàng trăm kí lô byte.Điển hình là JQuery đồ sộ. Bạn có biết Jquery lúc chưa được nén có dung lượng bao nhiêu? Sắp xỉ 229KB. Nhưng bản nén thì sao? chỉ vào khoảng 31KB thôi bạn ạ. Trên máy ta thì chắc nó chả có nghĩa địa gì.
Nhưng trên trường WWW, một Webmaster có tầm nhìn xa chắc chắn sẽ thấy một tương lai thiệt thòi trước mắt.
Nhưng trên trường WWW, một Webmaster có tầm nhìn xa chắc chắn sẽ thấy một tương lai thiệt thòi trước mắt.
Những lợi ích mà việc nén Javascript và CSS mang lại
+ Tăng tốc độ duyệt web của người dùng. À, thay vì gòng lên tải cả trăm kí. Người dùng chỉ cần tải một file nén với kích thước nhỏ hơn nhưng lại không ảnh hưởng gì đến trang web đang xem.+ Tránh những cập mắt tò mò. Sau khi nén, việc soi code có lẽ sẽ khó khăn hơn bình thường khá nhiều.+ Tiết kiệm được không gian lưu trữ: Có vài trăm kí thì có ích gì… không với những kí lô byte mà ta tiết kiệm được đó, ta có thể lưu trữ thêm được một mớ ảnh đấy .+ Tiết kiệm băng thông: như trên
Nén Javascript và CSS thế nào?
Nén Javascript
Nén, thực chât là loại bỏ những ký tự dư thừa vốn không cần thiết trong code. Ví dụ như: khoảng trống, xuống dòng, chú thích, … Hay làm ngắn đoạn code lại bằng cách lựợc bỏ những biến không cần thiết, những giá trị lập đi lập lại, … . Hiên nay có khá nhiều công cụ online giúp bạn làm công đoạn “nén” này một cách tự động.
Mình xin đề cử một công cụ nén Javascript tổng hợp vô cùng hiệu quả, đó là:http://compressorrater.thruhere.net/Bạn chỉ cần copy đoan code mình muốn nén, cho nó vào hộp text. Và ấn “CompressorRate It!”… chờ vài phút, để trang web xử lí code của bạn với từng loại thuật toán. Sau khi hoàn tất, sẽ có một bảng báo cáo đầy đủ cho bạn.
+ Tăng tốc độ duyệt web của người dùng. À, thay vì gòng lên tải cả trăm kí. Người dùng chỉ cần tải một file nén với kích thước nhỏ hơn nhưng lại không ảnh hưởng gì đến trang web đang xem.+ Tránh những cập mắt tò mò. Sau khi nén, việc soi code có lẽ sẽ khó khăn hơn bình thường khá nhiều.+ Tiết kiệm được không gian lưu trữ: Có vài trăm kí thì có ích gì… không với những kí lô byte mà ta tiết kiệm được đó, ta có thể lưu trữ thêm được một mớ ảnh đấy .+ Tiết kiệm băng thông: như trên
Nén Javascript và CSS thế nào?
Nén Javascript
Nén, thực chât là loại bỏ những ký tự dư thừa vốn không cần thiết trong code. Ví dụ như: khoảng trống, xuống dòng, chú thích, … Hay làm ngắn đoạn code lại bằng cách lựợc bỏ những biến không cần thiết, những giá trị lập đi lập lại, … . Hiên nay có khá nhiều công cụ online giúp bạn làm công đoạn “nén” này một cách tự động.
Mình xin đề cử một công cụ nén Javascript tổng hợp vô cùng hiệu quả, đó là:http://compressorrater.thruhere.net/Bạn chỉ cần copy đoan code mình muốn nén, cho nó vào hộp text. Và ấn “CompressorRate It!”… chờ vài phút, để trang web xử lí code của bạn với từng loại thuật toán. Sau khi hoàn tất, sẽ có một bảng báo cáo đầy đủ cho bạn.
Một số thông tin bạn nên biết khi xem bảng báo cáo của CompressorRater.Compression Tool: công cụ dùng để nén, hay thuật toán nén JS. Thường thì YUI sẽ cho kết quả tối ưu nhất.Run time: Tốc độ thực hiện code (khi client đã tải xong). Đừng nên dùng js nào được nén mà Run time quá lâu bạn nhé.Size: Quan trọng này, cột đầu tiên là kích thước sau khi nén tính theo byte. % thể hiện dung lượng script được nén so với nguyên bản của nó.Khi chọn được những thông số ưng ý, ấn “View” để xem source code (đã nén). Bạn có thể copy nó ra rồi dán vào file js để dùng hoặc nội dung file nén này lại với lệnh File -> Save as… trên trình duyệt.Ghi chú
Một lời khuyên nho nhỏ, nếu site của bạn phải import nhiều file .js. Bạn hãy copy nội dung tất cả bọn chúng cho vào công cụ nén => ra một file duy nhật + dung lượng bé.
Nén CSS
Cách nén của CSS cũng có phần giống Javascript. Ngoài việc loại bỏ ký tự dư thừa. Với CSS ta còn có thể gộp nhiều thuộc tính giống nhau lại thành một nhóm, như vậy sẽ tiết kiệm được thêm vài dòng code. Ví dụ như:
Một lời khuyên nho nhỏ, nếu site của bạn phải import nhiều file .js. Bạn hãy copy nội dung tất cả bọn chúng cho vào công cụ nén => ra một file duy nhật + dung lượng bé.
Nén CSS
Cách nén của CSS cũng có phần giống Javascript. Ngoài việc loại bỏ ký tự dư thừa. Với CSS ta còn có thể gộp nhiều thuộc tính giống nhau lại thành một nhóm, như vậy sẽ tiết kiệm được thêm vài dòng code. Ví dụ như:
Mã:
1 margin-left: 5px;2 margin-right: 5px;3 margin-top: 5px;4 margin-bottom: 5px;
Ta có thể gọp lại thành một dòng duy nhất.
Mã:
1 margin: 5px;
Với CSS, bạn có thể dùng công cụ sau: http://www.csscompressor.com/
Chỉ cần copy toàn bộ code css bỏ vào, ấn compress. Sau khi nén xong bạn chỉ cần copy đoạn code được nén chép đè lên phần style css cũ. Và như mình nói ở đầu bài. Việc nén này hoàn toàn vô hại, không làm thay đổi ý nghĩa những dòng code của ta mà chỉ làm cho chúng trở nên gọn gàn. Loại bỏ đi những phần thừa thải không cần thiết.Lưu ý
Sau khi nén xong, code sẽ rất khó chỉnh sửa do code nén thường chỉ còn có 1 dòng duy nhất (giảm kích thước tối đa mà). Code viết liên miên không có cách, chú thích, hay làm dấu hiệu gì để cho dễ đọc. Vì thế bạn nên lưu một bản nháp để sau này tiện chỉnh sửa và nén tiếp nhé
Chỉ cần copy toàn bộ code css bỏ vào, ấn compress. Sau khi nén xong bạn chỉ cần copy đoạn code được nén chép đè lên phần style css cũ. Và như mình nói ở đầu bài. Việc nén này hoàn toàn vô hại, không làm thay đổi ý nghĩa những dòng code của ta mà chỉ làm cho chúng trở nên gọn gàn. Loại bỏ đi những phần thừa thải không cần thiết.Lưu ý
Sau khi nén xong, code sẽ rất khó chỉnh sửa do code nén thường chỉ còn có 1 dòng duy nhất (giảm kích thước tối đa mà). Code viết liên miên không có cách, chú thích, hay làm dấu hiệu gì để cho dễ đọc. Vì thế bạn nên lưu một bản nháp để sau này tiện chỉnh sửa và nén tiếp nhé
Hướng dẫn tối ưu tập tin JavaScript trong mã nguồn mở NukeViet 3.x
Tác giả: VINADES.,JSC
Các tập tin JavaScript được sử dụng rộng rãi trong hệ thống mã nguồn mở NukeViet. Nó có thể là các đoạn mã giúp tạo các hiệu ứng đẹp mắt phía trình duyệt, hay tạo sự tương tác trực quan với người duyệt web... Bên cạnh đó, nó lại là một trong những tác nhân gây chậm trình duyệt, nặng website. Để vừa cảm nhận được sức mạnh của JavaScript, vừa cải thiện được tốc độ load trang, các lập trình viên của VINADES., JSC - công ty chuyên quản NukeViet đã và đang sử dụng công cụ tối ưu trực tuyến Google Closure Compiler. Bài viết này giới thiệu đến các bạn những tính năng nổi bật và cách sử dụng Google Closure Compiler cho NukeViet.
I. Các kiểu tối ưu JavaScript
Có thể chia các công cụ giúp giảm kích thước tập tin JavaScript thành 3 kiểu, căn cứ vào phương pháp mà chúng sử dụng:
1. Kiểu RegExp: Xóa các chú thích, các khoảng trắng cũng như một số “rác” khác trong mã nguồn nhờ vào các biểu thức chính quy (Regular Expressions). Đại diện tiêu biểu cho phương pháp này là công cụ JSMin.
Dưới đây là một vài website cung cấp công cụ kiểu này:
2. Mã hóa kiểu Gzip nửa vời: Nguyên lý của nó là giảm dung lượng tập tin JavaScript bằng phương pháp nén đơn giản (nén với khóa định nghĩa). Khi hiển thị trên trình duyệt, nội dung bị mã hóa sẽ được giải mã bằng hàm biên dịch eval. Nó được gọi là nửa vời bởi sử dụng phương pháp nén gzip ở mức độ thấp. Kiểu mã hóa này không được khuyến khích sử dụng ở các website có chế độ nén gzip mặc định cho các tập tin JavaScript (nén 2 lần, khiến dung lượng của nội dung được đọc còn lớn hơn so với nội dung của tập tin nguyên gốc). Ngoài ra, trình duyệt khi đọc các tập tin này sẽ lâu hơn bình thường vì phải thực hiện thêm thao tác giải mã. Công cụ nén nổi tiếng một thời Dean Edwards thuộc trường phái này (http://dean.edwards.name/packer/).
Bạn có thể truy cập website http://jscompress.com để thấy được sự khác nhau của 2 kiểu tối ưu tập tin JavaScript nêu trên.
3. Giảm kích thước tập tin bằng phương pháp tối ưu cấu trúc mã nguồn và rút gọn các ký tự.
Đây được coi là phương pháp tân tiến nhất và được ShrinkSafe, YUI Compressor, Google Closure Compiler sử dụng. Trước khi thực hiện chức năng tối ưu, các công cụ này đọc cây cú pháp của mã nguồn (syntax tree), dựa trên kết quả đạt được tiến hành thay tên của các biến cục bộ bằng tên khác ngắn gọn hơn. Cuối cùng, với cây thư mục có định dạng mới này, chúng tối ưu mã nguồn bằng cách xóa các chú thích, các khoảng trắng, viết gọn các số nguyên (1000 thành 1E3, 20000 thành 2E4).
Google Closure Compiler cũng như các công cụ tối ưu thế hệ mới khác không sử dụng các biểu thức chính quy và không tiến hành nén tập tin. Bên cạnh đó, nó vượt trội hơn so với ShrinkSafe và YUI Compressor ở phương pháp tối ưu. Trong khi YUI Compressor sử dụng phương pháp cục bộ, Google Closure Compiler tiến hành phân tích mã nguồn một cách toàn diện, lớn hơn nhiều so với ý nghĩa của từ “tối ưu”, cho ra một kết quả được coi là tốt nhất ở thời điểm hiện nay.
Công cụ trực tuyến Google Closure Compiler được cung cấp tại đây:
II. Cách sử dụng Google Closure Compiler để tối ưu tập tin JavaScript cho NukeViet 3:
1. Tối ưu cho các lập trình viên
Tối ưu cho lập trình viên là cách tối ưu để lập trình viên có thể đọc được code dễ dàng. Ta sẽ sử dụng Google Closure Compiler tối ưu code mà vẫn giữ lại (thậm chí còn làm đẹp) cấu trúc dòng lệnh (chứ không phá hủy nó). Để làm việc này, tại công cụ Google Closure Compiler, bạn chọn các tùy chọn như sau:
Optimiztion: Simple.
Formatting: Pretty print.
Cuối cùng, bạn chỉ cần chép nội dung tập tin JavaScript vào ô bên trái, nhấp nút Compile, code đã tối ưu sẽ được Google trả về ở phía bên phải. Google cũng sẽ tính toán luôn tỉ lệ phần trăm được tối ưu so với code gốc, thống kê các lỗi và các cảnh báo nếu đoạn mã JavaScript của bạn có vấn đề.
2. Tối ưu cho khách truy cập web
Khách truy cập web thường không quan tâm đến các dòng mã JavaScript, do đó có thể hủy cả cấu trúc dòng lệnh để việc tối ưu được cao hơn. Để làm việc này, tại công cụ Google Closure Compiler, bạn chọn các tùy chọn như sau:
Optimiztion: Simple.
Formatting: hủy hết các tùy chọn tại đây.
Vui lòng đăng nhập diễn đàn theo link sau để nhận file đính kèm: tại đây
Với những tính năng vượt trội và cách sử dụng dễ dàng, Google Closure Compiler sẽ được tích hợp sẵn vào các phiên bản NukeViet trong tương lai.
0 nhận xét:
Post a Comment