Các phương pháp tải feeds hiệu quả làm tăng tốc độ tải trang

Feeds là một trong những yếu tố hàng đầu làm ảnh hưởng đến thời gian tải trang, Blog sử dụng càng nhiều feeds thời gian tải trang càng lâu vì còn chờ cho feeds tải xong. Tuy nhiên có một số phương pháp rất hay dưới đây được mình tổng hợp lại sẽ giúp tải feeds hiệu quả hơn và qua đó cũng làm cho tốc độ tải trang tăng đáng kể.

1. Sử dụng summary thay vì default

Khi xây dựng các widget Recent Posts, Random Posts, Recent Comments... bắt buộc phải sử dụng feeds mà feeds lại được chia làm 2 loại:

Loại tóm tắt: /feeds/posts/summary
Loại đầy đủ: /feeds/posts/default

Sự khác biệt của 2 loại feeds này nếu như summary chỉ lấy duy nhất một ảnh của mỗi bài viết và đoạn tóm tắt thì default sẽ tải đầy đủ tất cả ảnh và nội dung bài viết do đó tải feeds bằng tóm tắt nhanh và hiệu quả hơn so với feeds đầy đủ vì khi xây dựng chúng ta cũng chỉ cần lấy ảnh đầu tiên và đoạn tóm tắt chứ đâu lấy hết nội dung.

2. Sử dụng max-results & chia thành nhiều feeds

Khi xây dựng widget Random Posts bài viết ngẫu nhiên thường phải tải feeds với tối đa số bài viết mà trong khi chỉ lấy số bài viết cụ thể, lấy ví dụ:

/feeds/posts/summary?alt=json-in-script&max-results=5

sẽ tải 5 bài viết so với

/feeds/posts/summary?alt=json-in-script&max-results=150

phải tải max là 150 bài viết do đó thời gian tải feeds này lâu hơn rất nhiều trong khi lại lọc lấy 5 bài viết hiển thị ngẫu nhiên.

Gải pháp ở đây tối ưu hơn đó là chia mỗi bài viết cho 1 feeds sử dụng start-index và max-results=1 &callback=randomposts chẳng hạn

/feeds/posts/summary?alt=json-in-script&start-index=10&max-results=1&callback=randomposts
/feeds/posts/summary?alt=json-in-script&start-index=3&max-results=1&callback=randomposts
/feeds/posts/summary?alt=json-in-script&start-index=40&max-results=1&callback=randomposts
/feeds/posts/summary?alt=json-in-script&start-index=101&max-results=1&callback=randomposts
/feeds/posts/summary?alt=json-in-script&start-index=512&max-results=1&callback=randomposts

Như vậy với mỗi feeds được tải sẽ chỉ tải 1 bài và được lấy bài viết ngẫu nhiên bằng start-index. Rõ ràng cùng 1 thời gian nếu tải 5 cái feeds chỉ có 1 bài sẽ nhanh hơn 1 cái feeds 150 bài.

3. Sử dụng phương thức document ready và window onload

Cả hai phương thức này đều ngăn tải feeds sau khi trang được tải, nếu trong jquery sử dụng $(document).ready(function() thì trong javascript thuần sử dụng window.onload = function() và trong jquery cũng có hàm tương đương là $(window).on('load', function(). Sự giống nhau và khác biệt chính của 2 phương thức này như sau:

Giống nhau đều đợi html tải trước và khác nhau document ready sẽ tải script ngay khi trang mới tải một phần chứ chưa tải xong còn window onload phải đợi trang tải xong mới tải script.

Ví dụ minh họa về sử dụng window onload

Copy

<script>//<![CDATA[

$('window').on('load', function() {

  $.ajax({

    type: 'GET',

    url: '/feeds/posts/summary',

    data: {

      'max-results': 10,

      'alt': 'json'

    },

    dataType: 'jsonp',

    success: function(data) {

      // Do something

    }

  })

})

//]]></script>

4. Sử dụng phương thức scroll

Đây là phương pháp được xem là tối ưu hơn so với phương thức document ready hay window onload. Sử dụng phương pháp này tải feeds khi scroll chẳng hạn khi scroll đến vùng A sẽ tải feeds hiển thị nội dung cho vùng A, tiếp tục sroll đến vùng B nằm dưới vùng A thì tải feeds hiển thị nội dung cho vùng B

Ví dụ minh họa ta có đoạn HTML hiển thị như sau:

Copy

<div class="main-wrapper">

  <div class="post-body"></div>

  <div id="related-posts"></div>

</div>

<div class="sidebar-wrapper"

  <div id="random-posts"></div>

</div>

<div class="footer">

  <div id="recent-posts"></div>

</div>

3 phần tử id mình đánh dấu màu xanh được hiển thị từ trên xuống dưới do đó chúng ta sẽ tạo script scroll đến id="related-posts" để tải feeds trước như sau:

Copy

<script>//<![CDATA[

var content = false

$(window).on('scroll', function() {

  if ($(this).scrollTop() >= $('#related-posts').position().top) {

    if (!content) {

      content = true

      $.ajax({

        type: 'GET',

        url: '/feeds/posts/summary',

        data: {

          'max-results': 10,

          'alt': 'json'

        },

        dataType: 'jsonp',

        success: function(data) {

          // Do something

        }

      })

    }

  }

})

//]]></script>

Làm tương tự với id="random-posts" tiếp theo như sau:

Copy

<script>//<![CDATA[

var loadcontent = false

$(window).on('scroll', function() {

  if ($(this).scrollTop() >= $('#random-posts').position().top) {

    if (!loadcontent) {

      loadcontent = true

      $.ajax({

        type: 'GET',

        url: '/feeds/posts/summary',

        data: {

          'max-results': 10,

          'alt': 'json'

        },

        dataType: 'jsonp',

        success: function(data) {

          // Do something

        }

      })

    }

  }

})

//]]></script>

Cuối cùng cũng làm tương tự với id="recent-posts"

5. Sử dụng button click

Trong trường hợp nếu tải feeds hiển thị nội dung nằm trong vùng ẩn mà khi click mới hiển thị nội dung này thì chúng ta có thể kết hợp tải feeds khi click. Ví dụ chúng ta có đoạn script sau đây

Copy

<script>//<![CDATA[

$('button').click(function() {

  $.ajax({

    type: 'GET',

    url: '/feeds/posts/summary',

    data: {

      'max-results': 10,

      'alt': 'json'

    },

    dataType: 'jsonp',

    success: function(data) {

      // Do something

    }

  })

})

//]]></script>

Trên đây là những phương pháp tải feeds hiệu quả nhất làm tăng tốc độ tải trang, các bạn nên áp dụng vào Blog của mình nếu Blog đang sử dụng nhiều feeds. Chấm hết bài!!!

Nội dung chính