GitHub披露让自家首页飞快的开发秘诀

GitHub分享其用来加速首页性能的技巧,除了改变调用的函数之外,也改变使用的图片格式,让包含图片、动画和视频的页面,仍快速且顺畅地加载,提升用户的浏览体验。

用户在向下滚动浏览GitHub首页的时候,GitHub在部分元素设置动画,以吸引用户的注意力,而在这个部分,GitHub改变了典型做法,以提高动画的性能与操作交互性。典型要构建这个效果的方式,是监听滚动事件,计算所有元素的可见性,并且根据元素的位置触发动画。

但这样的方法有一个大问题,GitHub提到,调用getBoundingClientRect将会触发网页回流(Reflow),因此可能产生性能瓶颈。因此GitHub改用IntersectionObservers,设置当元素出现在Viewport特定位置时发出通知,因此也就不需要监听滚动事件,或是调用getBoundingClientRect,只要利用IntersectionObservers就能侦测元素是否出现在Viewport中,因而降低计算资源的使用。

另外,仅使用对浏览器负担较轻的转换(Transform)和不透明(Opacity)属性动画,是GitHub在设计网页的原则,而在他们重新查看首页中的所有动画之后,他们发现,转场(Transition)特效和元素状态的改变,可能无意间破坏了这个他们严格遵守的原则。

GitHub提到,在改变透明度的CSS语法中,加入转场特效transition: * 0.6s ease;是一个常见的做法,但这个方法却可能会使网页性能低落,因为其他属性的更改,可能污染转场特效,像是加上鼠标悬停改变文本颜色的全局样式,就可能导致不必要的样式和布局运算。

为了避免动画污染,GitHub明确定义仅转场特效,应写成transition: opacity 0.6s ease, transform 0.6s ease;,明确指定转换和不透明度属性变换。在GitHub重新调整所有动画,使用IntersectionObservers以及明确指定不透明度和转换动画后,闲置的CPU使用率大降,样式重新计算的次数也急剧减少。

GitHub首页另外一个大调整,便是改变图片使用的格式,GitHub提到,由于他们的插图风格,需要使用PNG的透明度属性,但因为PNG文件动辄数MB,因此他们又希望可以拥有JPG的压缩特性,使得图片大小缩减。虽然新格式WebP能够提供两全其美的优点,但是实际支持的设备并不多,即便是在macOS Catalina上执行最新的版本Safari,仍无法渲染WebP图像。

因此GitHub最后发展出了一个复杂的方法,在支持WebP的设备上,使用WebP格式的图片,当设备不支持WebP,则回退改用GitHub所开发的特殊方法,将两张JPG图片嵌入在一张SVG图片中,一张JPG图片作为图片资料,另一张JPG图片则作为遮罩使用,最后以SVG格式打包起来,GitHub提到,他们所发展的复杂方法,可在每次页面加载时节省数百KB,并能在各种平台中,支持最新的技术。