HTML 가져오기

웹용 포함

가져오기가 필요한 이유

웹에서 다양한 유형의 리소스를 어떻게 로드하는지 생각해 보세요. 자바스크립트의 경우 <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가 필요하며, 마크업 예시를 제공합니다. 개발자는 단독으로 유연하게 작업을 진행하길 원합니다. 자신이 사용하려는 프레임워크 부분을 구매할 수 있습니다. 그렇긴 해도, 일반적인 JoeDeveloperTM가 쉬운 방법을 사용해 모든 부트스트랩을 다운로드했으면 좋겠습니다.

부트스트랩 같은 경우에는 가져오기가 엄청난 의미를 갖습니다. 부트스트랩 로딩의 미래인

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

사용자는 HTML 가져오기 링크를 로드하기만 하면 됩니다. 파일 분산 촬영으로 번거롭게 작업할 필요가 없습니다. 대신 부트스트랩 전체를 관리하고 import인 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(...))에 추가합니다. 정말 엉뚱한 질문입니다.

가져오기에 포함된 자바스크립트 규칙:

  • 가져오기의 스크립트는 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>를 정의하고 등록합니다. 첫 번째 요소는 import 내에 자체 등록하는 기본 맞춤 요소를 보여줍니다. 두 번째 예는 <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 가져오기가 웹 구성요소를 공유하기 위한 이상적인 방법이라고 생각합니다.

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

하위 가져오기

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

다음은 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에 추가될 때까지 style.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에서 가져온 항목은 한 번 검색 및 파싱됩니다. 즉, 가져오기에 포함된 스크립트는 가져오기가 처음 확인될 때만 실행됩니다.

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

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

결론

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

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

사용 사례

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

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

  • 가져오기 타겟 자체를 변경하여 앱에서 디버그 모드와 비디버그 모드 간 전환을 사용 설정합니다. 앱은 가져오기 대상이 번들/컴파일된 리소스인지 또는 가져오기 트리인지 알 필요가 없습니다.