Fixing lag in full-screen background image

Jul 28, 2021#hexo #前端 #折腾107

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

The author experienced lagging on their website's homepage when scrolling due to a fullscreen background image. They discovered that the issue was caused by the "fixed" attribute and found a solution by setting the background as a pseudo-element, which resolved the frame dropping problem.

After replacing the theme (the one I'm currently using), I noticed that the homepage was very laggy when scrolling, but there was no frame drop when scrolling in sections without background images, so I determined that the issue was with the background images.

However, after removing the "fixed" attribute, the lag disappeared, leading me to conclude that this attribute was causing performance issues when scrolling through the blog.

I found this article Fixed background image performance issue and followed the instructions to set the background as a pseudo-element. This prevented frequent repainting of the background during scrolling, thus resolving the frame drop issue. Finally, after half a year of procrastination, my blog homepage is smooth again...