웹 프론트엔드 HTML 튜토리얼 가져오기와 링크 구별

가져오기와 링크 구별

Feb 24, 2024 am 08:36 AM
링크 차이점 비동기 로딩 수입 지연 로딩

가져오기와 링크 구별

제목: 가져오기와 링크의 차이점은 무엇인가요? 구체적인 코드 예제가 필요합니다

텍스트:
웹 페이지나 프로그램을 작성할 때 특정 기능이나 스타일을 구현하기 위해 외부 파일이나 라이브러리를 사용하는 경우가 많습니다. 외부 파일을 도입할 때 우리는 종종 가져오기와 링크라는 두 가지 일반적인 방법을 접하게 됩니다. 이 두 가지 방법의 사용에는 몇 가지 차이점이 있습니다. 차이점과 코드 예제를 자세히 살펴보겠습니다.

  1. import
    Import는 JavaScript에서 외부 파일을 도입하는 방법으로, 주로 JavaScript 파일을 도입하는 데 사용됩니다. 비동기와 지연이라는 두 가지 방법으로 사용할 수 있습니다.

비동기 방식은 비동기 로딩 방식으로, 브라우저가 import 문을 구문 분석할 때 외부 파일을 다운로드하고 실행할 때까지 기다리지 않고 계속해서 후속 코드를 구문 분석하고 실행합니다. 이 방법은 실행을 위해 외부 파일에 의존하지 않는 코드에 적합하며 페이지 로딩 속도를 높일 수 있습니다.

코드 예:

<script async src="main.js"></script>
로그인 후 복사

defer 방법은 비동기 로딩 방법과 달리 실행 전에 페이지 문서가 로드될 때까지 기다립니다. 이렇게 하면 외부 파일이 페이지에서 관련 요소를 얻을 수 있고 오류를 피할 수 있습니다.

코드 예:

<script defer src="main.js"></script>
로그인 후 복사

가져오기 방법은 JavaScript 파일 도입에만 적합합니다. CSS 파일 도입은 지원하지 않습니다. 링크 태그만 사용하여 가져와야 합니다.

  1. link
    link는 HTML에서 외부 파일을 소개하는 방법으로 주로 CSS 파일을 소개하는 데 사용됩니다. 여기에는 다음과 같은 기능이 있습니다.

link는 외부 CSS 파일을 도입하여 HTML 문서에 스타일을 적용할 수 있습니다. href 속성을 통해 가져온 CSS 파일의 경로를 지정할 수 있습니다.

코드 예:

<link rel="stylesheet" href="style.css" />
로그인 후 복사

link는 웹 아이콘, 즉 파비콘 정의도 지원합니다. 아이콘 파일의 경로는 rel="icon" 및 href 속성을 통해 지정할 수 있습니다.

코드 예시:

<link rel="icon" href="favicon.ico" />
로그인 후 복사

또한 링크 태그는 media 속성을 통해 스타일 파일의 적용 조건을 지정할 수 있습니다. 예를 들어 media="screen"을 전달하여 스타일 파일이 화면이 표시될 때만 적용되도록 지정할 수 있습니다.

코드 예:

<link rel="stylesheet" href="style.css" media="screen" />
로그인 후 복사

링크가 외부 파일을 소개하는 방식은 동기식으로 로드된다는 점에 유의해야 합니다. 즉, 링크 태그가 구문 분석되는 즉시 브라우저가 외부 파일을 다운로드하여 실행합니다. 이로 인해 페이지 로드 속도가 느려질 수 있으므로 링크를 사용할 때 주의하시기 바랍니다.

요약:
가져오기와 링크는 외부 파일을 소개하는 데 일반적으로 사용되는 두 가지 방법이며 사용법에 약간의 차이가 있습니다. 가져오기는 주로 JavaScript 파일을 도입하는 데 사용되며 비동기 및 지연 로딩을 지원하며 링크는 주로 CSS 파일을 도입하는 데 사용되며 스타일 조건 및 웹 아이콘 정의를 지원합니다. 실제 개발에서는 자신의 필요와 시나리오에 따라 적절한 도입 방법을 선택하는 것이 매우 중요합니다.

위 내용은 가져오기와 링크 구별의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

H5와 미니 프로그램과 앱의 차이점 H5와 미니 프로그램과 앱의 차이점 Apr 06, 2025 am 10:42 AM

H5. 미니 프로그램과 앱의 주요 차이점은 다음과 같습니다. 기술 아키텍처 : H5는 웹 기술을 기반으로하며 미니 프로그램 및 앱은 독립적 인 응용 프로그램입니다. 경험과 기능 : H5는 가볍고 사용하기 쉽고 기능이 제한되어 있습니다. 미니 프로그램은 가벼우 며 상호성이 우수합니다. 앱은 강력하고 부드러운 경험이 있습니다. 호환성 : H5는 크로스 플랫폼 호환성이며 애플릿 및 앱은 플랫폼에 의해 제한됩니다. 개발 비용 : H5는 개발 비용이 낮고 중간 미니 프로그램 및 최고 앱이 있습니다. 적용 가능한 시나리오 : H5는 정보 표시에 적합하고 애플릿은 가벼운 응용 프로그램에 적합하며 앱은 복잡한 기능에 적합합니다.

PS에서 PDF를 내보내기위한 비밀번호 보호를 설정하는 방법 PS에서 PDF를 내보내기위한 비밀번호 보호를 설정하는 방법 Apr 06, 2025 pm 04:45 PM

Photoshop에서 암호로 보호 된 PDF를 내보내십시오 : 이미지 파일을 엽니 다. "파일"을 클릭하십시오. & gt; "수출"& gt; "PDF로 수출". "보안"옵션을 설정하고 동일한 비밀번호를 두 번 입력하십시오. "내보내기"를 클릭하여 PDF 파일을 생성하십시오.

라우터 폴더 아래의 index.js 파일에서 vue.use (vuerouter)를 호출 해야하는 이유는 무엇입니까? 라우터 폴더 아래의 index.js 파일에서 vue.use (vuerouter)를 호출 해야하는 이유는 무엇입니까? Apr 05, 2025 pm 01:03 PM

vue 응용 프로그램을 개발할 때 라우터 폴더 아래에 index.js 파일에 vuerouter를 등록해야 할 필요성이 있으면 종종 라우팅 구성에 문제가 발생합니다. 특별한...

H5 페이지 프로덕션의 성능을 최적화하는 방법 H5 페이지 프로덕션의 성능을 최적화하는 방법 Apr 06, 2025 am 06:24 AM

네트워크 요청, 리소스로드, 자바 스크립트 실행 및 렌더링 최적화를 통해 H5 페이지의 성능을 향상시킬 수 있으며 매끄럽고 효율적인 페이지를 만들 수 있습니다. 자원 최적화 : 압축 이미지 (예 : TinypNG 사용), 단순화 된 코드 및 활성화 된 브라우저 캐싱. 네트워크 요청 최적화 : 파일 병합, CDN 사용 및 비동기 적으로로드하십시오. JavaScript 최적화 : DOM 작업을 줄이고, requestAnimationFrame을 사용하며, 가상 DOM을 잘 활용하십시오. 고급 기술 : 코드 세분화, 서버 측 렌더링.

VUE의 내보내기 기본값으로 내보낸 구성 요소를 등록하는 방법 VUE의 내보내기 기본값으로 내보낸 구성 요소를 등록하는 방법 Apr 07, 2025 pm 06:24 PM

질문 : 내보내기 기본값을 통해 내보낸 VUE 구성 요소를 등록하는 방법은 무엇입니까? 답변 : 세 가지 등록 방법이 있습니다 : 글로벌 등록 : vue.component () 메소드를 사용하여 글로벌 구성 요소로 등록하십시오. 로컬 등록 : 현재 구성 요소 및 하위 구성 요소에서만 사용할 수있는 구성 요소 옵션에 등록하십시오. 동적 등록 : vue.component () 메소드를 사용하여 구성 요소가로드 된 후 등록하십시오.

VUE 및 Element-UI 캐스케이드 선택기를 구현하는 방법 VUE 및 Element-UI 캐스케이드 선택기를 구현하는 방법 Apr 07, 2025 pm 08:18 PM

Vue 및 Element-UI Cascade Selectors는 간단한 시나리오에서 El-Cascader 구성 요소를 직접 사용할 수 있지만보다 우아하고 효율적이며 강력한 코드를 작성하려면 다음 세부 사항에주의를 기울여야합니다. 데이터 소스 구조 최적화 : 데이터를 평평하게하고 ID 및 Parentid를 사용하여 부모-자녀 관계를 나타냅니다. 비동기로드 데이터 처리 :로드 상태, 오류 프롬프트 및 사용자 경험을 처리합니다. 성능 최적화 : 주문형로드 또는 가상 스크롤 기술을 고려하십시오. 코드 가독성 및 유지 관리 가능성 : 주석을 쓰고, 의미있는 변수 이름을 사용하고, 코드 사양을 따르십시오.

H5 및 미니 프로그램을 홍보하는 다른 방법은 무엇입니까? H5 및 미니 프로그램을 홍보하는 다른 방법은 무엇입니까? Apr 06, 2025 am 11:03 AM

H5 및 Mini 프로그램의 홍보 방법에는 차이가 있습니다. 플랫폼 의존성 : H5는 브라우저에 의존하고 미니 프로그램은 특정 플랫폼 (예 : WeChat)에 의존합니다. 사용자 경험 : H5 경험이 좋지 않으며 MINI 프로그램은 기본 응용 프로그램과 유사한 원활한 경험을 제공합니다. 커뮤니케이션 방법 : H5는 링크를 통해 퍼지고 미니 프로그램은 플랫폼을 통해 공유하거나 검색됩니다. H5 프로모션 방법 : 소셜 공유, 이메일 마케팅, QR 코드, SEO, 유료 광고. 미니 프로그램 프로모션 방법 : 플랫폼 프로모션, 소셜 공유, 오프라인 프로모션, ASO, 다른 플랫폼과의 협력.

VUE의 주문형 로딩을 지원하는 방법 VUE의 주문형 로딩을 지원하는 방법 Apr 07, 2025 pm 06:27 PM

내보내기 기본값은 주문형로드를 방해하지 않습니다. 핵심은 프로젝트를 구축하고 포장 도구를 구성하는 방법입니다. 포장 도구는 가져 오기 문을 자동으로 인식하고 코드 분할 구성에 따라 구성 요소를 나눕니다. 주문형로드를 달성하려면 Webpack의 Plitchunks와 같은 포장 도구 구성에서 코드 분할 옵션을 설정하여 필요할 때만로드되는 별도의 청크로 분할해야합니다.

See all articles