html import html页面,HTML5 之 Imports

常见的HTML加载方式 和当前页面进行交互的CSS Javascript书写困难

Ajax xhr.responseType="document

用字符串的形式嵌入界面, 像注释一样隐藏

HTML5 提供了新的方法 Imports

通过声明 来在页面中包含一个导入导入的 MIME 类型是 text/html。

导入跨域资源需要启用 CORS

来自相同 URL 的导入仅获取和解析一次。这表示导入中的脚本只在第一次导入的时候执行。

导入中的脚本按 顺序自动执行，它们 不会阻塞主页面解析。

导入链接不代表 #把内容添加到这里。它代表 解析器，去把这个文档取过来，我一会要用。脚本在导入期间运行，而样式，标记，还有其他资源需要明确的加入到主页面中。这是 HTML 导入和 之间的最大区别，后者表示 "在这里加载并渲染资源"。

Load/error 事件

function handleLoad(e) {    console.log('Loaded import: ' + e.target.href);

}  function handleError(e) {    console.log('Error loading import: ' + e.target.href);

}// 动态的创建导入var link = document.createElement('link');

link.rel = 'import';

link.href = 'file.html'link. = function(e) {...};

link. = function(e) {...};document.head.appendChild(link);

使用导入中的内容

导入的内容不在主文档中, 仅仅作为主文档附属存在

导入的内容var content = document.querySelector('link[rel="import"]').import;

使用导入内容的DOM元素var test = content.querySelector('.test');

使用导入内容的样式表var styles = content.querySelector('link[rel="stylesheet"]');  document.head.appendChild(styles.cloneNode(true));

兼容性

Can I use显示, 目前只有Chrome Opera支持, 可以使用Polyfill来兼容// 原生兼容性检测代码function supportsImports() {  return 'import' in document.createElement('link');

}if (supportsImports()) {  // 支持导入!} else {  // 使用其他的库来加载文件。}

imports 的应用

打包资源引入

只需要引入一个HTML文件, 在该文件上引入各种打包资源, 理论上可以在页面导入一个完整的web应用

a.html...

...

主文件中引入

  

代码模块化 复用性

按逻辑将代码划分为不同的文件进行导入

管理依赖 自动解决资源重复加载

加快脚本进度

没有导入之前，一个大型的 JS 库需要在使用前全部解析，这通常很慢。有了导入，只要块 A 解析完毕，库就能够立即使用。延迟更少了！:...

CustomElements 的导入

自定义元素自动注册, web组件化的良好实践, 接口/定义与使用分离

// 定义并注册 。

var proto = Object.create(HTMLElement.prototype);

proto.createdCallback = function() {    this.innerHTML = 'Hello, ' + (this.getAttribute('name') || '?') + '';

};  document.register('say-hi', {prototype: proto});  // 定义并注册使用了 Shadow DOM 的 。

var proto2 = Object.create(HTMLElement.prototype);

proto2.createdCallback = function() {    var root = this.createShadowRoot();

root.innerHTML = "" +                     "I'm a " + this.localName +                     " using Shadow DOM!";

};  document.register('shadow-element', {prototype: proto2});

( I'm in the light dom )

性能注意事项合并导入

导入影响浏览器缓存(导入的资源也可以被缓存)

内容只有在被添加后才是可用的(在导入文档中直接 "运行" 的只有

优化异步载入(避免阻塞)

并行HTML解析

调试和非调试模式迅速切换, 只需要修改导入目标

参考

作者：KeKeMars

链接：https://www.jianshu.com/p/7ac5191e608f