I'm developing a lazy scroll table with resizeable columns. It retrieves data from the server if the user is scrolling to a position where the data is not loaded yet. Because I want to the user to be able to scroll million of rows, I actually only put two list of 32 items in the DOM. If once of these lists scrolls out-of-the-viewport, I put it back on the other side of the visible list and refresh the items.
This all works great in Chrome, but Firefox (on ubuntu linux) gives me headaches, as it only redraws the screen after 5 seconds instead of instantly.
Does anybody know why FireFox behaves like that and maybe also how to fix/prevent this?
[EDIT]
The code finishes very quickly, I can see that in the console where I log the actions. The javascript places some nodes in the DOM. When inspecting the elements, their properties are ok, so the layout-calculation seems to be done and OK.
I will try to factor out the specific code, as it works together with the server to generate settings and some events. (I use Wicket, and refresh each of the two lists by Wicket ajax. Wicket then renderes html and replaces the dom-entries). This makes it somewhat complicated.
The issue came form a CSS setting. The table had a overflow:hidden setting. Removing it helped and resolved my issue.
Related
So I have developed a webpage containing some javascript and a couple of HighChart charts.
The page generally works great, every few seconds data is fetched from the server using an ajax request, and the chart is updated.
The issue happens when I have switched to a different tab for a few minutes and then want to go back. The page can take a very long time to show up. This happens on both Chrome and Firefox.
I couldn't really find out how the browser is handling javascript and page updates in non-active tabs, but it seems to be related at least.
Any ideas on how to improve the time it takes for the page to show?
To be perfectly clear, the page has no visible performance issues while it is the active tab.
So it turns out we froze highcharts just a couple of versions before this fix went in.
When we upgraded the version, everything worked great!
Many thanks to #WojciechChmiel for pointing me in the right direction.
Background:
I have a website that has multiple tabs running on server B. One of these tabs contains an iframe that is loading an Angularjs based site that is running on a separate server (server A). The site refreshes sections every 10 seconds to check for changes made elsewhere. When not on that tab, I want to block these calls. I need to find a way to detect whether the page is rendered and block the calls if it is not from within the server A.
Current solution:
In Firefox I have got this working using getBoundingClientRect().top on an element. The value changes when another tab is loaded so can check it and block the calls.
This doesn't work in Chrome though. The value doesn't change when swapping tabs.
Does anyone have any suggestions or experience with this? Need a solution that will work in all browsers.
Thank you for the suggestions.
Fixed this using:
parent.document.getElementsByTagName('iframe')[0].getBoundingClientRect().top
In all browsers this value changes when the iframe is no longer on the active page.
I'm working in chrome to improve page load times.
I'm trying to determine the cause of the delay between when the content is finished downloading and the onload event fires. You can see from the image that the content finishes downloading at about 160ms, but the load event doesn't fire until about 600ms.
My question, how can I identify and break down what is taking 450ms to happen? Is it possible to improve the load time here, or is this just an inevitable part of the rendering/painting process?
UPDATE #1
Solved the problem, the culprit was mainly jQuery; page is now loading at the 300ms section. I decided to defer the loading of jQuery (and every other site script until after the window.onload event fired. This closed the gap and now all of the page scripts load after the onload happens.
Here's the timeline view that shows the script loading:
The the Chrome Dev tools you have the Timeline tab, press record, refresh the page and stop the recording you'll get all you need.
Also be sure the check the check boxes you're interested in. Documentation here
I've tested some other pages and they have a similar gap to yours and i think that's the painting and rendering time.
If you really care that much about those 450 ms i suggest you read this article about the way chrome renders the DOM it's pretty good one.
My personal opinion though is that this sounds like premature optimization if you don't plan on rendering a few thousand or tens of thousands of elements you should just let it be or try to optimize some other parts, preferably the JavaScript.
I still suggest reading the article it's pretty good.
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
The client's website has product listings. The prices for the product are pulled dynamically in through an iFrame at the bottom of the page. There is Javascript on the page that automatically resizes this iFrame to the correct height based upon how big the iFrame content is, once it's loaded.
The client is reporting that when printing the page, they cannot see anything from the iFrame where the prices should be - apparently it is not printing in IE, just the main page itself.
I am on a Mac and so can't test in IE, so I'm having a hard time experimenting with this.
Can anyone clarify the expected behaviour in this situation? Is it possible to get IE to print both page and included iFrames by default, and if so, how would I go about doing this? I can only find examples for printing a specific frame from a parent window.
Thanks!
The expected behaviour should be what you're experiencing in other browsers. If the page is printed, the iframe should be printed along with it. It would be difficult to imagine that everyone else got it wrong and IE got it correct in this instance.
Below is a bit of speculation on what the issue might be, but without knowing more/seeing code it's difficult to know the specifics:
This issue could be due to some css that you may have on your page. I've read of similar iframe printing issues where the visibility was set to hidden initially resulting in the iframe not printing correctly. To get around this specific case the user had to set the width and height to 0px. Without knowing more about your site, I can not correctly predict that this is happening.
Another issue may by your dynamic resizing based on the contents of the iframe. A simple test would be to comment that section out and set a generic width and height on the iframe to see if the printing issue still occurs. Perhaps those dynamic styles are not being carried over to the print stylesheet and are not getting applied (therefore not appearing at all).
As a quick suggestion, look into css media types:
print
Intended for paged material and for documents viewed on screen in
print preview mode. Please consult the section on paged media for
information about formatting issues that are specific to paged media.
Helpful link: Print Specification
This was an interesting point, so I did a test using IE8 (on a server, not locally).
I printed in IE8 a web page that included an iframe of something that I built. And it printed some of the contents the first time (the other contents showed up black). The second time I printed, the iframe contents were all black.
However, in my example, the contents in the iframe are changing constantly (images and text that fade in and out) and the css background behind it is black.
This test has the contents of the iFrame on a different host server than the contents of the main page. But to my knowledge, there is a cross-domain policy file working here.
Cross-domain policy issues were my first guess, but it's entirely possible there is some issue with how internet explorer renders the screenshot when it sends it to the printer.
If you are using Javascript, then why not try window.print() function along with print media CSS.
I can't explain why IE isn't working, but maybe you can fix the problem by adding this part of code into the parent page, in order to force each iframe to be refresh :
$(document).ready(function() {
if($.browser.msie) {//Only for IE
$('iframe').each(function() {
$(this).attr('src', $(this).attr('src'));
});
}
});
To get the browser, i use this method.
And i don't use contentDocument.location.reload(true); method to be sure the iframe to be refresh. See SO topic.
Try this Plugin it will solved your problem
http://projects.erikzaadi.com/jQueryPlugins/jQuery.printElement/