浅析CSS在DevTools 中架构演变


Posted in HTML / CSS onOctober 05, 2021

这片文章描述了DevTools 架构在CSS层面所做的更改。

本文主要解释 CSS 在历史上如何在 DevTools 中工作,以及如何在 DevTools 中现代化我们的 CSS,以准备(最终)迁移到用于在 JavaScript 文件中加载 CSS 的 Web 标准解决方案。

DevTools 中 CSS 的先前状态

DevTools 以两种不同的方式实现 CSS:

  • 一种用于DevTools遗留部分中使用的 CSS 文件
  • 另一种用于 DevTools 中使用的现代 Web 组件。

对于第一种遗留部分的来说,我们翻开Chromium源码,可以大致猜想它的实现:

浅析CSS在DevTools 中架构演变

Chromium源码

DevTools 中的 CSS 实现是多年前定义的,现在已经过时了。DevTools 一直坚持使用该 module.json 模式,

那么我们来看下这个文件具体形式是如何的:

浅析CSS在DevTools 中架构演变

module.json

这些CSS文件会被放在同一个目录下,为了将添加到 DevTools,您需要 registerRequiredCSS 使用要加载的文件的确切路径进行调用。

那么它的调用如下:

constructor() {
  …
  this.registerRequiredCSS('ui/legacy/components/quick_open/filteredListWidget.css');
  …
}

通过检索CSS文件的内容后,通过 appendStyle 函数将内容插入到 <style> 标签中,

const content = Root.Runtime.cachedResources.get(cssFile) || '';

if (!content) {
  console.error(cssFile + ' not preloaded. Check module.json');
}
 
const styleElement = document.createElement('style');
styleElement.textContent = content;
node.appendChild(styleElement);

但是,假设我们引入现代 Web 组件(使用自定义元素)时,我们最初决定在组件文件中通过内联 style> 使用CSS。这带来了自己的挑战:

  • 缺少语法高亮支持:为内联CSS提供语法高亮的插件往往不如为写在.css文件中的CSS提供的语法高亮和自动完成功能好。
  • 建立性能开销:内联CSS也意味着需要进行两次检查:一次针对CSS文件,一次针对内联CSS。如果所有的CSS都写在独立的CSS文件中,我们就可以消除这种性能开销。
  • 减化体积的挑战。内联 CSS 不容易缩小,因此没有任何 CSS 被缩小。DevTools 发布版本的文件大小也因同一 Web 组件的多个实例引入的重复 CSS 而增加。

基于以上的问题,那有哪些可以解决的方案呢?

研究潜在的解决方案

问题可以分为两个不同的部分:

  • 弄清楚构建系统如何处理 CSS 文件。
  • 弄清楚 DevTools 如何导入和使用 CSS 文件。

接下来我们看下,他们是如何为每个部分研究了不同的潜在解决方案,下面概述了这些解决方案。

导入 CSS 文件

在TypeScript文件中导入和利用CSS的目的是为了尽可能地贴近标准,在整个DevTools中执行一致性,并避免在我们的HTML中重复CSS。我们还希望能够选择一个解决方案,使我们的变化能够迁移到新的网络平台标准,如CSS模块脚本。

由于这些原因,@import语句和标签似乎并不适合DevTools。它们与DevTools其他部分的导入不一致,会导致Flash Of Unstyled Content(FOUC)的出现。迁移到CSS模块脚本会更难,因为导入必须明确地添加,并且与标签的处理方式不同。

const output = LitHtml.html`
<style> @import "css/styles.css"; </style>
<button> Hello world </button>`
const output = LitHtml.html`
<link rel="stylesheet" href="styles.css">
<button> Hello World </button>`

总结的话,潜在的解决方案是使用 @import 或 <link> 。

相反,我们选择找到一种方法,将CSS文件作为CSSStyleSheet对象导入,这样我们就可以使用其adoptedStyleSheets属性将其添加到Shadow Dom(DevTools使用Shadow DOM已经有几年了)。

至于Shadow DOM 不清楚的,可以参考:https://developers.google.com/web/fundamentals/web-components/shadowdom

使用 CSS 的新基础架构

我们需要一种将 CSS 文件转换为 CSSStyleSheet 对象的方法,以便我们可以轻松地在 TypeScript 文件中对其进行操作。最后选择放弃Rollup和webpack做转化,可能考虑的原因在于,构建过程中,将任何一个bundler 添加到生产构建中都可能存在潜在的性能问题。

我们与Chromium的GN构建系统的整合使得捆绑更加困难,因此捆绑器往往不能很好地与当前的Chromium构建系统整合。

相反,我们探索了使用当前 GN 构建系统为我们进行这种转换的选项。

新的解决方案涉及到使用adoptedStyleSheets向特定的Shadow DOM添加样式,同时使用GN构建系统来生成可被文档或ShadowRoot采用的CSSStyleSheet对象。

// CustomButton.ts

// Import the CSS style sheet contents from a JS file generated from CSS
import customButtonStyles from './customButton.css.js';
import otherStyles from './otherStyles.css.js';

export class CustomButton extends HTMLElement{
  … 
  connectedCallback(): void {
    // Add the styles to the shadow root scope
    this.shadow.adoptedStyleSheets = [customButtonStyles, otherStyles];
  }
}

使用adoptedStyleSheets有多种好处,包括:

  • 它正在成为一个现代的标准。
  • 防止重复的CSS。
  • 只对Shadow DOM应用样式,这就避免了CSS文件中重复的类名或ID选择器引起的问题。
  • 易于迁移到未来的网络标准,如CSS模块脚本和导入断言。

该解决方案的唯一注意事项是,导入语句需要导入.css.js文件。为了让GN在构建过程中生成一个CSS文件,我们编写了generate_css_js_files.js脚本。构建系统现在处理每一个CSS文件,并将其转换为一个JavaScript文件,该文件默认导出一个CSSStyleSheet对象。因为我们可以导入CSS文件并轻松地采用它。此外,我们现在还可以轻松地对生产构建进行最小化,节省文件大小。

iconButton.css.js 生成的例子:

const styles = new CSSStyleSheet();
styles.replaceSync(
  // In production, we also minify our CSS styles
  /`${isDebug ? output : cleanCSS.minify(output).styles}
  /*# sourceURL=${fileName} */`/
);

export default styles;

后续计划

到目前为止,Chromium DevTools 中的所有 Web 组件都已迁移到使用新的 CSS 基础架构,而不是使用内联样式。大多数遗留用法 registerRequiredCSS 也已迁移到使用新系统。剩下的就是删除尽可能多的 module.json 文件,然后迁移当前的基础架构以在未来实现 CSS 模块脚本!

参考

[1]https://developer.chrome.com/blog/modernising-css-infra-in-devtools/

[2]https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/legacy/Treeoutline.ts

[3] https://developer.chrome.com/blog/migrating-to-web-components

到此这篇关于浅析CSS在DevTools 中架构演变的文章就介绍到这了,更多相关css DevTools架构内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3绘制圆角矩形的简单示例
Sep 28 HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
Jan 27 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
Jun 30 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
Apr 23 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 #HTML / CSS
Canvas绘制像素风图片的示例代码
Canvas如何做个雪花屏版404的实现
使用canvas对video视频某一刻截图功能
Sep 25 #HTML / CSS
使用CSS实现一个搜索引擎的原理解析
sass 常用备忘案例详解
Sep 15 #HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 #HTML / CSS
You might like
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
php实现将二维关联数组转换成字符串的方法详解
2017/07/31 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
2010/11/16 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
JS 删除字符串最后一个字符的实现代码
2014/02/20 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
浅谈jQuery事件绑定原理
2015/01/02 Javascript
jQuery中 prop() attr()使用详解
2015/05/19 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
2017/01/19 Javascript
JS仿JQuery选择器功能
2017/03/08 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
小程序实现带年月选取效果的日历
2018/06/27 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
python回溯法实现数组全排列输出实例分析
2015/03/17 Python
简单分析python的类变量、实例变量
2019/08/23 Python
python 实现dict转json并保存文件
2019/12/05 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
小结Python的反射机制
2020/09/28 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
Timberland美国官网:全球领先的户外品牌
2016/08/15 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
机电一体化专业应届生求职信
2013/11/27 职场文书
2014年车间工作总结
2014/11/21 职场文书
乱世佳人观后感
2015/06/08 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
Java spring定时任务详解
2021/10/05 Java/Android