网页为什么加载时会突然跳动？详解浏览器渲染、CLS 布局偏移与网页性能诊断

沐光而行

       相信很多人都遇到过这种糟心体验：网页内容已经显示出来，手指正要点击按钮，页面突然猛地向下一跳，直接误点到广告链接。很多人以为只是网速差或者手机卡顿，实际上这是网页开发中非常典型的累积布局偏移（CLS）问题。网页并不是一张完整图片，而是浏览器一块块 “拼接渲染” 出来的。本文通俗拆解从输入网址到页面展示的完整链路，解释页面跳动的底层成因，区分网站快慢的核心原因，同时给普通用户、开发者提供可落地的诊断与优化方案。

一、从输入网址到页面显示：浏览器完整工作流程

用餐厅上菜做通俗类比：在浏览器输入网址访问网页，就像去餐厅点餐，整套流程分为网络连接阶段和本地渲染阶段两大块。
1. 网络连接阶段

• DNS 域名解析：把域名转换成服务器 IP，相当于查询餐厅的地址。
• TCP 握手：和服务器建立可靠通信通道，相当于拨通餐厅的电话。
• TLS 握手（HTTPS 网站）：完成加密身份校验，确认双方安全，相当于核对身份暗号。
• TTFB 首字节返回：服务器返回网页的第一份数据，相当于后厨开始上菜稀土掘金。
  

以上任意环节耗时变长，网站就会出现转圈、白屏。
2. 浏览器本地渲染阶段（拿到数据之后）

• 解析 HTML 生成 DOM 树：读取网页结构，相当于拿到菜单。
• 解析 CSS 生成 CSSOM 样式树：读取颜色、大小、排版规则，相当于拿到菜谱。
• 生成渲染树：DOM 和 CSSOM 结合，筛选出页面上需要显示的元素。
• 布局（回流 / 重排 Layout）：计算每一个元素的精确位置、宽高，确定每个组件摆放坐标。
• 绘制（重绘 Paint）：填充颜色、图片、文字。
• 合成 Composite：分层交给显卡，最终输出画面到屏幕上。
  

关键知识点：CSS 属于渲染阻塞资源，浏览器会等待 CSS 加载完毕，避免出现样式错乱，所以 CSS 加载慢会直接造成白屏。同步 JavaScript 脚本会直接暂停 HTML 解析，是网页白屏最主要元凶。工程上会把脚本放到页面底部，或者开启异步加载，避免阻塞渲染流程。

二、页面莫名跳动：什么是累积布局偏移 CLS

页面已经初步展示，后续资源加载完成，把原有内容挤开、元素发生非预期位移，这个现象叫布局偏移，谷歌将全部偏移累加的指标称为CLS（Cumulative Layout Shift，累积布局偏移），是谷歌三大核心网页指标之一，用来衡量网页视觉稳定性。
CLS 官方评分标准

评分等级	CLS 数值	体验说明
✅优秀	≤0.1	页面几乎不会跳动，用户体验良好
⚠️待优化	0.1 ~ 0.25	偶尔发生跳动，容易误触
❌较差	＞0.25	频繁大幅跳动，极易误点广告、按钮失效

造成页面跳动四大常见原因

• 图片、视频没有设置宽高比例：图片加载前容器高度为 0，图片下载完成瞬间撑开容器，把下方全部内容往下推。这是网页跳动最高发原因。
• 异步动态插入广告、弹窗、Cookie 提示：页面渲染完成之后，广告脚本加载完毕，凭空在页面上方 / 中间插入大块内容，挤压原有页面。也就是用户点按钮突然跳到广告上的经典场景。
• 网页字体加载替换：网页自定义字体下载完成，替换掉浏览器临时兜底字体，文字尺寸发生变化，引发整块文字偏移。
• 接口异步返回内容：列表、评论、推荐内容后加载完成，追加插入页面，挤压现有布局。
  

CLS 问题的核心解决思路

提前预留容器空间，内容加载进来不再改变页面位置。

• 图片、视频设置宽高或者aspect‑ratio宽高比，提前占住位置。
• 广告、iframe 嵌入组件，提前写好固定占位容器高度。
• 网页字体使用字体回退策略，避免字体切换剧烈变化文本大小。
• 弹窗、通知组件优先使用悬浮覆盖模式，不要向下挤压正常文档流内容；骨架屏占位代替空白区域。
  

三、为什么有的网站秒开，有的长时间转圈？

网站慢，不全是网速的锅，问题分散在整条链路：

• 网络侧：DNS 解析慢、TCP/TLS 握手耗时久、服务器响应 TTFB 时间过长、图片 / JS/CSS 资源体积巨大。
• 渲染阻塞资源：关键 CSS、同步大 JS 脚本阻塞解析，浏览器卡住等待资源下载，直接长时间白屏。
• 客户端渲染与服务端渲染的取舍
  
  • 服务端渲染 SSR：服务器把完整网页拼接好再发给浏览器，好比后厨全部做好直接上菜，首屏打开速度快，搜索引擎友好。
  • 客户端渲染 SPA：只下发基础框架，浏览器本地 JS 再拼装页面。交互顺滑，但是 JS 下载解析耗时久，打开容易长时间白屏。现代前端框架一直在二者之间做权衡，兼顾首屏速度和交互流畅度。
    

四、普通用户 & 开发者：F12 开发者工具，定位网页卡顿根源

Chrome、Edge 浏览器按下键盘 F12，切换到「Network（网络）」面板，可以看到著名的瀑布图（Waterfall）。每一条横条代表一个资源的完整加载时间，可以直观看到：

• DNS、连接、TTFB 各个阶段耗时；
• 图片、脚本、样式文件分别占用多久；一眼就可以判断网站慢是服务器响应慢，还是图片太大，还是脚本阻塞渲染。
  

进阶可以切换到 Performance 性能面板，查看页面布局偏移、主线程长任务，定位 CLS 跳动问题。
五、分层理解网页性能能力

• 普通使用者层级：会打开 F12 网络瀑布图，看懂资源加载快慢，能够分辨是网络还是网站本身的问题。
• 前端开发层级：理解 CLS 指标，给图片、广告预留占位空间，把 CLS 优化至 0.1 以内，规避页面跳动。
• 架构优化层级：掌控整条关键渲染路径，区分阻塞 / 非阻塞资源，合理做预加载、服务端渲染、资源拆分，从根源提升网页打开速度。
  

结语

网页并不是一张完整图片，而是浏览器分步解析、计算、绘制拼接出来的产物。我们遇到的页面突然跳动，大多是累积布局偏移 CLS，并非单纯网速问题，是页面元素加载时没有提前预留空间导致。网页打开快慢，横跨域名解析、服务器响应、资源加载、浏览器渲染整条完整链路。借助浏览器自带 F12 开发者工具，普通人也可以直观看到网页每一步耗时，看懂网页性能背后的底层逻辑。