你好世界
  • 入门
  • 框架
  • Webpack
  • 模式
  • 知识点
  • 面试题
  • Koa
  • Java
  • Python
  • MongoDB
  • Redis
  • Algorithm
  • AI 概述
  • 机器学习
  • 深度学习
  • 自然语言处理
  • 关键词说明
  • 使用技巧
  • 本地模型安装及下载
  • 调试
  • 测试
  • GIT
  • Network
  • Linux
  • VSCode
  • GitHub
  • Mock
  • 入门
  • 框架
  • Webpack
  • 模式
  • 知识点
  • 面试题
  • Koa
  • Java
  • Python
  • MongoDB
  • Redis
  • Algorithm
  • AI 概述
  • 机器学习
  • 深度学习
  • 自然语言处理
  • 关键词说明
  • 使用技巧
  • 本地模型安装及下载
  • 调试
  • 测试
  • GIT
  • Network
  • Linux
  • VSCode
  • GitHub
  • Mock
  • Knowledge

    • 知识点
    • OAuth授权
    • 安全
    • 常用手写代码
    • 常用工具函数
    • 性能优化
    • 运行环境
    • 模块加载

运行环境

从输入 url 到渲染出页面的整个过程

网页请求过程

输入URL -> DNS寻址 -> 建立TCP连接 -> 客户端发起请求 -> 服务器响应请求 -> 断开连接 -> 渲染界面

加载资源的形式

html代码
javascript css
媒体文件,如图片、视频等......

加载资源的过程

DNS解析:域名->IP地址
浏览器根据IP地址向服务器发起http请求
服务器处理http请求,并返回给浏览器

渲染页面的过程

DomTree: 解析html构建DOM树。
CssomTree : 解析CSS生成CSSOM规则树。
RenderObjectTree: 将DOM树与CSSOM规则树合并在一起生成渲染对象树。
Layout: 遍历渲染树开始布局(layout),计算每个节点的位置大小信息。
Painting: 将渲染树每个节点绘制到屏幕。

遇到<script>则暂停渲染,优先加载并执行JS代码,完成再继续

ref:
前端阶段性总结(二):页面渲染机制与性能优化

最后更新时间: 2/23/22, 4:58 PM
贡献者: LAPTOP-CRCIOU48\hjl, DESKTOP-ER5718D\zt
Prev
性能优化
Next
模块加载