--- theme: cyanosis highlight: atelier-sulphurpool-light --- #### 基本准备当我们着手构建一个网页，展示一系列精心挑选的图片时，首先从HTML基础开始。想象一下，你的页面上散布着几个等待加载的图片元素。 ``` * { margin: 0; padding: 0; } body { background-color: gray; } img { display: block; margin-bottom: 50px; width: 400px; height: 400px; } ``` ```

``` ### 思考浏览器会做什么？当浏览器加载一个网页时，它会经历一系列复杂而有序的步骤来确保页面内容能够正确且高效地呈现给用户，先下载HTML，构建DOM树；接着应用CSS，生成渲染树；最后绘制页面。 1. **初始化请求与HTML解析**： - 用户输入网址后，浏览器向服务器发送HTTP请求获取HTML文件。 - 下载HTML：一旦接收到HTML数据，浏览器开始解析这些标记语言，将其转换成**文档对象模型（DOM）树**。这个树状结构在内存中构建，代表了页面的结构。 2. **CSS解析与渲染树构建**： - 同时，浏览器会查找页面中的``标签并下载CSS文件。 - 下载完成后，浏览器解析CSS规则，并结合DOM树，构造出**渲染树（Render Tree）** 。渲染树只包含渲染页面所需的样式信息和可见元素，忽略诸如`display: none`的元素。 3. **布局与绘制**： - **渲染树**加上计算好的CSS样式后，浏览器进行布局，决定每个节点在屏幕上的确切位置和尺寸。 - 最后是绘制阶段，浏览器将渲染树的各个节点转化为像素，最终展现在屏幕上。 4. **图片与外部资源处理**： - 在解析HTML过程中，浏览器遇到如``标签时，会立即启动新线程并发请求图片资源，不会等待整个HTML解析完成。 - 类似地，` ``` #### 实现2.0 进一步优化，已经加载过的不需要再去判断是否加载了，加上条件判断。 ``` ``` #### 实现3.0 再进一步优化，当把script放到body的前面，这时候DOM树并没有建立，先执行script的内容才会接着执行后面，意味着script标签会造成阻塞。 ``` ``` #### 实现4.0 接着进行优化，每次滑动的时候，判断滚动距离的函数会一直持续触发，太敏感。但其实没人会拉动页面只为了移动一点点滚动条。也就是说，当滑动停止的时候再判断触发函数就足够了，我们需要减少触发的次数。这就得提到**防抖**和**节流**。防抖和节流下次详细介绍。来到booycdn的官网，https://www.bootcdn.cn/lodash.js/ ，复制链接来用``。 ``` ``` ### 总结通过上述深入浅出的探讨与实践，我们不仅理解了图片懒加载技术的底层逻辑，也掌握了其实现步骤与优化策略。这一技术不仅极大地提升了网页的加载速度，优化了资源的使用效率，更是从前端层面为用户营造了更加流畅、响应迅速的浏览体验。希望看完对你有帮助，一起加油！✌️