浏览器原理 · 13/51
1. addEventListener 第三个参数 2. addEventListener 与 attachEvent 区别 3. 浏览器兼容性测试与内核 4. 浏览器兼容性问题 5. 浏览器内核与引擎 6. 浏览器图层创建条件 7. 浏览器多进程架构 8. 浏览器渲染机制 9. 浏览器存储方案 10. 浏览器版本检测方法 11. children 与 childNodes 区别 12. 常见浏览器兼容性问题 13. Chrome 页面进程数量 14. 坐标系统对比 15. 多标签页通讯方案 16. 删除 Cookie 17. 自定义事件 18. DOM 事件处理方式演进 19. 元素尺寸属性对比 20. DOM 节点操作 21. DOM 事件机制 22. addEventListener 与 attachEvent 的区别 23. 获取页面所有复选框 24. HTMLCollection 与 NodeList 区别 25. Hybrid 应用开发 26. 强缓存命中机制 27. 浏览器缓存机制 28. 页面编码与资源编码不一致处理 29. jQuery 事件绑定方法对比 30. Input 点击触发的事件顺序 31. JavaScript 浏览器兼容性问题 32. jQuery 多事件绑定实现 33. JSBridge 原理 34. 链接点击后 Hover 失效解决方案 35. 减少重绘和回流的性能优化 36. 移动端 300ms 点击延迟问题 37. 移动端视口配置 38. 移动端点击穿透问题解决 39. 移动端兼容性问题 40. JSBridge 原理与实现 41. 移动端 1px 像素问题解决方案 42. 浏览器渲染流程 43. 页面加载完成事件对比 44. Offset、Scroll、Client 属性对比 45. 同源策略与跨域解决方案 46. Script 标签位置对页面加载的影响 47. Service Worker 与 PWA 48. 存储方案对比:Cookie、Storage、IndexedDB 49. 强缓存默认时间 50. URL 到页面显示的完整过程 51. V8 引擎 JavaScript 执行过程

Chrome 页面进程数量

Chrome 打开一个页面需要启动的进程及其作用

问题

Chrome 打开一个页面需要启动多少进程?

解答

Chrome 采用多进程架构,打开一个页面至少需要 4 个进程

1. 浏览器主进程(Browser Process)

  • 负责界面显示(地址栏、书签、前进后退按钮)
  • 管理子进程
  • 处理用户交互
  • 存储功能

2. 渲染进程(Renderer Process)

  • 解析 HTML、CSS
  • 执行 JavaScript
  • 页面渲染和合成
  • 每个标签页通常有独立的渲染进程(进程隔离)

3. GPU 进程(GPU Process)

  • 处理 GPU 任务
  • 负责 3D 渲染、视频解码
  • 整个浏览器共享一个

4. 网络进程(Network Process)

  • 处理网络请求
  • 整个浏览器共享一个

可能增加的进程

进程类型触发条件
插件进程页面使用了 Flash 等插件
扩展进程安装了浏览器扩展
额外渲染进程跨站 iframe(Site Isolation)
实用程序进程音频服务、存储服务等

查看方式

在 Chrome 地址栏输入 chrome://system/ 或使用快捷键 Shift + Esc 打开 Chrome 任务管理器查看所有进程。

关键点

  • 最少 4 个进程:浏览器主进程 + 渲染进程 + GPU 进程 + 网络进程
  • 渲染进程默认按站点隔离,同一站点的标签页可能共享渲染进程
  • 跨站 iframe 会启动独立的渲染进程(Site Isolation 安全策略)
  • 多进程架构的优势:进程隔离提高稳定性和安全性,一个页面崩溃不影响其他页面
  • 多进程架构的代价:内存占用更高