Fixing lag in full-screen background image

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

AI Translation

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

AI-generated summary

The author had a problem with their website's background image causing lag when scrolling. They discovered that the issue was due to the "fixed" attribute. By following a solution they found in an article, they were able to fix the problem by setting the background as a pseudo-element, which prevented frequent redraws and improved performance.

After replacing the theme (the one I'm currently using), I noticed that the homepage was very laggy when scrolling. However, there was no frame drop when scrolling in sections without a background image, so I concluded that the issue was related to the background image.

After removing the "fixed" attribute, the lag disappeared. This led me to believe that this attribute was causing performance issues when scrolling through the blog.

I found an 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's homepage is smooth again...