Why does the same DOM operation have different results?

“This is the second day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

It’s a pity that WUhen mode can’t open my Adblock, but I think again, this kind of thing also need a browser plug-in, isn’t it a DOM operation? I deleted it in one line of code.

Even in the face of rich content of the website, I still face the simple analyzes the page does not change color, soon ah, I opened the developer tools, I quickly locate a CTRL + c to ads, and then a right Copy the selector, get a selector, then there is a line of code of the so-called (with my this analysis speed, Tomorrow I can play with the next trabecula again.

document.querySelector("#HMRichBox").remove();
Copy the code

Soon, AH, I copy and paste in the console, a enter, advertising no, but when I look at the next page, but found that there is an advertising, it grandma, play Yin is!

Is there any way I can execute my script as soon as I go in? Tampermonkey plugins are not available in traceless mode, but they are not available in traceless mode. When it comes to js, I don’t need Adblock. I’ll just write it by hand!

Oil monkey is to achieve our visit to the web page to help us execute the script has been designed, but after writing, I found that the effect of advertising is not particularly good? Sometimes it works and sometimes it doesn’t. Why is that?

As mentioned above, by analyzing the structure of the HTML page and then performing the corresponding DOM operations through JS, we can help us to delete the ads, so we can directly look at the return results of the displayed HTML page request when visiting this page

The culprit – Ajax

See after I found the culprit – ajax, after the initial HTML in the request come back, again through the asynchronous request pop-up ads, then apply colours to a drawing to the HTML, which is why a plugin when the spirit is ineffective, if access to the web pages that moment, speed fast, picture request back, didn’t run script, advertising can remove at this moment, Not the other way around, so I have to rely on the speed of the Internet to get rid of ads when I visit this site?

That was definitely not going to work, and I quickly came up with a solution

Delayed script

Slow network speed will cause the script to run ahead of time, so I delay my script.

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

However, sometimes it is not very good. It is too short, with a high error rate and too long. I have already watched what I want to watch, or I have skipped the advertisement part, so the threshold is not well controlled

So the browser is is there a possibility that it might have a lifecycle hook or something?

Page life cycle

  1. DOMContentLoaded — The browser has fully loaded HTML and built the DOM tree, but likeExternal resources such as and style sheets may not have finished loading.
  2. Load – The browser loads not only the HTML, but all external resources: images, styles, etc.
  3. Beforeunload /unload – when the user is leaving the page.

The difference between DOMContentLoaded and Load can be seen by looking at the request analysis above console-network

The DOMContentLoaded response is at 5.62s, while the load response is at 5.85s

So from the above three stages and the analysis results, we can know that it is appropriate to execute our script when DOMContentLoaded, and more importantly, when DOMContentLoaded responds, the AD popup request has already been sent. So our script can remove ads at this time of execution, and there is no need to consider how much time is set to execute our script

conclusion

The code for this article was done in the browser, which means I had to type key by key against the exciting content of the site, and went through three versions

  1. The console
  2. Grease monkey script
  3. Page life cycle analysis

However, the content was actually just to remove the advertisement. After thinking about it, I was not interested in seeing the actual content of the website that night. It was true that I violated my original intention

What did I finally use to solve the advertising problem?

In fact, they still use Adblock, and some meals have to be eaten by professionals

Adblock is a block request and CSS overlay solution, which means that if you don’t use anything, you can build some damn wheels

The resources

Load /domContentLoaded events, asynchronous/deferred Js and DOM parsing

Implementation principle of ADBlock