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>
Bây giờ js adsense có dạng như này thì làm sao tối ưu a
Trả lờiXóa<script data-ad-client="ca-pub-xxxxxxxxxxxxx" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
cùng thắc mắc
Xóa