I'm using iFrame in my site to include other third party site in my site. How can I optimize its performance?
Are iFrame resources get cached?
If yes, then who is responsible for configuring it?
Should I configure caching of iFrame or should owner of third party website has to do this?
There is no 'performance' to an iFrame. An iFrame is merely an HTML tag that opens up space up in the current page to load an external HTML file.
That external HTML file would be cached by your browser as your browser settings see fit.
In terms of server caching and performance of the page it is loading, that's entirely up to the owner of that particular page and their own server/network set up.
Related
I was reading up on ajax and how it empowers us to exchange data with a server behind the scenes and consequently avoid full page reloads. My confusion lies here, I don't really understand what full-page reloads mean. I think it's probably cause I've been working with ajax/react since the start I guess and have not really seen any webpage of mine fully reload when I access stuff from a database or an api.
It'd be great if someone could explain what they are and why did we need them before ajax?
A full page load is where the entire page is downloaded from the server. A page typically consists of several sections: header, footer, navigation, and content. In a classic web application without AJAX, a user clicks on a link to another page, and has to download the full page, even though only the main content is changing. The header, footer, and navigation all get downloaded again even though they don't change.
With AJAX there is the opportunity to only change the parts of the page that will change. When a user clicks on the link, JavaScript loads just the content for that link and inserts it into the current page. The header, footer, and navigation don't need to reload.
This introduces other problems that need attention.
When AJAX inserts new content into the page, the URL doesn't change. That makes it difficult for users to bookmark or link to specific content. Well written AJAX applications use history.pushState() to update the URL when loading content via AJAX.
There are then two paths to get to every piece of content. Users can either load the URL containing that content directly, or load the content into some other page by following a link. Web developers need to test and ensure both work.
Search engines have trouble crawling AJAX powered sites. For best compatibility, you need to employ server side rendering (SSR) or pre-rendering to serve initial content on a page load that doesn't require JavaScript.
Even for Googlebot (which executes JavaScript) care must be taken to make an AJAX powered site crawlable. Googlebot doesn't simulate user actions like clicking, scrolling, hovering, or moving the mouse.
Content needs to appear on page load without any user interaction
You must use <a href=...> links for navigation so that Googlebot can find other pages by scanning the document object model (DOM). For users, JavaScript can intercept clicks on those links and prevent a full page load by using return false from the onclick handler or event.preventDefault() in the click handler.
I am looking for a firefox plugin that can store entire page in cache and load it when ever that address is typed, and only load content from server if we press reload cache or similar functionality.
My usecase is, I use documentation of Laravel, Bootstrap, Jquery etc on regularly based but each time I am accessing it from the internet, these pages do not have any changes for many days. I dont want to store the webpage as file and access it, I would love to do it in comfort of your web browser than opening files.
I think firefox already does this. Load a page in a tab, then go to top left firefox menu > developer > work offline.
Reload that page in tab its from cache.
If you ever go work offline it loads from cache.
I have a jqm multipage document (index.html) that includes several pages and other assets (js, css, etc.). I have my server configured to use etags for the html, css, and js files. The request/response headers are set appropriately and it works as expected.
During use of my application there are no requests (with the exception of signing off) to index.html, so there is never really a chance for the browser to see if there is a new file out there, let alone all of it's css and js files (unless the user signs off, requests the page again or does a refresh). If I deploy new software, how might I notify the user that new sw is available and/or somehow force a refresh of the index.html file?
My initial thoughts were to store the version # on the client and periodically make ajax requests to the server to check the version #. If new sw is available, display a link to notify the user informing them of the new sw and to click on the link to get it (reload index.html).
I'm curious how others have done this? Thoughts? Recommendations?
If you link to multipage document, you must use a data-ajax="false"
attribute on the link to cause a full page refresh due to the
limitation above where we only load the first page node in an Ajax
request due to potential hash collisions. There is currently a subpage
plugin that makes it possible to load in multi-page documents.
Reference: http://jquerymobile.com/demos/1.1.0/docs/pages/page-navmodel.html
Please also look at this:
Cases when Ajax navigation will not be used
Under certain conditions,
normal http requests will be used instead of Ajax requests. One case
where this is true is when linking to pages on external websites. You
can also specify that a normal http request be made through the
following link attributes:
rel=external
target (with any value, such as "_blank")
If the pages is loaded as http request instead of Ajax, the problem would be solved.
I want to create a Firefox Extension which will display a webpage. It will be like user should write a something in browser like "about:" or even a button would do ?
How can i load the WebPage in Firefox. The user should have a feel that a webpage is being loaded.
PS: I have javascript and CSS in that Page.
If i cannot make then what changes do i need to make in the web page for that change.
I also want to connect to a server and fetch XML data and want to display process that data and and display it on the page. I am developing this extension as my page is static and HTML/Javascript does not allow cross domain queries. I hope that cross-domain queries are possible if i use extension.
There is Browser XUL object that acts a an standalone browser. You can load any document inside that.
I'm doing some work with html 5's offline application cache using firefox 3.6. My web application uses iframes to load other web application that pass the same-origin policy requirement. Unfortunately, the offline application cache for the iframe loaded page does not work. Specifically:
For the url sourced in via an iframe, I observe the application manifest and all of resources listed inside of it being loaded from my webserver.
When I load the url of the iframe directly by typing it into my URL bar, the application cache works.
When the page that has the application cache is loaded via an iframe, the application cache does not work.
The only difference between the container page url and the iframe src url is the web application context (i.e. container is 'https://www.example.com/cat' while iframe source url is 'https://www.example.com/dog').
I did find some chatter on a whatwg working group thread discussing whether iframe's should inherit container manifest settings, which leads me to believe that this ought to work.
Am I doing something unreasomnable? Is firefox lagging behind the whatwg specification? Any ideas or pointers to a solution would be appreciated.
I figured out the problem and filed a bug ticket with firefox:
https://bugzilla.mozilla.org/show_bug.cgi?id=623996