客户端容器——青训营课程

55 阅读1分钟

客户端容器

1.浏览器架构

image.png 浏览器架构对比 image.png 多进程分工 image.png 2.渲染进程 常见浏览器内核 image.png 多线程架构

内部是多线程实现,主要负责页面渲染,脚本执行,事件处理,网络请求等 image.png

image.png

js引擎vs渲染引擎

(1).解析执行js

(2).XML解析生成渲染树,显示在屏幕

(3).桥接方式通信

image.png 多线程工作流程

image.png

3.Chrome运行原理 如何展示网页 浏览器地址输入URL发生了什么

image.png 输入处理

image.png 开始导航 image.png 读取响应 image.png

image.png 寻找渲染进程 image.png

渲染进程—资源加载 image.png 渲染进程—构建渲染树

image.png

渲染进程——页面布局

image.png

渲染进程——页面绘制

image.png

image.png 前端性能performance 时间花在哪 什么情况下卡顿

image.png

首屏优化

(1)压缩,分包(比较重要),删除无用代码

(2)静态资源分离

(3)js脚本非阻塞加载

(4)缓存策略

(5)SSR

(6)预设loading,骨架屏

渲染优化

(1)GPU优化

(2)减少回流,重绘

(3)离屏渲染

(4)懒加载(资源提前加载到本地)

JS优化

(1)防止内存泄漏(全局变量,DOM引用,定时器内存泄漏)

(2)循环尽早break

(3)合理使用闭包

(4)减少DOM访问(缓存)

(5)防抖,节流

(6)Web Workers(视频,音频处理)

4.跨端容器

为什么需要跨端

(1)开发成本,效率

(2)一致性体验

(3)前端开发生态

image.png

常见跨端方案

webview image.png

image.png webview使用原生能力

image.png

image.png

image.png 小程序

image.png

image.png RN/WeeX

image.png

image.png Lynx

image.png

image.png Flutter

image.png

image.png

跨端方案对比

image.png

总结

image.png