问题描述

csdn背景图片或GIF等会导致GPU狂飚。

原因分析：

问题原因有两个:

(1) 对于静态图片，比较好找到:

 通过右键定位拦截元素，自动添加以下规则到插件规则里:
 

csdnimg.cn##[src*="https\:\/\/csdnimg\.cn\/release\/blogv2\/dist\/pc\/themesSkin\/skin-clickmove\/images\/bg\.gif\?v2"]

(2) 对于动态特效, 

问题的根源是 skin-whitemove 这个皮肤CSS文件：

https://csdnimg.cn/release/blogv2/dist/pc/themesSkin/skin-whitemove/skin-whitemove-2af9149bdc.min.css

这个粒子特效不是 JavaScript 动态创建的 canvas，而是 CSS 皮肤文件里的纯 CSS 动画（用 @keyframes + ::before/::after 伪元素实现的），所以：

• 删 DOM 元素无效（没有真实 DOM 节点可删）
• 拦截 canvas 无效（根本没有 canvas）
• JS 注入无效（纯 CSS 驱动）

解决方案：

方法一：直接屏蔽这个皮肤 CSS 文件（Brave 广告过滤）

在 brave://adblock 自定义过滤器中加入：

||csdnimg.cn/release/blogv2/dist/pc/themesSkin/skin-whitemove/*

这会阻止整个皮肤文件加载，粒子动画和背景色会一起消失。

方法二：用 Stylus/uBlock 的样式注入覆盖（保留皮肤其他样式）

如果你装了 Stylus 插件，新建一条针对 blog.csdn.net 的样式：

css

/* 消除 CSDN whitemove 皮肤的粒子动画背景 */
#blog-content-box::before,
#blog-content-box::after,
body::before,
body::after,
.main_father::before,
.main_father::after {
    display: none !important;
    animation: none !important;
}

body {
    background: #f5f5f5 !important;
}

方法三：uBlock Origin 的 cosmetic filter（精确）

blog.csdn.net##body:style(background: #f5f5f5 !important; animation: none !important)
blog.csdn.net##*:style(animation: none !important)

最推荐方法一——直接在 Brave 的 adblock 里屏蔽那个皮肤 CSS URL，一行搞定，既精准又不影响页面其他功能。

测试例子：

https://blog.csdn.net/weixin_43354152/article/details/141689924

https://blog.csdn.net/lizhenhe/article/details/128621638