课程目录

1. 浏览器架构
2. 渲染进程
3. Chrome运行原理
4. 跨端容器

一、浏览器架构

① 浏览器架构演进

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

② 浏览器架构对比

③ 浏览器架构-任务管理器

④ 浏览器架构-思考?

1. 为什么会有单进程架构？

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

• 单线程的优点：

1. 初期实现起来比较简单快速，省去了进程间通信的工作。

2. 单一性使得部署和运营比较简单。

3. 内存占有少， 现在内存都很便宜，这个优势不明显。

4. 进程内部通信效率比IPC/socket等要高效。

为什么需要面向服务架构？

   1.我觉得面向服务的根本好处是便于管理，也是应用大到一定时候的必然产物。这往往和组织架构之间相契合。其实不合理的服务划分也会带来服务之间的混乱。

 2. 面向服务是一个解耦的过程，松耦合降低了服务之间的依赖，也意味着服务一个服务出现故障的时候不容易引起连锁反应，也能更好的控制服务与服务之间的关系与优先级。

 3.不同语言之间的通信。

多进程架构的好处：

1. 防止数据权限被修改
2. 可以使用安全沙箱
3. 更强的容错性
4. 资源使用率较低

渲染进程

① 常见浏览器内核

② 渲染进程-多进程架构

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

③ 渲染进程-多进程工作流程

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

④ 例题：某笔试题

• 要求：以下代码在浏览器环境下输出顺序，内容

const now = Date.now()

setTimeout() => {
console.log('time10',Date.now() - now)
},10)

setTimeout() => {
console.log('time30',Date.now() - now)
},30)

while (true) {
if (Date.now() - now >=20) {
break
 }
}
consloe.log(Date.now() - now)

三、Chrome运行原理

1.chrome运行原理-如何展示网页

• 浏览器地址输入URL后发生了什么？

2.chrome运行原理-输入处理

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

3.chrome运行原理-开始导航

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

4.chrome运行原理-读取响应

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

5.chrome运行原理-寻找渲染进程

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

6.渲染进程-构建渲染树

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

7.渲染进程-页面布局

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

8.渲染进程-页面绘制

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

9.前端性能performance

1.时间都花在哪

2.什么情况下卡顿

10.首屏优化

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

11.渲染优化

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

12.JS优化

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

四、跨端容器

① 为什么需要跨端？

1. 开发成本，效率
2. 一致性体验
3. 前端开发生态

② 有哪些跨端方案

• webview
• 小程序
• RN/WeeX
• Lynx
• Flutter

③ 跨端容器-webview

1. Webview，即网页视图，用于加载网页Url,并展示其内容的控件。
2. 可以内嵌在移动端App内，实现前端混合开发，大多混合框架都是基于Webview的二次开发，比如Ionic,Cordova。

④ 跨端容器-常用Webview分类

• 常用webview,Android,IOS,国产Android

⑤ 跨端容器-使用webview优势

• 一次开发，处处使用，学习成本低
• 随时发布，即时更新，不用下载安装包
• 移动设备性能不断提升，性能有保障
• 通过JSBridge和原生系统交互，实现复杂功能

⑥ 跨端容器-webview使用原生能力

1. JavaScript调用native

• API注入：native获取JavaScript环境上下文，对其挂载的对象或者方法进行拦截。
• 使用webview URL Scheme 跳转拦截。
• IOS上window.webkit.messageHandler直接通信。

2.native调用JavaScript

• 直接通过webview暴露的API执行代码。
• IOS webview.stringByEvaluatingJavaScriptFromString
• Android webview.evaluateJavaScript

⑦ 跨端容器-webview<->native通信

1. JS环境中提供通信的JSBridge.
2. native端提供SDK响应JSBridge
3. 前端和客户端分别实现对应功能模块。

⑧ 跨端容器-实现一个简易的JSBridge

interface CallArgs {
callId: string //调用Id,唯一标识
module: string //调用模块
method：string //调用方法
data：any //参数
const Callbacks = {} //存放回调函数 callId 为key
function applyNative = (payload:CallArgs,callback:Function)=>{
const callId = prefix + callTime++
Callbacks[callId] = callback
const Arg0: CallArgs = {
   callId: callId,
   module:payload.module || 'layout',
   method:payload.method || 'randomSize'
   data:payload.data,
   }
   if(IOS){
   return window.webkitURL.messageHandler.postMessage(JSON.stringify(Args0))
   }
   else{
   //Android对window上约定的对象进行拦截
   return window。AndroidBridge（JSON.stringify(Args0))
      }
   }

interface ResponseArgs {
responseId: string //回调Id,与callId对应
errCode: number
errMsg?: string
data: unknown
}
//native端调用webview,参数都经过序列化
const applyWebview = (res:string)=>{
   const response = JSON.parse(res) as ResponseArgs
   const {responseId} = response
   //从 Callbacks 找到对应的回调处理方法
   if(type of Callbacks[responseId] === 'function'){
   Callbacks[responseId](response)
   //回调后删除该次回调函数
   delete Callbacks[responseId]
        }
    }
    
    window.JSBridge = {
    applyNative,
    applyWebview
    //挂载在window上，供native直接使用
    }

⑨ 跨端容器-小程序

1. 微信，支付宝，百度小程序，小米直达号
2. 渲染层-webview
3. 双线程，多webview架构
4. 数据通信，Native转发

⑩ 跨端容器-React Native/WeeX

1. 原生组件渲染
2. React/Vue框架
3. virtual dom
4. JSBridge

11.跨端容器-Lynx

1. Vue
2. JS Core/V8
3. JSBinding
4. Native UI/Skia

12.跨端容器-Flutter

1. widegt
2. dart vm
3. skia图形库

13.跨端容器-通用原理

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

14.跨端方案对比

15.跨端容器-思考？？

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

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

1. 小程序相对于Webview而言性能更好主要有以下几个原因：

① 小程序的渲染性能更好。小程序使用原生语言开发，所以能够更好地利用手机的硬件资源，比如GPU加速。而Webview使用的是浏览器内核，相对来说性能就会弱一些。

② 小程序的数据传输更快。小程序与服务器连接使用的是WebSocket和HTTP/2协议，能够大幅度减少请求响应的时间和传输的流量。

③ 小程序的缓存机制更完善。小程序的页面使用了更为精细的缓存机制，只会渲染不同于之前页面，且数据有变更的部分，可以降低访问时的流量，提高了用户体验。

综上所述，小程序相对于Webview而言更为流畅，同时也能够提供更好的用户体验。

2.未来的跨端方案很可能是基于分布式系统的方案，通过将数据和计算分布在不同的设备上，使得不同设备之间可以进行协同工作，从而实现跨端的功能。此外，随着人工智能技术的发展，未来的跨端方案也可能会采用智能芯片和算法，使得设备之间能够实现更智能化和自适应的互动。

16.课程总结

以上就是本次笔记的所有内容了，感谢大家的阅读~