Menu
header photo

BEST MAGENTO EXTENSIONS

Power your E-Commerce Website!

Tìm hiểu về Defer Parsing of JavaScript

July 19, 2015

Bạn đang tìm hiểu về phương pháp Defer Parsing of JavaScript cho Website và thấy bài viết này thì đây là cẩm nang tốt nhất mà bạn nên tìm đọc.

Defer Parsing of JavaScript là gì?

Có nhiều lý do để bạn tiến hành Defer Parsing of JavaScript cho trang Web của mình. Tuy nhiên, lý do quan trọng và "nổi cộm" nhất vẫn là để cải thiện tốc độ Website. Thường thì các đoạn mã JavaScript sẽ được đặt trong thẻ <head>...</head>. Khi Website được tải về thì các đoạn mã code cũng sẽ được đọc từ trên xuống dưới. Bởi thế, nếu bạn có nhiều đoạn JavaScript hoặc nhiều mã code ở đây thì sẽ mất nhiều thời gian để tải nội dung trên trang (vì phải tải hết mã JavaScript trước). Do đó, để tăng tốc Website, bạn hãy thực hiện việc Defer Parsing of JavaScript, tức là các mã JavaScript sẽ chỉ được phân tích khi nội dung trên trang đã được tải (Load) xong xuôi.

Magetension có thể diễn giải quá trình này như sau:

  1. Sử dụng một sự kiện "onload" để gọi một mã JavaScript bên ngoài (tạm gọi là JS nhé)
  2. Mã JS bên ngoài này sẽ chưa được xử lý cho đến khi nội dung trên webpage được load hết
  3. Đoạn JavaScript bên ngoài được xử lý và tác động lên webpage

defer-parsing-of-javascript

Defer Parsing of JavaScript là một trong những vấn đề liên quan đến Website kích thích sự khám phá của những lập trình viên và các Webmaster. Nhiều người thường nói rằng "hãy sử dụng Defer JS" hoặc "hãy cho hết các mã JS có trên webpage xuống cuối webpage đó". Tuy nhiên, kết quả là việc tăng tốc Website vẫn chưa thực sự triệt để.

NHƯNG giải pháp tôi đưa ra cho các bạn ngày hôm nay sẽ thay đổi tất cả...

Đoạn mã nguồn để gọi file JavaScript bên ngoài

Bạn nên đặt đoạn mã này trước thẻ </body> (ở gần phần cuối của mã nguồn HTML trên trang). Tôi có bôi màu đỏ để các bạn phân biệt được tên của file JS bên ngoài. Cảm ơn Blog FeedTheBot đã chia sẻ đoạn script này.

<script type="text/javascript">
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;
</script>

Đoạn Code này có nghĩa là gì?

Mã nguồn mà tôi giới thiệu đến các bạn có nghĩa là mã nguồn JavaScript chỉ được phân tích ngay khi nội dung trên toàn trang đã được tải xong.

Hướng dẫn chi tiết

Để áp dụng đoạn code này cho Website của mình, các bạn làm như sau:

  1. Copy đoạn mã nguồn ở trên
  2. Dán đoạn code trước thẻ đóng body (</body>)
  3. Thay đổi tên "defer.js" bằng tên file JavaScript mà bạn hiện có
  4. Kiểm tra đường dẫn đến file của bạn đã đúng chưa. Ví dụ, file "defer.js" của tôi sẽ nằm cùng folder với các file HTML khác.

Cách để bạn phát huy hiệu quả của Defer Parsing of JavaScript

Đoạn code trên sẽ ngừng việc xử lý JS cho đến khi nội dung trên webpage đó được tải xong. Vậy nên, bạn không nên "ném" tất cả các file JavaScript vào cùng một chỗ. Thay vào đó thì tôi thường chia chúng làm 2 nhóm.

  • Nhóm 1 là các mã JS cần thiết cho việc tải webpage.
  • Nhóm 2 là các mã JS tạo hiệu ứng, tính năng nâng cao

Vì sao mà bạn phải dùng Defer JavaScript?

Như tôi đã đề cập ở trên thì Defer JavaScript chính là một trong những phương pháp giúp bạn tăng tốc cho Website của mình. Và tốc độ của một Website có nhanh hay không ảnh hưởng không nhỏ đến thứ hạng của nó trên công cụ tìm kiếm Google. Vậy nên, nhiệm vụ của bạn là phải tăng tốc để trang Web của mình "chạy" càng nhanh càng tốt.

Công cụ Defer Parsing khác

Cách làm trên đây hoàn toàn thủ công và nó đòi hỏi bạn phải có trình độ hiểu biết ít nhiều về lập trình. Bạn cần một giải pháp nhanh hơn phải không? Vậy thì hãysử dụng Defer Parsing of JavaScript Magento tại http://deferparsingjs.com. Tất cả những gì bạn cần làm là cài đặt, cấu hình và hưởng thị thành quả mà thôi.

Chúc các bạn thành công! Hẹn gặp lại các bạn trong các bài viết sau. Mọi khó khăn, thắc mắc xin hãy comment bên dưới nhé :)

Go Back

rất chi tiết và dễ hiểu thanksssssss



Comment