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，并能在各种平台中，支援最新的技术。