5-客户端容器

一、消息

0. 可以致力于的项目：视频直
1. carvas：画图软件

二、课程简介

0. web浏览器以及跨端解决方案
1. 浏览器架构和运行原理

三、知识

（一）浏览器架构

0. 浏览器架构分类

   0. 单进程架构
   1. 多进程架构
   2. 面向服务架构

1. 浏览器架构对比

   架构类型	扩展性	安全性	流畅度
   单进程架构	低	低	卡顿
   多进程架构	中	高	流畅
   面向服务架构	高	高	流畅

2. 常见浏览器内核

   Trident、Gecko（Firefox）、Webkit（Chrome、Android）、Blink（Chrome）、Edge（Edge）、Tridenet+Webkit+Blink（国内浏览器）

3. JS引擎VS渲染引擎

（二）渲染进程-多进程渲染线程

0. 资源加载：加载HTML文档和子资源

1. 构建渲染树

   0. 构建Dom树
   1. 构建CSSOM树
   2. 合成渲染树

2. 页面布局

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

3. 页面绘制

   0. 构建图层
   1. 绘制图层：一个图层——>多个绘制指令——>绘制列表——>交给合成线程
   2. 合成线程生成图块
   3. 栅格线程将图块进行栅格化
   4. 展示

（三）Chrome运行原理

0. Chrome运行原理-开始导航

1. Chrome运行原理-读取响应

2. Chrome运行原理-寻找渲染进程

   0. 网络线程做完所有检查后,会告知主进程数据已准备完毕,主进程确认后为这个站点寻找一个渲染进程

   1. 主进程通过lIPC消息告知渲染进程去处 理本次导航

   2. 渲染进程开始接收数据并告知主进程自 己已开始处理,导航结束,进入文档加载阶段

（四）优化

0. 前端性能Performance

   0. 时间花在哪儿
   1. 什么情况下卡顿

1. 首屏优化

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

2. 渲染优化

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

3. JS优化

4. 防止内存泄漏

5. 循环尽早break

6. 合理使用闭包

7. 减少Dom访问

8. 防抖、节流

9. Web Workers

（五）跨端容器

0. 为什么要跨端？

   答：成本低、效率高

1. 跨端方案（跨端容器）

   0. webview
   1. 小程序
   2. RN/Weex
   3. Lynx
   4. Flutter

2. webview

   0. 定义：网页视图，加载网页Url，并展示其内容的控件

   1. 与Native通信

   2. 实现简易的JSBridge

      0. interface CallArgs与interface ResponseArgs对应

3. 小程序

   0. 都要通过Native进行转发渲染

4. React Native/Weex

5. Lynx

   0. 性能比JSBrodge高很多

6. Flutter

   0. widget：基础组件
   1. dart vm：语言运行虚拟环境
   2. skia图形库：渲染时通过这个库，在各端表现一致

7. 通用原理

   0. UI组件
   1. 渲染引擎
   2. 逻辑控制引擎
   3. 通信桥梁
   4. 底层API抹平表现差异

8. 方案对比

   0. webview：入手比较容易：

      0. 不涉及“客户端”等一些概念；大部分（啥）都能开发；
      1. 多端兼容
      2. 开发成本低

   1. Flutter：学习成本最高

      0. 要学习一门新的语言

（六）总结——思维导图

三、思考

0. 单进程哪儿哪儿不好，为什么会有单进程架构？

   答：硬件限制，内存昂贵。没有多进程架构的框架，节约资源。

1. 面向服务架构是否会替代多进程架构？

   答：会。性能好，大部分为面向服务架构；若性能不好，可以退化为多进程。

2. 同样是webview渲染，为什么小程序体验比webview流畅

   答：离线缓存（访问的资源都是本地的）；危险操作（DOM）封死了

3. 未来的跨端方案会是什么？

   答：竟然没讲

四、题目

（面试官爱问）

五、实际体会

0. 用户在url框输入内容时，UI线程会判断输入的是URL地址还是query

   0. URL：请求站点资源
   1. query：将输入发送给搜索引擎

2. Chrome运行原理-开始导航

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

3. Chrome运行原理-读取响应

   网络线程接收到HTTP响应后，先检查 响应头的媒体类型(MIME Type)

   0. 如果响应主体是一个HTML文件,浏览 器将内容交给渲染进程处理
   1. 如果拿到的是其他类型文件，比如Zip、 exe等，则交给下载管理器处理