Ngăn chặn số lượng lớn các cuộc gọi xhr/ajax trên khung nội tuyến nhúng của Facebook

Question

Tôi có Bootstrap Carousel với nhiều lượt nhúng mạng xã hội từ Facebook chứa tất cả video. Tôi sẽ không đi sâu vào chi tiết cụ thể của Bootstrap Carousel vì vấn đề đã được hiển thị trên đơn giản jsfiddle và là do nhúng Facebook.

Nếu bạn tải trang này: https://jsfiddle.net/1L95vqn4/ và xem các công cụ Chrome Dev trên 'Tab mạng' và lọc 'XHR' (bị tắt trong bộ nhớ cache), bạn sẽ thấy 34 yêu cầu và tải 5,8Mb trước khi bạn thậm chí 'phát' tất cả video được tải qua ajax bởi khung nội tuyến Facebook.

Tôi muốn giảm tải trọng trọng lượng của yêu cầu ajax fb đó, nghĩa là chỉ tải những cuộc gọi đó khi người dùng nhấn "phát video".

Tôi rất ngạc nhiên vì tôi không thể tìm thấy bất kỳ điều gì về điều này trên web. Các mạng xã hội khác như nhúng twitter không tải video cho đến khi người dùng nhấn phát. Lượng dữ liệu khổng lồ trong trường hợp nhúng Facebook được tải (5Mb, 15mb, 30mb ...) ngay cả trước khi phát video.

Lưu ý chỉ vì thông tin về vấn đề thực tế phức tạp hơn: trên trang web của tôi, tôi thực sự không sử dụng khung nội tuyến này nhưng kiểu nhúng (nhưng không thể đặt yêu cầu ajax trên jsfiddle hoặc quá phức tạp đối với tôi). Và vấn đề thực tế của tôi là khi bạn tải băng chuyền ở mỗi trang chiếu, bạn có 20 video nhúng trên facebook, sau đó nó sẽ tăng thêm hiệu suất rất lớn khi bạn mở băng chuyền.

$.ajax({ 
    url: 'https://www.facebook.com/plugins/post/oembed.json/?url=https://www.facebook.com/cocacola/posts/1526674334016658', 
    dataType: 'jsonp', 
    cache: false, 
    success: function (data) { 
    try {   
     var embed_html = (data.html); 
     $('div#item1').html(embed_html); 
    } catch (err) { 
     console.log(err); 
    } 
    } 
}); 

Có cách nào để ngăn chặn FB tải tất cả ajax xhr và mp4 này ảnh hưởng đến hiệu suất bằng cách tải chậm hoặc bằng bất kỳ cách nào khác không?

Answer 1

Bạn có thể sử dụng AjaxSetup như mô tả dưới đây (Nhưng đây là chỉ dụ nói chung):

var i = 0; 
 
function ajaxTest() { 
 
    // these HTTP methods do not require CSRF protection 
 
    $.get('http://my.site.com/somepage.html'); 
 
} 
 
jQuery.ajaxSetup({ 
 
    beforeSend: function (xhr, settings) { 
 
     i++; 
 
     if (i > 50) { 
 
      $('#res').html('Not allowed!</br>'); 
 
      return false; 
 
     } else { 
 
      $('#res').html('Allowed![' + i + ']</br>'); 
 
      return true; 
 
     } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button onclick="ajaxTest()">Test</button> 
 
<div id="res"></div>

Tôi hy vọng điều này sẽ giúp bạn :)

Answer 2

Một cách giải quyết khác mà tôi đang nghĩ đến, vì dường như không có cách nào để ngăn dữ liệu được tải trực tiếp, sẽ hiển thị trình giữ chỗ của video của bạn bằng biểu tượng phát và chỉ một lần người dùng nhấp vào nó kích hoạt cuộc gọi xhr sẽ thay thế phần tử. Sau đó, bạn có thể tự động phát video nếu nó không phải là trường hợp theo mặc định, do người dùng đã yêu cầu phát video đó.

Something như thế (như bạn nói có thể không thực sự làm việc trong jsfiddle, nhưng bạn sẽ có được ý tưởng):

$('#item1').on('click',() => { 
 

 
    $.ajax({ 
 
    url: 'https://www.facebook.com/plugins/post/oembed.json/?url=https://www.facebook.com/cocacola/posts/1526674334016658', 
 
    dataType: 'jsonp', 
 
    cache: false, 
 
    success: data => $('div#item1').html(data.html), 
 
    }); 
 

 
})

.facebook-play { 
 
    background-image: url(https://www.facebook.com/rsrc.php/v3/yE/r/UxpyARHiHA2.png); 
 
    background-repeat: no-repeat; 
 
    background-size: 81px 224px; 
 
    background-position: 0 0; 
 
    height: 80px; 
 
    margin: -40px 0 0 -40px; 
 
    width: 80px; 
 
    
 
    position: absolute; 
 
    top: 50%; 
 
    left: 45%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="item1"> 
 
    <img src="https://cdn.pixabay.com/photo/2016/05/18/20/57/cat-1401557_1280.jpg" width=550 height=360 /> 
 
    <i class="facebook-play" /> 
 
</div>