微软为何开发Chromium Edge浏览器？相关内幕曝光

软最近宣布决定放弃自己开发的EdgeHTML渲染引擎，并采用开源的Chromium核心开发Chromium Edge浏览器。微软采用Chromium的举措帮助该公司将原本只针对Windows 10的Edge带入了Mac OS以及旧版本的Windows。

自2015年推出以来，经典的微软 Edge未能吸引公众注意力，浏览器无法与Google Chrome等竞争对手竞争。微软的高管们意识到，时间已经到了很大程度上改变Edge。在与CEO Satya Nadella会面后，微软 Edge团队分析了方方面面，以找出Edge的问题并相应地决定更改。

Satya Nadella要求他的开发人员找到一个解决方案，微软工程师创建了一篇论文，权衡了Edge的优点和缺点。经典Edge的缺点之一始终是分布问题。Windows10比任何其他桌面操作系统都受欢迎，其市场份额接近50%，但大量消费者正在运行Windows7、8和非Windows操作系统，他们根本无法使用只针对Windows 10的Edge浏览器，这使得开发人员很难在微软浏览器上测试他们的网页。

Edge的另一个问题是兼容性。微软使用自己的渲染引擎为Edge浏览器提供支持，并且存在兼容性问题，因为许多网站都针对Chrome等更受欢迎的网络浏览器进行了优化。网络发布者很难针对多个浏览器测试网站，而且由于Edge不受欢迎，开发人员通常会延迟对Edge的测试。

Edge的第三个问题是通用Windows平台（UWP）。经典的Edge也是基于UWP构建的，因此它可以在多种外形设备上运行。但UWP并不是一个成熟平台，而且没有大量应用程序支持，并且多显示器体验尚未为UWP做好准备，因此，微软决定将Edge重新定位，作为应用程序支持所有平台。

微软考虑过一次性修复Edge的想法。它还考虑将Edge带到Windows应用商店，因此更新不依赖于系统更新。该公司还考虑将Edge带入更多平台，如Windows 7。微软还将更多工程师转移到Edge部门来修复浏览器，但随着谷歌继续推动Chrome的许多新标准，微软无法跟上这些变化。

微软的不同产品组正在评估自己修复Edge的想法。 Windows团队也在研究Edge的新版本，他们提出了一个原型，最终进入了高级领导层会议。团队中的某个人创建了基于Chromium的粗略测试版本。这是一个很大的变化，因此微软高级领导人，包括比尔盖茨，微软首席技术官Kevin Scott，Reid Hoffman和GitHub首席执行官Nat Friedman进行了相关会以，在分析了转换为Chromium内核的各种利弊后，微软于2018年9月决定转向Chromium，最终于12月公布。

微软采用Chromium的计划受到科技行业的广泛赞誉，其中包括谷歌和Chromium社区，他们欢迎微软的贡献。一些人反对此举，包括非营利组织Mozilla。Chromium开发人员很高兴看到微软的工程师迅速修复了Chromium社区多年来一直悬而未决的错误。例如，微软正致力于在Windows上为Chromium提供更平滑的滚动，以及更好的触摸支持。虽然Chromium Edge运行良好，并且在很多方面都比Chrome更好，但转换到Chromium是否会改善Edge的市场份额还有待观察。

末有福利

前端开发，入门简单，有一台可以运行多款浏览器的电脑，能联网查询资料即可。深入的部分，需要更多的理论知识、肯钻研的精神。前端开发，需要入门了解的屈指可数，主要就是如下几个大方面：

背景知识

软件安装

文本编辑器

vscode(推荐使用，功能强大)
Sublime Text
NodePad++

浏览器

Firefox,Chrome , Opera, Safari, Internet Explorer and Microsoft Edge

版本控制

Git GitHub

构建工具

Webpack
Gulp

Web standards

Web standards ，主要定义浏览器端，功能接口标准的，标准的具体实现，由不同的浏览器厂商完成。

当下使用的web技术

主流浏览器

Firefox, Chrome , Opera, Safari, Internet Explorer and Microsoft Edge

协议

协议，主要用于通信。前后端不是独立的，彼此通过协议，互换信息，web系统才能运行正常

http
https
socket

HTML, CSS, and JavaScript

开发工具

各浏览的DevTool,便于调试
Linters插件
Minify工具
CDN等
测试工具
js库和前端框架（站点构建的更快、更高效）

服务端语言

Python, NodeJS, Deno, Go, Rust

面临的挑战

浏览器兼容

Web standards，各实现厂商不同，支持力度不同，浏览器兼容问题自然存在

响应式设计

厂商的不同，展示场景的不同，意味着不能全篇一律敲定，需要动态变化展示内容

性能

天下站点，只有快，才能留住用户

易用性

站点的访问人群不同，要具备普适性，都能轻松使用。

国际化

国际语言众多，需要尽可能的多支持

安全性

用户隐私数据保护

HTML

html基础概念

html元素

当然，也有例外，不是这种格式的

# Empty elements， or (void elements.) 
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
复制代码

html元素嵌套

<p>My cat is <strong>very</strong> grumpy.</p>
复制代码

块元素和行内元素

块元素，独占一行；行内元素，按先后顺序，排列这些与css的display不同，不影响元素能包含哪些元素，能被哪些元素包含

元素属性

其中，也存在一种特殊的属性：Boolean attributes

<input type="text" disabled>
# 等效于
<input type="text" disabled="disabled">
复制代码

另外，也会存在一些特殊的写法。推荐都是key="value"形式

<a href=https://www.mozilla.org/>favorite website</a>
复制代码

html文档结构

不管多少连续的空白，浏览器都会解析会一个空格

<!DOCTYPE html> # 定义解析格式
<html> # 文档的root 
  <head> #定义源数据地方 
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body> # 文档的可见内容部分
    <p>This is my page</p>
  </body>
</html>
复制代码

元数据等请移步参考

html特殊字符

<, >,",' and &, 这是html自身使用的，如果用户需要展示，那么需要转义

html注释

<!-- 
 <p>I am!</p> 
-->
复制代码

html 多媒体

image

普通的图片

alt描述图片

# 推荐添加alt,而不是text子元素节点添加
<img src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
         it has a large head with long sharp teeth">
复制代码

caption添加标题

<figure>
  <img src="images/dinosaur.jpg"
       alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
       width="400"
       height="341">
 <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>
复制代码

响应式图片

根据展示设备尺寸的不同，加载不同的图片

<img srcset="elva-fairy-480w.jpg 480w,
            elva-fairy-800w.jpg 800w"
    sizes="(max-width: 600px) 480px,
           800px"
    src="elva-fairy-800w.jpg"
    alt="Elva dressed as a fairy">
复制代码

设备尺寸相同，但是分辨率不同

<img srcset="elva-fairy-320w.jpg,
            elva-fairy-480w.jpg 1.5x,
            elva-fairy-640w.jpg 2x"
    src="elva-fairy-640w.jpg"
    alt="Elva dressed as a fairy">
复制代码

利用picture，不同设选择加载不同的图片

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
复制代码

picture+svg

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp"> 
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
复制代码

audio

单一url 浏览器厂商，针对音频的支持格式不是不同的，譬如： MP3, MP4 and WebM

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>
复制代码

浏览器适配问题

<audio controls>
  <source src="viper.mp3" type="audio/mp3">
  <source src="viper.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
复制代码

video

单一url 浏览器厂商，针对视频的支持格式不是不同的

<video src="rabbit320.webm" controls>
  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
</video>
复制代码

浏览器适配问题

<video controls width="400" height="400"
       autoplay loop muted preload="auto" 
       poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4">
  <source src="rabbit320.webm" type="video/webm">
  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
复制代码

svg

image引用svg

<img 
    src="equilateral.svg" 
    alt="triangle with all three sides equal"
    height="87"
    width="100" />
复制代码

html引用svg

<svg width="300" height="200">
    <rect width="100%" height="100%" fill="green" />
</svg>
复制代码

iframe等中引用svg

<iframe src="triangle.svg" width="500" height="500" sandbox>
    <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>
复制代码

canvas

canvas与svg不同，canvas基于像素,svg基于矢量图

#html
<canvas id="my-canvas" width="600" height="400"></canvas>
复制代码

嵌入元素

iframe, embed and object

iframe

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> 
    <a href="https://developer.mozilla.org/en-US/docs/Glossary">
       Fallback link for browsers that don't support iframes
    </a>
  </p>
</iframe>
复制代码

html table

样式指定

<table>
  <tr>
    <th>Data 1</th>
    <th style="background-color: yellow">Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td style="background-color: yellow">Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td style="background-color: yellow">Jazz</td>
  </tr>
</table>
复制代码

更好的样式指定

col 一次指定即可

<table>
  <colgroup>
    <col> # 定义在colgroup中，与th个数对应
    <col style="background-color: yellow">
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>
复制代码

全部设置

<colgroup>
  <col style="background-color: yellow" span="2">
</colgroup>
复制代码

如果你现在也想学习前端开发技术，在学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的Q群:前114中6649后671，里面有许多前端学习资料大厂面试真题免费获取，希望能够对你们有所帮助。

片来源于网络

Microsoft Edge 是微软开发的网络浏览器，最初是基于 EdgeHTML 引擎和 Chakra 脚本引擎开发的。然而，由于多种原因，包括性能、兼容性和开发成本等，微软决定将 Edge 浏览器迁移到 Chromium 开源项目上，这是一个由 Google 主导的浏览器项目，其基础是 Chrome 浏览器所使用的 Blink 引擎。微软在 2018 年宣布了将 Edge 浏览器迁移到 Chromium 的计划，并在 2019 年发布了基于 Chromium 的 Edge 浏览器的首个预览版。由于 Chromium 的广泛使用，许多为 Chrome 浏览器开发的扩展可以无缝地在 Edge 浏览器中运行，这大大增加了 Edge 用户的扩展选择。Edge 浏览器同时集成了Chromium 提供的强大开发者工具，使得开发者可以更轻松地调试和优化 Web 应用。

目前，Edge 浏览器已经集成了一些 AI 扩展，这些扩展利用人工智能技术来增强用户的浏览体验。Sider AI 侧边栏 ：集成了多种 AI 模型的浏览器扩展，包括 ChatGPT、GPT-4o、Claude 3.5、Gemini 1.5还有豆包等。它允许用户通过侧边栏访问这些 AI 功能，以帮助搜索网页、发送电子邮件、提高写作或翻译文本。

其中扩展ChatGPT中文版 GPT-4(国内免费直连)，是一款基于的OpenAI公司最新版ChatGPT3.5、4.0等模型开发的聊天机器人，具有丰富的问题模版，提问精准，用户无需一次性大额购买，注册即可免费体验，可根据个人需求购买日卡，周卡，月卡等。其开发者为AI ChatGPT Ltd.，可直接注册使用，但每天只有10000tokens的免费额度。

另外，Microsoft Edge 浏览器的扩展类型非常多样，可以满足不同用户的需求。以下是一些常见的扩展类型：

广告拦截：例如 Adblock Plus，可以拦截视频广告、媒体广告、弹窗广告、横幅广告和文字广告。
个性化新标签页：如 Infinity 扩展，提供自定义的新标签页，包括快捷链接和个性化功能。
阅读优化：例如简悦（SimpleRead）扩展，帮助用户专注于网页正文内容。
稍后阅读：如 Pocket 扩展，允许用户保存网页以便稍后阅读。
网页保存：例如印象笔记剪藏扩展，可以快速保存网页内容到印象笔记。
键盘操作：如 Vimium 扩展，允许用户使用键盘快捷键来浏览网页。
APK下载：如 APK Downloader 扩展，帮助用户从 Google Play 商店下载 APK 文件。
密码管理：例如 LastPass 扩展，帮助用户管理不同网站的密码。
网页截图：如 Fireshot 扩展，允许用户轻松截取网页。
脚本管理：例如 Tampermonkey 扩展，用于管理网页增强脚本。
扩展管理：如 Extension Manager 扩展，自动启用或禁用其他扩展。
视频播放：例如 Picture-in-Picture 扩展，允许视频在小窗口中播放，同时进行其他浏览操作。

这些扩展类型覆盖了从提高浏览效率、增强安全性、个性化体验到特定功能实现等多个方面，极大地丰富了用户的浏览器使用体验。用户可以根据自己的需求在 Microsoft Edge Add-ons 商店中寻找合适的扩展进行安装。

总的来说，Edge 浏览器集成 Chrome 内核是一个战略性的决策，它不仅提高了浏览器的性能和兼容性，也为用户提供了更多的选择和更好的体验。微软承诺将继续开发和维护基于 Chromium 的 Edge 浏览器，同时与 Chromium 社区合作，推动 Web 技术的发展。Microsoft Edge在正逐渐扩展成为一个集工作、娱乐、生活、学习等功能一体的AI平台。

在线咨询

上一篇：让Chrome“滚”得更流畅：微软推荐Edge HTML风格滚动特性
下一篇：Oracle Code登录北京代码盛宴邀你high起来｜免费报名

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商