web浏览器的架构和运行原理

浏览器架构

最初的单进程架构：节省资源，但安全性差、扩展性低、数据没有隔离。现在更流行的是多进程架构。
多进程分工： 未来：
面向服务架构：更内聚，耦合性低，服务模块划分更细。

渲染进程

多线程架构：页面渲染、脚本执行、事件处理、网络请求等

• JS引擎：解析执行JS
• 渲染引擎：解析HTML和CSS源码，分别生成DOM树和CSSOM树，合成render树
• 多线程工作流程

Chrome运行原理

如何展示网页？

加载资源-构建渲染树-布局-构建绘制图层-光栅化-完成

• 输入处理：判断是URL还是query
• 开始导航：loading状态
• 读取响应：检查响应头header的媒体类型
  • 如果是HTML文件：交给渲染进程去处理
  • 如果是其他文件，如zip、exe等，则交给下载管理器处理
• 寻找渲染进程：browser传递给render树
• 资源加载：加载html、css、js脚本
• 构建渲染树

• 页面布局（根据渲染树计算节点位置和大小-绘制元素边框-将元素以盒模型的形式写入文档流）
• 页面绘制（构建图层-绘制图层-生成图块-栅格化-展示）

前端性能performance

• 首屏优化
  • 压缩、分包、删除无用代码
  • 静态资源分离
  • JS脚本非阻塞加载，或放到body底部
  • 缓存策略
  • SSR
  • 预置loading、骨架屏
• 渲染优化
  • GPU加速：比如做颜色渐变时用透明度、用transform做动画
  • 减少回流、重绘
  • 离屏渲染：先开辟一段缓冲期，完成渲染后再添加到显示器上面
  • 懒加载：将所需要的资源提前加载到本地，需要时从缓存中去取
• JS优化
  • 防止内存泄漏：注意定时器的使用，注意闭包
  • 循环尽早break或者return
  • 合理使用闭包
  • 减少dom访问：可以用一个变量将dom缓存起来，不用每次都去window查询
  • 防抖、节流
    防抖：防止多次提交的时候只提交最后一次的结果
    节流：保证在固定时间内只会执行一次
  • web workers：用于视频、音频的处理

跨端容器

• WebView（利用JSbridge）
• 小程序
  • 渲染层：webview;逻辑层：JSCore、V8
  • 双线程，多webview架构
  • 数据通信，Native转发或拦截
• RN/WeeX
  • 原生组件渲染
  • 依赖于React/Vue框架
  • 一般会内置一些component
  • 渲染流程

• Lynx
  • 基于Vue框架
• Flutter

• 跨端容器的通用原理
  • UI组件
  • 渲染引擎
  • 逻辑层
  • 通信bridge
  • 底层API抹平表现差异

为什么小程序体验比webview流畅？

做了离线缓存
封死了一些比较危险的操作

未来的跨端方案？

谁说得准呢。