Giải mã HTML ngay lập tức để giảm kích cỡ tập tin và tăng tốc độ tải trang web.
Mở đầu
Đoạn HTML bạn viết để chỉnh sửa và đoạn HTML gửi tới trình duyệt không nhất thiết phải là cùng một tệp. Trong lúc dựng trang, phần thụt lề và những chỗ xuống dòng giúp bạn theo dõi cấu trúc dễ dàng, còn các chú thích để lại trong mã đánh dấu thì giải thích từng phần hoặc ghi nhớ điều gì đó cho sau này. Trình duyệt chẳng cần bất cứ thứ nào trong số đó để hiển thị trang cho đúng — nó chỉ cần những thẻ hợp lệ, dựng đàng hoàng. Việc nén sẽ bóc đi những gì nằm đó thuần túy cho người đọc, nhờ vậy cùng một trang ấy đến với trình duyệt dưới dạng một tệp nhỏ hơn.
Công cụ này nén HTML của bạn ra sao
- Mọi chú thích đều bị bỏ, không ngoại lệ. Mỗi khối
<!-- ... -->đều bị bóc đi, kể cả những chú thích điều kiện kiểu cũ dành cho Internet Explorer lẫn bất kỳ chú thích nào bạn có thể muốn giữ, chẳng hạn một ghi chú giấy phép hay ghi công. Ở đây không có thứ gì tương đương với quy ước “giữ cái này” mà công cụ nén CSS của trang này hỗ trợ — nếu một chú thích là quan trọng với bạn, hãy giữ nó trong bản làm việc và đừng trông cậy nó sống sót qua lần nén. - Nội dung bên trong các thẻ
<pre>,<code>,<script>và<textarea>giữ nguyên khoảng trắng y hệt. Bên trong những thẻ này, các chỗ xuống dòng và khoảng cách đều mang ý nghĩa — một đoạn mã ví dụ hay một khối văn bản định dạng sẵn sẽ hiện ra sai nếu khoảng cách bên trong bị ép lại — và công cụ để yên phần khoảng trắng đó. - Khoảng trắng ở những chỗ khác bị ép lại, chứ không bị xóa. Một dãy dấu cách, ký tự tab hay chỗ xuống dòng nằm giữa hai phần tử nội tuyến (chẳng hạn một liên kết giữa câu) được rút xuống còn một dấu cách duy nhất thay vì bỏ hẳn, để các từ đứng cạnh nhau không dính liền. Chỉ khoảng trắng giữa những thẻ cấu trúc ở cấp cao nhất và bên trong
<head>mới bị cắt sạch, bởi ở đó chẳng bao giờ có gì hiện ra thành văn bản chạy nhìn thấy được. - Dấu gạch chéo đóng ở cuối thẻ tự đóng được chuẩn hóa bỏ đi.
<img src="photo.jpg" />trở thành<img src="photo.jpg">— cả hai đều là HTML hợp lệ, và dạng ngắn hơn tiết kiệm vài ký tự ở mỗi thẻ tự đóng trong trang.
Rủi ro thật sự duy nhất: chú thích nằm trong nội dung định dạng sẵn
Vì việc bóc chú thích diễn ra ở lượt quét đầu tiên trên toàn bộ phần bạn đưa vào, trước khi công cụ nhìn xem thứ gì đang nằm trong thẻ nào, nó không phân biệt được giữa một chú thích thông thường đáng bị xóa với chính đoạn chữ <!-- ... --> mà bạn cố ý trưng ra bên trong một khối <pre> hay <code> — ví dụ một đoạn mã trong bài hướng dẫn cho thấy chú thích HTML trông ra sao. Đúng trong trường hợp đó, đoạn chữ ví dụ sẽ bị bóc mất dù khoảng trắng quanh nó, trong cùng khối ấy, vẫn được giữ đúng. Chuyện này chỉ ảnh hưởng tới đoạn chữ chứa đúng nguyên các ký tự <!-- và --> bên trong một khối định dạng sẵn; nó không đụng tới những đoạn mã ví dụ thông thường vốn không có cú pháp chú thích trong phần chúng trình bày.
Cần biết gì trước khi nén
Công cụ này chỉ đổi cách trình bày — nó không sắp xếp lại các phần tử, không gộp thẻ và không lấy đi thứ gì khỏi cấu trúc thật của trang. Không có giới hạn dung lượng cho phần bạn dán vào, bởi bạn đang làm việc trực tiếp với văn bản chứ không tải tệp lên; toàn bộ HTML của một trang, dù dài, vẫn dán và xử lý y như một đoạn ngắn.
Như với bất cứ công cụ nén nào, nên mở kết quả đã nén trong trình duyệt trước khi đăng — không phải vì phép chuyển đổi kém tin cậy, mà vì xác nhận một trang hiện ra và chạy đúng như bạn mong đợi trước khi nó lên mạng là thói quen tốt, hệt như soát lại bất cứ thứ gì khác trước khi nộp hay công bố.
Khi nào đây là công cụ phù hợp
- Chuẩn bị đăng một trang sau khi bạn đã chỉnh sửa xong. Cứ tiếp tục làm việc với bản dễ đọc trong lúc dựng trang, rồi nén một lần duy nhất, ngay trước khi nó lên mạng — chứ đừng dùng như một định dạng để làm việc.
- Giảm dung lượng trang khi nơi lưu trữ hạn chế hoặc đường truyền chậm. Một tệp HTML nhỏ hơn thì tải nhanh hơn, điều này đáng kể hơn ta tưởng trên mạng của trường hoặc trên điện thoại dùng dữ liệu di động.
- So sánh mã nguồn để thấy HTML chạy thật trông ra sao. Xem mã nguồn của một trang web thật thường thấy một khối HTML co cụm, chẳng giống chút nào với thứ ta viết tay — nén trang của chính mình rồi đặt hai bên cạnh nhau là cách cụ thể để thấy vì sao lại thế.
Ví dụ
Một học sinh hoàn thành trang hồ sơ cá nhân cho lớp thiết kế web, trong mã đánh dấu còn sót lại những chú thích từ các bản nháp trước, kèm theo một đoạn mã ví dụ nằm trong khối <pre> cho thấy chú thích HTML trông ra sao, như một phần của việc trình bày những gì em học được. Trước khi nộp bài, em dán cả trang vào đây. Trang hiển thị ra vẫn y hệt về hình thức lẫn cách chạy, những chú thích nháp còn sót đã biến mất, và tệp thì nhỏ lại — nhưng ví dụ chú thích nằm trong đoạn mã cũng biến mất theo, bởi nó tình cờ chứa đúng nguyên các ký tự <!--/-->. Sửa riêng ví dụ ấy để tránh đúng cú pháp chú thích, hoặc để phần đó ra ngoài những gì đem nén, là xong chuyện.
Câu hỏi thường gặp
Nén có làm trang của tôi trông khác đi không?
Không. Thẻ và cấu trúc được giữ nguyên — chỉ cách trình bày, khoảng trắng và chú thích thay đổi, mà không thứ nào trong đó ảnh hưởng tới cách trang hiển thị.
Chú thích trong HTML của tôi sẽ ra sao?
Tất cả đều bị bỏ, không ngoại lệ — không có cách nào đánh dấu một chú thích là loại cần giữ, khác với công cụ nén CSS của trang này.
Khoảng trắng bên trong khối <pre> hay <code> có được giữ không?
Có, khoảng cách và những chỗ xuống dòng bên trong các thẻ đó, cũng như bên trong <script> và <textarea>, được để nguyên đúng như bạn viết. Ngoại lệ duy nhất là khi nội dung ấy chứa đúng nguyên cú pháp chú thích (<!-- -->) dưới dạng chữ bạn đang trưng ra — phần đó bị bỏ cùng với các chú thích thật, bởi việc bóc chú thích diễn ra trước khi công cụ nhìn xem nó đang nằm trong thẻ nào.
Có giới hạn dung lượng không?
Không — bạn đang dán văn bản chứ không tải tệp lên, nên ở đây không có giới hạn cố định như ở các công cụ tải tệp của trang này.
Mã của tôi có bị lưu ở đâu không?
Không. Đoạn HTML bạn dán vào được xử lý để tạo ra kết quả đã nén, không được lưu thành tệp cũng không được giữ lại sau đó; chỉ việc công cụ đã được dùng là có ghi nhận, còn bản thân đoạn mã thì không.
Tôi dùng được những công cụ liên quan nào?
Với các định dạng mã khác, hãy dùng CSS Minifier và JavaScript Minifier để nén, hoặc CSS Beautifier và JavaScript Beautifier để làm ngược lại.
