最近有些Vue3的项目,使用了safari进行测试环境搞开发,发现页面存在不同程序的页面乱码情况,反而google浏览器没问题,下面我们就对比下他们之间的差异点:
日常开发google chrome占多数;现在主流浏览器 Google Chrom、Safari、Microsoft Edge、Mozilla Firefox、Opera;以下简单介绍下:
- Google Chrome: Google Chrome 是当前最受欢迎的浏览器之一,由 Google 开发和维护。它以快速的性能、稳定性和丰富的扩展生态系统而闻名。
- Mozilla Firefox: Firefox 是由 Mozilla 基金会开发的开源浏览器。它注重隐私保护、自定义性和开放标准的支持。
- Microsoft Edge: Microsoft Edge 是由 Microsoft 开发的浏览器,其采用了Chromium引擎,这是Google Chrome使用的同一渲染引擎。Edge的新版取代了以前的EdgeHTML引擎。
- Apple Safari: Safari 是苹果公司为 macOS 和 iOS 设备开发的浏览器,使用WebKit渲染引擎。
- Opera: Opera 是一款具有一系列内置功能的浏览器,例如广告拦截、VPN、快速导航等。它也使用Chromium引擎。
常用浏览器对比
日常macbook使用场景,Safari和Google Chrome使用多些,就展开说说:
Safari 和 Google Chrome 使用不同的浏览器内核,这导致它们在渲染网页和执行一些网页技术时存在一些差异。以下是它们的主要内核及一些差异:
Safari:
- 内核: Safari 使用WebKit 内核。WebKit 是一个开源的渲染引擎,最初由苹果开发。它也是其他浏览器,如苹果的移动设备上的 Safari、iOS 浏览器等所使用的内核。
- JavaScript 引擎: Safari 使用 Nitro 引擎,这是 WebKit 内核中的 JavaScript 引擎。Nitro 引擎旨在提供快速的 JavaScript 执行性能。
- 渲染技术: Safari 支持一些苹果的独有渲染技术,如Core Animation、Core Graphics等,以提供更加平滑的用户体验。
Google Chrome:
- 内核: Google Chrome 使用 Blink 内核,这是一个由Google开发的开源渲染引擎。Blink 最初是从WebKit 分支出来的,因此它与WebKit 有一些相似之处。
- JavaScript 引擎: Chrome 使用 V8 引擎,这是一个由 Google 开发的高性能 JavaScript 引擎。V8 引擎被广泛用于其他 Google 产品和项目。
- 特有功能: Chrome 通常率先支持一些新的 Web 标准和技术,并且有一些特有的功能和工具,例如 Chrome 开发者工具。
差异和注意事项:
- CSS 渲染差异: 由于不同的渲染引擎,有些 CSS 属性在 Safari 和 Chrome 中的解释和渲染可能有细微差异。
- JavaScript 执行性能: 尽管两者都致力于提供高性能的 JavaScript 执行引擎,但它们的具体实现可能略有不同,可能导致在某些 JavaScript 代码方面的性能差异。
- Web 标准支持: 虽然 Safari 和 Chrome 都遵循主流的 Web 标准,但可能在某些标准的支持上存在一些差异。
内存占用差异
Chrome:
- 多进程架构: Chrome 采用多进程架构,每个标签页、插件和扩展都在独立的进程中运行。这使得每个标签页的内存占用相对独立,可以提高稳定性和安全性。
- 任务管理器: Chrome 提供了任务管理器,您可以通过它查看每个标签页和插件的详细内存占用情况。在 Chrome 的地址栏中输入
chrome://system
可以找到任务管理器的入口。 - 开发者工具: Chrome 内置了强大的开发者工具,可用于分析和优化网页性能,包括内存占用。
Safari:
-
优化为 Apple 硬件: Safari 在 macOS 和 iOS 设备上表现良好,因为它是针对苹果硬件和操作系统进行优化的。
-
Webkit 渲染引擎: Safari 使用 WebKit 渲染引擎,这是苹果自家的渲染引擎。WebKit 在性能和资源利用方面进行了优化。
-
活动监视器: 在 macOS 中,您可以使用 "活动监视器" 应用程序查看 Safari 的内存占用情况。
根据自身使用情况对比发现safari和google两者的内核基础版本都是基于WebKit,但是为啥safari慢慢就不大行(页面错乱,单方面测试存在误差),但safari也有优势:内存占用小;google Chrome就不同了,内存超高占用率;页面打开多,还存在闪退的情况;