[工具探索]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就不同了,内存超高占用率;页面打开多,还存在闪退的情况;

相关推荐
yanyu-yaya10 分钟前
@progress/kendo-react-dropdowns <ComboBox>组件报错,解决
前端·javascript·react.js
小破孩呦15 分钟前
动态循环表单+动态判断表单类型+动态判断表单是否必填方法
前端·javascript·html
ElasticPDF-新国产PDF编辑器32 分钟前
React PDF Annotation plugin library online API examples
前端·react.js·pdf
Bruce_Liuxiaowei2 小时前
构建macOS命令速查手册:基于Flask的轻量级Web应用实践
前端·macos·flask
Python私教2 小时前
安装electron项目是为什么要执行postinstall script
前端·javascript·electron
shmily_yyA2 小时前
Nextjs15 实战 - React Notes之SidebarNoteList优化和Suspense的使用
前端·react.js·前端框架
知识分享小能手2 小时前
CSS3学习教程,从入门到精通, 化妆品网站 HTML5 + CSS3 完整项目(26)
前端·javascript·css·学习·css3·html5·媒体
了不起的码农3 小时前
ES6对函数参数的新设计
前端·ecmascript·es6
XH2763 小时前
Android 通知用法详解
前端
陈随易3 小时前
盘点23个Nodejs的替代品Bun的实用功能
前端·后端·程序员