同样的 DOM 操作为什么会有不一样的结果?

简介: 深夜光顾小网站,一进去竟然全部是广告,可惜 wuhen 模式下无法开启我的 Adblock,可我再转念一下,删广告这种事还用得着浏览器插件,不就是一个 DOM 操作?我直接一行代码删完

同样的 DOM 操作为什么会有不一样的结果?

深夜光顾小网站,一进去竟然全部是广告,可惜 wuhen 模式下无法开启我的 Adblock,可我再转念一下,删广告这种事还用得着浏览器插件,不就是一个 DOM 操作?我直接一行代码删完(放抖音上又是堪比 python 画花的一个爆款小作品)

t_3.jpg

即使面对内容丰富的网站,我依然还是面不改色的简单的进行了一下页面分析,很快啊,我打开了开发者工具,我一个 ctrl + c 迅速定位到广告栏,然后一个右键 Copy selector,拿到选择器,然后所谓的一行代码就出现了(凭我这分析速度,明天又可以跟隔壁小梁吹我会爬虫了)

document.querySelector("#HMRichBox").remove();

很快啊,我在控制台上复制粘贴,一个回车,广告立无,但是当我看下一页的时候却又发现,又来了一个广告,它奶奶的,玩阴的是吧!

它奶奶的,玩阴的是吧!

那么有没有什么办法可以让我可以一进去网页就可以执行我设计好的脚本呢?这我可想到了,Tampermonkey 这个油猴插件了,注意之前提到过插件在无痕模式下是不可以使用的,但是后面我百度后发现是可以的,但一涉及到 js 我可就不困了呀,还用得着 Adblock ?我直接手写一个!

油猴就是可以实现我们访问网页时帮助我们执行已经设计好的脚本,可是写好了之后,我发现这个去广告的效果并不是特别好?有时候行有时候不行,这是为什么呢?

前面说过,通过分析 HTML 页面结构然后通过 JS 执行相应的 DOM 操作可以帮助我们去删掉广告,那么可以去直接去看访问这个页面时,对展示的 HTML 页面的请求的返回结果进行一个分析

img1.png

罪魁祸首 - ajax

看完之后我就发现了罪魁祸首 - ajax,在请求回来初始 HTML 后,再通过异步请求弹窗广告,然后再渲染到 HTML 上,这也就是为什么插件时灵时不灵,如果访问网页的那一瞬间,网速快了,图片请求回来时,脚本还没运行,这时广告就能够去除,反之则不能,所以我访问这个网站的时候还要靠网速去除广告?

那肯定是不行的,我很快就想到了解决方案

延时运行脚本

网速慢了会导致脚本提前运行,那我延时一下我的脚本不就行了?

setTimeout(() => {
  document.querySelector("#HMRichBox").remove();
}, 1000);

加上时间限制后果然好了很多,但是有时候还是不太行,太短吧,失误率高,太长吧,我已经看完我想看的,或者已经跳过广告部分了,所以这阈值不是能够很好的把控

所以浏览器就是有没有一种可能,就是它可能会有生命周期钩子之类的东西呢?

页面生命周期

  1. DOMContentLoaded —— 浏览器已完全加载 HTML,并构建了 DOM 树,但像 和样式表之类的外部资源可能尚未加载完成。
  2. load —— 浏览器不仅加载完成了 HTML,还加载完成了所有外部资源:图片,样式等。
  3. beforeunload/unload —— 当用户正在离开页面时。

光看文字可能不太清除,看一下控制台 - network 上面的请求分析就可以清除的看到 DOMContentLoaded 和 load 的区别

img2.png

DOMContentLoaded 响应是在 5.62s,而 load 响应是在 5.85s

那么从上面这三个阶段并结合分析结果可以知道,在 DOMContentLoaded 的时候执行我们的脚本是比较合适的,而且更重要的是,在 DOMContentLoaded 响应的时候,广告弹窗的请求已经发送出去了,所以我们的脚本这个时候执行是能够去除广告的,也不再需要去考虑设置时间的多少去执行我们的脚本

总结

这篇文章的敲的代码都是在浏览器中完成的,也就是说,我需要对着网站的紧张刺激的内容一个键一个键的敲代码,而且还经历了三个版本

  1. 控制台
  2. 油猴脚本
  3. 页面生命周期分析

但是实现的内容其实只是为了去除广告,在思考完后,那天晚上其实我已经没有多大兴趣去看网站的实际内容了,违背初心了属于是

那我最后使用了什么去解决广告问题的呢?

其实还是用的 adblock,有些饭还得是让专业的人吃啊

好家伙我他妈直接好家伙

adblock 是采用拦截请求和 CSS 覆盖的方式解决

咱就是说有东西不用,尽 TM 造一些烂轮子

参考资料

load/domContentLoaded 事件、异步/延迟 Js 与 DOM 解析

ADBlock 的实现原理

相关文章
|
27天前
|
JavaScript 前端开发
低效的DOM操作(js的问题)
低效的DOM操作(js的问题)
|
28天前
|
缓存 JavaScript 前端开发
JavaScript中DOM操作:新手常犯错误与避免策略
【4月更文挑战第1天】本文介绍了JavaScript中DOM操作的基础和新手常犯错误,包括频繁查询DOM、不恰当的遍历、滥用innerHTML、忽视异步与DOM状态以及过度同步更新。建议包括缓存DOM引用、注意文本节点、慎用innerHTML以防止XSS、正确处理异步和批量更新。遵循最佳实践,开发者能提升代码质量和应用性能。
24 2
|
2月前
|
JavaScript 前端开发
使用jQuery操作DOM元素
使用jQuery操作DOM元素
16 1
|
2月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
13 1
|
2月前
|
JavaScript 前端开发
如何使用 JavaScript 操作 DOM?
如何使用 JavaScript 操作 DOM?
17 0
|
1天前
|
JavaScript 前端开发 开发者
【Web 前端】如何操作DOM元素?
【4月更文挑战第22天】【Web 前端】如何操作DOM元素?
|
6天前
|
JavaScript
js_操作dom(委托和冒泡事件)
js_操作dom(委托和冒泡事件)
8 0
|
9天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
16天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
16 0
|
16天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
16 4