现代 CSS

会员专栏

图片的优化

图片在 Web 中除了占有重要的一席之地之外,对资源的使用也是非常的大,而且对用户的体验影响也非常大。虽然 <img> (或 CSS 中其他能用<image> 数据类型的属性,比如 background-imagemask-imageborder-image 以及 list-style-image 等)看上去不是很起眼,但图片使用的好坏直接会影响用户的体验,Web 的性能(加载,渲染相关的性能)。或者简单地说,它直接影响 CWV (Core Web Vitals)的几个关键指标,比如 LCPCLSFID。为什么说图片会对 LCP、CLS 和 FID 有着直接影响呢?我们先从 <img> 的使用开始,然后逐步来分析。

编写高效 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 的相关原因。

消除阻塞页面渲染的资源

在 Web 页面渲染过程中,有些资源文件(比如 HTML、CSS 和 JavaScript)会阻塞页面的渲染。当浏览器遇到渲染阻塞资源时,它就会停止下载其余的资源,直到这些关键文件得到处理(关键资源)。在此期间,整个渲染过程被搁置。另一方面,非渲染阻塞资源并不会延迟页面的渲染。浏览器可以在最初的页面渲染之后在后台安全地下载它们。然则,并不是所有被浏览器视为阻塞渲染的资源都是首屏渲染所必需的;这完全取决于页面的特征。你可以使用一些技术手段(最佳实践),将这些非关键的渲染阻塞资源变成非渲染的阻塞资源。此外,你也可以减少那些仍然关键的,无法消除的阻塞渲染的资源数量或大小。了解阻塞渲染资源将使你能够解决常见的 Web 性能问题。

关键渲染路径(CRP)

介绍Web页面解析时曾提到过:DOM树和CSSOM树结合在一起会构建出 Render Tree(渲染树),渲染树结合 Layout 绘制在屏幕上,从而展现出来。常常把这个过程称为 关键渲染路径(Critical Rendering Path)简称 CRP。也就是说,CRP 所用的时间直接决定了页面首次渲染页面的时间。即,通过优化关键渲染路径,可以显著缩短首次渲染页面的时间。如果我们要优化一个 Web 页面性能,那就必须对关键渲染路径中每一步中发生了什么,只有优化了关键路径才能彻底优化渲染性能。通过优化关键渲染路径,我们可以显著缩短首次渲染页面的时间。此外,了解关键渲染路径还可以构建高性能交互式应用打下基础。

你可以用伪元素做的有趣事情

CSS 中的伪元素能做什么,其实在《伪元素能帮助我们做些什么》一文中就和大家探讨过。我们知道伪元素可以帮助我们 清除浮动制作Icon图标分割线CSS TooltipsCSS计数器 等事情。其实除了这些常见的事情之外,CSS 伪元素还可以帮助我们做一些非常有趣的事情,这些有趣的事情也称得上是 CSS 方面的小技巧吧。接下来,和大家聊聊这方面的话题。

图解CSS: Grid布局(Part19)

CSS Grid 模块的出现以及浏览器对其支持,为 Web 布局提供了前所未有的可能性。我们可以用更少的元素(更简洁的 HTML 结构)构建更复杂的设计。这比我们一直认为非常强大的 Flexbox 要更强很多。但是,当你想到 CSS Grid 时,你一般会想到是我们平时习以为常的方块布局,对吗?@Andy Barefoot他的个人网站Codepen 上提供了很多有创意的响应式布局效果,让你会对 Web 布局有一种焕然一新的感觉,感觉与你的经典 Web 设计(规规矩矩方块布局),而且他使用了 CSS Grid 布局来做到这一点。

图解CSS: Grid布局(Part18)

我们花了很长的一段时间和多篇文章的篇幅和大家一起探讨了 CSS 网格布局模块的特性。从前面这些内容,不难发现网格布局的复杂性,灵活性。我想大家也意识到了,CSS Grid到来之后,Web中设计布局的方法也已经改变了。我们可以在纸上绘制布局草图,思考布局设计的全部内容。当你开始敲击代码的时候,就已经知道布局会是什么样子。正因为CSS Grid布局的复杂性,再加上网格容器上定义的网格是不可见的。为此我们不得不考虑,如何更轻易的使用网格,或者碰到网格布局相关的 Bug,又应如何来调试。熟悉 Web 开发的同学都知道,在调试布局或CSS相关的问题时,喜欢在元素上添加一个边框。在网格布局中,虽然可以使用类似的方法在网格容器和网格项目中添加边框,帮助我们快速的定位;但是我们没法给网格线添加边框。不过庆幸的是,目前主流的浏览器,比如 Chrome、Firefox、Safari 和 Microsoft Edge 浏览器的开发者工具(DevTools)都提供了网格布局审查器。有了这些工具之后,可以快速的帮助我们使用网格,调试使用网格碰到的问题。

图解CSS: Grid布局(Part17)

自从多列布局、Flexbox布局和Grid布局得到浏览器支持之后,就可以使用这些特性来实现 瀑布流的布局 ,但这些技术实现的瀑布流布局都或多或少存有一定的缺陷。不过,值得庆幸的是,CSS 网格布局的第3级(CSS Grid Layout Module Level 3) 将真正的瀑布流布局纳入了 W3C 规范中,称得上真正的瀑布流布局。不过遗憾的是,支持该规范草案的主流浏览器并不多,只有Firefox 和 Firefox Nightly。虽然这个功能还不能用于实际生产中,但你的试用以及使用之后的反馈是很有价值的,这有助于确保它满足你对这种布局的要求。

图解CSS: Grid布局(Part16)

subgrid 进入 CSS Grid 布局模块的 Level 2 规范之前,嵌套网格、subgriddisplay: contents 就有深度的讨论,最终 subgrid 得到更多的支持,也最终成为规范中的一部分。也就是说,嵌套网格 和 display: contents 都可以实现类似 subgrid 的布局。那这一节中,和大家来探讨 display: contentssubgrid 有何差异?

页面

返回顶部