广告屏蔽插件的内部细节EasyList 规则详解：为什么广告屏蔽不直接用 CSS/JS？(彩蛋)
广告屏蔽插件的内部细节：EasyList 规则详解；为什么广告屏蔽不直接用 CSS/JS屏蔽广告？
我们经常在浏览器中使用一些广告屏蔽插件（如 uBlock Origin、AdGuard、AdBlock Plus）已经成为许多用户的必备插件。
刚开始我以为这些工具用 css 属性或者 JavaScript 代码来直接清除这些广告。
知道我了解到这些工具的核心依赖于 EasyList 这样的过滤规则集，而不是简单的 CSS 或 JavaScript 隐藏广告。
那么，为什么广告屏蔽工具要自定义一套规则语法，而不是直接用 CSS/JS 呢？
EasyList官方地址
EasyList - 概述
GitHub - Quarklizi/Easylist-China: 中文区广告拦截规则
1. 什么是 EasyList？
EasyList 是最流行的广告过滤规则集之一，由社区维护，主要用于 uBlock Origin、AdBlock Plus 等广告拦截工具。它的核心功能是：
- 精准匹配广告元素（如横幅、弹窗）
- 拦截广告网络请求（阻止广告资源加载）
- 绕过反广告屏蔽检测（防止网站强制显示广告）
EasyList 规则示例
bilibili.com##.ad-banner // 隐藏B站的广告横幅
youtube.com##.ytd-popup // 隐藏YouTube弹窗
||ads.example.com^$script // 拦截 ads.example.com 的广告脚本
为什么不用 CSS/JS 屏蔽广告？
虽然 CSS 和 JavaScript 也能隐藏广告，但它们存在以下关键问题：
(1) 性能问题：CSS/JS 影响页面加载
-
CSS 隐藏广告（如
display: none）仍然会下载广告资源，浪费带宽。 -
JS 移除广告（如
document.querySelector('.ad').remove()）会阻塞主线程，导致页面卡顿。 -
EasyList 方案：
直接在网络请求层面拦截广告（如||ads.com^），广告根本不会加载，节省流量和 CPU。
(2) 无法阻止广告跟踪和恶意脚本
-
CSS/JS 只能隐藏可见元素，但广告可能已经执行了跟踪脚本（如 Google Analytics）。
-
某些广告会动态生成，CSS/JS 难以精准匹配。
-
EasyList 方案：
支持 正则表达式（如/tracking_\d+.js/）和 HTTP 头过滤，彻底阻止广告相关请求。
(3) 容易被广告商检测并绕过
许多网站（如 YouTube、知乎）会检测 display: none 或 remove()，然后强制显示「请关闭广告屏蔽器」的弹窗。
-
EasyList 方案：
-
规则在浏览器底层生效，更难被检测。
-
支持 反反广告屏蔽规则（如
##^script:has-text(ad)）。
(4) 维护成本高
-
CSS/JS 需要手动更新，广告商稍微改个 class 名就会失效。
-
EasyList 由全球社区维护，每天自动更新规则。
-
EasyList 方案：
规则库自动同步，用户无需手动调整。
简单介绍一下EasyList 核心语法解析
(1) 基本隐藏规则
域名##CSS选择器
示例：
bilibili.com##.ad-container // 隐藏B站的广告容器
(2) 拦截网络请求
||ads.com^$script
||匹配所有子域名（如ads.example.com、track.ads.com）。$script指定拦截脚本（还支持$image、$stylesheet）。
(3) 正则表达式匹配
/ads_\d+.js/
匹配动态生成的广告脚本（如 ads_123.js、ads_456.js）。
(4) 例外规则（白名单）
@@||example.com^$document
允许 example.com 完全不过滤。
对比：CSS/JS vs. EasyList
| 对比项 | CSS/JS 方案 | EasyList 规则 |
|---|---|---|
| 性能 | 影响渲染性能 | 底层拦截，零开销 |
| 拦截能力 | 只能隐藏已加载元素 | 能阻止请求、修改 HTTP 头 |
| 反检测 | 容易被发现 | 隐蔽性强 |
| 维护成本 | 需手动更新 | 自动同步最新规则 |
| 适用场景 | 简单隐藏元素 | 专业级广告拦截 |
结论：为什么 EasyList 更强大？
- 更快：直接拦截广告请求，不浪费带宽。
- 更彻底：阻止广告脚本、跟踪器，而不仅仅是隐藏。
- 更隐蔽：绕过广告商的反屏蔽检测。
- 更智能：支持通配符、正则表达式等高级匹配。
如果你只是偶尔隐藏广告，可以用 Stylus（CSS） 或 Tampermonkey（JS）。
但如果你想要真正高效的广告拦截，uBlock Origin + EasyList 才是最佳选择！
结尾
彩蛋：教你屏蔽B站搜索框灰字且不影响搜索_哔哩哔哩_bilibili
bilibili.com##input.nav-search-content::placeholder
bilibili.com##input.nav-search-input::placeholder`