前言

本节课简单介绍了不同编程范式，理论加实践，让我们更好的理解编程范式。

1.浏览器架构

1.演进

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

2.对比

3.多进程分工

• 浏览器（主进程）：主要负责页面展示逻辑，用户交互，子进程管理；包括地址栏、书签、前进、后退、收藏夹等
• GPU进程：负责UI绘制，包含整个浏览器全部UI
• 网络进程：网络服务进程，负责网络资源加载
• 标签页(渲染进程)：控制tab内的所有内容，将Html，Css和JavaScript转换为用户可交互的网页
• 插件进程：控制网站运行的插件，比如flash，ModHeader等
• 其他进程：适用程序 Storage/Network/Audio Service 等

2.渲染进程

1.常见浏览器内核

• Trident——IE4-11
• Gecko——Firefox
• Webkit——Safari, ChromeAndroid浏览器
• Blink——Chrome, Opera
• Edge——Edge
• Trident+Web kit(Blink)——国产浏览器QQ、360、搜狗、UC等

2.多线程架构

内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等

• JS引擎：解析js脚本
• GUI渲染：渲染浏览器界面
• 定时器触发
• 网络线程：
• 事件触发：控制事件循环

ps：JS引擎VS渲染引擎

整体流程如下：

• 网络线程负责加载网页资源
• JS引擎解析JS脚本并且执行
• JS解析引擎空闲时，渲染线程立即工作
• 用户交互、定时器操作等产生回调函数放入任务队列中
• 事件线程进行事件循环，将队列里的任务取出交给JS引擎执行

3.Chrome运行原理

1.优化

• 首屏优化的好处

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

• 渲染优化的好处

  • GPU加速
  • 减少回流、重绘
  • 离屏渲染
  • 懒加载

• JS优化的好处

  • 防止内存泄漏
  • 循环尽早break
  • 合理使用闭包
  • 减少Dom访问
  • 防抖、节流
  • Web Workers