客户端容器-web浏览器及跨段方案

浏览器架构

浏览器架构变迁

单进程→多进程→面向服务架构

单进程：安全性较低（插件可以访问浏览器资源）、流畅度较低（打开多页面时易卡顿）
多进程：安全性较高（插件没有资格访问浏览器资源）、流畅度较高（打开多页面时不易卡顿）
面向服务架构：安全性较高（插件没有资格访问浏览器资源）、流畅度较高（打开多页面时不易卡顿）


进程：程序在电脑上执行活动，启动进程就是运行程序的意思。具体运行方法是系统进行资源分配和调用。
多进程：一个应用程序有多条执行路径，即在同一个时间段执行多个任务，提高CPU的使用率
线程：进程的执行单元，执行路径
单线程：一个应用程序只有一条执行路径
多线程：提高应用程序的使用率

浏览器各架构对比-任务管理器

打开任务管理器快捷键：Ctrl+shift+esc

多进程架构介绍

浏览器：主进程，负责展示页面/管理主进程
GPU进程：UI绘制
网络进程：资源加载
标签页：控制tab内容，实现html，css，js交互
插件进程：控制插件
其他进程   

渲染进程

多线程工作流程

     网页线程加载资源
     js引擎解析脚本并执行
     js解析时，渲染线程立即工作
     用户交互，定时器操作等回调函数放入任务管理器
     事件进程进行事件循环，将队列认为取出js交给js引擎执行

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

浏览器主进程：

    输入处理（UI线程判断在url框输入的是url地址还是query查询条件，如果是url地址，就请求站点资源/如果是query，将输入发送给搜索引擎）
    
    →开始导航（用户按下回车，UI线程通知网络线程发送请求，来获取站点内容，请求过程中，tab处于loading状态）
    
    →读取响应（收到响应，读取）
    
    →寻找渲染进程（寻找渲染进程，开始处理）{渲染进程：资源加载→构建（构建渲染树）→布局→绘制→合成→完成}

首屏优化：

 1.压缩，分包（单页应用最好分包），删除无用代码
 2.静态资源分离
 3.JS脚本非阻塞加载
 4.缓存策略
 5.SSR
 6.预置loading，骨架屏

渲染优化：

 1.GPU加速
 2.减少回流，重绘
 3.离屏渲染
 4.懒加载

JS优化：

 1.防止内存泄漏
 2.循环尽早break
 3.合理使用闭包
 4.减少Dom访问
 5.防抖，节流
 6.web workers

跨端容器

跨端好处：

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

跨端容器

Webview/Android/IOS/国产Android