前言
本文主要着重介绍浏览器的架构以及运行原理，讲解在Chrome浏览器里，网页是如何加载并且渲染成我们所见的画面。还能了解到在浏览器里JS引擎和渲染引擎如何协同工作，如何从多个角度优化前端的性能体验。再以webview容器为扩展，带你认识一些常见的跨端方案。适合想深入了解原理和扩展知识面。本文分为四大模块：
- 浏览器架构
- 渲染进程
- Chrome运行原理
- 跨端容器
浏览器架构
浏览器架构的演进
1．单进程架构:所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等 2．多进程架构:主进程、网络进程、渲染进程、GPU进程、插件进程分开各自做自己的事。相互隔离而不互相影响。 3．面向服务架构:将原来的Ul、数据库、文件、设备、网络等，作为一个独立的基础服务。是多进程架构升级版。
目前我们大多数浏览器都是多线程架构
说明 为什么我们会有单线程架构呢？早期计算机内存昂贵，多进程占用电脑资源多。
任务管理器
多进程分工
渲染进程
浏览器内核
多线程架构
渲染器内部是多线程实现，主要负责页面渲染，脚本执行，事件处理，网络请求等。以下是渲染时涉及到的主要线程：
对比
JS引擎vs渲染引擎
总的来说，JS引擎是负责解析执行JS代码的，而渲染引擎是对HTML和CSS进行解析的。
JS引擎具体工作过程为：js源码通过 JS解析器转换成AST抽象语法树，然后AST经过翻译又转化为字节码来给操作系统解析执行，或者再通过JIT转换成机器码（V8优化，JIT将高频函数转成机器码，下次遇到时即可直接执行，而不会经过字节码转换）最后给操作系统直接执行。
渲染引擎会通过xml解析器和css解析器将HTML和CSS分别转换成DOM树和CSSOM树，然后再合成为render树。最后通过显存显示出来。
JS引擎和渲染引擎是相互独立的，要想通过JS来操作DOM树或CSSOM树，需要通过中间Brige这种形式来实现。
多线程工作流程
- 网络线程负责加载网页资源
- JS引擎解析S脚本并且执行
- JS解析引擎空闲时，渲染线程立即工作
- 用户交互、定时器操作等产生回调函数放入任务队列中
- 事件线程进行事件循环,将队列里的任务取出交给JS引擎执行
Chrome运行原理
如何展示页面
阶段分析
