客户端容器 2 | 青训营笔记

SteinsGate563
66 阅读2分钟

Chrome运行原理

image-20230428205500805.png

  • 输入处理

    1. 用户Url框输入内容后，UI线程会判断输入的是一个Url地址呢还是一个query查询条件
    2. 如果是URL，直接请求站点资源
    3. 如果是query，将输入发送给搜索引擎

  • 开始导航

    1. 当用户按下回车键，UI线程通知网络线程发起一个网路请求，来获取站点内容
    2. 请求过程中，tab页一直处于loading状态

  • 读取响应

    1. 网络线程接收到HTTP响应后，先检查响应头的媒体类型（MIME Type）
    2. 如果响应主体是一个HTML文件，浏览器将内容交给渲染进程处理
    3. 如果拿到的是其他类型的文件，比如Zip，exe等，则交给下载管理器处理

image-20230428210925994.png

  • 寻找渲染进程

    1. 网络线程做完响应的检查后，会告知主进程数据已经准备完毕，主进程确认后为这个站点寻找一个渲染进程
    2. 主进程通过IPC消息告知渲染进程去处理本次导航
    3. 渲染进程开始接收数据并告知主进程自已经开始处理，导航结束，进入文档加载阶段

  • 渲染进程--资源加载

    1. 收到主进程的消息后，开始加载HTML文档
    2. 除此之外，还需要加载子资源，比如一些图片，CSS样式文件以及JavaScript脚本

image-20230428211626758.png

  • 渲染进程--构建渲染树

    1. 构建DOM树，将HTML文本转化成浏览器能够理解的结构
    2. 构建CSSDOM树，浏览器不认识CSS，需要将CSS代码转化为可理解的CSSDOM
    3. 构建渲染树，渲染树是DOM树和CSSDOM树的结合

image-20230428212133836.png

  • 渲染进程--页面布局

    1. 根据渲染树计算每个节点的位置和大小
    2. 在浏览器页面区域绘制元素边框
    3. 遍历渲染树，将元素以盒模型的形式写入文档流

image-20230428212543417.png

  • 渲染进程--页面绘制

    1. 构建图层，为特定的节点生成专用图层
    2. 绘制图层，一个图层分成很多绘制指令，然后将这些指令按顺序组成一个绘制列表，交给合成线程
    3. 合成线程接受指令生成图块
    4. 栅格化线程将图块进行栅格化
    5. 展示在屏幕上

image-20230428214206829.png

  • 首屏优化手段

    1. 压缩，分包，删除无用代码
    2. 静态资源分离
    3. JS脚本非阻塞加载
    4. 缓存策略
    5. SSR
    6. 预置loading，骨架屏

  • 渲染优化

    1. GPU加速
    2. 减少回流，重绘
    3. 离屏渲染
    4. 懒加载

  • JS优化

    1. 防止内存泄露
    2. 循环尽早break
    3. 合理使用闭包
    4. 减少DOM访问
    5. 防抖，节流
    6. web Workers
avatar
文章
阅读
粉丝