Web için dahil etme
Neden içe aktarma?
Web'de farklı türde kaynakları nasıl yüklediğinizi düşünün. JS için <script src>
'e sahibiz. CSS için muhtemelen <link rel="stylesheet">
'ü tercih edersiniz. Görseller için <img>
. Videoda <video>
var. Ses, <audio>
… Konuya girin. Web'deki içeriğin büyük bir kısmı, kendisini yüklemenin basit ve açık bir yoluna sahiptir. HTML için durum böyle değildir. Seçenekleriniz şunlardır:
<iframe>
: Etkisi kanıtlanmış ancak ağır bir yöntemdir. Bir iFrame'in içeriği tamamen sayfanızdan ayrı bir bağlamda bulunur. Bu genellikle harika bir özellik olsa da ek zorluklar yaratır (çerçevenin boyutunu içeriğine göre küçültmek zordur, içeriğe/içeriğin dışına komut dosyası eklemek son derece can sıkıcıdır, stil vermek neredeyse imkansızdır).- AJAX:
xhr.responseType="document"
'ı seviyorum ancak HTML yüklemek için JS'ye ihtiyacım olduğunu mu söylüyorsunuz? Bu doğru değil. - CrazyHacks™: Dizelere yerleştirilmiş, yorum olarak gizlenmiş (ör.
<script type="text/html">
). İğrenç!
Buradaki ironiyi görüyor musunuz? Web'in en temel içeriği olan HTML ile çalışmak için en fazla çabayı göstermeniz gerekir. Neyse ki Web Bileşenleri sayesinde bu yoldan sapmadan ilerleyebiliriz.
Başlarken
Web Bileşenleri grubunun bir parçası olan HTML içe aktarma, HTML dokümanlarını diğer HTML dokümanlarına dahil etmenin bir yoludur. İşaretlemeyle de sınırlı değilsiniz. İçe aktarma işlemi CSS, JavaScript veya .html
dosyasının içerebileceği başka öğeler de içerebilir. Diğer bir deyişle, içe aktarma işlemi ilgili HTML/CSS/JS'yi yüklemek için mükemmel bir araçtır.
Temel bilgiler
<link rel="import">
tanımlayarak sayfanıza bir içe aktarma işlemi ekleyin:
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
İçe aktarma işleminin URL'sine içe aktarma konumu denir. Başka bir alandan içerik yüklemek için içe aktarma konumunun CORS'u etkinleştirmesi gerekir:
<!-- Resources on other origins must be CORS-enabled. -->
<link rel="import" href="http://example.com/elements.html">
Özellik algılama ve desteği
Desteği algılamak için <link>
öğesinde .import
öğesinin bulunup bulunmadığını kontrol edin:
function supportsImports() {
return 'import' in document.createElement('link');
}
if (supportsImports()) {
// Good to go!
} else {
// Use other libraries/require systems to load files.
}
Tarayıcı desteği henüz yeni kullanıma sunuldu. Chrome 31, ES modüllerinin kullanıldığı ilk tarayıcı oldu ancak diğer tarayıcı tedarikçileri, ES modüllerinin nasıl kullanılacağını görmek için bekliyor. Ancak diğer tarayıcılarda, yaygın olarak desteklenene kadar webcomponents.js polyfill mükemmel çalışır.
Kaynakları paketleme
İçe aktarma işlemleri, HTML/CSS/JS'yi (hatta diğer HTML içe aktarma işlemlerini) tek bir yayın öğesinde bir araya getirmeye yönelik bir kural sağlar. Bu, temel bir özelliktir ancak oldukça güçlüdür. Bir tema veya kitaplık oluşturuyorsanız ya da uygulamanızı mantıksal parçalara ayırmak istiyorsanız kullanıcılara tek bir URL vermek ilgi çekici olabilir. Hatta içe aktarma işlemiyle bir uygulamanın tamamını bile yayınlayabilirsiniz. Bunu bir an için düşünün.
Gerçek hayattan bir örnek olarak Bootstrap'u verebiliriz. Bootstrap, ayrı dosyalardan (bootstrap.css, bootstrap.js, yazı tipleri) oluşur, eklentileri için JQuery'yi gerektirir ve işaretleme örnekleri sağlar. Geliştiriciler, alakart esnekliği sever. Bu sayede, kendileri kullanmak istedikleri çerçeve bölümlerini satın alabilirler. Bununla birlikte, ortalama bir JoeDeveloper™'ın kolay yolu tercih edip Bootstrap'un tamamını indireceğini tahmin ediyorum.
Bootstrap gibi bir şey için içe aktarma işlemi çok mantıklı. Bootstrap'u yüklemenin geleceğini sunuyoruz:
<head>
<link rel="import" href="bootstrap.html">
</head>
Kullanıcıların tek yapması gereken bir HTML İçe Aktarma bağlantısı yüklemektir. Dosyaları farklı yerlere dağıtmak zorunda kalmaz. Bunun yerine, Bootstrap'un tamamı yönetilir ve bootstrap.html adlı bir içe aktarma dosyasına yerleştirilir:
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>
...
<!-- scaffolding markup -->
<template>
...
</template>
Bu işlemin tamamlanmasını bekleyin. Bu heyecan verici bir konu.
Yükleme/hata etkinlikleri
<link>
öğesi, içe aktarma işlemi başarıyla yüklendiğinde load
etkinliği, deneme başarısız olduğunda (ör. kaynak 404 hatası verdiğinde) ise onerror
etkinliği tetikler.
İçe aktarma işlemleri hemen yüklenmeye çalışılır. Baş ağrısı yaşamamak için onload
/onerror
özelliklerini kullanmak kolay bir yoldur:
<script>
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)">
İçe aktarma işlemini dinamik olarak oluşturuyorsanız:
var link = document.createElement('link');
link.rel = 'import';
// link.setAttribute('async', ''); // make it async!
link.href = 'file.html';
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);
İçeriği kullanma
Bir sayfaya içe aktarma işlemi eklemek, "bu dosyanın içeriğini buraya ekleyin" anlamına gelmez. Bu, "ayrıştırıcı, bu belgeyi alıp kullanabilmem için getir" anlamına gelir. İçeriği gerçekten kullanmak için işlem yapmanız ve komut dosyası yazmanız gerekir.
İçe aktarmanın yalnızca bir doküman olduğunu fark etmek kritik bir aha!
andır. Aslında, içe aktarma işleminin içeriğine içe aktarma dokümanı adı verilir. Standart DOM API'lerini kullanarak içe aktarma işleminin temel öğelerini değiştirebilirsiniz.
link.import
İçe aktarılan içeriğe erişmek için bağlantı öğesinin .import
mülkünü kullanın:
var content = document.querySelector('link[rel="import"]').import;
link.import
, aşağıdaki koşullar altında null
'tır:
- Tarayıcı, HTML içe aktarma işlemlerini desteklemiyor.
<link>
'terel="import"
yok.<link>
, DOM'a eklenmemiştir.<link>
, DOM'den kaldırıldı.- Kaynak CORS'u desteklemiyor.
Tam örnek
warnings.html
şunu içerdiğini varsayalım:
<div class="warning">
<style>
h3 {
color: red !important;
}
</style>
<h3>Warning!
<p>This page is under construction
</div>
<div class="outdated">
<h3>Heads up!
<p>This content may be out of date
</div>
İçe aktarıcılar bu dokümanın belirli bir bölümünü alıp sayfalarına klonlayabilir:
<head>
<link rel="import" href="warnings.html">
</head>
<body>
...
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// Grab DOM from warning.html's document.
var el = content.querySelector('.warning');
document.body.appendChild(el.cloneNode(true));
</script>
</body>
İçe aktarma işlemlerinde komut dosyası çalıştırma
İçe aktarılan öğeler ana dokümanda yer almıyor. Bunlar uydu gibidir. Ancak ana doküman birincil olsa bile içe aktardığınız doküman ana sayfada çalışmaya devam edebilir. İçe aktarılan öğe, kendi DOM'una ve/veya kendisini içe aktaran sayfanın DOM'una erişebilir:
Örnek: Stil sayfalarından birini ana sayfaya ekleyen import.html
<link rel="stylesheet" href="http://www.example.com/styles.css">
<link rel="stylesheet" href="http://www.example.com/styles2.css">
<style>
/* Note: <style> in an import apply to the main
document by default. That is, style tags don't need to be
explicitly added to the main document. */
#somecontainer {
color: blue;
}
</style>
...
<script>
// importDoc references this import's document
var importDoc = document.currentScript.ownerDocument;
// mainDoc references the main document (the page that's importing us)
var mainDoc = document;
// Grab the first stylesheet from this import, clone it,
// and append it to the importing document.
var styles = importDoc.querySelector('link[rel="stylesheet"]');
mainDoc.head.appendChild(styles.cloneNode(true));
</script>
Burada neler olduğunu fark edin. İçe aktarma işleminin içindeki komut dosyası, içe aktarılan dokümana (document.currentScript.ownerDocument
) referans verir ve bu dokümanın bir kısmını içe aktarma sayfasına (mainDoc.head.appendChild(...)
) ekler. Bana sorarsanız oldukça karmaşık bir durum.
İçe aktarma işleminde JavaScript kuralları:
- İçe aktarma işlemindeki komut dosyası, içe aktarma işlemini yapan
document
öğesini içeren pencere bağlamında yürütülür. Dolayısıylawindow.document
, ana sayfa dokümanıdır. Bunun iki yararlı sonucu vardır:- işlevleri
window
'te sona erer. - İçe aktarma işleminin
<script>
bloklarını ana sayfaya eklemek gibi zor bir işlem yapmanız gerekmez. Komut dosyası tekrar yürütülür.
- işlevleri
- İçe aktarma işlemleri, ana sayfanın ayrıştırılmasını engellemez. Ancak içindeki komut dosyaları sırayla işlenir. Bu sayede, komut dosyası sırasını korurken erteleme benzeri bir davranış elde edersiniz. Bu konu hakkında daha fazla bilgiyi aşağıda bulabilirsiniz.
Web bileşenlerini yayınlama
HTML içe aktarma özelliğinin tasarımı, web'de yeniden kullanılabilir içerik yüklemek için idealdir. Özellikle Web Bileşenleri'ni dağıtmak için ideal bir yöntemdir. Temel HTML <template>
'lerden Shadow DOM ile tam teşekküllü Özel Öğeler'e kadar her şey [1, 2, 3]. Bu teknolojiler birlikte kullanıldığında içe aktarma işlemleri Web Bileşenleri için bir #include
olur.
Şablonları dahil etme
HTML şablonu öğesi, HTML içe aktarma işlemleri için idealdir. <template>
, içe aktarıcı uygulamanın istediği gibi kullanabileceği işaretleme bölümlerini oluşturmak için idealdir. İçeriği <template>
içine sarmalamak, kullanılmadığı sürece içeriğin etkin olmaması avantajını da sağlar. Yani komut dosyaları, şablon DOM'a eklenene kadar çalışmaz. Bam!
import.html
<template>
<h1>Hello World!</h1>
<!-- Img is not requested until the <template> goes live. -->
<img src="world.png">
<script>alert("Executed when the template is activated.");</script>
</template>
index.html
<head>
<link rel="import" href="import.html">
</head>
<body>
<div id="container"></div>
<script>
var link = document.querySelector('link[rel="import"]');
// Clone the <template> in the import.
var template = link.import.querySelector('template');
var clone = document.importNode(template.content, true);
document.querySelector('#container').appendChild(clone);
</script>
</body>
Özel öğeleri kaydetme
Özel Öğeler, HTML İçe Aktarmaları ile son derece iyi çalışan başka bir Web Bileşeni teknolojisidir. İçe aktarma işlemleri komut dosyasını yürütebilir. Bu nedenle, kullanıcıların bunu yapmasına gerek kalmaması için özel öğelerinizi tanımlayıp kaydettirebilirsiniz. Buna "otomatik kayıt" diyebiliriz.
elements.html
<script>
// Define and register <say-hi>.
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
this.innerHTML = 'Hello, <b>' +
(this.getAttribute('name') || '?') + '</b>';
};
document.registerElement('say-hi', {prototype: proto});
</script>
<template id="t">
<style>
::content > * {
color: red;
}
</style>
<span>I'm a shadow-element using Shadow DOM!</span>
<content></content>
</template>
<script>
(function() {
var importDoc = document.currentScript.ownerDocument; // importee
// Define and register <shadow-element>
// that uses Shadow DOM and a template.
var proto2 = Object.create(HTMLElement.prototype);
proto2.createdCallback = function() {
// get template in import
var template = importDoc.querySelector('#t');
// import template into
var clone = document.importNode(template.content, true);
var root = this.createShadowRoot();
root.appendChild(clone);
};
document.registerElement('shadow-element', {prototype: proto2});
})();
</script>
Bu içe aktarma işlemi, <say-hi>
ve <shadow-element>
olmak üzere iki öğe tanımlar (ve kaydeder). İlk örnekte, kendisini içe aktarma işlemine kaydeden temel bir özel öğe gösterilmektedir. İkinci örnekte, bir <template>
öğesinden gölge DOM oluşturan ve ardından kendisini kaydeden özel bir öğenin nasıl uygulanacağı gösterilmektedir.
Özel öğeleri HTML içe aktarma işlemine kaydetmenin en iyi yanı, içe aktarıcının öğenizi kendi sayfasında tanımlaması yeterli olmasıdır. Kablolama gerekmez.
index.html
<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>
Bana göre, yalnızca bu iş akışı HTML içe aktarma işlemlerini web bileşenlerini paylaşmak için ideal bir yöntem haline getiriyor.
Bağımlılıkları ve alt içe aktarma işlemlerini yönetme
Alt içe aktarmalar
Bir içe aktarma işleminin başka bir içe aktarma işlemini içermesi yararlı olabilir. Örneğin, başka bir bileşeni yeniden kullanmak veya genişletmek istiyorsanız diğer öğeleri yüklemek için içe aktarma işlemi kullanın.
Aşağıda, Polymer'den gerçek bir örnek verilmiştir. Bir düzen ve seçici bileşenini yeniden kullanan yeni bir sekme bileşenidir (<paper-tabs>
). Bağımlılıklar, HTML içe aktarma işlemleri kullanılarak yönetilir.
paper-tabs.html (basitleştirilmiş):
<link rel="import" href="iron-selector.html">
<link rel="import" href="classes/iron-flex-layout.html">
<dom-module id="paper-tabs">
<template>
<style>...</style>
<iron-selector class="layout horizonta center">
<content select="*"></content>
</iron-selector>
</template>
<script>...</script>
</dom-module>
Uygulama geliştiriciler bu yeni öğeyi şu platformları kullanarak içe aktarabilir:
<link rel="import" href="paper-tabs.html">
<paper-tabs></paper-tabs>
Gelecekte daha iyi bir <iron-selector2>
çıktığında <iron-selector>
'i değiştirip hemen kullanmaya başlayabilirsiniz. İçe aktarma ve web bileşenleri sayesinde kullanıcılarınızın deneyimini bozmazsınız.
Bağımlılık yönetimi
JQuery'nin sayfa başına bir defadan fazla yüklenmesinin hatalara neden olduğunu hepimiz biliyoruz. Birden fazla bileşen aynı kitaplığı kullandığında bu, Web Bileşenleri için devasa bir sorun olmaz mı? HTML içe aktarma özelliğini kullanırsanız bu sorun yaşanmaz. Bağımlılıkları yönetmek için kullanılabilirler.
Kitaplıkları bir HTML içe aktarma işlemine sarmalayarak kaynakları otomatik olarak tekilleştirirsiniz. Doküman yalnızca bir kez ayrıştırılır. Komut dosyaları yalnızca bir kez yürütülür. Örneğin, JQuery'nin bir kopyasını yükleyen jquery.html adlı bir içe aktarma dosyası tanımladığınızı varsayalım.
jquery.html
<script src="http://cdn.com/jquery.js"></script>
Bu içe aktarma işlemi, sonraki içe aktarma işlemlerinde aşağıdaki gibi yeniden kullanılabilir:
import2.html
<link rel="import" href="jquery.html">
<div>Hello, I'm import 2</div>
ajax-element.html
<link rel="import" href="jquery.html">
<link rel="import" href="import2.html">
<script>
var proto = Object.create(HTMLElement.prototype);
proto.makeRequest = function(url, done) {
return $.ajax(url).done(function() {
done();
});
};
document.registerElement('ajax-element', {prototype: proto});
</script>
Ana sayfa bile, kitaplığa ihtiyacı varsa jquery.html dosyasını içerebilir:
<head>
<link rel="import" href="jquery.html">
<link rel="import" href="ajax-element.html">
</head>
<body>
...
<script>
$(document).ready(function() {
var el = document.createElement('ajax-element');
el.makeRequest('http://example.com');
});
</script>
</body>
jquery.html birçok farklı içe aktarma ağacına dahil edilmiş olsa da tarayıcı, dokümanı yalnızca bir kez getirir ve işler. Ağ panelini inceleyerek bunu doğrulayabilirsiniz:

Performansla ilgili konular
HTML içe aktarma işlemleri kesinlikle harikadır ancak tüm yeni web teknolojilerinde olduğu gibi bunları akıllıca kullanmanız gerekir. Web geliştirmeyle ilgili en iyi uygulamalar geçerliliğini koruyor. Aşağıda, dikkat etmeniz gereken bazı noktalar verilmiştir.
İçe aktarma işlemlerini birleştirme
Ağ isteklerini azaltmak her zaman önemlidir. Çok sayıda üst düzey içe aktarma bağlantınız varsa bunları tek bir kaynakta birleştirip bu dosyayı içe aktarmayı düşünebilirsiniz.
Vulcanize, Polymer ekibi tarafından geliştirilen ve bir dizi HTML içe aktarma işlemini yinelemeli olarak tek bir dosyada düzleştiren bir npm derleme aracıdır. Bunu, Web Bileşenleri için bir birleştirme derleme adımı olarak düşünebilirsiniz.
İçe aktarma işlemleri tarayıcı önbelleğinden yararlanır
Pek çok kişi, tarayıcının ağ yığınının yıllar içinde hassas bir şekilde ayarlandığını unutur. İçe aktarma işlemleri (ve alt içe aktarma işlemleri) de bu mantıktan yararlanır. http://cdn.com/bootstrap.html
içe aktarma işleminde alt kaynaklar olabilir ancak bunlar önbelleğe alınır.
İçerik yalnızca siz eklediğinizde faydalıdır
İçerikleri, hizmetlerini çağırana kadar hareketsiz olarak düşünün. Normal, dinamik olarak oluşturulmuş bir stil sayfasını ele alalım:
var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';
Tarayıcı, link
DOM'a eklenene kadar styles.css dosyasını istemez:
document.head.appendChild(link); // browser requests styles.css
Dinamik olarak oluşturulan işaretleme de bir diğer örnektir:
var h2 = document.createElement('h2');
h2.textContent = 'Booyah!';
h2
, DOM'ye ekleyene kadar nispeten anlamsızdır.
Aynı durum içe aktarma dokümanı için de geçerlidir. İçeriğini DOM'a eklemediğiniz sürece hiçbir işlem yapılmaz. Aslında, içe aktarma belgesinde doğrudan "yürütülen" tek şey <script>
'tür. İçe aktarma işlemlerinde komut dosyası oluşturma başlıklı makaleyi inceleyin.
Senkronize olmayan yükleme için optimizasyon
İçe aktarma işlemleri oluşturmayı engeller
İçe aktarma işlemleri ana sayfanın oluşturulmasını engeller. Bu, <link rel="stylesheet">
işlevinin yaptığına benzer. Tarayıcının stil sayfalarında oluşturmayı engellemesinin nedeni, FOUC'yi en aza indirmektir. Stil sayfaları içerebildikleri için içe aktarılanlar da benzer şekilde davranır.
Tamamen eşzamansız olmak ve ayrıştırıcıyı veya oluşturmayı engellememek için async
özelliğini kullanın:
<link rel="import" href="/path/to/import_that_takes_5secs.html" async>
async
, HTML içe aktarma işlemleri için varsayılan olarak kullanılmıyor çünkü geliştiricilerin daha fazla çalışma yapmasını gerektiriyor. Varsayılan olarak senkronize, içinde özel öğe tanımları bulunan HTML içe aktarma işlemlerinin sırayla yüklenmesinin ve yükseltilmesinin garanti edildiği anlamına gelir. Tamamen eşzamansız bir dünyada geliştiricilerin bu dansı yönetmesi ve zamanlamaları yükseltmesi gerekir.
Ayrıca, dinamik olarak asenkron bir içe aktarma işlemi de oluşturabilirsiniz:
var l = document.createElement('link');
l.rel = 'import';
l.href = 'elements.html';
l.setAttribute('async', '');
l.onload = function(e) { ... };
İçe aktarma işlemleri ayrıştırmayı engellemez
İçe aktarma işlemleri, ana sayfanın ayrıştırılmasını engellemez. İçe aktarma işlemlerindeki komut dosyaları sırayla işlenir ancak içe aktarma sayfasını engellemez. Bu sayede, komut dosyası sırasını korurken erteleme benzeri bir davranış elde edersiniz. İçe aktarma işlemlerinizi <head>
içine koymanın bir avantajı, ayrıştırıcının içerik üzerinde en kısa sürede çalışmaya başlamasına olanak tanımasıdır. Bununla birlikte, ana dokümanda <script>
'ün sayfayı engellemeye devam ettiğini unutmayın. İçe aktarma işleminden sonraki ilk <script>
, sayfa oluşturmayı engeller. Bunun nedeni, içe aktarma işleminin içinde ana sayfadaki komut dosyasından önce yürütülmesi gereken bir komut dosyasının bulunabilmesidir.
<head>
<link rel="import" href="/path/to/import_that_takes_5secs.html">
<script>console.log('I block page rendering');</script>
</head>
Uygulama yapınıza ve kullanım alanınıza bağlı olarak, ayarsız davranışı optimize etmenin birkaç yolu vardır. Aşağıdaki teknikler, ana sayfa oluşturma işleminin engellenmesini azaltır.
1. senaryo (tercih edilen): <head>
içinde komut dosyanız veya <body>
içine yerleştirilmiş komut dosyanız yok
<script>
'ü yerleştirmeyle ilgili önerim, içe aktarma işleminizin hemen ardından yapmamaktır. Komut dosyalarını oyunun mümkün olduğunca sonuna taşıyın. Ancak bu en iyi uygulamayı zaten uyguluyorsunuz, DEĞİL Mİ? ;)
Aşağıda bununla ilgili bir örnek verilmiştir:
<head>
<link rel="import" href="/path/to/import.html">
<link rel="import" href="/path/to/import2.html">
<!-- avoid including script -->
</head>
<body>
<!-- avoid including script -->
<div id="container"></div>
<!-- avoid including script -->
...
<script>
// Other scripts n' stuff.
// Bring in the import content.
var link = document.querySelector('link[rel="import"]');
var post = link.import.querySelector('#blog-post');
var container = document.querySelector('#container');
container.appendChild(post.cloneNode(true));
</script>
</body>
Her şey en altta.
Senaryo 1.5: İçe aktarma işlemi kendini ekler
Diğer bir seçenek de içe aktarma işleminin kendi içeriğini eklemesini sağlamaktır. İçe aktarma yazarı, uygulama geliştiricinin uyması gereken bir sözleşme oluşturursa içe aktarma işlemi kendisini ana sayfanın bir alanına ekleyebilir:
import.html:
<div id="blog-post">...</div>
<script>
var me = document.currentScript.ownerDocument;
var post = me.querySelector('#blog-post');
var container = document.querySelector('#container');
container.appendChild(post.cloneNode(true));
</script>
index.html
<head>
<link rel="import" href="/path/to/import.html">
</head>
<body>
<!-- no need for script. the import takes care of things -->
</body>
2. Senaryo: Komut dosyanız <head>
içinde veya <body>
içine yerleştirilmiş
Yüklenmesi uzun süren bir içe aktarma işleminiz varsa sayfadaki bu işlemi takip eden ilk <script>
, sayfanın oluşturulmasını engeller. Örneğin Google Analytics, izleme kodunu <head>
içine yerleştirmenizi önerir. <script>
'u <head>
içine yerleştirmekten kaçınamıyorsanız içe aktarma işlemini dinamik olarak eklemek sayfanın engellenmesini önler:
<head>
<script>
function addImportLink(url) {
var link = document.createElement('link');
link.rel = 'import';
link.href = url;
link.onload = function(e) {
var post = this.import.querySelector('#blog-post');
var container = document.querySelector('#container');
container.appendChild(post.cloneNode(true));
};
document.head.appendChild(link);
}
addImportLink('/path/to/import.html'); // Import is added early :)
</script>
<script>
// other scripts
</script>
</head>
<body>
<div id="container"></div>
...
</body>
Alternatif olarak, içe aktarma işlemini <body>
dosyasının sonuna yakın bir yere ekleyin:
<head>
<script>
// other scripts
</script>
</head>
<body>
<div id="container"></div>
...
<script>
function addImportLink(url) { ... }
addImportLink('/path/to/import.html'); // Import is added very late :(
</script>
</body>
Unutulmaması gerekenler
İçe aktarma işleminin mime türü
text/html
olmalıdır.Diğer kaynaklardan gelen kaynakların CORS'a etkin olması gerekir.
Aynı URL'den yapılan içe aktarmalar bir kez alınır ve ayrıştırılır. Bu, içe aktarma işlemindeki komut dosyasının yalnızca içe aktarma işlemi ilk kez görüldüğünde yürütüleceği anlamına gelir.
İçe aktarma işlemindeki komut dosyaları sırayla işlenir ancak ana dokümanın ayrıştırılmasını engellemez.
İçe aktarma bağlantısı, "#içeriği buraya dahil et" anlamına gelmez. Bu, "ayrıştırıcı, daha sonra kullanabilmem için bu dokümanı getir" anlamına gelir. Komut dosyaları içe aktarma sırasında yürütülürken stil sayfaları, işaretleme ve diğer kaynakların ana sayfaya açıkça eklenmesi gerekir.
<style>
değerinin açıkça eklenmesi gerekmez. Bu, HTML içe aktarma ile<iframe>
arasındaki önemli bir farktır.<iframe>
, "bu içeriği burada yükle ve oluştur" anlamına gelir.
Sonuç
HTML içe aktarma işlemleri, HTML/CSS/JS'nin tek bir kaynak olarak gruplandırılmasına olanak tanır. Bu fikir tek başına yararlı olsa da Web Bileşenleri dünyasında son derece güçlü hale gelir. Geliştiriciler, diğer kullanıcıların kullanabileceği ve kendi uygulamalarına dahil edebileceği yeniden kullanılabilir bileşenler oluşturabilir. Bu bileşenlerin tümü <link rel="import">
üzerinden yayınlanır.
HTML içe aktarma işlemi basit bir kavram olsa da platform için birçok ilginç kullanım alanı sunar.
Kullanım alanları
- İlgili HTML/CSS/JS'yi tek bir paket olarak dağıtın. Teorik olarak, bir web uygulamasının tamamını başka bir uygulamaya aktarabilirsiniz.
- Kod organizasyonu: Kavramları mantıksal olarak farklı dosyalara ayırarak modülerliği ve yeniden kullanılabilirliği teşvik edin**.
- Bir veya daha fazla Özel Öğe tanımını yayınlayın. Öğeleri register ve bir uygulamaya dahil etmek için içe aktarma işlemi kullanılabilir. Bu işlem, öğenin arayüzünü/tanımını kullanım şeklinden ayrı tutarak iyi yazılım kalıplarını uygular.
- Bağımlılıkları yönetme: Kaynaklar otomatik olarak tekilleştirilir.
- Komut dosyalarını parçalara ayırma: İçe aktarma işleminden önce, büyük boyutlu bir JS kitaplığının çalışması için dosyası tamamen ayrıştırılırdı. Bu işlem yavaştı. İçe aktarma işleminde, A parçası ayrıştırılır ayrıştırılmaz kitaplık çalışmaya başlayabilir. Daha az gecikme
// TODO: DevSite - Code sample removed as it used inline event handlers
HTML ayrıştırmayı paralelleştirir: Tarayıcı ilk kez iki (veya daha fazla) HTML ayrıştırıcıyı paralel olarak çalıştırabilir.
Yalnızca içe aktarma hedefini değiştirerek bir uygulamada hata ayıklama ve hata ayıklama dışı modlar arasında geçiş yapmayı sağlar. Uygulamanızın, içe aktarma hedefinin paketlenmiş/derlenmiş bir kaynak mı yoksa içe aktarma ağacı mı olduğunu bilmesi gerekmez.