客户端容器
1.浏览器架构
浏览器架构对比
多进程分工
2.渲染进程
常见浏览器内核
多线程架构
内部是多线程实现,主要负责页面渲染,脚本执行,事件处理,网络请求等
js引擎vs渲染引擎
(1).解析执行js
(2).XML解析生成渲染树,显示在屏幕
(3).桥接方式通信
多线程工作流程
3.Chrome运行原理 如何展示网页 浏览器地址输入URL发生了什么
输入处理
开始导航
读取响应
寻找渲染进程
渲染进程—资源加载
渲染进程—构建渲染树
渲染进程——页面布局
渲染进程——页面绘制
前端性能performance
时间花在哪
什么情况下卡顿
首屏优化
(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)前端开发生态
常见跨端方案
webview
webview使用原生能力
小程序
RN/WeeX
Lynx
Flutter
跨端方案对比
总结