JS 비동기 로 딩 의 세 가지 실현 방식

1991 단어 js비동기 로드
js 로 딩 의 단점:로 딩 도구 방법 은 문 서 를 막 을 필요 가 없습니다.너무 많은 js 로 딩 은 페이지 효율 에 영향 을 줄 수 있 습 니 다.네트워크 속도 가 좋 지 않 으 면 전체 사 이 트 는 js 로 딩 을 기다 리 고 후속 렌 더 링 을 하지 않 습 니 다.일부 도구 방법 은 필요 에 따라 불 러 오고 다시 불 러 와 야 합 니 다.불 러 오지 않 아 도 됩 니 다.
기본 적 인 정상 모드 에서 JS 는 동기 화 불 러 옵 니 다.즉,JS 를 우선 불 러 옵 니 다.JS 파일 이 다운로드 되 어야 dom 과 css 가 불 러 옵 니 다.어떤 때 는 JS 비동기 로 불 러 옵 니 다.우 리 는 다음 과 같은 방식 으로 비동기 로 불 러 옵 니 다.서로 다른 상황 에서 서로 다른 방식 을 선택 하면 됩 니 다.
1.defer:defer
  • JS 비동기 다운로드,dom 구조 해석 완료(태그+스타일(내용 이 반드시 다운로드 되 지 않 음)비동기 실행 
  • IE 만 사용 가능
  • 내부 JS 도 이 속성 을 사용 할 수 있 습 니 다
  • 비동기 로 js 를 불 러 오 면 document.write 를 사용 할 수 없습니다.document.write 는 문서 흐름 을 지 울 수 있 기 때문에 js 태그 가 불 러 오지 않 으 면 지 워 집 니 다
  • document.write()페이지 초기 화
  • 2.(h5)async:async(asynchronous) ajax(asynchronous javascript and XML)
  • JS 비동기 로드,로드 완료 후 즉시 비동기 실행
  • IE8 및 이하 호 환 되 지 않 음
  • 내부 JS 는 해당 속성 을 사용 할 수 없습니다
  • 3.상기 두 가지 방법 을 제외 하고 자신 이 밀봉 한 비동기 로드 방식 도 있 습 니 다.즉,동적 으로 script 라벨 을 추가 해도 비동기 로드 를 실현 할 수 있 습 니 다.
    
    function asyncLoaded(url,callBack){/*url js   ,callBack url js    (              , function(){console.log(div.getScrollOffset())})*/
      var script = document.createElement('script');
      script.type = 'text/javascript';
      /*if else              ,     ,  if js   script.readyState       ,
            ‘readystatechange'      ,            ,        JS        ,
                ,       */
      if(script.readystate){//  IE
        script.onreadystatechange = function() {//         
          if(script.readyState == 'loaded' || script.readyState == 'complete'){  
            callBack();
            script.onreadystatechange = null;    
          }
        }
      }else{
        script.onload = function(e){
          callBack();
        }
      }    
      script.src = url;
      document.body.appendChild(script);
    }
    
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기