客户端容器

• web浏览器以及跨端方案
• 浏览器是怎么运行的
• 浏览器本质是客户端的容器
• 浏览器的架构和运行原理
• 以谷歌浏览器为例，网页是怎么加载并展示出来的
• 浏览器的多进程架构和渲染进程多线程架构
• 常见的跨端方案

课程目录

• 01 浏览器架构
• 02 渲染进程
• 03 Chrome运行原理
• 04 跨端容器

01 浏览器架构

（1）浏览器架构演进

1、单进程架构：所有模块运行在同一个进程里，包含网络、插件、JavaScript运行环境等

2、多进程架构:主进程、网络进程、渲染进程、GPU进程、插件进程

3、面向服务架构:将原来的UI、数据库、文件、设备、网络等．作为一个独立的基础服务

（2）浏览器架构对比

• GPU进程
• 浏览器：主进程
• 标签页：渲染进程

（3）浏览器架构-多进程分工

• 其他进程：基础服务

• 第一个问题：硬件限制，为了节约资源
• 第二个问题：应该会

02 渲染进程

（1）常见浏览器内核

（2）渲染进程-多线程架构

分为js引擎线程、GUI渲染线程、定时器触发线程、网络线程、事件触发线程

（3）JS引擎 VS 渲染引擎

• 高频函数转为机器码（优化）
• JS引擎 和 渲染引擎 相互独立
• 如果需要js去操作dom，其实中间是通过bridge的形式进行操作

（4）渲染进程-多线程工作流程

20 20 30

03 Chrome运行原理

（1）如何展示网页 这里省略了服务器端的流程，主要讲浏览器在做什么

• 栅格化：转为位图，通常会使用GPU进行加速
• 显卡展示到屏幕上

前端性能performance

首屏优化

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

渲染优化：

• 1. GPU加速（比如：transform，GPU加速会新建图层）
• 2．减少回流、重绘（比如：不要使用table布局）
• 3．离屏渲染（开辟一段内存，把需要的渲染好，然后添加到显示器上面）
• 4．懒加载（将所需要的资源提前加载到本地，直接从缓存中取）

js优化：

• 1.防止内存泄漏（可能会导致内存泄漏的情况：全局变量的时候可能有内存泄漏的风险；dom给了js变量，dom删除，但是js变量还是存在；定时器，可以自己封装一个定时器）
• 2．循环尽早break
• 3. 合理使用闭包（可以减少元素的创建，比如单例；但是也可能会导致内存泄漏）
• 4．减少Dom访问（setText、className这样就访问一次；保存一下变量，缓存起来）
• 5．防抖、节流
• 6. Web Workers（和js引擎是独立的，文本传输，可以用在图片、视频、音频的处理上）

04 跨端容器

（1）为什么需要跨端

（2）跨端方案

（3）webview

1、Webview，即网页视图，用于加载网页Url，并展 示其内容的控件

2、可以内嵌在移动端App内，实现前端混合开发，大 多数混合框架都是基于Webview的二次开发;比如lonic、Cordova

跨端容器-使用WebView优势

1.一次开发，处处使用，学习成本低

2．随时发布，即时更新，不用下载安装包

3．移动设备性能不断提升，性能有保障

4．通过JSBridge和原生系统交互，实现复杂功能

• callId和responseId是对应的
• 处理完回调函数需要把回调函数给删除掉

（4）小程序

轻应用阶段

• vdom：是一个js对象，是对整个dom的描述

• 首屏渲染比较快

跨端容器-思考??

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

• 因为有离线缓存
• 基于webview做了综合

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

• webview