web浏览器以及跨端方案

一、浏览器架构

1、浏览器架构演进

单进程架构：所有模块运行在同一个进程里、包含网络、插件、JavaScript运行环境（流畅和和扩展性不好）

多进程架构：主进程（扩展性差点）

面向服务架构：原来的UI、数据库、文件、设备，独立的（扩展性、安全性、稳定性、流畅度都好）

标签页（渲染进程）：控制tab内的所有内容

多进程分工

2.渲染进程

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

JS引擎VS渲染引擎

多线程工作流程

例题如下

Chrome运行原理

展示网页

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

输入处理

开始导航

读取响应

寻找渲染进程

资源加载

构建渲染树

页面布局

页面绘制

1、首屏优化：压缩、分包、删除无用代码

静态资源分离

JS脚本非租塞加载

缓存策略

SSR

预置loading、骨架屏

2、渲染优化

GPU优化

减少回流、重绘

离屏渲染

懒加载

3、JS优化

防止内存泄漏

循环尽早break

合理使用闭包

减少Dom访问

防抖、节流

Web Workers

4、跨端容器

需要跨端的原因

方案： webview 小程序 RN/Weex Lynx Flutter

Webview：网页视图，加载网页Url，展示其内容控件

内嵌移动端App内，前端混合开发，混合框架都是基于webview的二次开发，比如：lonic\cordova

分类：

优势：

使用原生能力：

总结：