前端HTML精讲03：页面性能优化+懒加载，搞定首屏加速

文章目录

前端HTML精讲03：页面性能优化\+懒加载，搞定首屏加速
- 一、为什么要做HTML层面性能优化
- 二、基础HTML代码优化方案
- - [1\. 精简代码，减少冗余标签](#1. 精简代码，减少冗余标签)
  - [2\. 合理放置脚本标签，避免阻塞渲染](#2. 合理放置脚本标签，避免阻塞渲染)
  - [3\. 减少DOM节点数量](#3. 减少DOM节点数量)
  - [4\. 选用合适的图片格式，压缩图片体积](#4. 选用合适的图片格式，压缩图片体积)
- 三、图片懒加载（核心优化，面试高频）
- - [1\. 原生懒加载实现（最简单，无需额外JS）](#1. 原生懒加载实现（最简单，无需额外JS）)
  - [2\. 手写JS懒加载（兼容低版本浏览器）](#2. 手写JS懒加载（兼容低版本浏览器）)
- 四、其他HTML优化技巧
- 五、优化避坑指南
- 六、总结

大家好，我是代码搬运董，软件专业在读、前端预备攻城狮，专注用通俗的话拆解硬核前端知识。

前两篇我们分别学习了HTML语义化和表单高阶用法，掌握了规范书写页面、搭建表单模块的核心技巧。而在实际项目中，页面加载速度直接影响用户体验，也是前端面试中必考的优化考点，本篇就聚焦HTML层面的性能优化，讲解常用的首屏加速方案和图片懒加载实操，落地性强，上手就能用到项目中。

一、为什么要做HTML层面性能优化

对于前端页面来说，首屏加载过慢、资源冗余、渲染阻塞，都会导致用户等待时间过长，提升页面跳出率。即便后续CSS和JS优化到位，HTML根基不牢，依旧会拖慢整体加载速度。

做好HTML优化，不仅能缩短页面渲染时间、降低服务器压力，还能提升页面在搜索引擎的排名，是企业级项目开发中必不可少的环节，也是区分新手和成熟开发者的关键细节。

二、基础HTML代码优化方案

1. 精简代码，减少冗余标签

杜绝无意义的嵌套和多余标签，避免层层嵌套div却不做实际布局，多余的空标签、注释、空白字符都会增加文件体积，上线前尽量清理干净。

同时遵循语义化规范，减少不必要的包裹层，让DOM树结构更简洁，浏览器解析DOM的速度也会更快。

2. 合理放置脚本标签，避免阻塞渲染

浏览器解析HTML是自上而下逐行执行的，当解析到script标签时，会停止渲染页面，先加载并执行JS代码，导致页面白屏时间变长。

优化方案：

普通脚本放在</body>闭合标签之前，等页面DOM加载完成后再执行
使用async属性：异步加载脚本，加载完成后立即执行，不阻塞页面渲染
使用defer属性：异步加载脚本，等页面DOM全部解析完成后再按顺序执行

3. 减少DOM节点数量

页面DOM节点越多，浏览器渲染耗时越长，渲染压力越大。搭建页面结构时，合理划分模块，避免过度拆分节点，在保证结构清晰的前提下，精简DOM层级。

4. 选用合适的图片格式，压缩图片体积

图片往往是页面中占比最大的资源，优化图片能大幅提升加载速度：

普通插图、背景图选用WebP格式，体积小且画质清晰，兼容主流浏览器
图标类尽量使用字体图标或者SVG矢量图，不占用图片资源，缩放不失真
上线前压缩图片，在不影响画质的前提下，降低图片文件大小

三、图片懒加载（核心优化，面试高频）

图片懒加载就是延迟加载页面中非首屏的图片，只有当图片即将出现在浏览器可视区域内时，再加载对应的图片资源，大幅减少首屏请求数量，缩短首屏加载时间。

1. 原生懒加载实现（最简单，无需额外JS）

HTML5提供了原生的loading属性，直接设置即可实现懒加载，兼容大部分现代浏览器，代码简洁无需开发。

html 复制代码

<!-- 原生图片懒加载 -->
<img src="占位图地址" data-src="真实图片地址" loading="lazy" alt="图片说明">

其中loading="lazy"就是懒加载标识，浏览器会自动判断图片位置，按需加载资源。

2. 手写JS懒加载（兼容低版本浏览器）

针对老旧浏览器，不支持原生懒加载，可以通过监听页面滚动事件，判断图片是否进入可视区域，再替换图片真实地址实现懒加载。

html 复制代码

<!-- HTML结构 -->
<img class="lazy-img" src="默认占位图" data-src="真实图片链接" alt="图片">

<!-- JS逻辑 -->
<script>
  // 获取所有懒加载图片
  const lazyImgs = document.querySelectorAll('.lazy-img');
  // 监听页面滚动
  window.addEventListener('scroll', lazyLoad);
  // 初始加载一次
  lazyLoad();

  // 懒加载执行函数
  function lazyLoad() {
    lazyImgs.forEach(img => {
      // 获取图片可视区域位置
      const rect = img.getBoundingClientRect();
      // 判断图片是否进入可视区域
      if (rect.top < window.innerHeight) {
        // 替换真实图片地址
        img.src = img.dataset.src;
        // 加载完成后移除类名，避免重复加载
        img.classList.remove('lazy-img');
      }
    })
  }
</script>

四、其他HTML优化技巧

使用iframe降级：不影响首屏的第三方内容，用iframe加载，避免阻塞主页面
开启资源缓存：配合后端设置缓存策略，避免重复加载静态资源
减少重定向：避免页面多次跳转，增加额外请求耗时
预加载关键资源：使用rel="preload"预加载首屏必需的资源，提升渲染速度

五、优化避坑指南

误区：所有图片都加懒加载
避坑：首屏内的图片不需要懒加载，反而会延缓首屏渲染，只针对屏外长列表图片做懒加载即可。
误区：script标签随意放置
避坑：操作DOM的JS脚本，必须放在DOM元素之后，否则无法获取到节点。
误区：盲目追求精简，破坏代码可读性
避坑：开发阶段保留注释和规范格式，上线前再做代码压缩，兼顾维护性和性能。

六、总结

HTML层面的性能优化是前端优化的基础，不需要复杂的代码，只要养成规范的开发习惯，合理运用懒加载、资源放置、代码精简等技巧，就能大幅提升页面加载速度。

这些优化方案不仅适用于日常练手项目，更是校招和企业面试中的高频考点，把细节吃透，才能写出高性能的前端页面。