广告屏蔽插件的内部细节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 更强大？​​

1. ​更快​：直接拦截广告请求，不浪费带宽。
2. ​更彻底​：阻止广告脚本、跟踪器，而不仅仅是隐藏。
3. ​更隐蔽​：绕过广告商的反屏蔽检测。
4. ​更智能​：支持通配符、正则表达式等高级匹配。

如果你只是偶尔隐藏广告，可以用 ​Stylus（CSS）​​ 或 ​Tampermonkey（JS）​。
但如果你想要真正高效的广告拦截，​uBlock Origin + EasyList​ 才是最佳选择！

​结尾​

彩蛋：教你屏蔽B站搜索框灰字且不影响搜索_哔哩哔哩_bilibili

bilibili.com##input.nav-search-content::placeholder

bilibili.com##input.nav-search-input::placeholder`