집 > 기사 > 웹 프론트엔드 > HTML5의 파일 가져오기에 대한 간략한 소개

HTML5의 파일 가져오기에 대한 간략한 소개

不言원래의: 2018-05-08 15:39:402406검색

이 글에서는 jQuery 로딩, 가져온 후 실행 순서 및 기타 지식 포인트를 포함하여 HTML로 파일 가져오기에 대한 간략한 소개를 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

Template, Shadow DOM 및 Custom Elements를 사용하면 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 Code클립보드에 콘텐츠 복사

<link rel="import" href="component.html" >

파일을 HTML로 가져올 수 있습니다(번역자 참고 사항: 이 문서에서는 "가져온 HTML"을 "HTML 가져오기 파일"로, "원본 HTML"을 "HTML 마스터 파일"로 번역합니다. 예를 들어 index.html은 HTML 마스터 파일이고, component.html은 HTML 가져오기 파일입니다. , 스크립트, 스타일시트, 글꼴 등은 일반 HTML에 리소스를 추가하는 것과 같습니다.

comComponent.html

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

<link rel="stylesheet" href="css/style.css">
<script 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를 실행합니다. ㅋㅋㅋ

<link rel="import" href="component.html"> // 1.   
<title>Import Example</title>
<script src="script3.js"></script>        // 4.

1. index.html에 component.html을 로드하고 실행을 기다립니다

2.comment.html

3에서 script1.js를 실행한 후, script2.html에서 script2.js를 실행합니다. index.htmllink[rel="import"]에 async 속성을 추가하면 HTML 가져오기는 이를 async 속성이 포함된 스크립트로 처리합니다. HTML 가져오기 파일이 실행되고 로드될 때까지 기다리지 않습니다. 이는 HTML 가져오기가 기본 HTML 파일의 렌더링을 방해하지 않음을 의미합니다. 또한 HTML 가져오기 파일의 실행에 의존하는 다른 스크립트가 없는 한 웹사이트 성능을 향상시키는 것도 가능합니다. 교차 도메인 가져오기

기본적으로 HTML 가져오기는 다른 도메인 이름에서 리소스를 가져올 수 없습니다. 예를 들어 http://webcomComponents.org/에서 http://example.com/으로 HTML 파일을 가져올 수 없습니다. 이 제한을 우회하기 위해 CORS(Cross-Origin Resource Sharing)를 사용할 수 있습니다. CORS에 대해 알아보려면 이 기사를 읽어보세요.

HTML 가져오기 파일의 창 및 문서 개체

앞서 HTML 파일을 가져올 때 내부 스크립트가 실행된다고 언급했지만 이것이 HTML 가져오기 파일의 태그도 브라우저에서 렌더링된다는 의미는 아닙니다. 도움을 받으려면 JavaScript 코드를 작성해야 합니다.

HTML 가져오기 파일에서 JavaScript를 사용할 때 주의해야 할 한 가지는 HTML 가져오기 파일의 문서 개체가 실제로 기본 HTML 파일의 문서 개체를 참조한다는 것입니다. 이전 코드를 예로 들면, index.html과 component.html의 문서는 모두 index.html의 문서 객체를 참조합니다. HTML을 사용하여 파일의 문서를 가져오려면 어떻게 해야 합니까? 링크에서 import 속성을 사용하세요. ㅋㅋㅋ /HTML 코드콘텐츠를 클립보드에 복사

var mainDoc = document.currentScript.ownerDocument;   
// mainDoc points to the document under component.html

如果你在用webcomponents.js，那么就用document._currentScript来代替document.currentScript。下划线用于填充currentScript属性，因为并不是所有的浏览器都支持这个属性。

component.html

XML/HTML Code复制内容到剪贴板

var mainDoc = document._currentScript.ownerDocument;   
// mainDoc points to the document under component.html

通过在脚本开头添加下面的代码，你就可以轻松地访问component.html中的document对象，而不用管浏览器是不是支持HTML导入。
document._currentScript = document._currentScript || document.currentScript;
性能方面的考虑

使用HTML 导入的一个好处是能够将资源组织起来，但是也意味着在加载这些资源的时候，由于使用了一些额外的HTML文件而让头部变得过大。有几点是需要考虑的：
解析依赖

假如HTML主文件要依赖多个导入文件，而且导入文件中含有相同的库，这时会怎样呢？例如，你要从导入文件中加载jQuery，如果每个导入文件都含有加载jQuery的script标签，那么jQuery就会被加载两次，并且也会被执行两次。

index.html

XML/HTML Code复制内容到剪贴板

<link rel="import" href="component1.html">
<link rel="import" href="component2.html">

component1.html

XML/HTML Code复制内容到剪贴板

<script src="js/jquery.js"></script>

component2.html

HTML导入自动帮你解决了这个问题。

与加载两次script标签的做法不同，HTML 导入对已经加载过的HTML文件不再进行加载和执行。以前面的代码为例，通过将加载jQuery的script标签打包成一个HTML导入文件，这样jQuery就只被加载和执行一次了。

但这还有一个问题：我们增加了一个要加载的文件。怎么处理数目膨胀的文件呢？幸运的是，我们有一个叫vulcanize的工具来解决这个问题。
合并网络请求

Vulcanize 能将多个HTML文件合并成一个文件，从而减少了网络连接数。你可以借助npm安装它，并且用命令行来使用它。你可能也在用 grunt和gulp 托管一些任务，这样的话你可以把vulcanize作为构建过程的一部分。

为了解析依赖以及合并index.html中的导入文件，使用如下命令：

复制代码

代码如下:

$ vulcanize -o vulcanized.html index.html

通过执行这个命令，index.html中的依赖会被解析，并且会产生一个合并的HTML文件，称作 vulcanized.html。学习更多有关vulcanize的知识，请看这儿。

注意：http2的服务器推送功能被考虑用于以后消除文件的连结与合并。
把Template、Shadow DOM、自定义元素跟HTML导入结合起来

让我们对这个文章系列的代码使用HTML导入。你之前可能没有看过这些文章，我先解释一下：Template可以让你用声明的方式定义你的自定义元素的内容。Shadow DOM可以让一个元素的style、ID、class只作用到其本身。自定义元素可以让你自定义HTML标签。通过把这些跟HTML导入结合起来，你自定义的web 组件会变得模块化，具有复用性。任何人添加一个Link标签就可以使用它。

x-component.html

XML/HTML Code复制内容到剪贴板

<template id="template">
  <style>
    ...   
  </style>
  <p id="container">
    <img src="http://webcomponents.org/img/logo.svg">
    <content select="h1"></content>
  </p>
</template>
<script>
  // This element will be registered to index.html   
  // Because `document` here means the one in index.html   
  var XComponent = document.registerElement(&#39;x-component&#39;, {   
    prototype: Object.create(HTMLElement.prototype, {   
      createdCallback: {   
        value: function() {   
          var root = this.createShadowRoot();   
          var template = document.querySelector(&#39;#template&#39;);   
          var clone = document.importNode(template.content, true);   
          root.appendChild(clone);   
        }   
      }   
    })   
  });   
</script>

index.html

XML/HTML Code复制内容到剪贴板

...   
  <link rel="import" href="x-component.html">
</head>
<body>
  <x-component>
    <h1>This is Custom Element</h1>
  </x-component>
  ...

注意，因为x-component.html 中的document 对象跟index.html的一样，你没必要再写一些棘手的代码，它会自动为你注册。
支持的浏览器

Chrome 和 Opera提供对HTML导入的支持，Firefox要在2014年12月后才支持（Mozilla表示Firefox不计划在近期提供对HTML导入的支持，声称需要首先了解ES6的模块是怎样实现的）。

你可以去chromestatus.com或caniuse.com查询浏览器是否支持HTML导入。想要在其他浏览器上使用HTML导入，可以用webcomponents.js（原名platform.js）。

HTML5의 파일 가져오기에 대한 간략한 소개

관련 기사