HTML 가져오기

웹용 포함

가져오기가 필요한 이유

웹에 다양한 유형의 리소스를 로드하는 방법을 생각해 보세요. JS의 경우 <script src>가 있습니다. CSS의 경우 <link rel="stylesheet">를 사용하는 것이 좋습니다. 이미지의 경우 <img>입니다. 동영상에 <video>이(가) 있습니다. 오디오, <audio>… 요점을 전달하세요. 대부분의 웹 콘텐츠에는 자체적으로 로드하는 간단하고 선언적인 방법이 있습니다. HTML은 그렇지 않습니다. 선택할 수 있는 옵션은 다음과 같습니다.

  1. <iframe> - 시도된 사실이지만 무게가 무겁습니다. iframe의 콘텐츠는 페이지와 완전히 별개의 컨텍스트에 있습니다. 이는 대체로 훌륭한 기능이지만 추가적인 어려움이 있습니다 (프레임 크기를 콘텐츠에 맞게 축소하는 것은 어렵고, 스크립트에 삽입하거나 스크립트에 삽입하는 것이 굉장히 짜증이 나고, 스타일을 지정하는 것이 거의 불가능함).
  2. AJAX - xhr.responseType="document"인데 HTML을 로드하려면 JS가 필요하다고 말씀하시는 건가요? 문제가 있는 것 같습니다.
  3. CrazyHacksTM - 문자열에 삽입되며 주석으로 숨겨집니다 (예: <script type="text/html">). 죄송합니다.

아이러니가 보이시나요? 웹의 가장 기본적인 콘텐츠인 HTML은 작업하는 데 가장 많은 노력이 필요합니다. 다행히 웹 구성요소를 사용하면 문제를 해결할 수 있습니다.

시작하기

웹 구성요소 전송의 일부인 HTML 가져오기는 다른 HTML 문서에 HTML 문서를 포함하는 방법입니다. 마크업으로 제한되지도 않습니다. 가져오기에는 CSS, JavaScript 또는 .html 파일에 포함할 수 있는 기타 항목도 포함될 수 있습니다. 즉, 가져오기는 관련 HTML/CSS/JS를 로드하는 훌륭한 도구가 됩니다.

기본 사항

<link rel="import">를 선언하여 페이지에 가져오기를 포함합니다.

<head>
    <link rel="import" href="/path/to/imports/stuff.html">
</head>

가져오기의 URL을 가져오기 위치라고 합니다. 다른 도메인에서 콘텐츠를 로드하려면 가져오기 위치에 CORS가 사용 설정되어 있어야 합니다.

<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">

기능 감지 및 지원

지원을 감지하려면 <link> 요소에 .import가 있는지 확인합니다.

function supportsImports() {
    return 'import' in document.createElement('link');
}

if (supportsImports()) {
    // Good to go!
} else {
    // Use other libraries/require systems to load files.
}

브라우저 지원은 아직 초기 단계에 있습니다. Chrome 31이 구현을 확인한 최초의 브라우저였지만 다른 브라우저 공급업체는 ES 모듈이 어떻게 작동하는지 지켜보고 있습니다. 그러나 다른 브라우저의 경우 널리 지원될 때까지 webcomponents.js 폴리필이 잘 작동합니다.

리소스 번들

가져오기는 HTML/CSS/JS(다른 HTML 가져오기 포함)를 단일 결과물로 번들로 묶는 규칙을 제공합니다. 이는 내재된 기능이지만 매우 강력합니다. 테마, 라이브러리를 만들거나 앱을 논리적 청크로 분할하려는 경우 사용자에게 단일 URL을 제공하는 것이 효과적입니다. 가져오기를 통해 전체 앱을 제공할 수도 있습니다. 이 수치만 봐도

실제 예로는 부트스트랩이 있습니다. 부트스트랩은 개별 파일 (bootstrap.css, bootstrap.js, 글꼴)으로 구성되며 플러그인에 JQuery가 필요하며 마크업 예를 제공합니다. 개발자는 주문형 유연성을 좋아합니다. 이를 통해 개발자가 사용하려는 프레임워크의 일부를 구매할 수 있습니다. 하지만 일반적인 JoeDeveloper™는 쉬운 방법을 선택하여 Bootstrap을 모두 다운로드할 것입니다.

가져오기는 Bootstrap과 같은 경우에 매우 유용합니다. 부트스트랩 로딩의 미래를 여러분께 발표합니다.

<head>
    <link rel="import" href="bootstrap.html">
</head>

사용자는 HTML 가져오기 링크를 로드하기만 하면 됩니다. 흩어져 있는 파일로 고민할 필요가 없습니다. 대신 Bootstrap 전체가 가져오기 bootstrap.html로 관리되고 래핑됩니다.

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>
...

<!-- scaffolding markup -->
<template>
    ...
</template>

놓아두세요. 흥미로운 내용입니다.

로드/오류 이벤트

<link> 요소는 가져오기가 성공적으로 로드되면 load 이벤트를, 가져오기에 실패하면 onerror 이벤트를 실행합니다(예: 리소스 404인 경우).

가져오기는 즉시 로드하려고 시도합니다. onload/onerror 속성을 사용하면 간단하게 문제를 해결할 수 있습니다.

<script>
    function handleLoad(e) {
    console.log('Loaded import: ' + e.target.href);
    }
    function handleError(e) {
    console.log('Error loading import: ' + e.target.href);
    }
</script>

<link rel="import" href="file.html"
        onload="handleLoad(event)" onerror="handleError(event)">

또는 가져오기를 동적으로 만드는 경우:

var link = document.createElement('link');
link.rel = 'import';
// link.setAttribute('async', ''); // make it async!
link.href = 'file.html';
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);

콘텐츠 사용

페이지에 가져오기를 포함한다고 해서 '해당 파일의 콘텐츠를 여기에 넣으세요'라는 의미는 아닙니다. 즉, '파서야, 내가 사용할 수 있도록 이 문서를 가져와'라는 의미입니다. 콘텐츠를 실제로 사용하려면 조치를 취하고 스크립트를 작성해야 합니다.

중요한 aha! 순간은 가져오기가 문서일 뿐입니다. 실제로 가져오기의 콘텐츠를 가져오기 문서라고 합니다. 표준 DOM API를 사용하여 가져오기의 핵심을 조작할 수 있습니다.

link.import

가져오기 콘텐츠에 액세스하려면 링크 요소의 .import 속성을 사용합니다.

var content = document.querySelector('link[rel="import"]').import;

다음 조건에서 link.import은 null입니다.

  • 브라우저가 HTML 가져오기를 지원하지 않습니다.
  • <link>에는 rel="import"가 없습니다.
  • <link>가 DOM에 추가되지 않았습니다.
  • <link>가 DOM에서 삭제되었습니다.
  • 리소스에 CORS가 사용 설정되어 있지 않습니다.

전체 예시

warnings.html에 다음이 포함되어 있다고 가정해 보겠습니다.

<div class="warning">
    <style>
    h3 {
        color: red !important;
    }
    </style>
    <h3>Warning!
    <p>This page is under construction
</div>

<div class="outdated">
    <h3>Heads up!
    <p>This content may be out of date
</div>

가져오기 도구는 이 문서의 특정 부분을 가져와 페이지에 클론할 수 있습니다.

<head>
    <link rel="import" href="warnings.html">
</head>
<body>
    ...
    <script>
    var link = document.querySelector('link[rel="import"]');
    var content = link.import;

    // Grab DOM from warning.html's document.
    var el = content.querySelector('.warning');

    document.body.appendChild(el.cloneNode(true));
    </script>
</body>

가져오기의 스크립팅

기본 문서에 가져오기가 없습니다. 그들은 그에 종속되어 있습니다. 하지만 기본 문서가 우선 사용되더라도 가져오기는 기본 페이지에서 계속 실행될 수 있습니다. 가져오기는 자체 DOM 및/또는 가져오는 페이지의 DOM에 액세스할 수 있습니다.

예 - 기본 페이지에 스타일시트 중 하나를 추가하는 import.html

<link rel="stylesheet" href="http://www.example.com/styles.css">
<link rel="stylesheet" href="http://www.example.com/styles2.css">

<style>
/* Note: <style> in an import apply to the main
    document by default. That is, style tags don't need to be
    explicitly added to the main document. */
#somecontainer {
color: blue;
}
</style>
...

<script>
// importDoc references this import's document
var importDoc = document.currentScript.ownerDocument;

// mainDoc references the main document (the page that's importing us)
var mainDoc = document;

// Grab the first stylesheet from this import, clone it,
// and append it to the importing document.
    var styles = importDoc.querySelector('link[rel="stylesheet"]');
    mainDoc.head.appendChild(styles.cloneNode(true));
</script>

여기서 무슨 일이 일어나고 있는지 살펴보세요. 가져오기에 포함된 스크립트는 가져온 문서 (document.currentScript.ownerDocument)를 참조하고 해당 문서의 일부분을 가져오기 페이지 (mainDoc.head.appendChild(...))에 추가합니다. 이렇게 물어보면 대단합니다.

가져오기의 JavaScript 규칙:

  • 가져오기의 스크립트는 가져오는 document가 포함된 창의 컨텍스트에서 실행됩니다. 따라서 window.document는 기본 페이지 문서를 나타냅니다. 여기서 유용한 두 가지 추론을 얻을 수 있습니다.
    • 가져오기에 정의된 함수는 window에 배치됩니다.
    • 가져오기의 <script> 블록을 기본 페이지에 추가하는 것과 같이 어려운 작업을 할 필요가 없습니다. 스크립트가 다시 실행됩니다.
  • 가져오기를 실행해도 기본 페이지의 파싱은 차단되지 않습니다. 하지만 내부의 스크립트는 순서대로 처리됩니다. 즉, 적절한 스크립트 순서를 유지하면서 지연과 유사한 동작을 얻을 수 있습니다. 자세한 내용은 아래를 참조하세요.

웹 구성요소 전송

HTML 가져오기의 디자인은 웹에 재사용 가능한 콘텐츠를 로드하는 데 적합합니다. 특히 웹 구성 요소를 배포하는 이상적인 방법입니다. 기본 HTML <template>에서 Shadow DOM이 있는 본격적인 맞춤 요소[1, 2, 3]에 이르기까지 모든 요소를 지원합니다. 이러한 기술을 함께 사용하면 가져오기가 웹 구성요소의 #include가 됩니다.

템플릿 포함

HTML 템플릿 요소는 HTML 가져오기에 적합합니다. <template>는 가져오는 앱에서 원하는 대로 사용할 마크업 섹션을 스캐폴딩하는 데 적합합니다. 콘텐츠를 <template>로 래핑하면 사용될 때까지 콘텐츠가 비활성 상태가 된다는 추가 이점도 있습니다. 즉, 템플릿이 DOM에 추가될 때까지 스크립트가 실행되지 않습니다. 와우!

import.html

<template>
    <h1>Hello World!</h1>
    <!-- Img is not requested until the <template> goes live. -->
    <img src="world.png">
    <script>alert("Executed when the template is activated.");</script>
</template>

index.html

<head>
    <link rel="import" href="import.html">
</head>
<body>
    <div id="container"></div>
    <script>
    var link = document.querySelector('link[rel="import"]');

    // Clone the <template> in the import.
    var template = link.import.querySelector('template');
    var clone = document.importNode(template.content, true);

    document.querySelector('#container').appendChild(clone);
    </script>
</body>

맞춤 요소 등록

맞춤 요소는 HTML 가져오기와 매우 잘 작동하는 또 다른 웹 구성요소 기술입니다. 가져오기는 스크립트를 실행할 수 있으므로 사용자가 직접 하지 않아도 되도록 맞춤 요소를 정의하고 등록해 보세요. '자동 등록'이라고 하세요.

elements.html

<script>
    // Define and register <say-hi>.
    var proto = Object.create(HTMLElement.prototype);

    proto.createdCallback = function() {
    this.innerHTML = 'Hello, <b>' +
                        (this.getAttribute('name') || '?') + '</b>';
    };

    document.registerElement('say-hi', {prototype: proto});
</script>

<template id="t">
    <style>
    ::content > * {
        color: red;
    }
    </style>
    <span>I'm a shadow-element using Shadow DOM!</span>
    <content></content>
</template>

<script>
    (function() {
    var importDoc = document.currentScript.ownerDocument; // importee

    // Define and register <shadow-element>
    // that uses Shadow DOM and a template.
    var proto2 = Object.create(HTMLElement.prototype);

    proto2.createdCallback = function() {
        // get template in import
        var template = importDoc.querySelector('#t');

        // import template into
        var clone = document.importNode(template.content, true);

        var root = this.createShadowRoot();
        root.appendChild(clone);
    };

    document.registerElement('shadow-element', {prototype: proto2});
    })();
</script>

이 가져오기는 <say-hi> 및 <shadow-element>라는 두 요소를 정의하고 등록합니다. 첫 번째는 가져오기 내에 자체적으로 등록되는 기본 맞춤 요소를 보여줍니다. 두 번째 예는 <template>에서 Shadow DOM을 만든 다음 자체를 등록하는 맞춤 요소를 구현하는 방법을 보여줍니다.

HTML 가져오기에 맞춤 요소를 등록할 때 가장 좋은 점은 가져오기 도구가 페이지에서 요소를 선언하기만 하면 된다는 점입니다. 배선이 필요하지 않습니다.

index.html

<head>
    <link rel="import" href="elements.html">
</head>
<body>
    <say-hi name="Eric"></say-hi>
    <shadow-element>
    <div>( I'm in the light dom )</div>
    </shadow-element>
</body>

이 워크플로만으로도 HTML 가져오기는 Web Components를 공유하는 데 이상적인 방법이라고 생각합니다.

종속 항목 및 하위 가져오기 관리

하위 가져오기

한 가져오기에 다른 가져오기를 포함하는 것이 유용할 수 있습니다. 예를 들어 다른 구성요소를 재사용하거나 확장하려면 가져오기를 사용하여 다른 요소를 로드합니다.

다음은 Polymer의 실제 예입니다. 레이아웃 및 선택기 구성요소를 재사용하는 새 탭 구성요소(<paper-tabs>)입니다. 종속 항목은 HTML 가져오기를 사용하여 관리됩니다.

paper-tabs.html(간소화):

<link rel="import" href="iron-selector.html">
<link rel="import" href="classes/iron-flex-layout.html">

<dom-module id="paper-tabs">
    <template>
    <style>...</style>
    <iron-selector class="layout horizonta center">
        <content select="*"></content>
    </iron-selector>
    </template>
    <script>...</script>
</dom-module>

앱 개발자는 다음을 사용하여 이 새로운 요소를 가져올 수 있습니다.

<link rel="import" href="paper-tabs.html">
<paper-tabs></paper-tabs>

향후 더 멋진 새 <iron-selector2>가 등장하면 <iron-selector>를 교체하고 바로 사용할 수 있습니다. 가져오기 및 웹 구성요소로 인해 사용자에게 방해가 되지 않습니다.

종속 항목 관리

페이지당 JQuery를 두 번 이상 로드하면 오류가 발생한다는 것은 누구나 알고 있습니다. 여러 구성요소에서 동일한 라이브러리를 사용하는 경우 웹 구성요소에 큰 문제가 되지 않나요? HTML 가져오기를 사용하면 안 됩니다. 종속 항목을 관리하는 데 사용할 수 있습니다.

HTML 가져오기에서 라이브러리를 래핑하면 리소스가 자동으로 중복 제거됩니다. 문서는 한 번만 파싱됩니다. 스크립트는 한 번만 실행됩니다. 예를 들어 JQuery 사본을 로드하는 가져오기 jquery.html을 정의한다고 가정해 보겠습니다.

jquery.html

<script src="http://cdn.com/jquery.js"></script>

이 가져오기는 다음과 같이 후속 가져오기에서 재사용할 수 있습니다.

import2.html

<link rel="import" href="jquery.html">
<div>Hello, I'm import 2</div>

ajax-element.html

<link rel="import" href="jquery.html">
<link rel="import" href="import2.html">

<script>
    var proto = Object.create(HTMLElement.prototype);

    proto.makeRequest = function(url, done) {
    return $.ajax(url).done(function() {
        done();
    });
    };

    document.registerElement('ajax-element', {prototype: proto});
</script>

라이브러리가 필요한 경우 기본 페이지 자체에 jquery.html이 포함될 수도 있습니다.

<head>
    <link rel="import" href="jquery.html">
    <link rel="import" href="ajax-element.html">
</head>
<body>

...

<script>
    $(document).ready(function() {
    var el = document.createElement('ajax-element');
    el.makeRequest('http://example.com');
    });
</script>
</body>

jquery.html이 여러 가져오기 트리에 포함되어 있지만 브라우저에서 문서를 가져와 처리하는 것은 한 번뿐입니다. 네트워크 패널을 검토하면 다음을 확인할 수 있습니다.

jquery.html이 한 번 요청됨
jquery.html이 한 번 요청됩니다.

성능에 대한 고려사항

HTML 가져오기는 아주 멋진 기술이지만 다른 새로운 웹 기술과 마찬가지로 현명하게 사용해야 합니다. 웹 개발 권장사항은 여전히 유효합니다. 다음 사항에 유의하시기 바랍니다.

가져오기 연결

네트워크 요청을 줄이는 것은 항상 중요합니다. 최상위 가져오기 링크가 많은 경우 이를 단일 리소스로 결합하고 해당 파일을 가져오는 것이 좋습니다.

Vulcanize는 Polymer팀의 npm 빌드 도구로, 일련의 HTML 가져오기를 단일 파일로 재귀적으로 평탄화합니다. 웹 구성요소의 연결 빌드 단계라고 생각하면 됩니다.

가져오기는 브라우저 캐싱을 활용합니다.

많은 사람들이 브라우저의 네트워킹 스택이 수년간 미세 조정되어 왔음을 잊어버립니다. 가져오기(및 하위 가져오기)도 이 로직을 활용합니다. http://cdn.com/bootstrap.html 가져오기에는 하위 리소스가 있을 수 있지만 이러한 리소스는 캐시됩니다.

콘텐츠는 내가 추가한 경우에만 유용합니다.

콘텐츠의 서비스를 호출할 때까지는 콘텐츠가 비활성 상태라고 생각합니다. 동적으로 생성된 일반적인 스타일시트를 살펴보겠습니다.

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';

브라우저는 link가 DOM에 추가될 때까지 styles.css를 요청하지 않습니다.

document.head.appendChild(link); // browser requests styles.css

또 다른 예는 동적으로 생성된 마크업입니다.

var h2 = document.createElement('h2');
h2.textContent = 'Booyah!';

h2는 DOM에 추가할 때까지는 상대적으로 의미가 없습니다.

가져오기 문서에도 동일한 개념이 적용됩니다. 콘텐츠를 DOM에 추가하지 않는 한 아무 일도 일어나지 않습니다. 실제로 가져오기 문서에서 직접 '실행'되는 것은 <script>뿐입니다. 가져오기의 스크립팅을 참고하세요.

비동기 로드 최적화

블록 렌더링을 가져옵니다.

기본 페이지의 블록 렌더링을 가져옵니다. 이는 <link rel="stylesheet">와 유사합니다. 브라우저가 처음에 스타일시트에서 렌더링을 차단하는 이유는 FOUC를 최소화하기 위해서입니다. 가져오기는 스타일시트를 포함할 수 있으므로 비슷하게 동작합니다.

완전히 비동기식으로 작동하고 파서나 렌더링을 차단하지 않으려면 async 속성을 사용하세요.

<link rel="import" href="/path/to/import_that_takes_5secs.html" async>

async가 HTML 가져오기의 기본값이 아닌 이유는 개발자가 더 많은 작업을 해야 하기 때문입니다. 기본적으로 동기식은 내부에 맞춤 요소 정의가 있는 HTML 가져오기가 순서대로 로드되고 업그레이드된다는 것을 의미합니다. 완전히 비동기식 환경에서는 개발자가 이러한 댄스와 업그레이드 타이밍을 직접 관리해야 합니다.

동적으로 비동기 가져오기를 만들 수도 있습니다.

var l = document.createElement('link');
l.rel = 'import';
l.href = 'elements.html';
l.setAttribute('async', '');
l.onload = function(e) { ... };

가져오기가 파싱을 차단하지 않음

가져오기는 기본 페이지의 파싱을 차단하지 않습니다. 가져오기 내의 스크립트는 순서대로 처리되지만 가져오기 페이지를 차단하지 않습니다. 즉, 적절한 스크립트 순서를 유지하면서 지연과 유사한 동작을 얻을 수 있습니다. <head>에 가져오기를 배치하면 파서가 최대한 빨리 콘텐츠 작업을 시작할 수 있다는 이점이 있습니다. 그렇더라도 기본 문서의 <script>가 여전히 페이지를 계속 차단한다는 것을 기억하는 것이 중요합니다. 가져오기 후 처음 <script>는 페이지 렌더링을 차단합니다. 가져오기에는 기본 페이지의 스크립트보다 먼저 실행해야 하는 스크립트가 포함될 수 있기 때문입니다.

<head>
    <link rel="import" href="/path/to/import_that_takes_5secs.html">
    <script>console.log('I block page rendering');</script>
</head>

앱 구조와 사용 사례에 따라 비동기 동작을 최적화하는 방법에는 여러 가지가 있습니다. 아래 기법은 기본 페이지 렌더링 차단을 완화합니다.

시나리오 1(권장): <head>에 스크립트가 없거나 <body>에 인라인 처리되지 않음

<script>를 배치할 때는 가져오기 직후에 배치하지 않는 것이 좋습니다. 스크립트를 게임의 가능한 한 늦은 시점에 이동합니다. 하지만 이미 이 권장사항을 따르고 계시겠죠? ;)

예를 들면 다음과 같습니다.

<head>
    <link rel="import" href="/path/to/import.html">
    <link rel="import" href="/path/to/import2.html">
    <!-- avoid including script -->
</head>
<body>
    <!-- avoid including script -->

    <div id="container"></div>

    <!-- avoid including script -->
    ...

    <script>
    // Other scripts n' stuff.

    // Bring in the import content.
    var link = document.querySelector('link[rel="import"]');
    var post = link.import.querySelector('#blog-post');

    var container = document.querySelector('#container');
    container.appendChild(post.cloneNode(true));
    </script>
</body>

모든 항목이 하단에 있습니다.

시나리오 1.5: 가져오기가 자체적으로 추가됨

가져오기에서 자체 콘텐츠를 추가하도록 하는 방법도 있습니다. 가져오기 작성자가 앱 개발자가 따라야 할 계약을 체결하는 경우 가져오기가 기본 페이지의 영역에 추가될 수 있습니다.

import.html:

<div id="blog-post">...</div>
<script>
    var me = document.currentScript.ownerDocument;
    var post = me.querySelector('#blog-post');

    var container = document.querySelector('#container');
    container.appendChild(post.cloneNode(true));
</script>

index.html

<head>
    <link rel="import" href="/path/to/import.html">
</head>
<body>
    <!-- no need for script. the import takes care of things -->
</body>

시나리오 2: <head>에 스크립트가 있거나 <body>에 인라인 처리됨

로드하는 데 시간이 오래 걸리는 가져오기가 있는 경우 페이지에서 가져오기를 따르는 첫 번째 <script>가 페이지 렌더링을 차단합니다. 예를 들어 Google 애널리틱스는 추적 코드를 <head>에 배치하는 것이 좋습니다. <head>에 <script>를 배치할 수 없는 경우 가져오기를 동적으로 추가하면 페이지가 차단되지 않습니다.

<head>
    <script>
    function addImportLink(url) {
        var link = document.createElement('link');
        link.rel = 'import';
        link.href = url;
        link.onload = function(e) {
        var post = this.import.querySelector('#blog-post');

        var container = document.querySelector('#container');
        container.appendChild(post.cloneNode(true));
        };
        document.head.appendChild(link);
    }

    addImportLink('/path/to/import.html'); // Import is added early :)
    </script>
    <script>
    // other scripts
    </script>
</head>
<body>
    <div id="container"></div>
    ...
</body>

또는 <body> 끝부분에 가져오기를 추가합니다.

<head>
    <script>
    // other scripts
    </script>
</head>
<body>
    <div id="container"></div>
    ...

    <script>
    function addImportLink(url) { ... }

    addImportLink('/path/to/import.html'); // Import is added very late :(
    </script>
</body>

주의사항

  • 가져오기의 mimetype은 text/html입니다.

  • 다른 출처의 리소스는 CORS를 사용 설정해야 합니다.

  • 동일한 URL의 가져오기는 한 번 검색되고 파싱됩니다. 즉, 가져오기가 처음 표시될 때만 가져오기의 스크립트가 실행됩니다.

  • 가져오기의 스크립트는 순서대로 처리되지만 기본 문서 파싱을 차단하지는 않습니다.

  • 가져오기 링크는 '#include the content here'를 의미하지 않습니다. 그것은 '파서, 나중에 사용할 수 있도록 이 문서를 가져오는 것'을 의미합니다. 스크립트는 가져오기 시 실행되지만 스타일시트, 마크업, 기타 리소스는 기본 페이지에 명시적으로 추가해야 합니다. <style>는 명시적으로 추가할 필요가 없습니다. 이것이 '여기에 이 콘텐츠를 로드하고 렌더링'하는 HTML 가져오기와 <iframe>의 주요 차이점입니다.

결론

HTML 가져오기를 사용하면 HTML/CSS/JS를 단일 리소스로 번들로 묶을 수 있습니다. 이 아이디어는 그 자체로도 유용하지만 웹 구성요소 환경에서는 매우 강력합니다. 개발자는 다른 개발자가 소비하고 자신의 앱으로 가져올 수 있는 재사용 가능한 구성요소를 만들 수 있으며 모두 <link rel="import">를 통해 제공됩니다.

HTML 가져오기는 간단한 개념이지만 플랫폼에 여러 가지 흥미로운 사용 사례를 제공합니다.

사용 사례

  • 관련 HTML/CSS/JS를 단일 번들로 배포합니다. 이론적으로는 전체 웹 앱을 다른 앱으로 가져올 수 있습니다.
  • 코드 구성 - 개념을 논리적으로 여러 파일로 분할하여 모듈성과 재사용성을** 유도합니다.
  • 하나 이상의 맞춤 요소 정의를 전송합니다. 가져오기를 사용하여 요소를 등록하고 앱에 포함할 수 있습니다. 이렇게 하면 요소의 인터페이스/정의가 사용 방법과 별개로 유지되어 좋은 소프트웨어 패턴을 실천할 수 있습니다.
  • 종속 항목 관리 - 리소스가 자동으로 중복 삭제됩니다.
  • 스크립트 청크 - 이전에는 가져오기 전에 대용량 JS 라이브러리를 실행하려면 파일을 완전히 파싱해야 했으므로 속도가 느렸습니다. 가져오기를 사용하면 청크 A가 파싱되는 즉시 라이브러리가 작동하기 시작할 수 있습니다. 지연 시간이 줄어듭니다.
// TODO: DevSite - Code sample removed as it used inline event handlers

  • HTML 파싱 병렬화 - 브라우저에서 처음으로 두 개 이상의 HTML 파서를 동시에 실행할 수 있게 되었습니다.

  • 가져오기 타겟 자체를 변경하기만 하면 앱에서 디버그 모드와 디버그 모드가 아닌 모드 간에 전환할 수 있습니다. 앱은 가져오기 타겟이 번들로 묶인/컴파일된 리소스인지 또는 가져오기 트리인지 알 필요가 없습니다.