[工具探索]Safari 和 Google Chrome 浏览器内核差异

最近有些Vue3的项目,使用了safari进行测试环境搞开发,发现页面存在不同程序的页面乱码情况,反而google浏览器没问题,下面我们就对比下他们之间的差异点:

日常开发google chrome占多数;现在主流浏览器 Google Chrom、Safari、Microsoft Edge、Mozilla Firefox、Opera;以下简单介绍下:

  1. Google Chrome: Google Chrome 是当前最受欢迎的浏览器之一,由 Google 开发和维护。它以快速的性能、稳定性和丰富的扩展生态系统而闻名。
  2. Mozilla Firefox: Firefox 是由 Mozilla 基金会开发的开源浏览器。它注重隐私保护、自定义性和开放标准的支持。
  3. Microsoft Edge: Microsoft Edge 是由 Microsoft 开发的浏览器,其采用了Chromium引擎,这是Google Chrome使用的同一渲染引擎。Edge的新版取代了以前的EdgeHTML引擎。
  4. Apple Safari: Safari 是苹果公司为 macOS 和 iOS 设备开发的浏览器,使用WebKit渲染引擎。
  5. Opera: Opera 是一款具有一系列内置功能的浏览器,例如广告拦截、VPN、快速导航等。它也使用Chromium引擎。

常用浏览器对比

日常macbook使用场景,Safari和Google Chrome使用多些,就展开说说:

Safari 和 Google Chrome 使用不同的浏览器内核,这导致它们在渲染网页和执行一些网页技术时存在一些差异。以下是它们的主要内核及一些差异:

Safari:
  1. 内核: Safari 使用WebKit 内核。WebKit 是一个开源的渲染引擎,最初由苹果开发。它也是其他浏览器,如苹果的移动设备上的 Safari、iOS 浏览器等所使用的内核。
  2. JavaScript 引擎: Safari 使用 Nitro 引擎,这是 WebKit 内核中的 JavaScript 引擎。Nitro 引擎旨在提供快速的 JavaScript 执行性能。
  3. 渲染技术: Safari 支持一些苹果的独有渲染技术,如Core Animation、Core Graphics等,以提供更加平滑的用户体验。
Google Chrome:
  1. 内核: Google Chrome 使用 Blink 内核,这是一个由Google开发的开源渲染引擎。Blink 最初是从WebKit 分支出来的,因此它与WebKit 有一些相似之处。
  2. JavaScript 引擎: Chrome 使用 V8 引擎,这是一个由 Google 开发的高性能 JavaScript 引擎。V8 引擎被广泛用于其他 Google 产品和项目。
  3. 特有功能: Chrome 通常率先支持一些新的 Web 标准和技术,并且有一些特有的功能和工具,例如 Chrome 开发者工具。
差异和注意事项:
  • CSS 渲染差异: 由于不同的渲染引擎,有些 CSS 属性在 Safari 和 Chrome 中的解释和渲染可能有细微差异。
  • JavaScript 执行性能: 尽管两者都致力于提供高性能的 JavaScript 执行引擎,但它们的具体实现可能略有不同,可能导致在某些 JavaScript 代码方面的性能差异。
  • Web 标准支持: 虽然 Safari 和 Chrome 都遵循主流的 Web 标准,但可能在某些标准的支持上存在一些差异。

内存占用差异

Chrome:
  1. 多进程架构: Chrome 采用多进程架构,每个标签页、插件和扩展都在独立的进程中运行。这使得每个标签页的内存占用相对独立,可以提高稳定性和安全性。
  2. 任务管理器: Chrome 提供了任务管理器,您可以通过它查看每个标签页和插件的详细内存占用情况。在 Chrome 的地址栏中输入 chrome://system 可以找到任务管理器的入口。
  3. 开发者工具: Chrome 内置了强大的开发者工具,可用于分析和优化网页性能,包括内存占用。
Safari:
  1. 优化为 Apple 硬件: Safari 在 macOS 和 iOS 设备上表现良好,因为它是针对苹果硬件和操作系统进行优化的。

  2. Webkit 渲染引擎: Safari 使用 WebKit 渲染引擎,这是苹果自家的渲染引擎。WebKit 在性能和资源利用方面进行了优化。

  3. 活动监视器: 在 macOS 中,您可以使用 "活动监视器" 应用程序查看 Safari 的内存占用情况。

根据自身使用情况对比发现safari和google两者的内核基础版本都是基于WebKit,但是为啥safari慢慢就不大行(页面错乱,单方面测试存在误差),但safari也有优势:内存占用小;google Chrome就不同了,内存超高占用率;页面打开多,还存在闪退的情况;

相关推荐
z千鑫17 分钟前
【前端】详解前端三大主流框架:React、Vue与Angular的比较与选择
前端·vue.js·react.js
m0_748256141 小时前
前端 MYTED单篇TED词汇学习功能优化
前端·学习
小白学前端6662 小时前
React Router 深入指南:从入门到进阶
前端·react.js·react
web130933203982 小时前
前端下载后端文件流,文件可以下载,但是打不开,显示“文件已损坏”的问题分析与解决方案
前端
outstanding木槿2 小时前
react+antd的Table组件编辑单元格
前端·javascript·react.js·前端框架
好名字08213 小时前
前端取Content-Disposition中的filename字段与解码(vue)
前端·javascript·vue.js·前端框架
隐形喷火龙3 小时前
element ui--下拉根据拼音首字母过滤
前端·vue.js·ui
m0_748241123 小时前
Selenium之Web元素定位
前端·selenium·测试工具
风无雨4 小时前
react杂乱笔记(一)
前端·笔记·react.js
前端小魔女4 小时前
2024-我赚到自媒体第一桶金
前端·rust