Tạo sự kiện trì hoãn get script tăng hiệu suất tải trang

Trì hoãn jquery get script ngay khi trang tải bằng cách tạo thêm các sự kiện giúp trang web tăng hiệu suất tải nhanh hơn.

Những trang blog có sử dụng phương pháp get script, get feeds, get url,.v.v.., bằng jquery có thể tạo thêm sự kiện trì hoãn get giúp tăng hiệu suất tải trang. Cụ thể khi tạo sự kiện sẽ ngăn không cho get ngay khi trang tải mà cần đến một hành động gì đó như hover, click, scroll, setTimeout...

Phương pháp này cũng đặc biệt hữu ích cho những trang đang chạy quảng cáo Adsense, ngoài ra cũng rất hữu ích khi URL không được lưu trữ trong cache trình duyệt chẳng hạn như URL nguồn cấp feeds. Cách tạo sự kiện trì hoãn get script như sau:

Tạo sự kiện thực thi toàn bộ script

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>//<![CDATA[
  function get_jsonp(e){
    // script hiển thị dữ liệu khi get xong
  }
  $(function(){
    var is_load=0
    function loadjs(){
      if(is_load==0){
        is_load=1
        // get script adsense
        $.getScript("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",function (){
          $('ins').each(function(){
            (adsbygoogle = window.adsbygoogle || []).push({})
          })
        })
        // Chỉ get script
        $.getScript("https://example/js/script.js")
        // Get feeds
        $.ajax({
          type:'GET',
          url:'/feeds/posts/default',
          data:{'alt':'json','max-results':0},
          dataType:'jsonp',
          success:function(e){
            // script hiển thị dữ liệu khi get xong
          }
        })
        // Get feeds callback
        $.ajax({
          type:'GET',
          url:'/feeds/posts/default',
          data:{'alt':'json','max-results':0},
          dataType:'jsonp',
          success:get_jsonp
        })
        // Get url
        $.get('https://www.thietkeblogspot.com/search?max-results=200',function(e){
          // script hiển thị dữ liệu khi get xong
        })
      }
    }
    // Sự kiện scroll
    $(window).scroll(function(){
      loadjs()
    })
    // Sự kiện hover
    $(window).mousemove(function(){
      loadjs()
    })
    // Nếu không có các sự kiện trước bắt đầu get sau khoảng thời gian 3 giây
    setTimeout(function(){
      loadjs()
    },3000)
  })
//]]></script>
</body>

Tạo sự kiện thự thi script riêng lẻ

Cách này thích hợp cho vùng bị ẩn ví dụ trong menu chẳng hạn, nên áp dụng khi get URL nguồn cấp với callback, Ví dụ minh họa

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>//<![CDATA[
  function get_jsonp(e){
    // script hiển thị dữ liệu khi get xong
  }
  $(function(){
    var is_load=0
    function loadfeeds(){
      if(is_load==0){
        is_load=1
        // Get feeds callback
        $.ajax({
          type:'GET',
          url:'/feeds/posts/default/-/label1',
          data:{'alt':'json','max-results':4},
          dataType:'jsonp',
          success:get_jsonp
        })
        $.ajax({
          type:'GET',
          url:'/feeds/posts/default/-/label2',
          data:{'alt':'json','max-results':4},
          dataType:'jsonp',
          success:get_jsonp
        })
        $.ajax({
          type:'GET',
          url:'/feeds/posts/default/-/label3',
          data:{'alt':'json','max-results':4},
          dataType:'jsonp',
          success:get_jsonp
        })
      }
    }
    // Sự kiện click
    $('element').click(function(){
      loadfeeds()
    })
    // Sự kiện hover
    $('element').mousemove(function(){
      loadfeeds()
    })
  })
//]]></script>
</body>

Thêm đánh giá

3 bình luận