100%
2,48 Мбайт
Иван Акулов, EPAM
Иван Акулов, EPAM
<em>Hello</em>
Some more text
<img src="mars.jpg">
<em>Hello</em>
Some more text
<img src="mars.jpg">
start-tag { name: em }
character { data: H }
character { data: e }
character { data: l }
character { data: l }
character { data: o }
end-tag { name: em }
<em>Hello</em>
Some more text
<img src="mars.jpg">
start-tag { name: em }
character { data: H }
character { data: e }
character { data: l }
character { data: l }
character { data: o }
end-tag { name: em }
start-tag { name: em }
character { data: H }
character { data: e }
character { data: l }
character { data: l }
character { data: o }
end-tag { name: em }
<em>
"hello"
start-tag { name: em }
character { data: H }
character { data: e }
character { data: l }
character { data: l }
character { data: o }
end-tag { name: em }
<html>
<head>
<body>
<em>
"Hello"
"Some more text"
<img src="mars.jpg">
<html>
<head>
<body>
<em>
"Hello"
"Some more text"
<img src="mars.jpg">
<script>
и <style>
<script>
блокирует парсинг<em>Hello</em>
<script>…</script>
Some more text
<img src="mars.jpg">
<em>Hello</em>
<script>document.write('<em>')</script>
Some more text
<img src="mars.jpg">
<script>
блокирует парсингdocument.write('<em>')
— пример
document.querySelectorAll('img')
— пример
<style>
блокирует рендеринг<script>
останавливает загрузку ресурсов (Chrome и Firefox, но не Edge)<script>
выполняется только после того, как загружены все таблицы стилей.svg
.svg
.jpg
.svg
.jpg
.png
.svg
function logArrayElements(element, index, array) {
console.log('a[' + index + '] = ' + element);
}
[2, 5, 9].forEach(logArrayElements);
function f(q,w,e){console.log('a['+w+']='+q);}[2,5,9].forEach(f);
<!DOCTYPE html><html><body><p>Look at me, I’m an HTML coder!</p>
.block{border:1px solid #ccc;padding:20px;border-radius:12px}
uglify-js
clean-css
html-minifier
minify
<!DOCTYPE html>
<html>
<head>
<title>Повышаем скорость загрузки</title>
<link rel="stylesheet" href="index.css">
</head>
</html>
US‹BSBSјVPVNULVTNULMђ1OГ0DLE…gђшSIЖ3ЖDC2VT ЕYNUL‰
SOHEOTCETBFг\j«ЋDC3мKETXї’їDLEЃPЎBQУ.H0а6HtєУ»пЭ“^І~s6є»Ѕ —Јл«to7СXXbҐESCVTкkєQ@fqо$hРBъЬЅ|µoџ¤џw‹®_юђYыєXНжп¤o?–mВBELnн(NUL%QZъNUL(hЌ9;ЎяBEL'VTDLEtj ©JЏ”ЁТ!ёBS6&C-ЋOЏSOHGSАі ¤•чSYN„+·мSUB±bрP›© Џ¬–L•E%СDpл—SOHSOHЩCANACK
DOMContentLoaded
→ загружаем улучшенияload
→ загружаем остатокDOMContentLoaded
start-tag { name: em }
character { data: H }
character { data: e }
character { data: l }
character { data: l }
character { data: o }
end-tag { name: em }
<html>
<head>
<body>
<em>
"Hello"
"Some more text"
<img src="mars.jpg">
load
start-tag { name: em }
character { data: H }
character { data: e }
character { data: l }
character { data: l }
character { data: o }
end-tag { name: em }
<html>
<head>
<body>
<em>
"Hello"
"Some more text"
<img src="mars.jpg">
DOMContentLoaded
→ загружаем улучшенияload
→ загружаем остаток<!-- Ядро: главный HTML и CSS -->
<head>
<link rel="stylesheet" href="core.css">
</head>
<body>
Some core content
<script>...</script>
</body>
<!-- Ядро: главный HTML и CSS -->
<head>
<link rel="stylesheet" href="core.css">
</head>
<body>
Some core content
<script>...</script>
</body>
<!-- Ядро: главный HTML и CSS -->
<head>
<link rel="stylesheet" href="core.css">
</head>
<body>
Some core content
<script>...</script>
</body>
<!-- Ядро: главный HTML и CSS -->
<head>
<link rel="stylesheet" href="core.css">
</head>
<body>
Some core content
<script>...</script>
</body>
// Улучшения: JavaScript, полный CSS, шрифты
$(document).on('DOMContentLoaded', function () {
$(document.head).append('<link rel="stylesheet" href="...">');
$(document.body).append('<script src="..."></script>');
...
});
// Остаток: аналитика, реклама
$(window).on('load', function () {
$(document.body).append('<script src="..."></script>');
...
});