JS 지연 으로 바 이 두 공유 코드 를 불 러 와 웹 페이지 속 도 를 높 인 다.

4315 단어 JS로드 지연
많은 사이트 들 이 바 이 두 공유 코드 를 설치 할 때 간단하게 공유 코드 를 고정된 페이지 위치 에 놓 으 면 끝 나 는 치 명 적 인 방식 이다.웹 페이지 를 자주 열 었 을 때 웹 페이지 에서 공유 코드 로 불 러 올 때 몇 초 걸 릴 때 바 이 두 서버 에 요청 하고 마지막 으로 공유 단 추 를 보 여 주 는 것 을 발 견 했 기 때문이다.사실은 이렇게 웹 페이지 에 있어 서 매우 중요 한 기능 이 아니다.우 리 는 JS 로 로드 를 지연 시 켜 웹 페이지 의 주요 내용 의 빠 른 로드 디 스 플레이 를 향상 시 킬 수 있다.여기 내 배치 방식 을 공유 해 줘.1.copy 바 이 두 공유 코드 는 다음 과 같 습 니 다.

<!-- Baidu Button BEGIN -->
<div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare"> 
<a class="bds_tsina"></a> 
<a class="bds_qzone"></a> 
<a class="bds_tqq"></a> 
<a class="bds_renren"></a> 
<a class="bds_douban"></a> 
<span class="bds_more"></span> 
<a class="shareCount"></a> 
</div> 
<script type="text/javascript" id="bdshare_js" data="type=tools&uid=0" ></script> 
<script type="text/javascript" id="bdshell_js"></script> 
<script type="text/javascript"> 
document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000) 
</script> 
<!-- Baidu Button END -->
2.설치 코드 는 위의 공유 코드 를 진지 하 게 분석 한 결과 그 중에서 3 개의 js 스 크 립 트 태그 가 있 습 니 다.이런 것들 은 모두 웹 페이지 의 표현 속도 에 영향 을 줄 수 있 습 니 다.마지막 으로 마지막태그 만 바 이 두 서버 에 공유 이미지 와 링크 를 보 여 달라 고 요청 하 는 역할 을 합 니 다.그럼 이 JS 는 마지막 에 불 러 올 수 있 습 니 다.다음은 제 가 만 든 demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
    <head> 
        <title>JS延迟加载百度分享代码，提高网页速度</title> 
        <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> 
        <style type="text/css"> 
            body{margin:0px;padding:0px;font-size:12px;} 
            #copyright{clear:both;} 
        </style> 
    </head> 

    <body> 
        <div id="baidu-share"> 
            <!-- Baidu Button BEGIN -->
            <div id="bdshare" class="bdshare_t bds_tools_32 get-codes-bdshare"> 
            <a class="bds_tsina"></a> 
            <a class="bds_qzone"></a> 
            <a class="bds_tqq"></a> 
            <a class="bds_renren"></a> 
            <a class="bds_douban"></a> 
            <span class="bds_more"></span> 
            <a class="shareCount"></a> 
            </div> 
            <script type="text/javascript" id="bdshare_js" data="type=tools&uid=0" ></script> 
            <script type="text/javascript" id="bdshell_js"></script> 
            <!-- Baidu Button END -->
        </div> 
        <div id="copyright"> 
            <a href="http://codejia.net">编程图书PDF下载【codejia.net】</a> 
        </div> 

        <script type="text/javascript"> 
            window.onload = shareCode; 

            function shareCode(){ 
                document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?cdnversion=" + Math.ceil(new Date()/3600000); 
            } 
        </script> 
    </body> 
</html>
분석 입 니 다.위의 demo 를 통 해 저 는 마지막 src 속성 이 있 는 script 라벨 을 마지막 동적 으로 불 러 오고 window.onload 이후 에 불 러 온 것 을 알 수 있 습 니 다.이전에 불 러 온 것 은 모두 html 태그 코드 로 웹 페이지 속도 에 영향 을 주지 않 습 니 다.바 이 두 공유 코드 는 이렇게 조정 한 후에 바 이 두 의 서버 가 끊 어도 자신의 웹 페이지 가 정상적으로 표시 되 는 데 영향 을 주지 않 습 니 다.사실 이런 기 교 는 아직도 사용 할 수 있 는 곳 이 많다.사이트 통계 코드,바 이 두 구 글 검색 코드,제3자 광고 코드 등 을 원한 다 면 우 리 는 모두 웹 페이지 밑 에 놓 고 마지막 으로 불 러 올 수 있다.그러면 제3자 서버 가 다운 되 더 라 도 우리 자신의 기 계 는 많은 영향 을 받 지 않 을 것 이다.
ASP.NET XmlDocument 클래스 상세 설명
jQuery 가 여러 폼 을 제출 하 는 작은 예

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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