一.浏览器行为和加载过程：
HTML到DOM：浏览器解析HTML时构建文档对象模型（DOM）树。
CSS到渲染树：CSS样式被应用到渲染树中，确定元素在页面上的显示方式。
CSS下载：浏览器会下载并应用CSS样式表。
JavaScript：尽管JavaScript是单线程的，但浏览器通过多个线程同时处理各种任务。
资源加载：图片（`img`）、样式表（`link`）、脚本（`script`）等会启动并发下载线程，以优化加载速度。
二.懒加载和性能优化：
初始加载优化：优先加载视窗内的图片（即首屏内容），确保快速初始渲染。
滚动懒加载：随着用户滚动页面，按需加载图片，减少初始加载时间，提升感知性能。
前端响应性**：前端开发者通过懒加载等技术，最大程度地减少加载时间，优化内容显示。
三.实现步骤：
手动控制：最初使用`img src=""`属性加载图片，实现即时下载。
数据属性（`data-src`） ：使用`data-src`属性指定图片URL，在图片进入视窗时进行懒加载。
性能考虑：优化并发图片下载数量，平衡快速显示与资源使用效率。
四.展现实例：
代码事例展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./common.css">
</head>
<body>
<img data-src="https://img0.baidu.com/it/u=3944821654,1843674929&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500">
<img data-src="https://img0.baidu.com/it/u=339312915,19099424&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=333">
<img data-src="https://img0.baidu.com/it/u=2904974581,2094441891&fm=253&fmt=auto&app=138&f=JPEG?w=752&h=500">
<img data-src="https://img1.baidu.com/it/u=1183890827,3356066797&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
<img data-src="https://img2.baidu.com/it/u=3221529243,730458823&fm=253&fmt=auto&app=138&f=JPEG?w=731&h=500">
<img data-src="https://img2.baidu.com/it/u=1507496597,3356769496&fm=253&fmt=auto&app=138&f=JPEG?w=784&h=500">
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<script>
const imgs=document.querySelectorAll('img');
const num=imgs.length;
let screenHeight=document.documentElement.clientHeight;//一屏的高度
document.addEventListener('DOMContentLoaded',()=>{
loadImage();
})
function loadImage(){
console.log("开始加载");
//是否可视区
//滚动条
//不同浏览器的兼容性问题
let scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
for(let i=0;i<num;i++){
// console.log(imgs[i].offsetTop);
if(imgs[i].offsetTop<screenHeight+scrollTop){
//数据属性
// console.log(imgs[i].dataset.src);
imgs[i].src=imgs[i].dataset.src
// imgs[i].src=imgs[i].getAttribute('data-src');
n=i+1;
if(n==num){
console.log('所有图片已加载');
window.removeEventListener('scroll',throttlrLayLoad);
}
}
}
}
const throttlrLayLoad=_.throttle(loadImage,500);
window.addEventListener('scroll',throttlrLayLoad)
</script>
</body>
</html>
body{
background-color: gray;;
}
img{
display: block;
margin-bottom: 50px;
width: 600px;
height: 400px;
}
效果展现：
五.关键概念和注意事项：
浏览器机制：理解浏览器如何管理并发下载，优化资源处理。
DOM操作：利用DOM属性（如`clientHeight`、`scrollTop`、`offsetHeight`）基于用户交互或滚动位置触发懒加载。
数据集使用：使用`dataset`存储自定义数据属性（`data-*`），灵活管理HTML元素的数据。
业务逻辑优化**：调整懒加载逻辑，减少不必要的触发（如优化滚动事件），提升性能表现。
六.总结：
总之，有效的图片懒加载利用浏览器能力优化资源管理，改善页面加载速度。
通过了解浏览器行为和采用适当的技术手段，开发者可以显著提升用户体验和前端性能。
