Brief Introduction to File Import in HTML5,

Brief Introduction to File Import in HTML5,
This article briefly introduces File Import in HTML, including loading jQuery and execution sequence after import. For more information, see

Template, Shadow DOM, and Custom Elements make it easier to create a UI component than before. However, resources such as HTML, CSS, and JavaScript still need to be loaded one by one, which is inefficient.

It is not easy to delete duplicate dependencies. For example, to load jQuery UI or Bootstrap, you need to add a separate tag for JavaScript, CSS, and Web Fonts. If your Web component application has multiple dependencies, it will become more complicated.

HTML import allows you to load these resources with a merged HTML file.
Import using HTML

To load an HTML file, you need to add a link tag. The rel attribute is import, and the herf attribute is the path of the HTML file. For example, if you want to migrate component.htmlto index.html:

Index.html
 

Copy XML/HTML Code to clipboard

1. <Link rel = "import" href = "component.html">

You can import files to HTML. (This article translates "the imported HTML" into "HTML import file" and translates "the original HTML" into "HTML main file ". For example, index.html is the main HTML file, and component.html is the HTML import file .) Adding any resources, including scripts, style sheets, and fonts, is the same as adding resources to common HTML.

Component.html
 

Copy XML/HTML Code to clipboard

1. <Link rel = "stylesheet" href = "css/style.css">
2. <Script src = "js/script. js"> </script>

Doctype, html, head, and body labels are not required. HTML import will immediately load the documents to be imported, parse the resources in the documents, and execute them immediately if there are scripts.
Execution sequence

The browser parses HTML documents in a linear manner, which means that the script at the top of the HTML will be executed first than the script at the bottom. In addition, the browser will not parse the subsequent code until the JavaScript code is executed.

To prevent the script from interfering with HTML Rendering, you can add the async or defer attribute to the tag (or you can place the script tag at the bottom of the page ). The defer attribute will delay script execution until all pages are parsed. The async attribute allows the browser to execute scripts asynchronously without interfering with HTML rendering. How does HTML import work?

The scripts in the HTML import file are the same as those containing the defer attribute. For example, in the following example, index.html executes script1.js and script2.js before executing script3.js.

Index.html
 

Copy XML/HTML Code to clipboard

1. <Link rel = "import" href = "component.html"> // 1.
2. <Title> Import Example </title>
3. <Script src = "script3.js"> </script> // 4.

Component.html
 

Copy XML/HTML Code to clipboard

1. <Script src = "js/script1.js"> </script> // 2.
2. <Script src = "js/script2.js"> </script> // 3.

1.compile component.html in index.html and wait for execution

2.execute script1.js in component.html

3.after script1.jsis executed, execute script2.js in component.html.

4. Execute script2.jsand execute script3.js in index.html.

Note: If you add the async attribute to link [rel = "import"], HTML import treats it as a script containing the async attribute. It does not wait for the execution and loading of HTML import files, which means that HTML import does not prevent rendering of the main HTML file. This also makes it possible to improve the website performance, unless other scripts depend on the execution of HTML import files.
Cross-origin Import

Basically, HTML import cannot import resources from other domain names.

For example, you cannot import HTML files from http://webcomponents.org/to http://example.com. CORS can be used to bypass this restriction ). For more information about CORS, see this article.
Window and document objects in HTML import files

I mentioned earlier that the script in the HTML file will be executed when the HTML file is imported, but this does not mean that the labels in the HTML file will be rendered by the browser. You need to write some JavaScript code for help.

When JavaScript is used in HTML import files, it is important to note that the document object in the HTML import file actually refers to the document object in the main HTML file. Taking the preceding Code as an example, both index.html and component.html refer to the document object of index.html. How can I use HTML to import the document in a file? Use the import attribute in link.

Index.html
 

Copy XML/HTML Code to clipboard

1. Var link = document. querySelector ('link [rel = "import"] ');
2. Link. addEventListener ('load', function (e ){
3. Var importedDoc = link. import;
4. // ImportedDoc points to the document under component.html
5. });

To obtain the document Object in component.html, use document. currentScript. ownerDocument.

Component.html
 

Copy XML/HTML Code to clipboard

1. Var mainDoc = document. currentScript. ownerDocument;
2. // MainDoc points to the document under component.html

If you are using webcomponents. js, use document. _ currentScript instead of document. currentScript. Underlines are used to fill in the currentScript attribute, because not all browsers support this attribute.

Component.html

 

Copy XML/HTML Code to clipboard

1. Var mainDoc = document. _ currentScript. ownerDocument;
2. // MainDoc points to the document under component.html

With the code starting from the beginning, you can easily upload the document Object in component.html, regardless of whether the browser supports HTML import.

Document. _ currentScript = document. _ currentScript | document. currentScript;
Performance Considerations

One advantage of HTML import is that it can organize resources, but it also means that when loading these resources, the header becomes too large due to the use of some additional HTML files. There are several considerations:
Parse dependency

What if the main HTML file depends on multiple import files and the import file contains the same library? For example, if you want to load jQuery from the import file, if each import file contains the script tag that loads jQuery, jQuery will be loaded twice and executed twice.

Index.html
 

Copy XML/HTML Code to clipboard

1. <Link rel = "import" href = "component1.html">
2. <Link rel = "import" href = "component2.html">

Component1.html
 

Copy XML/HTML Code to clipboard

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

Component2.html
 
HTML import automatically solves this problem.

Unlike loading two script tags, HTML import does not load or execute HTML files that have already been loaded. The previous code is used as an example. by packaging the script tag loaded with jQuery into an HTML import file, jQuery is loaded and executed only once.

But there is another problem: we have added a file to be loaded. How can we deal with the expanded number of files? Fortunately, we have a tool named vulcanize to solve this problem.
Merge network requests

Vulcanize can combine multiple HTML files into one file, reducing the number of network connections. You can install it with npm and use it with the command line. You may also be using grunt and gulp to host some tasks, so that you can use vulcanize as part of the build process.

To merge the dependencies and import files in index.html, run the following command:


The Code is as follows: $ vulcanize-o vulcanized.html index.html

By executing this command, the dependencies in index.html will be parsed and a merged HTML file will be generated, called vulcanized.html. For more information about vulcanize, see here.

Note: The server push function of http2 is used to remove the link and merge of files in the future.
Combine Template, Shadow DOM, custom elements and HTML Import

Let's use HTML to import the code in this article series. You may not have read these articles before. Let me explain: Template allows you to define the content of your custom element in Declaration. Shadow DOM allows the style, ID, and class of an element to only act on itself. Custom elements allow you to customize HTML tags. By combining these with HTML imports, your custom web components become modular and reusable. Anyone who adds a Link tag can use it.

X-component.html

 

Copy XML/HTML Code to clipboard

1. <Template id = "template">
2. <Style>
3. ...
4. </Style>
5. <Div id = "container">
7. <Content select = "h1"> </content>
8. </Div>
9. </Template>
10. <Script>
11. // This element will be registered to index.html
12. // Because 'document' here means the one in index.html
13. Var XComponent = document. registerElement ('x-component ',{
14. Prototype: Object. create (HTMLElement. prototype ,{
15. CreatedCallback :{
16. Value: function (){
17. Var root = this. createShadowRoot ();
18. Var template = document. querySelector ('# template ');
19. Var clone = document. importNode (template. content, true );
20. Root. appendChild (clone );
21. }
22. }
23. })
24. });
25. </Script>

Index.html
 

Copy XML/HTML Code to clipboard

1. ...
2. <Link rel = "import" href = "x-component.html">
3. </Head>
4. <Body>
5. <X-component>
6. <H1> This is M Element
7. </X-component>
8. ...

Because the document Object in x-component.html is the same as that in index.html, you do not have to write some tricky code and it will automatically register for you.
Supported browsers

Chrome and Opera provide support for HTML import, and Firefox will not be supported until December 2014 (Mozilla says Firefox does not plan to provide support for HTML import in the near future, claims that we need to first understand how ES6's modules are implemented ).

You can go to chromestatus.com or caniuse.com to check whether the browser supports HTML import. To use HTML for import in other browsers, you can use webcomponents. js (formerly platform. js ).
Related Resources

HTML import introduces so much. If you want to learn