Tối ưu Threaded Comments JS Blogger

Để xây dựng lên hệ thống bình luận blogger ta sẽ cần các thành phần sau: khung viết bình luận, khung hiển thị bình luận đã xuất bản và các button điều khiển nút trả lời bình luận, nút xóa bình luận. Và đương nhiên ưu tiên hàng đầu của webmaster đó là tận dụng tối đa mã html render từ mã xml càng tốt. Trong bài viết này tôi sẽ cùng các bạn can thiệp sau hơn vào hệ thống bình luận mặc định của blogger để tối ưu code js tăng tốc độ tải trang

1. Can thiệp vào khung viết bình luận

Với cả widget Blog1 v1 và v2 đều bao hàm chung các thành phần sau

Để tối ưu code js ta có thể sử dụng sự kiện jQuery onload, trước tiên bạn hãy vào trang bài viết có cho phép bình luận blogger và view-sources tìm với từ khóa "comment_from_post_iframe.js" đó chính là file js render từ thẻ <data:post.cmtfpIframe/>

Giờ tôi sẽ xóa thẻ <data:post.cmtfpIframe/> đi và gộp js vào script như sau

<script type='text/javascript'>//<![CDATA[
$(window).on("load", function() {
  $.getScript("//www.blogger.com/static/v1/jsbin/xxx-comment_from_post_iframe.js").done(function() {
    BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
  })
})
//]]></script>

Bạn lưu ý thay xxx bằng token blog của bạn để tránh lấy token js của người khác, khi tài khoản của họ bị blocked thì khổ đấy.

Thường thì bạn sẽ phải làm điều này 2 lần, 1 cho bài viết có bình luận và 2 cho bài viết không có bình luận

2. Can thiệp threadedCommentJs hoặc threaded_comment_js

Đây là thằng nặng js nhất, nhiệm vụ của nó là xử lý sự kiện click vào nút trả lời bình luận, tải thêm bình luận,... nặng như thế nhưng chả có nút hủy bình luận :v (một khi click vào nút trả lời rồi thì bạn chỉ viết được bình luận level 2 và sẽ không viết bình luận level 1 cho bài đó nữa mà phải F5 lại trang), theo tôi bạn chỉ cần thiết sử dụng chức năng trả lời bình luận là đủ.

Ta sẽ loại bỏ gần 400kb js external và vài chục kb js inline, sau đó thêm nút hủy bình luận như sau

* Blog1 v1

Tìm đến thẻ <b:includable id='threaded_comment_js' var='post'>

* Blog1 v2

Tìm đến thẻ <b:includable id="threadedCommentJs" var="post">

Thay toàn bộ nội dung bên trong chúng thành

<script type='text/javascript'>//<![CDATA[
$(window).on("load", function() {
  function n(n, t) {
    $(n).each(function() {
      var n = $(this);
      n.on("click", function(e) {
        $(".comment-actions,.cancel-comment").show(), e.preventDefault();
        let c = n.parents(t).attr("id").substr(1),
          m = o.split("?");
        $("#comment-editor")[0].src = m[0] + "?parentID=" + c + "&" + m[1], n.parent().hide(), n.parents("li").append($(".comment-form")[0])
      })
    })
  }
  $(".comment-form").append('<a class="cancel-comment" style="font-family:Roboto,sans-serif;font-weight:700;font-size:12px;color:#ff0000;cursor:pointer;">CANCEL</a>'), $(".cancel-comment").hide();
  const o = $("#comment-editor-src").attr("href");
  $(".comment-block[id]").length ? n("a[o='r']", ".comment-block") : n(".comment-reply", "li"), $(".cancel-comment").on("click", function() {
    $(".comment-actions").show(), $("#comment-editor")[0].src = o, $(".comment-form").append($("#comment-editor")), $(".comments-content").after($(".comment-form")[0]), $(this).hide()
  })
});
//]]></script>

Giờ lưu mẫu lại và vào cả bài có bình luận + không có bình luận click vào các nút trả lời bình luận, hủy bình luận và check xem tốc độ có cải thiện hơn không nhé

Chúc bạn thành công !