Tối giản Javascript

Tôi thường hay theo dõi tin từ Javascript Weekly, nơi thường gửi các email thông báo các tin tức về Javascript được cập nhật trong tuần. Chủ yếu xoay quanh các vấn đề: các bài hướng dẫn, các library mới, và 1 số tin tức.Tuần vừa rồi, họ có gửi cho tôi 1 email (các bạn có thể xem phiên bản on webtại đây), trong đó có 1 topic khá thú vị, chính là tiêu đề của post này.

Trước khi vào nội dung chính, xin nhấn mạnh 1 chút là 'tối giản' khác với tối ưu. Thực ra thì có thể hiểu tối giản là 1 dạng tối ưu về kích thước. VD bạn có 1 file JS cỡ 10KB, sau đó bạn làm cách nào đó để nó còn 8KB mà hoàn toàn giữ nguyên chức năng, thì việc làm đó gọi là tối giản. Tối ưu thông thường được hiểu theo nghĩa về hiệu suất, nghĩa là cùng với file JS đó, bạn thực hiện 1 phương pháp nào đó khiến cho nó chạy nhanh hơn 30%, ngốn CPU ít hơn 10% thì đó gọi là tối ưu. Thông thường thì tối ưu không đồng nghĩa với tối giản, nghĩa là có lúc bạn phải chấp nhận kích thước file lớn để cho nó chạy nhanh hơn (như kiểu xe máy với xe đạp). Nhưng đôi khi các biện pháp tối giản cũng có ý nghĩa về mặt tối ưu hiệu suất.

Các phương pháp tối giản mã Javascript

Tôi điểm qua 2 phương pháp chính:

• Minifying
• Compression

Minifying

Minify nghĩa là làm cho nó 'mini' đi. Thông thường quá trình minify sẽ loại bỏ các ký tự xuống dòng, tab, khoảng trắng thừa và các comment. Các khoảng trắng có thể nằm giữa các dấu gán (=) hay cuối câu lệnh. Đôi khi nó cũng loại bỏ 1 số dấu chấm phẩy (;) không cần thiết, VD của câu lệnh cuối trong block if then, while, ...

Công cụ để minify nổi tiếng nhất là của Douglas Crockford, 1 guru hàng đầu về JS hiện nay. Tool online ở đây. (đừng quên Google để biết thêm vài tool nữa nhé)

Vì việc minify thường chỉ đơn thuần là việc xóa bỏ các ký tự thừa, nên nếu code javascript không chuẩn thì sẽ bị lỗi. Lỗi phổ biến nhất là do thiếu dấu chấm phẩy cuối câu lệnh (JS chấp nhận điều này, nhưng khi minify sẽ biến 2 câu lệnh thành 1). Để kiểm tra xem mã JS có chuẩn không, cách tốt nhất là dùng JSLint, một công cụ khác cũng của Douglas Crockford (tất nhiên là không phải quy tắc nào của JSLint bạn cũng nên tuân theo).

Về khả năng tối giản của minifying thì có thể nhận thấy rằng nó không được nhiều lắm.

Compression

Compression nghĩa là nén. Ở đây hiểu nén khác với đóng gói có mã hóa (pack). Pack có thể đem lại kích thước nhỏ hơn nén, nhưng hiệu suất sẽ bị thiệt, vì browser cần thời gian để giải mã (unpack). Hiện nay tôi thấy ít người dùng pack, trừ phi muốn bảo vệ code cho người khác khỏi xem, còn phần lớn đều dùng nén.

Các công cụ nén JS và pack JS có khá nhiều (bạn google nhé), nhưng nối tiếng nhất có lẽ là YUI Compressor của Yahoo (tôi thường dùng cái này nên gọi nó là nổi tiếng nhất, bạn có thể phản đối tôi ở comment). Gần đây Google có nhảy vào lĩnh vực này với Google Closure Compiler, và thực tế thì nó tối giản tốt hơn YUI Compressor, nhưng để lát nữa tôi sẽ nói kỹ hơn về Google Closure Compiler.

Khi nén JS, phần công việc đầu tiên mà các công cụ này làm là minify code (nghĩa là bạn hoàn toàn có thể quên các tool minify đi, chỉ cần nén là đủ, cũng như việc bạn đọc đoạn trước là không có ý nghĩa lắm :D). Nhưng không chỉ vậy, nó còn thay đổi tên các biến, function, methods (nhưng vẫn đảm bảo các biến global được giữ nguyên) thành dạng 1-2 chữ cái như function a(){};.

Quá trình đổi tên này tất nhiên phức tạp hơn nhiều, vì nó phải đảm bảo tất cả mọi liên kết đến các lời gọi hàm, biến vẫn phải được bảo toàn và hoạt động tốt; bất kể lời gọi đó từ nội bộ script hay từ 1 script khác.

Ngoài ra, YUI Compressor còn gán các biến, hàm, constant hay dùng vào 1 biến để tham chiếu nhanh, và thực hiện 1 số biện pháp tối giản khác. Slide này sẽ cho phép bạn có cái nhìn tổng quan về YUI Compressor.

Các công cụ nén JS khác cũng làm các công việc tương tự. Vấn đề là cái nào làm tốt hơn thôi. Không như minify, vốn gần như chỉ có 1 cách làm duy nhất, việc nén JS khá đa dạng và phụ thuộc nhiều vào thuật toán nén. Để so sánh phương pháp nào tốt hơn đối với mã JS của bạn, công cụ này sẽ hữu ích.

Một vài kỹ thuật tối giản mã JS

Đọc qua phần trên, bạn có thể nắm được phần nào các kỹ thuật tối giản mã JS (nếu không nắm được, bạn rất nên đọc lại). Tuy vậy, các kỹ thuật ấy thường do các tool tự thực hiện và bạn ít phải bận tâm. Nhưng có những thứ mà tool không làm giúp bạn được, và bạn cần phải tự làm bằng tay.

(Bạn rất không nên thực hiện các công việc tối giản ở trên bằng tay, như việc xóa các ký tự thừa, đổi tên, ... vì nó sẽ làm cho đoạn mã của bạn trở nên khó hiểu, rối rắm và sau 1 thời gian nữa, bạn có thể tự hỏi là ai đã viết ra đoạn mã khó chịu như vậy. Hãy để các công cụ tự động làm việc đó thay bạn)

Bây giờ tôi xin quay trở lại với Javascript Weekly đã nói lúc đầu. Newsletter kỳ này có giới thiệu đến trang web 140byt.es, vốn lấy ý tưởng từ Twitter. Website này (hiện đang trong trứng, chưa chính thức hoạt động) nhằm thu thập các đoạn mã JS cực nhỏ, không quá 140 ký tự (là số ký tự tối đa Twitter hạn chế, cũng là số ký tự tối đa mà bạn nhắn tin SMS) nhằm thực hiện 1 việc gì đó.

Do chưa chính thức hoạt động nên tất nhiên chưa có script nào cho chúng ta chiêm ngưỡng. Thế nhưng những người làm ra site này đã viết khá kỳ công 1 trang wiki hướng dẫn những kỹ thuật phổ biến cho việc tối giản mã JS cho những người chuẩn bị submit. Đây là hướng dẫn tốt nhất mà tôi có về lĩnh vực tối giản mã JS này (nếu bạn có 1 hướng dẫn khác hãy cho tôi biết ở comment).

Để tham khảo các kỹ thuật khác có giá trị, hãy xem thêm phần 'Other resources' ở cuối trang wiki đó nhé.

Google Closure Compiler

Nói thêm 1 chút về Google Closure Compiler. Sở dĩ đặt nó ở đây vì Google Closure Compiler có kết hợp 1 số kỹ thuật tối giản mã JS trong phần này. Bạn có thể chạy công cụ này online tại đây.

Cá nhân tôi nhận thấy Google Closure Compiler cho ra kết quả nhỏ gọn hơn YUI Compressor. Có thể do Google Closure Compiler đã làm luôn cả công việc tối giản chính nội dung đoạn mã JS mà chúng ta phải làm bằng tay. Tuy vậy, khó mà khẳng định được nó hơn YUI ở mọi mặt. Tốt nhất mỗi khi có ý định tối giản mã JS, chúng ta cứ thử cả 2 công cụ, cái nào cho kết quả tốt hơn (kích thước nhỏ hơn) thì ta lấy kết quả đó.

Lưu ý nhỏ là Google cũng có những hướng dẫn của riêng mình về việc viết code JS, rất đáng tham khảo.

Showcase những tiny script

Mặc dù chúng ta chưa được xem các script tại 140by.es, nhưng có 1 trang khác cho phép chúng ta coi các demo bằng javascript chỉ với 1KB. Ở đây có rất nhiều (tôi cũng không biết là bao nhiêu, chưa xem được hết) các demo thú vị như hiệu ứng đồ họa, chơi cờ vua, xếp hình, ... chỉ với 1KB JS! Có cả source code cho bạn xem nữa.

Nếu chưa đã mắt, bạn có thể xem thêm các demo với kích thước file tối đa 10KB tại trang web này.

Kết luận

Bài viết này không nhằm trình bày 1 cách chi tiết hay đưa ra các giải pháp copy & paste hoặc step-by-step guide. Nó chỉ là 1 bài tổng hợp các thứ liên quan đến tối giản JS mà thôi. Nếu bạn thực sự quan tâm tới vấn đề này thì việc đơn giản nhất mà bạn có thể làm là follow các link trong bài viết và ngâm cứu chúng. Không dễ dàng lắm đâu ;) 

Tham khảo: hontap.blogspot.