在 DOMContentLoaded 事件之后加载图片，降低图片加载的优先级，优先加载css和js，加快首屏渲染
使用懒加载
浏览器在解析html，优先加载css和js，页面立即渲染。但是图片还在请求网络资源，可以加loading效果，提高用户体验
视觉上，先出现 hello world,后出现图片
DOMContentLoaded 耗时 5s
未使用懒加载
视觉上，hello world 和图片同时出现
浏览器解析遇到 img
DOMContentLoaded 耗时 10s
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
function lazyload() {
let imgDomList = document.querySelectorAll("img[lazy]");
for (let i = 0; i < imgDomList.length; i++) {
let dom = imgDomList[i];
if (dom.dataset.src) {
dom.src = dom.dataset.src;
}
}
}
document.addEventListener("DOMContentLoaded", function () {
setTimeout(lazyload, 0.2);
});
</script>
<style>
.lazy-img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="root"></div>
<img class="lazy-img" data-src="http://cdn.leoh.io/images/base_zero/image_223.jpg" lazy />
<img class="lazy-img" data-src="http://cdn.leoh.io/images/base_zero/image_224.jpg" lazy />
<img class="lazy-img" data-src="http://cdn.leoh.io/images/base_zero/image_225.jpg" lazy />
<img class="lazy-img" data-src="http://cdn.leoh.io/images/base_zero/image_226.jpg" lazy />
<img class="lazy-img" data-src="http://cdn.leoh.io/images/base_zero/image_227.jpg" lazy />
<img class="lazy-img" data-src="http://cdn.leoh.io/images/base_zero/image_228.jpg" lazy />
<img class="lazy-img" data-src="http://cdn.leoh.io/images/base_zero/image_229.jpg" lazy />
<img class="lazy-img" data-src="http://cdn.leoh.io/images/base_zero/image_230.jpg" lazy />
<img class="lazy-img" data-src="http://cdn.leoh.io/images/base_zero/image_231.jpg" lazy />
<img class="lazy-img" data-src="http://cdn.leoh.io/images/base_zero/image_232.jpg" lazy />
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
<script>
const e = React.createElement;
ReactDOM.render(
e('div', null, 'Hello World'),
document.getElementById('root')
);
</script>
</html>
