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

sunset_
61 阅读3分钟

课程介绍

本节课程主要着重介绍浏览器的架构以及运行原理，并以一道八股文为例，讲解在Chrome浏览器里，网页是如何加载并且渲染成我们所见的画面。通过对本节课的学习，你还能了解到在浏览器里JS引擎和渲染引擎如何协同工作，如何从多个角度优化前端的性能体验。再以webview容器为扩展，带你认识一些常见的跨端方案。

课程重点

  • 浏览器架构

    • 浏览器架构变迁
    • 浏览器各架构对比
    • 多进程架构介绍

  • 渲染进程

    • 渲染进程多线程架构
    • JS引擎VS渲染引擎
    • 多线程工作流程

  • chrome运行原理

    • 主进程工作流程
    • 渲染进程工作流程
    • 浏览器性能优化

  • 跨端容器

    • 跨端的由来
    • 常见的跨端方案

  • 浏览器架构

    • 演变

    • 1．单进程架构:所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
    • 2．多进程架构:主进程、网络进程、渲染进程、GPU进程、插件进程
    • 3．面向服务架构:将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务
    • 任务管理器
    • 任务管理器.jpg
    • 多进程分工
    • 多进程分工.jpg

  • 渲染进程

    • 多线程架构

    • js引擎VS渲染引擎
    • 引擎对比.jpg

  • 多线程工作流程

  • 1.网络线程负责加载网页资源

    1. JS引擎解析JS脚本并且执行
    1. JS解析引|擎空闲时，渲染线程立即工作

  • 4.用户交互、定时器操作等产生回调函数 放入任务队列中

  • 5.事件线程进行事件循环，将队列里的任 务取出交给JS引擎执行

多线程工作流程.jpg

Chrome运行原理

输入处理

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

开始导航

  • Ul线程通知网络线程发起一个网络请求，来获取内容
  • 请求过程中，tab出入loading状态

读取响应

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

寻找渲染进程

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

资源加载

  • 先加载html
  • 再加载css样式，以及js代码

构建渲染树

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

页面布局

  • 每个节点的位置和大小
  • 绘制元素边框
  • 遍历渲染树，将元素以盒模型的形式写入文档流

页面绘制

  • 为节点生成特定的图层
  • 绘制图层：将图层分成绘制指令，交给合成线程
  • 生成图块
  • 栅格化
  • 显示屏幕上

总结

image.png

avatar
文章
阅读
粉丝