구 글-analytics(또는 다른 제3자)의 JS 를 불 러 오 는 방법

5487 단어 google-analyticsJS
가 를 등록 하면 가 는 js 스 크 립 트 를 생 성 합 니 다.많은 사람들 이 이 js 를 맨 뒤에 복사 하면 끝 납 니 다(블 로그 원,CSDN,BlogJava 포함).그런데 가 자동 으로 생 성 되 는 이 JS 가 정말 합 리 적 인가요?어떻게 해 야 합 리 적 이 고,어떻게 해 야 합 리 적 이지 않 습 니까?가 는 하나의 분석 도구 이기 때문에 그의 사용 은 우리 의 프로그램 에 절대 영향 을 주어 서 는 안 되 고 영향 을 주면 불합리 하 다.영향 을 주지 않 는 것 은 합리적이다.현재 ga 의 사용:먼저 ga 가 자동 으로 생 성 하 는 js 스 크 립 트 를 보 세 요.다음 과 같 습 니 다.
 
<script type="text/javascript"> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
</script> 
<script type="text/javascript"> 
try { 
var pageTracker = _gat._getTracker("UA-123456-1"); 
pageTracker._trackPageview(); 
} catch(err) {}</script>
이 코드 를 보고 document.write 를 사용 하여 JS 를 불 러 옵 니 다.주의 하 세 요.이렇게 js 를 불 러 오 는 것 은 불 러 오 는 것 을 막 는 것 입 니 다.바로 이 js 가 불 러 오지 않 았 고 뒤의 모든 자원 과 JS 는 다운로드 하고 실행 할 수 없습니다.아마도 당신 은 이 코드 가 body 의 맨 뒤에 있다 는 것 을 느 낄 것 입 니 다.그 후에 내용 이 없고 막 을 것 이 없습니다.많은 사람들 이 JS 를 쓸 때 페이지 로 딩 이 끝 난 후에 JS 나 AJAX 를 실행 해 야 한다 고 믿 습 니 다.보통 window.onload 이벤트 에 쓰 거나 jquery 의$(document).ready()방법 에 쓰 입 니 다.이 JS 들 이 막 힐 겁 니 다.만약 우리 페이지 의 많은 데이터 가 window.onload 에서 AJAX 로 불 러 옵 니 다.하필 이때 ga 는 어떤 이유 로 접근 할 수 없 거나 접근 이 느 릴 때 입 니 다.문 제 는 바로 우리 자신의 JS 가 ga 의 JS 로 딩 이 끝나 기 를 기다 리 고 있 습 니 다.ga 의 js 로 딩 시간 이 초과 되 어야 만 우리 의 JS 를 실행 할 수 있 습 니 다.인 스 턴 스:아래 코드 는 jquery 를 사용 하여 document.ready 에서 ajax 요청 1 개 를 보 냅 니 다(126.com 요청).테스트 전에 host 파일 을 수정 하여 가 의 js 를 불 러 올 수 없 게 합 니 다:
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$.get("http://www.126.com/"); 
}); 
</script> 
</head> 
<body> 
<script type="text/javascript"> 
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); 
</script> 
<script type="text/javascript"> 
try { 
var pageTracker = _gat._getTracker("UA-123456-1"); 
pageTracker._trackPageview(); 
} catch(err) {}</script> 
</body> 
</html>
모니터링 그림: 위의 그림 에서 ga 를 불 러 올 수 없 음 을 알 수 있 습 니 다.20 초 초과 후에 야 우리 의 ajax 요청 을 실 행 했 습 니 다.우리 의 ajax 요청 은 0.173s 밖 에 안 되 었 지만 20s 를 기 다 렸 습 니 다.가:가 를 합 리 적 으로 사용 하려 면 두 가지 문 제 를 해결 해 야 합 니 다.gat._getTracker("UA-123456-1");pageTracker._trackPageview(); 코드js 를 불 러 오 는 것 을 막 지 않 는 방법 은 주로 2 가지 가 있 습 니 다.1.동적 으로
 
 그림 에서 ga 가 20s 를 불 러 왔 음 을 알 수 있 지만,우리 의 ajax 요청 은 20s 를 기다 린 후에 야 실행 되 지 않 고 즉시 실행 되 었 습 니 다.
jquery 로 딩 가:
    위 에 코드 가 많이 쓰 여 있 고 번 거 로 울 수 있 습 니 다.jquery 를 사용 하면 다음 과 같이 간략화 할 수 있 습 니 다.

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); 
$.getScript(gaJsHost + "google-analytics.com/ga.js",function(){ 
try { 
var pageTracker = _gat._getTracker("UA-123456-16"); 
pageTracker._trackPageview(); 
} catch(err) {} 
});
필요 하 시 면 확인 하 십시오.고성능 WEB 개발 시리즈[성명]전재 출처 를 밝 혀 주 십시오.http://www.cnblogs.com/BearsTaR/。 상용 금지!
jQuery 구현 입체 문자 그 라 데 이 션 효과
Jquery 동적 추가 단추 구현 코드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage