客户端容器|青训营笔记

124 阅读2分钟

客户端容器|青训营笔记

浏览器架构演进:

1.单进程架构

2.多进程架构

3.面向服务架构:多进程架构的升级板,将每个进程作为一个独立的基础服务

浏览器架构对比

 

渲染进程-多线程架构

内部是多线程实现,主要负责页面渲染,脚本执行,事件处理

多线程渲染的工作流程:

1.      网络线程负责加载网页资源

2.      JS引擎解析JS脚本并且执行

3.      JS解析引擎空闲时,渲染线程立即工作

4.      用户交互、定时器操作等产生回调函数放入任务队列中

5.      事件线程进行事件循环,将队列里的任务取出交给JS引擎执行

 

 

Chrome运行原理

浏览器地址栏输入url后,会先对url进行处理:判断输入的是url还是query查询条件

然后开始导航:UI线程通知网络线程发起一个网络请求,来获取站点内容

内核读取响应:首先检查响应头的媒体类型,如果是HTML文件,则浏览器将内容交给渲染进程处理,如果是其他文件,则交给下载管理器处理

同时渲染进程开始工作,渲染完成后通知主进程获取。

 

浏览器性能优化

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

 

跨段容器:

Flutter,lynx, webview ,Weex等等

通用原理

1.      UI组件

2.      渲染引擎

3.      逻辑控制引擎

4.      通信桥梁

5.      底层api抹平表现差异