本文为作者在学习青训营课程时所作的笔记。
浏览器架构
单进程->多进程->面向服务
笔试题
Chrome运行原理
浏览器地址输入URL后发生了什么
输入处理
用户在输入内容后，UI线程会判断输入的是URL地址还是query查询条件
如果是URL，直接请求站点资源，如果是query，将输入发送给搜索引擎
开始导航
用户按下回车，UI线程通知网络线程发起一个网络请求，来获取站点内容
请求过程中,tab处于loading状态
读取响应
网络线程接收到http响应后，先检查响应头的媒体类型（MIME Type）
如果响应主体是一个HTML文件，浏览器将内容交给渲染进程处理
如果是其他类型文件，比如zip,exe等交给下载管理器处理
寻找渲染进程
网络线程做完所有检查后，会告知主进程数据已准备完毕，主进程确认后为这个站点寻找一个渲染进程，主进程通过IPC消息告知渲染进程去处理本次导航
渲染进程开始接收数据并告知主进程自己已开始处理，导航结束，进入文档加载阶段
渲染进程
资源加载
收到主进程的消息后，开始加载HTML文档及子资源，CSS样式文件，JavaScript脚本
构建渲染树
构建DOM树，将HTML文本转化成浏览器能够理解的结构
构建CSSOM树，将CSS代码转化为可理解的CSSOM
构建渲染树，也就是DOM树和CSSOM树的结合
页面布局
根据渲染树计算每个节点的位置和大小
在浏览器页面区域绘制元素边框
遍历渲染树，将元素以盒模型的形式写入文档流
页面绘制
构建图层，为特定节点生成专用图层
绘制图层，一个图层分成很多绘制指令，然后将这些指令按顺序组成一个绘制列表，交给合成线程
合成线程接收指令生成图块
栅格线程将图块进行栅格化
展示在屏幕上
跨端容器WebView
Webview就是网页视图，用于加载网页URL，并展示其内容的控件，可以内嵌在移动端App内，实现前端混合开发，大多数混合框架都是基于WebView的二次开发
Webview可以通过JSBridge和原生系统交互，实现复杂功能，
JavaScript调用Native：
API注入，Native获取JavaScript环境上下文，对其挂载的对象或者方法进行拦截
Native调用JavaScript:
直接通过webview暴露的API执行JS代码
JS环境中提供通信的JSBridge，Native端提供SDK响应JSBridge发出的调用
前端和客户端分别实现对应功能模块
实现一个简易的JSBridge:
