Is it possible to cause Google Chrome to prevent painting... as in, to keep the page exactly the same, no animations or content changes.
The reason I ask is because I have created an extension for people who find it difficult to read webpages when things are animating/flashing/changing/etc.
It currently works by taking a screenshot and layering it over the page (position absolute, with a high value z-index).
But because captureVisibleTab cannot capture the whole page (issue 45209), the screenshot needs to be re-created every time the user scrolls the page.
However the change in iOS 8 Safari to not pause printing while scrolling got me thinking there may be another way around this by trying to emulate the pre iOS 8 behaviour (something I preferred, as Reader View does not always work, or stop animated gifs).
You cannot stop the execution thread, its browser who decides it.
However to prevent CPU Cycles What chrome does is, Pauses the javascript execution thread when window is blurred. But since you are showing captured with higher z-index you window will still be active.
One possible way :
Disable the script for that url when the page is loaded.
You might miss the dynamic content but as you asked "no animations or content changes". Any dom or style manipulations by javscript causes repaint of the page. Disabling it might be one solution. However not pretty sure about how to stop css animations.
I have also seen extensions that can capture full webpage image or pdf. you can capture the full page and show them irrelevant of whatever changing in the background
Related
Context:
I am creating a Chrome extension that hides certain elements of certain sites
In this specific case, I'm trying to hide the main feed of YouTube's home and trending pages
The script has no trouble on all other sites, including Twitter, Facebook etc.
But on YouTube, it's causing the page to crash
Roughly speaking, what the script does is:
Observes any mutation on document (childList: true, subtree: true, characterData: false)
Searches for the existence of certain nodes in the document
Changes some of their styles to hide them (or if already hidden, does nothing)
Adds a small menu into the node with a button to unhide the node
The MutationObserver is never disconnected because it needs to keep watching in the case of single-page apps where the page stays the same but different nodes come and go
So it keeps checking that the hidden nodes are still hidden every time there's any new mutation to the document or its subtree (heavy load on performance, I know - but it works fine on every other site)
YouTube issue:
YouTube always throws up a warning as follows, even when I am not running my script on it (in other words, YouTube's code is already a bit suspect):
[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>
The specific event is either touchstart or wheel. This error can display in the 100s of times even when I am not running my script.
When I run my script, this error seems to blow up even more, and display more times than usual
Eventually, the entire page crashes or takes far longer to load than it should (but it does sometimes eventually make it all the way, showing that my extension is not completely breaking down)
There's also another warning that tends to show, [Violation] 'readystatechange' handler took <N>ms
This warning shows far fewer times than the other (see screenshot below)
Interestingly, usually loading youtube.com home page when starting off in a new tab is fine, and my extension successfully hides (i.e. changes styles on + injects some extra HTML into) the node it's meant to hide
I then get a crash or extremely slow page load when I try to navigate within YouTube, e.g. specifically going to the Trending page using the left-hand side menu, OR occasionally when I hit refresh on the page
Things I've tried:
Overriding the default addEventListener method on EventTarget.prototype, which I have so far failed to do successfully - not sure I understand how to do this despite trying a few methods from SO
Blocking the script that this error originates from (desktop_polymer_inlined_html_polymer_flags_v2.js) using the Chrome WebRequest API, but that doesn't work because it breaks the whole page
Questions:
Is it likely that this 'non-passive event listener' warning is interplaying with my script to cause the crashing of the page? Or that my script is causing more listeners to be added than the page would usually?
How can I stop this error from happening (e.g. how do I prevent the event listeners from being created by YouTube's JS)?
Does anyone know anything about the way YouTube is built that would make it crash if you try to 1) modify a style on an element directly 2) add another element into a parent element 3) continually check styles on an element? Builtwith.com was not much help.
Is there something else I am missing here? Another way I can change my content script to make it interplay better with YouTube?*
*I know a tempting answer will be 'don't observe the document'/'observe it less' but this is more or less non-negotiable in terms of the way the browser extension needs to work.
Screenshot:
Chrome profiling:
Note: having looked into them individually, none of the functions that are taking up the huge amount of time are part of my extension. So perhaps YouTube is reacting badly to the DOM modifications that my extension performs.
IE at its best:
There is a USB stick with an HTML document on it. When the user opens it in IE11 and scripts are blocked, a prompt appears to allow those scripts to run.
When you click on allow, the site seems to get reloaded, but it also looks like a new tab is opened/ closed.
As soon as JS is enabled, you get redirected to an online version of the site.
Now, on the site there is a video which starts autoplaying after 10 seconds. But in IE11, a few seconds later the same video starts playing parallely so you here the sound twice.
When you check the DOM and remove the <video> tag (there is only 1), one video stops playing. The one that started later though keeps playing. Even when I visit another website the video keeps playing.
Only closing the browser stops the video.
This behaviour does not occur when I allow scripts to be executed directly.
Using video.js and jQuery.
Any ideas?
HTML Elements do not require JavaScript and/or ActiveX for serving their content. They are automated.
After the page is loaded and rendered as plain HTML, allowing JavaScript, will trigger DOM construction and re-render the content. However, DOM may duplicate the instance of media object and start running a parallel stream, that is, a dupe of the stream already initiated by HTML automation. !Not visible by DOM.
So, there's no new tab being opened or failing to close, it's simply an HTML Automated instance handling the initial stream.
And this will happen only when running HTML pages locally.
Finally:
The best way of avoiding this - expected but unwanted behavior - would be to:
Set the Video Element "autoplay" property to "false".
p.s.:
About the following issue of which you say: "As soon as JS is enabled, you get redirected to an online version of the site."
That's something no browser can or will do for you on its own. So you'll have to remove the code that is triggering the browser navigation to the online content yourself.
Good luck.
I am working on an older system where the top menu is housed in a frame. I know, bad practice, but as I said, it is an old system. The tabbed menu used javascript to change pages like this:
Link
This works, but the page is a complex page and takes a while to load and while it is loading, I get /content/newpage displayed in that top frame. This only happens in Chrome 29 as far as I know. It does not happen in Firefox or IE or previous versions of Chrome.
Is there a way around this? Can I use the target parameter to force to top frame and thus, use 'regular' links rather than javascript?
Link
Is it possible to find out when a page of an EPUB Fixed Layout is being viewed with Javascript?
There is the DOMContentLoaded event, but the adjacent pages also fire this event when they are preloaded in iBooks, causing animations or sounds to start before the page being visible...
No, it's not.
This is a "feature" of iBooks. It preloads the pages, I suppose to make page turns faster later on. Unfortunately, there is no way to detect that a page is preloading as opposed to being actually viewed.
There's only one way to deal with this--force user interaction on each page (tapping something) to start the animations or sounds. You may even need to structure your JS so that the JS itself is not loaded until the user interaction occurs. Videos won't start playing without user interaction anyway.
Due to an issue that came up with a website I have to use javascript for all of the links on the page.
like so...
<img src="image.png"/>
Will having many links with javascript on the webpage slow it down significantly?
Does the Javascript run when the page initially loads or only when a link is clicked?
EDIT: For those asking why I'm doing this. I'm creating an iPad site, when you use the 'add to home page' button to add the site as an icon, it allows users to view the site with no address bar.
However everytime a link is clicked it reopens Safari in a new window with the address bar back.
The only solution I could find was using javascript instead of an html based link to open the page.
For further reference see...
iPad WebApp Full Screen in Safari
2nd answer
"It only opens the first (bookmarked) page full screen. Any next page will be opened WITH the address bar visible again. Whatever meta tag you put into your page header..."
3rd answer down
"If you want to stay in a browser without launching a new window use this HTML code:
a href="javascript:this.location = 'index.php?page=1'"
"
I can see this adding to the bandwidth needs of a site marginally (very marginally), but the render time and the response time on clicking shouldn't be noticeable.
If it is a large concern I would recommend benchmarking the two different approaches to compare the real impact.
What do you mean by slow it down?
Page load time? Depends on the number of links on your page. It would have to be a LOT to be noticeable. Execution time? Again, not noticeable.
The better question to ask is are you o.k. with effectively deleting your website for those without javascript?
Also, if you are worried about SEO, you will need to take additional measures to ensure your site can still be indexed. (I doubt Google follows those kinds of URLs... could be wrong I guess).
EDIT: Now that you explained your situation above, you could easily just "hide" the address bar. See this SO question.