常見(jiàn)的HTML加載方式
-
<iframe>和當(dāng)前頁(yè)面進(jìn)行交互的CSSJavascript書(shū)寫(xiě)困難 -
Ajaxxhr.responseType="document - 用字符串的形式嵌入界面, 像注釋一樣隱藏
HTML5 提供了新的方法 Imports
通過(guò)聲明<link rel="import"> 來(lái)在頁(yè)面中包含一個(gè)導(dǎo)入
- 導(dǎo)入的
MIME類型是text/html。 - 導(dǎo)入跨域資源需要啟用
CORS - 來(lái)自相同
URL的導(dǎo)入僅獲取和解析一次。這表示導(dǎo)入中的腳本只在第一次導(dǎo)入的時(shí)候執(zhí)行。 - 導(dǎo)入中的腳本按 順序自動(dòng)執(zhí)行，它們 不會(huì)阻塞主頁(yè)面解析。
- 導(dǎo)入鏈接不代表 #把內(nèi)容添加到這里。它代表 解析器，去把這個(gè)文檔取過(guò)來(lái)，我一會(huì)要用。腳本在導(dǎo)入期間運(yùn)行，而樣式，標(biāo)記，還有其他資源需要明確的加入到主頁(yè)面中。
這是 HTML 導(dǎo)入和 <iframe> 之間的最大區(qū)別，后者表示 "在這里加載并渲染資源"。
Load/error 事件
<script async>
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)">
// 動(dòng)態(tài)的創(chuàng)建導(dǎo)入
var link = document.createElement('link');
link.rel = 'import';
link.href = 'file.html'
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);
使用導(dǎo)入中的內(nèi)容
導(dǎo)入的內(nèi)容不在主文檔中, 僅僅作為主文檔附屬存在
導(dǎo)入的內(nèi)容
var content = document.querySelector('link[rel="import"]').import;
使用導(dǎo)入內(nèi)容的DOM元素
var test = content.querySelector('.test');
使用導(dǎo)入內(nèi)容的樣式表
var styles = content.querySelector('link[rel="stylesheet"]');
document.head.appendChild(styles.cloneNode(true));
兼容性
Can I use顯示, 目前只有Chrome Opera支持, 可以使用Polyfill來(lái)兼容
// 原生兼容性檢測(cè)代碼
function supportsImports() {
return 'import' in document.createElement('link');
}
if (supportsImports()) {
// 支持導(dǎo)入!
} else {
// 使用其他的庫(kù)來(lái)加載文件。
}
imports 的應(yīng)用
打包資源引入
只需要引入一個(gè)HTML文件, 在該文件上引入各種打包資源, 理論上可以在頁(yè)面導(dǎo)入一個(gè)完整的web應(yīng)用
a.html
<link rel="stylesheet" href="a.css">
<script src="a.js"></script>
...
<!-- 腳手架標(biāo)記 -->
<template>
...
</template>
主文件中引入
<head>
<link rel="import" href="a.html">
</head>
代碼模塊化 復(fù)用性
按邏輯將代碼劃分為不同的文件進(jìn)行導(dǎo)入
管理依賴 自動(dòng)解決資源重復(fù)加載
加快腳本進(jìn)度
沒(méi)有導(dǎo)入之前，一個(gè)大型的 JS 庫(kù)需要在使用前全部解析，這通常很慢。有了導(dǎo)入，只要塊 A 解析完畢，庫(kù)就能夠立即使用。延遲更少了！
<link rel="import" href="chunks.html">:
<script>/* script chunk A goes here */</script>
<script>/* script chunk B goes here */</script>
<script>/* script chunk C goes here */</script>
...
CustomElements 的導(dǎo)入
自定義元素自動(dòng)注冊(cè), web組件化的良好實(shí)踐, 接口/定義與使用分離
<script>
// 定義并注冊(cè) <say-hi>。
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
this.innerHTML = 'Hello, <b>' + (this.getAttribute('name') || '?') + '</b>';
};
document.register('say-hi', {prototype: proto});
// 定義并注冊(cè)使用了 Shadow DOM 的 <shadow-element>。
var proto2 = Object.create(HTMLElement.prototype);
proto2.createdCallback = function() {
var root = this.createShadowRoot();
root.innerHTML = "<style>::content > *{color: red}</style>" +
"I'm a " + this.localName +
" using Shadow DOM!<content></content>";
};
document.register('shadow-element', {prototype: proto2});
</script>
<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>
性能注意事項(xiàng)
- 合并導(dǎo)入
- 導(dǎo)入影響瀏覽器緩存(導(dǎo)入的資源也可以被緩存)
- 內(nèi)容只有在被添加后才是可用的(在導(dǎo)入文檔中直接 "運(yùn)行" 的只有
<script>) - 優(yōu)化異步載入(避免阻塞)
