Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to understand the file import in HTML5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Template, Shadow DOM, and Custom Elements make it easier than ever to create UI components. But resources like HTML, CSS, and JavaScript still need to be loaded one by one, which is very inefficient.

It is not easy to delete duplicate dependencies. For example, loading jQuery UI or Bootstrap now requires adding separate tags for JavaScript, CSS, and Web Fonts. If your Web component applies multiple dependencies, things get more complicated.

The HTML import allows you to load these resources as a merged HTML file.

Import using HTML

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

Index.html

XML/HTML Code copies content to the clipboard

You can import files into HTML (translator's note: this article translates "the imported HTML" into "HTML import file" and "the original HTML" into "HTML master file". For example, index.html is the HTML master file and component.html is the HTML import file. Add any resources, including scripts, stylesheets, and fonts, just like adding resources to a normal HTML

Component.html

XML/HTML Code copies content to the clipboard

Doctype, html, head, body tags are not required. The HTML import loads the document to be imported immediately, parses the resources in the document, and executes them immediately if there is a script.

Execution sequence

The way browsers parse HTML documents is linear, which means that the script at the top of the HTML is executed before the bottom. Also, browsers usually wait until the JavaScript code is executed before parsing the rest of the code.

To prevent script from interfering with HTML rendering, you can add an async or defer attribute to the tag (or you can put the script tag at the bottom of the page). The defer attribute delays the execution of the script until all pages are parsed. The async property lets the browser execute the script asynchronously so that it does not interfere with HTML rendering. So how does HTML import work?

The script in the HTML import file is just as if it contains the defer attribute. For example, in the following example, index.html executes script1.js and script2.js before script3.js.

Index.html

XML/HTML Code copies content to the clipboard

/ / 1.

Import Example

/ / 4.

Component.html

XML/HTML Code copies content to the clipboard

/ / 2.

/ / 3.

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

two。 Execute script1.js in component.html

3. Execute script2.js in component.html after script1.js execution

4. Execute script2.js and then execute script3.js in index.html

Note that if you add an async attribute to link [rel = "import"], the HTML import treats it as if it were a script with the async attribute. It does not wait for the HTML import file to execute and load, which means that the HTML import does not interfere with the rendering of the HTML master file. This also makes it possible to improve the performance of the site unless there are other scripts that rely on the execution of the HTML import file.

Cross-domain import

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

For example, you cannot import HTML files from http://webcomponents.org/ to http://example.com/. To get around this limitation, you can use CORS (cross-domain resource sharing). To learn more about CORS, please read this article.

HTML imports window and document objects in the file

I mentioned earlier that the script will be executed when importing the HTML file, but that doesn't mean that the tags in the HTML import file will also be rendered by the browser. You need to write some JavaScript code to help.

When using JavaScript in an HTML import file, one thing to be aware of is that the document object in the HTML import file actually refers to the document object in the HTML master file. Taking the previous code as an example, the document of index.html and component.html both refer to the document object of index.html. How can I use HTML to import document in a file? With the import attribute in link.

Index.html

XML/HTML Code copies content to the clipboard

Var link = document.querySelector ('linkrel = "import"]')

Link.addEventListener ('load', function (e) {

Var importedDoc = link.import

/ / importedDoc points to the document under component.html

});

To get the document object in component.html, use document.currentScript.ownerDocument. Exe.

Component.html

XML/HTML Code copies content to the clipboard

Var mainDoc = document.currentScript.ownerDocument

/ / mainDoc points to the document under component.html

If you are using webcomponents.js, use document._currentScript instead of document.currentScript. The underscore is used to populate the currentScript attribute, because not all browsers support it.

Component.html

XML/HTML Code copies content to the clipboard

Var mainDoc = document._currentScript.ownerDocument

/ / mainDoc points to the document under component.html

By adding the following code at the beginning of the script, you can easily access the document object in component.html, regardless of whether the browser supports HTML import.

Document._currentScript = document._currentScript | | document.currentScript

Performance considerations

One of the benefits of using HTML imports is the ability to 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 points to consider:

Analytic dependence

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

Index.html

XML/HTML Code copies content to the clipboard

Component1.html

XML/HTML Code copies content to the clipboard

Component2.html

HTML import automatically helps you solve this problem.

Unlike loading script tags twice, HTML imports no longer load and execute HTML files that have already been loaded. In the previous code, for example, by packaging the script tag that loaded the jQuery into an HTML import file, the jQuery is loaded and executed only once.

But there is another problem: we have added a file to load. How to deal with the inflated number of documents? Fortunately, we have a tool called vulcanize to solve this problem.

Merge network requests

Vulcanize can combine multiple HTML files into a single file, thus reducing the number of network connections. You can install it with npm and use it from the command line. You may also be hosting some tasks with grunt and gulp, so you can use vulcanize as part of the build process.

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

The code is as follows:

$vulcanize-o vulcanized.html index.html

By executing this command, the dependencies in index.html are resolved and a merged HTML file called vulcanized.html is generated. To learn more about vulcanize, please see here.

Note: http2's server push feature is considered for later unlinking and merging of files.

Combine Template, Shadow DOM, custom elements and HTML import

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

X-component.html

XML/HTML Code copies content to the clipboard

...

/ / This element will be registered to index.html

/ / Because `document` here means the one in index.html

Var XComponent = document.registerElement ('x Mustang, {

Prototype: Object.create (HTMLElement.prototype, {

CreatedCallback: {

Value: function () {

Var root = this.createShadowRoot ()

Var template = document.querySelector ('# template')

Var clone = document.importNode (template.content, true)

Root.appendChild (clone)

}

}

})

});

Index.html

XML/HTML Code copies content to the clipboard

...

This is Custom Element

...

Note that because the document object in x-component.html is the same as index.html, you don't have to write any more tricky code, it will automatically register for you.

Supported browsers

Chrome and Opera provide support for HTML import, while Firefox will not support it until December 2014. (Mozilla said that Firefox does not plan to provide support for HTML import in the near future, saying that it needs to know how the module of ES6 is implemented first.)

You can go to chromestatus.com or caniuse.com to check whether the browser supports HTML import. If you want to use HTML import on other browsers, you can use webcomponents.js (formerly platform.js).

This is the end of the content of "how to understand File Import in HTML5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.