CSS

Web Fonts 的优化:F-mods

前面花了三篇的篇幅(Web Fonts vs. 系统字体FOUT、FOIT 和 FOFTWeb Fonts 字体加载策略)围绕着 Web Fonts 的优化做了些探讨。但这些优化手段都还是会引起 Web 布局偏移。不过,CSS 的一些新特性,即 F-mods(字体度量覆盖描述符)来覆盖字体的一些度量参数,让系统字体字体(备用字体)和 Web Fonts 更接近,尽可能的减少布局偏移。

Web Fonts 的优化:Web Fonts 字体加载策略

前面的篇幅(Web Fonts vs. 系统字体FOUT, FOIT 和 FOFT)告诉我们,使用 Web Fonts 会造成布局偏移,页面渲染时会发生重排和重绘。这会让页面在渲染时变得更慢,用户体验会更差。如果我们要对此进行优化,减少 Web Fonts 引起的布局偏移,就要从字体加载方面去做相应的优化策略。我们接下来主要围绕着字体加载策略来展开今天的话题,感兴趣的同学请继续往下阅读。

Web Fonts 的优化:FOUT, FOIT 和 FOFT

在上一节中,我们一起探讨了 Web Fonts 和 系统字体之间的差异。在这一部分我们一起来探讨使用 Web Fonts 时,浏览器加载 Web Fonts 和渲染 Web Fonts 的策略。其实,聊 Web Fonts 就离不开 FOUTFOITFOFT 话题,特别是 FOUTFOIT 。简单地说,FOUT、FOIT 和 FOFT 都是浏览器渲染文本的三种不同的表现,特别是 Web Fonts 被引入到 Web 中时,浏览器对 FOUT 和 FOIT 的优化就没有停止过。

Web Fonts 的优化:Web Fonts vs. 系统字体

Web Fonts 在 Web 中的使用已随处可见,比如聚划算页面中的 价格 使用的就是 Web Fonts(即 AlibabaSans102-Bd。虽然使用 Web Fonts 能在视觉上达到更好的效果(满足设计师的需求),但对于 Web 性能是有影响的,给用户的体验也是有影响的。如果Web Fonts 未加载,浏览器通常会延迟任何使用 Web Fonts 的文本(比如聚划算的价格)。这在许多情况下,将延迟 FCP(First Contenttful Paint),在某些情况下也会延迟 LCP(Largest Contentful Paint)。甚至更为严重的是导致布局偏移(Layout Shifts),会触发页面的重排和重绘(Web Fonts 和它的备用字体或系统字体在页面上占用不同的空间), 也会触发 CLS(Cumulative Layout Shift)。更令人感到头痛的是,Web Fonts 造成布移偏移的原因是 FOUT(Flashes Of Unstyled Text),而且 FOUT 还是业内公认的难以解决的。简单地说,Web Fonts 对视觉效果是有显著帮助,但对Web性能和用户体验是有严重影响。如果在实际业务中能避免 Web Fonts 的使用应该尽可能的不用,如果实在不能避免,那就要在使用 Web Fonts时做一些策略上的选择。接下来,我们围绕着 Web Fonts 的使用和性能优化来展开讨论。

我认识的 W3C 规范

在接到邀请在团队分享有关于与 W3C 规范相关的话题时,就我个人而言还是很虚的。虽然从事 Web 前端开发已有近十年,接触 W3C 规范也有多年,但要出来聊与 W3C 规范相关话题,还是没有足够多的信心。在开始写 PPT 之前,我特意咨询了好好友 @小倩 小姐姐,并且参考了她分享的《走进W3C》。虽然对 W3C 没有全面的认识,但我还是想从我个人的角度来看和思考 W3C 规范。希望接下来的分享对初次接触 W3C 或想深入 W3C 的同学有所帮助。

图解CSS:Grid布局案例之构建 Full-Bleed 布局

Full-Bleed 是印刷界中的一个概念,被称为 全出血,即在印刷中,我们有出血量,这是纸张被修剪的地方以外的区域。正因如此,印刷设计师习惯于在设计工作中考虑出血量。我们通过设置安全区域来做到这一点。这几年,这种被称为“全出血”的概念也运用到 Web 的布局中。就是在受限宽度的一列中使用全宽元素的布局,比如在较窄的一列文本中使用一个边缘到边缘的图像。在社区中,也有人把这种布局效果称为 Full-Width 布局,也有人称为 Edge-To-Edge 布局。说实话,在Web中实现这种布局效果,已不是难事,社区中有很多种不同的技术方案,都可以达到这个布局效果。不过,今天我们以不同的角度来思考这个问题!

图解CSS:Grid布局案例之构建重叠布局

如果一直是跟着 CSS Grid 布局这个系列到这里,你应该还记得,在 CSS Grid 布局中,我们可以通过网格项目放置的方式,让不同的元素重叠在一起,并且通过 CSS 的 z-index 来控制网格项目在 z 轴上的层叠顺序。也就是说,以往需要使用 CSS 的 position 的绝对定位(absolute)来实现的布局,现在可以直接使用 CSS Grid 来解决。在这一节,我们主要来看如何使用 CSS Grid 实现元素叠加的布局效果。

处理图片上文字效果的几种姿势

你可能时常会在平时的开发中碰到文字显示在图片上的 UI 效果。在某些情况下,因为图片的不同,文本放置在图片上会让文本变得难于易读。针对于这种情况,不管是设计师还是Web开发者,都会有一些解决方案,比如在图片和文本之间添加一个渐变覆盖,或者有一个有色的背景,或给文本添加阴影等让文本变得更易于阅读。在这篇文章中,和大家一起来讨论这些解决方案,如果你感兴趣的话,请继续往下阅读。

编写高效 CSS 选择器

早在十多年前,在社区就有很多专业人士探讨和深究过 CSS 选择器对渲染性能的影响。特别是对于今天的现代浏览器而言,他们经过了多年的变化(和优化),浏览器变得更聪明!对于 Web 开发人员,“不应该需要担心优化选择器的问题”,他对页面的渲染性能影响已经非常的小。即使如此,CSS的选择器的使用还是有分高效和非高效的,我们在编码的时候,还是应该尽可能的使用高效的CSS选择器,因为高效的CSS选择器对于页面的渲染是有一定帮助的,哪怕这种帮助很微小。但对于追求极致的渲染体验,这一切都是值得的,因为你要付出的并不会太多,反而得到的会较多。如果对网站的所有领域,包括CSS都进行微小的改进,那么他们将产生更多的实质性变化;用户总是会受益的

理解 Web 的重排和重绘

Web 中 的重排和重绘是 Web 渲染中常见的问题,即 Relayout(重排)和 Repaint(重绘)。其中重排(Relayout)也常被称为回流(Reflow)。另外在 Web 中聊渲染相关的话题,除了 Repaint、Reflow、Relayout之外,还有 Restyle(重写样式)和 Rendering(渲染)。这五个带有 R 开头的单词简称 5R ,对于 Web 性能的优化有着决定性的影响。如果要提高页面的渲染性能就需要深究造成 Repaint 和 Reflow 的相关原因。

页面

返回顶部