这是我参与笔记创作活动的第6天
今天的视频课[编程范式]是讲解浏览器的架构以及运行原理，讲解在Chrome浏览器里，网页是如何加载并且渲染成我们所见的画面。我们能了解到在浏览器里JS引擎和渲染引擎如何协同工作，如何从多个角度优化前端的性能体验。老师再以webview容器为扩展，带我们认识一些常见的跨端方案。
我对老师今天讲的知识梳理了一下，具体内容如下：
1.浏览器架构
1.浏览器架构演进
（1）单进程架构:所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等
（2）多进程架构:主进程、网络进程、渲染进程、GPU进程、插件进程
（3）面向服务架构:将原来的UI、数据库、文件、设备、网络等，作为一个独立的基础服务
2.浏览器架构对比
通过对不同类型的浏览器架构对比，我们可以发现他们的优缺点，对于我们使用它更加方便。浏览器架构对比如下：
3.浏览器架构-多进程分工
浏览器工作时是多进程进行的，这样使得浏览器能同时工作多个任务，极大提高了浏览器的工作效率。具体多进程分工如下图所示：
2.渲染进程
1.常见浏览器内核
我们常接触的浏览器是不同类型的，这也导致它们有不同的内核，下面我列举了几种浏览器内核：
2.渲染进程-多线程架构
内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等
它的工作流程如下：
- 网络线程负责加载网页资源
- JS引擎解析JS脚本并且执行
- JS解析引擎空闲时，渲染线程立即工作
- 用户交互、定时器操作等产生回调函数放入任务队列中
- 事件线程进行事件循环，将队列里的任务取出交给JS引擎执行
3. Chrome运行原理
1.如何展示网页
浏览器地址输入URL过后，浏览器内部会进行一系列步骤：输入处理 -> 开始导航 -> 读取响应 -> 寻找渲染进程。经过一系列操作过后才会展示网页
2.输入处理
（1）用户Url框输入内容的后，UI线程会判断输入的是一个URL地址呢，还是一个query查询条件
（2）如果是URL，直接请求站点资源
（3）如果是query，将输入发送给搜索引擎
3.开始导航
（1）当用户按下回车，UI线程通知网络线程发起一个网络请求，来获取站点内容
（2）请求过程中, tab处于loading状态
4.读取响应
- 网络线程接收到HTTP响应后，先检查响应头的媒体类型(MIME Type)
- 如果响应主体是一个HTML文件，浏览器将内容交给渲染进程处理
- 如果拿到的是其他类型文件，比如Zip、exe等，则交给下载管理器处理
5.寻找渲染进程
- 网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程
- 主进程通过IPC消息告知渲染进程去处理本次导航
- 渲染进程开始接收数据并告知主进程自己已开始处理，导航结束，进入文档加载阶段
渲染进程还有很多部分可以展开讲解，在此我不再过多赘述，感兴趣的小伙伴自己去了解吧！
我再讲讲前端如何去优化，在实际中，我们常有三种方式去优化：首屏优化、渲染优化、JS优化.
首屏优化包括以下几个步骤：
- 压缩、分包、删除无用代码
- 静态资源分离
- JS脚本非阻塞加载
- 缓存策略
- SSR
- 预置loading、骨架屏
渲染优化可以分为四步：GPU加速，减少回流、重绘，离屏渲染，懒加载。
而JS优化主要是下面几个方面：
- 防止内存泄漏
- 循环尽早break
- 合理包含闭包
- 减少Dom访问
- 防抖、节流
- Web Workers
4. 跨端容器
1.为什么需要跨端呢？
首先如果开发一个产品，如果PC和手机端都开发一个的话，开发成本就变高了，同时效率也会大大降低。其次不同端会导致一致性体验的改变。
在实际开发中，我们常见的跨端方案有：webview、小程序、RN/Weex、Lynx、Flutter等等。
2.跨端容器-WebView
使用WebView的优势：
- 一次开发，处处使用，学习成本低
- 随时发布，即时更新，不用下载安装包
- 移动设备性能不断提升，性能有保障
- 通过JSBridge和原生系统交互，实现复杂功能
3.跨端容器-小程序
现在开发小程序的时候，我们有许多方案选择：微信小程序、支付宝小程序、百度小程序等等。它们的渲染层是webview，采用双线程，多webview架构。
4.跨端容器-React Native/Weex
它们是原生组件渲染，适用于React/Vue框架。具体结构如下：
5.跨端容器-Flutter
它有wideget、dart vm、skia图形库等作用，它的具体结构表现为下图：
下面是对跨端方案进行的一个对比，可以一目了然的得出它们的优缺点：
