책임있는 조건부 로딩

Polypane 블로그에 대한 훌륭한 기사가 있습니다 (귀속은 아니지만 Kilian Valkhof가 쓴 아마도 대부분)가 Prefers- prefers-reduced-data -Data가있는 Create a Website라는 제작자가 있습니다. 현재 브라우저는이를 지원하지 않지만 결국 CSS에서 데이터 사용량을 줄일 수 있습니다. 사용자가 낮은 데이터 사용 기본 설정을 지정하지 않는 경우에만 웹 글꼴을로드하기 위해 기사에 예제가 제공됩니다.

 @Media (선호-감소 데이터 : 예비 회의) {
  @font-face {
    Font-Family : 'Inter';
    글꼴 중량 : 100 900;
    글꼴 디스플레이 : 스왑;
    글꼴 스타일 : 정상;
    글꼴 이름 인스턴스 : '정기';
    src : url ( 'inter-roman.var.woff2') 형식 ( 'woff2');
  }
}

몸 {
  Font-Family : Inter, System-UI, -Apple-System, BlinkMacsystemFont,
               Segoe UI, Ubuntu, Roboto, Cantarell, Noto Sans, Sans-Serif,
               '애플 컬러 이모티콘', '세고 ui 이모티콘', '세고 ui 기호', 'Noto Color Emoji';
}

이것은 좋은 모델입니다. 그것은 접근성과 같은 정신이며 prefers-reduced-motion . 둘 다 JavaScript에서도 사용할 수 있습니다.

같은 아이디어는 Umar Hansa의 최근 블로그 게시물 "JavaScript : Conditional JavaScript, 적절한 경우에만 다운로드하십시오." 기사에는 많은 예가 있지만 navigator 객체에는 장치, 인터넷 연결 및 사용자 기본 설정에 대한 정보가 포함되어있어 ES 모듈과 함께 사용하여 과도한 코드없이 자원을 조건부로드 할 수 있습니다.

 if (navigator.connection.savedata === false) {
    import ( './ yoStly-module.js');
}

이 모든 아이디어에 관심이 있다면 여기에서 책임있는 JavaScript에 관한 Jeremy Wagner의 일련의 기사를 다룰 수 있습니다.

위 내용은 책임있는 조건부 로딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!