HTML5_html5 튜토리얼 기술의 파일 가져오기에 대한 간략한 소개

템플릿, Shadow DOM 및 사용자 정의 요소를 사용하면 UI 구성 요소를 그 어느 때보다 쉽게 ​​만들 수 있습니다. 하지만 HTML, CSS, JavaScript 같은 리소스는 여전히 하나씩 로드해야 하기 때문에 매우 비효율적입니다.

중복 종속성을 제거하는 것도 간단하지 않습니다. 예를 들어 이제 jQuery UI 또는 Bootstrap을 로드하려면 JavaScript, CSS 및 웹 글꼴에 대해 별도의 태그를 추가해야 합니다. 웹 구성 요소가 여러 종속성을 적용하면 상황이 더 복잡해집니다.

HTML 가져오기를 사용하면 이러한 리소스를 결합된 HTML 파일로 로드할 수 있습니다.
HTML을 사용하여 가져오기

HTML 파일을 로드하려면 rel 속성이 import이고 herf 속성이 HTML 파일의 경로인 링크 태그를 추가해야 합니다. 예를 들어, index.html에 component.html을 로드하려는 경우:

index.html

XML/HTML 코드클립보드에 콘텐츠 복사

1. <링크 rel="가져오기" href="comComponent.html" >

파일을 HTML로 가져올 수 있습니다(번역자 주: 이 기사에서는 "가져온 HTML"을 "HTML 가져오기 파일"로, "원본 HTML"을 "HTML 기본 파일"로 번역합니다. 예를 들어 index.html은 HTML입니다. 파일에서 component.html은 HTML 가져오기 파일입니다.) 일반 HTML에 리소스를 추가하는 것과 마찬가지로 스크립트, 스타일 시트 및 글꼴을 포함한 리소스를 추가합니다.

컴포넌트.html

XML/HTML 코드클립보드에 콘텐츠 복사

1. <링크 rel="스타일시트" href="css/style.css">
2. <스크립트 src="js/ script.js">script>

doctype, html, head, body 태그는 필요하지 않습니다. HTML 가져오기는 가져오는 문서를 즉시 로드하고, 문서의 리소스를 구문 분석하고, 스크립트가 있는 경우 실행합니다.
실행 순서

브라우저가 HTML 문서를 구문 분석하는 방식은 선형입니다. 즉, HTML 상단의 스크립트가 하단보다 먼저 실행된다는 의미입니다. 또한 브라우저는 일반적으로 후속 코드를 구문 분석하기 전에 JavaScript 코드가 실행될 때까지 기다립니다.

스크립트가 HTML 렌더링을 방해하지 않도록 하려면 태그에 비동기 또는 연기 속성을 추가할 수 있습니다(또는 페이지 하단에 스크립트 태그를 넣을 수도 있습니다). defer 속성은 모든 페이지가 구문 분석될 때까지 스크립트 실행을 지연합니다. async 속성을 사용하면 브라우저가 HTML 렌더링을 방해하지 않도록 스크립트를 비동기적으로 실행할 수 있습니다. 그렇다면 HTML 가져오기는 어떻게 작동하나요?

HTML 가져오기 파일의 스크립트는 defer 속성을 포함하는 것과 동일합니다. 예를 들어 다음 예에서 index.html은 script1.js와 script2.js를 먼저 실행한 다음 script3.js를 실행합니다.

index.html

XML/HTML 코드클립보드에 콘텐츠 복사

1. <링크 rel="가져오기"  href="comComponent.html"> // 1.   
2. <제목>가져오기 예시제목>  
3. <스크립트 src="script3. js">스크립트>       // 4.  

컴포넌트.html
 

XML/HTML 코드复复内容到剪贴板

1. <스크립트 src="js/script1.js ">스크립트>     // 2.   
2. <스크립트 src="js/ script2.js">script>     // 3.  

1.재index.html 中加载comComponent.html并等待执行

2.执行comComponent.html중적인script1.js

3.执行完script1.js后执行comComponent.html중적인script2.js

4.执行完 script2.js继而执行index.html中的script3.js

주의하세요, 如果给link[rel="import"] 添加async属性, HTML导入会把它当做含有async属性的脚本来对待.载，这意味着HTML 导入HTML은 매우 중요하지 않습니다.导入

HTML은 HTML에 비해 좋지 않습니다.

比如，你不能从http://webcomComponents.org/向 http://example.com/ 导入HTML 文件。为了绕过这个限조제，可以使用CORS（跨域资源共享）。想视解CORS，请看这篇文章。

HTML导入文件中의 창과 문서对象

이전 화면에서는 HTML문서를 통해 다른 페이지의 이동이 가능하며, 의도하지 않은 HTML이 표시됩니다.需要写一些JavaScript代码来帮忙。

index.html

 

XML/HTML 코드

复复内容到剪贴板

1. var link = document.querySelector('link[rel ="가져오기"]')
2. link.addEventListener('load', function(e) {
3. var importedDoc = link.import;
// importDoc은 component.html 아래의 문서를 가리킵니다.
})

compartment.html에서 문서 개체를 가져오려면 document.currentScript.ownerDocument를 사용하세요.

컴포넌트.html

XML/HTML 코드

클립보드에 콘텐츠 복사

1. var mainDoc = 문서.currentScript.ownerDocument
// mainDoc은 component.html 아래의 문서를 가리킵니다.

webcomComponents.js를 사용하는 경우 document.currentScript 대신 document._currentScript를 사용하세요. 모든 브라우저가 이 속성을 지원하는 것은 아니기 때문에 밑줄은 currentScript 속성을 채우는 데 사용됩니다.

컴포넌트.html

XML/HTML 코드

클립보드에 콘텐츠 복사

1. var mainDoc = 문서._currentScript.ownerDocument
// mainDoc은 component.html 아래의 문서를 가리킵니다.

스크립트 시작 부분에 다음 코드를 추가하면 브라우저가 HTML 가져오기를 지원하는지 여부에 관계없이 component.html의 문서 개체에 쉽게 액세스할 수 있습니다.

document._currentScript = document._currentScript || document.currentScript;
성능 고려 사항

HTML 가져오기를 사용하면 리소스를 정리할 수 있다는 장점이 있지만, 이러한 리소스를 로드할 때 일부 추가 HTML 파일 사용으로 인해 헤더가 너무 커진다는 의미이기도 합니다. 고려해야 할 몇 가지 사항이 있습니다.

종속성 해결

기본 HTML 파일이 여러 가져오기 파일에 의존하고 가져오기 파일에 동일한 라이브러리가 포함되어 있으면 어떻게 되나요? 예를 들어 가져오기 파일에서 jQuery를 로드하려는 경우 각 가져오기 파일에 jQuery를 로드하는 스크립트 태그가 포함되어 있으면 jQuery가 두 번 로드되고 두 번 실행됩니다.

index.html

XML/HTML 코드

클립보드에 콘텐츠 복사

1. <링크 rel="가져오기" href="comComponent1.html">
2. <링크 rel="가져오기" href="comComponent2.html">

컴포넌트1.html

XML/HTML 코드

클립보드에 콘텐츠 복사

1. <스크립트 src="js/jquery.js ">스크립트> 

comComponent2.html

HTML 가져오기는 이 문제를 자동으로 해결합니다.

스크립트 태그를 두 번 로드하는 것과 달리 HTML 가져오기는 더 이상 이미 로드된 HTML 파일을 로드하고 실행하지 않습니다. 이전 코드를 예로 들면, jQuery를 로드하는 스크립트 태그를 HTML 가져오기 파일에 패키징하면 jQuery가 한 번만 로드되고 실행됩니다.

하지만 문제가 있습니다. 로드할 파일을 추가했습니다. 늘어나는 파일 수를 처리하는 방법은 무엇입니까? 다행히도 이 문제를 해결하기 위해 vulcanize라는 도구가 있습니다.
네트워크 요청 병합

Vulcanize는 여러 HTML 파일을 하나의 파일로 병합하여 네트워크 연결 수를 줄일 수 있습니다. npm으로 설치하고 명령줄에서 사용할 수 있습니다. 일부 작업을 호스팅하기 위해 grunt 및 gulp를 사용할 수도 있으며, 이 경우 빌드 프로세스의 일부로 경화할 수 있습니다.

종속성을 해결하고 index.html에서 가져오기 파일을 병합하려면 다음 명령을 사용하세요.

코드 복사

코드는 다음과 같습니다.

$ vulcanize -o vulcanized.html index.html

이 명령을 실행하면 index.html의 종속성이 구문 분석되고 vulcanized.html이라는 병합된 HTML 파일이 생성됩니다. 가황에 대한 자세한 내용은 여기를 참조하세요.

참고: 향후 파일 연결 및 병합을 제거하기 위해 http2의 서버 푸시 기능이 고려되고 있습니다.
템플릿, Shadow DOM, 맞춤 요소 및 HTML 가져오기 결합

이 기사 시리즈의 코드에 HTML 가져오기를 사용해 보겠습니다. 이전에 이러한 기사를 본 적이 없을 수도 있으므로 먼저 설명하겠습니다. 템플릿을 사용하면 사용자 정의 요소의 콘텐츠를 선언적으로 정의할 수 있습니다. Shadow DOM을 사용하면 요소의 스타일, ID 및 클래스가 해당 요소에만 적용될 수 있습니다. 사용자 정의 요소를 사용하면 HTML 태그를 사용자 정의할 수 있습니다. 이를 HTML 가져오기와 결합하면 사용자 정의 웹 구성 요소가 모듈화되고 재사용 가능해집니다. Link 태그만 추가하면 누구나 사용할 수 있습니다.

x-컴포넌트.html

XML/HTML 코드클립보드에 콘텐츠 복사

1. <템플릿 ID="템플릿" >  
2.   <스타일>  
3.     ...   
4.   스타일>  
5.   <div id="컨테이너" >  
6.     <img src="http: //webcomComponents.org/img/logo.svg">  
7.     <콘텐츠 선택="h1" >콘텐츠>  
8.   div>  
9. 템플릿>  
10. <스크립트>  
11.   // 이 요소는 index.html에 등록됩니다.   
12.   // 여기서 '문서'는 index.html에 있는 문서를 의미하기 때문입니다.   
13.   var XComponent = document.registerElement('x-comComponent', {   
14.     프로토타입: Object.create(HTMLElement.prototype, {   
15.       createdCallback: {   
16.         값: function() {   
17.           var root = this.createShadowRoot();   
18.           var 템플릿 = 문서.querySelector('#template');   
19.           var clone = document.importNode(template.content, true);   
20.           root.appendChild(복제);   
21.         }   
22.       }   
23.     })   
24.   });   
25. 스크립트>  

index.html
 

XML/HTML 코드复复内容到剪贴板

1. ...
2. <링크 rel="가져오기" href="x-comComponent.html">
3. 머리>
4. <몸>
5. <x-컴포넌트>
6.  <h1>커스텀 요소입니다h1>
7. x-컴포넌트>
8. ...

x-comComponent.html의 문서 개체는 index.html과 동일하므로 까다로운 코드를 작성할 필요가 없으며 자동으로 등록됩니다.
지원 브라우저

Chrome과 Opera는 HTML 가져오기를 지원하며 Firefox는 2014년 12월까지 이를 지원하지 않습니다. (Mozilla는 Firefox가 가까운 미래에 HTML 가져오기를 지원할 계획이 없다고 밝혔으며 먼저 ES6 모듈이 어떻게 작동하는지 이해해야 한다고 주장했습니다. 구현됩니다).

chromestatus.com 또는 caniuse.com으로 이동하여 브라우저가 HTML 가져오기를 지원하는지 확인할 수 있습니다. 다른 브라우저에서 HTML 가져오기를 사용하려면 webcomComponents.js(이전의 platform.js)를 사용할 수 있습니다.
관련자료

HTML 가져오기에 대한 내용은 여기까지입니다. HTML 가져오기에 대해 자세히 알아보려면 다음을 방문하세요.

HTML Imports: 웹용 #include – HTML5Rocks
HTML Imports 사양