Chromium

近日，有外媒报道称，谷歌 Chromium 97 在其最新的更新里将默认搜索引擎的选项“删除”，由此而引发了一些争议。 家喻户晓，浏览器通常会有一个默认的搜索引擎和许多其余内置的搜索引擎，如果内置搜索引擎无奈满足需要，你也能够替换或手动增加其余搜索引擎。如果出于某种原因，用户不心愿在其浏览器中应用这些搜索引擎，则能够将其从设置中删除。 而此次 Chromium 97 将该选项删除，则意味着 Google Chrome、Microsoft Edge、Vivaldi 和 Brave 等基于 Chrome 的浏览器在降级到 Chrome 97 后将不再具备“删除”这些默认搜索引擎的选项。 正如下面屏幕截图中所看到的，“删除”选项已从 Chromium 中隐没，而“设置为默认值”和“编辑”选项仍被保留。这一变更的起因是开发人员认为删除此性能对最终用户更无利。 报道称，早在 2021 年 10 月，Chromium 开发者 Justin Donnolley 就发动了移除“删除”按钮的提议： “Currently, you can delete a pre-populated search engine (e.g. Google, Bing, Baidu) in 2 clicks. Doing so is irrecoverably destructive because, even if you’re knowledgeable enough to use the Add dialog to recreate a pre-populated entry, you can’t set the suggest, new tab page, or other specialized URLs.Deleting these should either be more difficult (confirmation dialog) or impossible (no delete option in the menu). My strong preference is to do the latter.” ...

从Google V8引擎剖析Promise实现 本文阅读的源码为Google V8 Engine v3.29.45，此版本的promise实现为js版本，在后续版本Google继续对其实现进行了处理。引入了es6语法等，在7.X版本迭代后，逐渐迭代成了C版本实现。 贴上源码地址：https://chromium.googlesource... 大家自觉传送。 代码中所有类似%functionName的函数均是C语言实现的运行时函数。 Define variables首先定义了将要在JS作用域使用了一些变量，提高了编译器的效率。 var IsPromise;var PromiseCreate;var PromiseResolve;var PromiseReject;var PromiseChain;var PromiseCatch;var PromiseThen;var PromiseHasRejectHandler;随后定义了一些全局私有变量供给和C语音交互，用于维护Promise的状态和进行Debug。 var promiseStatus = GLOBAL_PRIVATE("Promise#status");var promiseValue = GLOBAL_PRIVATE("Promise#value");var promiseOnResolve = GLOBAL_PRIVATE("Promise#onResolve");var promiseOnReject = GLOBAL_PRIVATE("Promise#onReject");var promiseRaw = GLOBAL_PRIVATE("Promise#raw");var promiseDebug = GLOBAL_PRIVATE("Promise#debug");var lastMicrotaskId = 0;其中GLOBAL_PRIVATE是python进行实现的，运用python的宏定义（macro）来定义调用了C语言的CreateGlobalPrivateOwnSymbol方法。 macro GLOBAL_PRIVATE(name) = (%CreateGlobalPrivateOwnSymbol(name));随后运用了一个自执行的匿名函数进行闭包逻辑。 (function() { // 主逻辑})();在闭包逻辑的最后，在promise原型上挂载了三个方法：chain，then，catch。在promise对象上挂载了all,race等六个方法。将Promise对象注册到了global。 %AddNamedProperty(global, 'Promise', $Promise, DONT_ENUM);InstallFunctions($Promise, DONT_ENUM, [ "defer", PromiseDeferred, "accept", PromiseResolved, "reject", PromiseRejected, "all", PromiseAll, "race", PromiseOne, "resolve", PromiseCast]);InstallFunctions($Promise.prototype, DONT_ENUM, [ "chain", PromiseChain, "then", PromiseThen, "catch", PromiseCatch]);Start from constructorvar $Promise = function Promise(resolver) { // 如果传入参数为全局promiseRaw变量的时候return if (resolver === promiseRaw) return; // 如果当前函数不是构造函数的化，抛出错误这不是一个promise if (!%_IsConstructCall()) throw MakeTypeError('not_a_promise', [this]); // 如果传入参数不是一个函数的话，抛出错误，传入参数不是一个function if (!IS_SPEC_FUNCTION(resolver)) throw MakeTypeError('resolver_not_a_function', [resolver]); var promise = PromiseInit(this); try { // debug相关忽略 %DebugPushPromise(promise); resolver(function(x) { PromiseResolve(promise, x) }, function(r) { PromiseReject(promise, r) }); } catch (e) { // 报错之后走到错误处理函数 PromiseReject(promise, e); } finally { // debug相关忽略 %DebugPopPromise(); }}构造函数在做完额外的异常和参数判断后，进入主逻辑调用PromiseInit方法初始化promise，随后调用了resolver方法，传入了两个默认的处理函数。在promise在内部被调用时（PromiseDeferred方法被调用时）会实例化$promise,将默认方法return回去，使得创建的promise示例具有resolve和reject方法。 ...

翻译：疯狂的技术宅原文：https://css-tricks.com/edge-g…本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的前端技术文章在2018年12月，微软宣布 Edge 将采用 Chromium 内核，这是一个为 Google Chrome 提供支持的开源项目。业内许多人对失去浏览器多样性而感到悲伤，然而我却非常高兴。官方正式的发布日期尚未公布，不过可能会在今年的某个时间公布。随着它的发布，一系列 HTML、JavaScript 和 CSS 功能将实现完全的跨浏览器支持。现在 Windows 预览版已经可用 ，即将推出适用于 Mac 的版本。不久前，我写了一篇题为“慢慢死亡的 Internet Explorer ”的文章。 一些人已经很幸运放弃了那个浏览器。但这并不是阻止我们回归的唯一因素。 Internet Explorer 是我们都讨厌的浏览器，Edge 本来就是很好的替代品。不幸的是，Edge 本身就是落后的。 EdgeHTML 是 Trident 的一个分支，这也是 Internet Explorer 的内核。同时微软对 Edge 方面的投资不足，导致了有其父必有其子。 Edge 的用户反馈网站倒是不错，允许开发人员投票选出他们想要实现的功能。但不幸的是，正如 Dave Rupert 吐槽的那样，在网站上投票“就像往许愿池中扔硬币一样。” 最需要的功能多年来一直没有实现。Edge 目前有许多不支持的功能，但是这些功能在其他现代浏览器中是可用的，一旦他们进行了切换，马上就可以用了。而且它有很多不能被修补或解决的问题，所以这个版本是一个大麻烦。值得期待的可用功能那么这些功能究竟是什么呢？让我们在这里兴奋的做一个简述。自定义元素和 Shadow DOM自定义元素和 shadow DOM 允许开发人员能够得到自定义、可重用和可封装的组件。很多人都在要求这个功能。自 2014 年以来，人们一直在投票要求实现它，现在我们终于得到了。HTML 的 details 和 summary 元素<details> 和 <summary> 元素是 HTML5 的一部分，自2011年起就在 Chrome 中得到了支持。这些元素在一起使用，可以生成一个显示和隐藏内容的简单小部件。虽然用 JavaScript 实现类似的东西很简单的，但是 <details> 和 <summary> 元素即使在 JavaScript 被禁用或加载失败时也能工作。https://codepen.io/cssgrid/em…Javascript 的字体加载 API对于某些人来说这有很大的意义。目前所有现代浏览器都支持 CSS font-display 属性。但是你可能仍然希望用 JavaScript 加载字体。 Zach Leatherman 解释了为什么你可能需要用 JavaScript加载字体 ，即使现在 font-display 已经得到了广泛支持。根据 Zach 的说法，这个 API 的抛弃 polyfill 非常重要，因为这个JavaScript是[…]通常在关键路径中内联。浏览器解析和执行 JavaScript 所花费的时间实际上被浪费在了支持本机 CSS 字体加载 API 上了。“在2018年的一篇文章中，Zach 感叹道：[…]浏览器提供的 CSS 字体加载 API 有着相当广泛的支持并且已经存在了很长时间，但是所有人都对 Microsoft Edge 感到很遗憾。“不会再这样了！JavaScript 的 flat 和 flatMap用代码片段来解释是最简单的方式，当一个数组嵌套在另一个数组中时，flat() 非常有用。const things = [’thing1’, ’thing2’, [’thing3’, [’thing4’]]]const flattenedThings = things.flat(2); // Returns [’thing1’, ’thing2’, ’thing3’, ’thing4’]顾名思义，flatMap() 相当于同时使用 map() 和 flat() 方法。Node.js 11也支持这些方法。????JavaScript 的 TextEncoder和TextDecoderTextEncoder 和 TextDecoder 是编码规范的一部分。在使用流时，它们非常有用。JavaScript 对象的 rest 和 spread就像数组的 rest 和 spread 属性一样。const obj1 = { a: 100, b: 2000}const obj2 = { c: 11000, d: 220}const combinedObj = {…obj1, …obj2} // {a: 100, b: 2000, c: 11000, d: 220}JavaScript模块：动态导入使用类似函数的语法，动态导入允许你在用户需要时延迟加载 ES 模块。button.addEventListener(“click”, function() { import("./myModule.js").then(module => module.default());});CSS 的 background-blend-mode 属性background-blend-mode 给 web 带来了 Photoshop 风格的图像处理。CSS prefers-reduced-motion 媒体查询随着网络上的动画变得越来越普遍，我们要意识到到动画可能会导致某些用户出现头晕、恶心和头痛的症状。我不禁觉得不令人感到不适应该是网站的默认设置，因为并非所有用户都会知道这个设置存在。CSS 的 caret-color 属性这是一个相当简单的功能，可以安全、轻松地用作渐进增强功能。它允许你在文本框输入字符时设置闪烁光标的样式。8位十六进制颜色表示法在代码库中保持一致性很重要。这包括固定使用 RGB、十六进制或 HSL 颜色格式中的某一个。如果你的首选格式是十六进制，将会遇到问题，因为当你需要定义透明度时，就要切换到 rgba()。 Hex 现在可以包含 alpha（透明度）值。例如，ffffff80 相当于rgba(255,255,255，.5)。但是它不是最直观的颜色格式，并且也没有比 rgba() 更多的优势。固有尺寸这是我最渴望的一个功能。固有尺寸根据元素的内容确定大小，并在CSS中引入三个新关键字：min-content，max-content 和fit-content()。这些关键字可用于大多数通常使用长度的地方，如 height, width, min-width, max-width, min-height, max-height, grid-template-rows, grid-template-columns 和 flex-basis。CSS 的 text-orientation 属性与 writing-mode属性一起使用，text-orientation 可以指定文本的方向，非常值得期待。https://codepen.io/cssgrid/em…CSS ：placeholder-shown 的伪元素placeholder-shown 甚至可以在 Internet Explorer 中使用，但不知何故从未在 Edge 中实现。用户体验研究表明，通常应该避免使用占位符文本。但是如果你用了占位符文本，可以很方便的根据用户是否在 input 中输入文本而有条件地应用样式。CSS 的 place-content 属性place-content 是设置 align-content 和 justify-content 的简写。https://codepen.io/cssgrid/em…CSS 的 will-change 属性will-change 属性可用于性能优化，提前通知浏览器元素 will change。 Pre-Chromium Edge实际上非常擅长处理动画，而不需要这个属性，但现在它将具有完全的跨浏览器支持。CSS 的 all 属性all 是一次设置所有 CSS 属性的简写。例如，设置 button { all: unset; } 相当于：button { background: none; border: none; color: inherit; font: inherit; outline: none; padding: 0;}不幸的是，revert 关键字仍然只在 Safari 中实现了，这在某种程度上限制了以从 all 属性中获得的好处。CSS 形状和剪辑路径传统上的 web 是以矩形为中心的。毕竟它有一个盒子模型。虽然我们不再需要浮动进行布局，但我们可以创造性地用它们来围绕图像和形状对文本 shape-outside 属性进行包装。这可以和 clip-path 属性结合使用，该属性可以在形状内显示图像。Clippy 是一个在线的 clip-path编辑器CSS ：focus-within 伪类如果要对表单的某个输入控件在处于焦点时应用特殊样式，那么:focus-within 是你的最佳选择。CSS 内容关键字如果你正在使用 CSS 网格，这几乎是必不可少的。尽管开发者的投出了多达 3,920 张的选票，Edge 还是将其标记为“未计划”。对于 flexbox 和 grid，只有 direct children 分别成为 flex 项或 grid 项。任何嵌套更深的东西都不能用 flex 或 grid-positioning 放置。用规范中的话来说，当 display:contents 应用于父元素时，“该元素必须被看作它已经在元素树中被其内容替换，“允许它们用网格或 flexbox 布局。Chris 文章中更全面的解释值得一读。不幸的是，仍然有某些错误和其他影响可访问性的浏览器实现。对未来更多的承诺我们只研究了 Edge 迁移到 Chromium 时所有现代浏览器都支持的功能。也就是说，传统 Edge 的死亡也让很多其他功能越来越近了。 Edge 是唯一一个迟迟不肯支持 Web 动画 API 的浏览器，并且对 Houdini 规范完全没有兴趣。来源: https://ishoudinireadyyet.com对浏览器测试的影响在 BrowserStack 进行中测试（左）和 iPhone 上的各种浏览器（右）当然，对于 Web 开发人员来说，另一个巨大的优势是测试会减少。在跨浏览器测试期间 Edge 大多都会被忽视，因此 Edge 用户更有可能获得破碎的体验。这是微软决定转向 Chromium 的主要原因。如果你的网站在Chromium 浏览器中没有错误，那么在其它浏览器中可能工作的都很好。 用Edge团队的话来说，Chromium 将为我们的客户提供“更好的Web兼容性，并为所有 Web 开发减少 Web 碎片化”。各种各样的设备和浏览器使浏览器测试成为使前端开发人员的最不愉快的任务之一。 Edge 现在可供 macOS 用户使用，这对于我们在 Mac 上工作的人来说非常有用。对 BrowserStack 的需求将会略微减少。我们会失去什么？据我所知，SVG颜色字体将不再适用于 Edge 浏览器。其他颜色字体格式（COLR，SBIX，CBDT/CBLC）将继续有效。其它浏览器会怎样？不可否认，Edge 并不是最后一个低标准浏览器。 Internet Explorer 始终不支持本文提到的所有功能。如果你在俄罗斯有用户，则需要支持 Yandex。如果你在非洲有用户，则需要支持 Opera Mini。如果你在中国有用户，那么UC 和 QQ 将会是重要的测试对象。如果你不需要考虑这些区域性因素，那么现在就是放弃对 Internet Explorer 的支持并拥抱现代 Web 功能的最佳时机。很多 PC 用户完全不习惯使用 Internet Explorer。希望改进后的 Edge 能够吸引他们。 Microsoft 官方博客中标题为“把 Internet Explorer 作为默认浏览器的危险” 的文章得出结论：“Internet Explorer 是一种兼容性解决方案……大多数开发人员现在都没有在 Internet Explorer 上进行测试。”对于其它用户来说，大多数 web 看起来越来越支离破碎。该让它死掉了。Google 是自大狂？Web 开发人员的工作将变得更加轻松，但对微软公告的回应并非是积极的。例如，Mozilla 有一个极其悲观的回应，指责微软“正式放弃独立的互联网共享平台”。该声明称谷歌“几乎完全控制了我们在线生活的基础设施”，并且“垄断了对独特资产的控制”。它的结论是“将基本的基础在线设施的控制权交给一家公司是非常糟糕的。”许多人已经回想到了 IE6 的时代，这是浏览器最后一次获得如此巨大的市场份额。赢得浏览器大战的 Internet Explorer 让人陷入了停滞状态。相比之下，Chrome 不断推出新功能。 Google 积极参与 W3C 和 WHATWG 的 web 标准化组织。可以说，它在这些机构中具有超大的影响力，并具有决定 web 未来形态的能力。Google 开发人员确实倾向于炒作仅在 Chrome 中发布的功能。来自竞争者的合作Edge 而不是新的 IE 可以帮助 web 创新。虽然它在许多领域是落后的，但它确实引领了 CSS 网格、CSS Exclusions、CSS Regions 和新的HTML导入规范。与以往完全不同，现在微软已成为全球最大的开源项目支持者之一。这意味着所有主流浏览器现在都是开源的。微软已声明他们打算成为Chromium的重要贡献者 —— 事实上，他们已经累计提交了超过300次合并。这将对 Edge 用户有很大帮助，同时也将使 Chrome、Opera、Brave和其他基于 Chromium 的浏览器用户受益。本文首发微信公众号：前端先锋欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章欢迎继续阅读本专栏其它高赞文章：12个令人惊叹的CSS实验项目必须要会的 50 个React 面试题世界顶级公司的前端面试都问些什么11 个最好的 JavaScript 动态效果库CSS Flexbox 可视化手册从设计者的角度看 React过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！CSS粘性定位是怎样工作的一步步教你用HTML5 SVG实现动画效果程序员30岁前月薪达不到30K，该何去何从14个最好的 JavaScript 数据可视化库8 个给前端的顶级 VS Code 扩展插件Node.js 多线程完全指南把HTML转成PDF的4个方案及实现 ...

在centos7环境下使用chrome-php或wkhtmltoimage截图时出现的中文乱码解决方案最近做了一个小项目，要求使用chrome/chromium对抓取的页面进行截图保存并上传云服务，因为是composer依赖包管理，所以使用了chrome-php核心代码示例： // navigate $navigation = $page->navigate(‘https://www.baidu.com’); // wait for the page to be loaded $navigation->waitForNavigation(); // take a screenshot $screenshot = $page->screenshot([ ‘format’ => ‘jpeg’, // default to ‘png’ - possible values: ‘png’, ‘jpeg’, ‘quality’ => 80 // only if format is ‘jpeg’ - default 100 ]); // save the screenshot $screenshot->saveToFile(’/some/place/file.jpg’);结果发现截图不正确，所有中文字符乱码：后来提了issue，地址按照对方给的解决方法，并未有效解决。后来换了各种系统环境，包括更改中文支持，依然如故，只有在自己的mac上是正常的。所以猜想应该是字体的问题，所以尝试以下方案，最终正常显示：如以下命令执行出现permission denied的情况，使用sudo命令执行。1.fc-list查看是否有中文字体，一般情况下是不存在的，否则也不会乱码。2.查看是否支持ttmkfdir which ttmkfdir，如果没有的话，那么安装：yum install -y ttmkfdir3.centos7系统的话，创建字体目录，mkdir /usr/share/fonts/chinese4.上传本地的字体文件，例如mac里对应的任何一个ttf字体文件。5.将字体文件复制到/usr/share/fonts/chinese下，并执行chmod -R 755 /usr/share/fonts/chinese6.执行ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir7.编辑/etc/fonts/fonts.conf，在如下部位添加：8.运行fc-cache和fc-cache-64（如果有的话）9.运行fc-list查看刚刚安装的字体是否存在。10.再一次运行程序脚本，查看截图是否包含正常的中文字符。

前言 今天项目上遇到了一个问题，用户需要导入一个从我们服务器上下载的EXCEL文件，前端根据获取到的文件的type属性进行判断是否可以上传[“application/vnd.openxmlformats-officedocument.spreadsheetml.sheet”, “application/vnd.ms-excel”]，但是在某一个用户的电脑上却出现了通过<input type=“file”>获取到的file对象中，type属性为""，于是开始找各种资料希望了解浏览器是如何获取这个type属性的，为什么同一个文件不同的电脑获取到的属性不一样。MIME Type是什么 根据MDN上的说明，MIME Type （Multipurpose Internet Mail Extensions (MIME) type）是一种标准化的方式来表示文档的性质和格式。它在IETF RFC 6838中进行了定义和标准化。 浏览器通常使用MIME类型（而不是文件扩展名）来确定如何处理文档；因此服务器设置正确以将正确的MIME类型附加到响应对象的头部是非常重要的。所以浏览器中<input type=“file”>获取到的file对象中的type属性其实是文件的MIME Type。Chrome获取MIME类型 在chromium开源代码中 https://cs.chromium.org/chromium/src/net/base/mime_util.cc?l=314 314-318行中提到了： // We implement the same algorithm as Mozilla for mapping a file extension to // a mime type. That is, we first check a hard-coded list (that cannot be // overridden), and then if not found there, we defer to the system registry. // Finally, we scan a secondary hard-coded list to catch types that we can // deduce but that we also want to allow the OS to override. Chrome实现了与Mozilla相同的算法，将文件扩展名映射到MIME类型。首先，Chrome会检测一个硬编码列表（不能被覆盖）源码中的kPrimaryMappings，然后如果没有找到符合的，Chrome会从操作系统注册表中找，最后会扫描一个二级硬编码列表，源码中的kSecondaryMappings，用来捕获可以推断但是也希望允许操作系统覆盖的类型。 例如：从安装了Microsoft Excel的Windows系统上传CSV文件时，Chrome会将其报告为application/vnd.ms-excel。这是因为.csv未在第一个硬编码列表中指定，因此浏览器会回退到系统注册表。HKEY_CLASSES_ROOT.csv有一个名为的值Content Type设置为application/vnd.ms-excel。总结 前言中遇到的问题浏览器中获取不到type属性不一定是代码的原因，而是系统中所安装的Microsoft Excel软件或注册表的原因，另外在MDN中的File对象中也找到这也一句描述：基于当前的实现，浏览器不会实际读取文件的字节流，来判断它的媒体类型。它基于文件扩展来假设；重命名为 .txt 的 PNG 图像文件为 “text/plain” 而不是 “image/png” 。而且，file.type 仅仅对常见文件类型可靠。例如图像、文档、音频和视频。不常见的文件扩展名会返回空字符串。开发者最好不要依靠这个属性，作为唯一的验证方案。 ...