前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
知识卡片/浏览器与网络
浏览器与网络

渲染机制与性能

渲染管线、重排重绘、图层提升、定时器与 rAF 的差别,以及完整的页面加载链路。

卡片数
10 张卡
预估时长
约 12 分钟
Q1主动回忆难度 2
1/10

浏览器与网络 · 渲染机制与性能

记忆强度

哪些 CSS 属性或元素状态会触发层叠上下文,使节点可能被提升为独立图层?

本节速览10 题 · 含答案
  1. 根元素、特定定位或布局子项,以及启用透明、变换、滤镜、遮罩、隔离、性能提示等效果的元素。

  2. 发生剪裁时文字部分会单独成层,出现滚动条时滚动条也会单独成层。

  3. 浏览器依次构建 DOM、构建 CSSOM、合成渲染树、布局,最后由 GPU 绘制并合成图层。

  4. DOMContentLoaded 不等待 CSS、JS 和图片,而 Load 要等待页面资源全部加载完毕。

  5. 外观变化触发重绘,几何或布局变化触发回流;回流必定重绘且成本更高,visibility 只会重绘。

  6. setInterval可能跳过间隔或连续执行;链式setTimeout在回调结束后重新计时,能保证轮询间隔。

  7. requestAnimationFrame在重绘前执行动画回调;requestIdleCallback在帧有空闲时执行低优先级工作。

  8. 客户端依次查询浏览器缓存、hosts、解析器缓存和本地 DNS;未命中时由本地 DNS 向根域、顶级域和权威 DNS 迭代查询。

  9. HTTPS 先通过三次握手建立 TCP 连接,再完成四阶段 SSL 握手,随后传送经 TLS 加密的数据。

  10. 浏览器依次构建 DOM、计算样式和布局、生成分层树与绘制列表,再分块栅格化,最后由浏览器进程生成并显示页面。

本节进度

/ 10张已自评
  • 学习中
  • 熟悉
  • 掌握
  • 精通

到期后会自动出现在复习队列,不用自己记时间。

怎么用才有效

  1. 1看完题先在脑内答一遍,最好出声讲,卡住了再点提示。
  2. 2揭示后对着要点数自己答到了几条,不要凭感觉。
  3. 3自评选实话。虚报「记住」只会让它更晚回来。

Space 揭示 · 1/2/3 自评

学完这节还能做什么

练 浏览器 选择题去复习队列按目标排学习顺序

FE Interview Journey

把面试题串成一条可执行的学习路径

系统整理前端基础、进阶、原理、手写题与大厂面经,帮助你从查漏补缺走到完整知识体系。

4000+ 面试题9 大知识模块浏览核心题库 →

面试专栏

  • 基础篇
  • 进阶篇
  • 高频篇
  • 精选篇
  • 手写篇
  • 面经篇
  • 原理篇
  • 场景篇
  • AI 篇
  • 每日一题
  • 前端面试题大全

面试题库

  • 知识卡片
  • 算法题库
  • 历年面经
  • 前端能力自检
  • 查漏补缺
  • 小程序题库

AI 学习工具

  • AI 助手
  • AI 模拟面试
  • AI 定制路线
  • AI 知识地图
  • AI 热点

基础与进阶

  • HTTP 协议
  • 浏览器原理
  • Linux 基础
  • Node.js 学习指南
  • NPM 工作流
  • Docker 实践
  • Canvas 专题
  • 设计模式
  • 算法面试
  • 前端系统进阶学习
  • 前端综合文章

资源导航

  • 前端思维导图
  • 前端学习路线
  • 博客动态
  • 公众号动态
  • 网址导航
  • 浏览器刷题插件
  • VS Code 刷题插件
  • AI 编程 MCP 接入

关注我们

  • Github
  • 知乎
公众号公众号
小程序小程序
© CopyRight 2020-2026 @程序员poetry