I am trying to understand the lifecycle of an HTML page. I cannot find any good resources on it online. So I opened up the f12 tool in ie and did some experiments on my own. Based on that I have drawn some conclusions, can someone please tell me if I am right?
My observation
1>When a page is requested over HTTP first the HTML skeleton is received by the browser. At this time nothing is displayed to the user.
2>Based on what is in the HTML skeleton some more additional requests are sent out for the resources (external JavaScript,css,images etc)
3>The browser waits until it receives a HTTP status code for the script and css resources.
4>Once the HTTP status code for the css and JavaScript is received, only then the browser starts loading the document top to bottom, executing whatever embedded JavaScript it encounters on the way.
5>If the embedded JavaScript on the top refers to an HTML element on the bottom, the JavaScript will fail.
6>Once the entire document finishes loading, then the jquery event $(document).ready is fired. (That is if I am using JQuery)
7>The browser does not wait for resources other than scripts and css, so resources like images could get loaded later after the page is displayed to the user.
You pretty much got it correct.
But it depends upon the code (especially point 5, 6 and 7). For example, if the JS at the top is within $(document).ready, then it will not fail.
Secondly, I would prefer Firefox F12 or Chrome F12 over IE. They are much much detailed and developer friendly. See the NET tab in them to understand further. It will show you the exact order in which the resources are called and loaded, which is what you were mainly looking for.
Related
I want to use the resource hint "prerender" (W3C) to speed up a website, but prerender is depricated in Chrome since v58. I read that NoState-Prefetch should be used instead (Google Dev), but I don't find anything on how to use it.
Does anybody know how I can prerender a site with the current version of Chrome or how to use "NoState-Prefetch"?
I'm grateful for every suggestion. Many thanks in advance.
Prerender is not deprecated, in fact it's part of the w3 standards. Though the standards are clear in that the user agent SHOULD fetch, however later it describes that it May preprocess, and adds a point later that the user agent might decide not to do anything.
Chrome initiated the prerender resource hint, previously it meant that the whole page should be pre-rendered in a hidden renderer process, but currently chrome does NoState-Prefetch which is less powerful than a full render but should still save time - in case the browser actually do it.
You can take a look at the following document to dig deeper, into why chrome changed the implementation of prerender, and when/what does No-State Prefetch do exactly.
To check that the browser did prerender locally:
go to chrome://net-export/ ( this will export a log of all the network activities happening from all chrome windows, apps, and extensions)
go to the website where you want to check prerendering, give it some time to idle and do the prerendering
save the json file from the net export page, and load it into https://netlog-viewer.appspot.com/
After its loaded, check the Prerender page found in the menu in the left side
I can see some images in my webpage that are not loading the reason is the wrong path inside the css or js file but how to know which js or css file is trying to load that resource. I tried too much in browser's inspector to find some way but I cannot figure out so I have to search each js and css file for the resource name. Is there any way to know the exact js or css file that is trying to load the failed resource.
Thanks
The Firefox and the Chrome DevTools provide a way to see what initiated the request of a resource within their Network panels.
Chrome DevTools
The Network panel within Chrome's DevTools provides information about the origin of a request within an Initiator column. All entries except the ones saying 'Other' link to the line within the JavaScript, CSS, or document, which caused the request.
For JavaScript calls it shows the stack trace that led to the request on hover.
It even allows you to highlight the initiators and dependencies by holding down Shift and hovering entries within the list.
Firefox DevTools
The Firefox DevTools Network Monitor has a Cause column indicating if a request came from JavaScript, the document, CSS, or some other source.
For JavaScript calls it provides the stack trace within a Stack Trace side bar when selecting the entry.
Unfortunately, for causes other than JavaScript it doesn't provide much useful information or links to the source files yet (as of Firefox 55). Therefore I've filed several enhancement requests to improve this feature.
I just tried something rather trivial: get the source code of a web page (by saving it) and count how often a certain phrase occurs in the code.
Turns out, it doesn't work if that page uses Polymer / web components. Is this a browser bug?
Try the following: Go to http://www.google.com/design/icons/ and try to find star_half in the code (the last icon on the page). If you inspect the element inside of Chrome or Firefox, it will lead you to
<i class="md-icon dp48">star_half</i>
but this won't be in the source if you copy the root node or save the html to disk.
Is there a way to get the entire code?
Reason for this behavior is probably how source viewing( and source saving as well?) works for browser and because shadow roots are attached to web components on the client side.
When you press ctrl-u on a web page, browser essentially does a network call again on the same url to fetch a copy of what server returned when you hit that url.
In this case, when this page renders, browser identifies the component icons-layout and then executes code to attach a shadow-root to this node. All of this happens when your page reaches the client(browser).
When you are trying to save this page, you are saving what server returned not current state of the page. You'll see same behavior if you fire up chrome console and try to save an icons-layout node.
Is there a way to get the entire code?
I don't know how to do it from browser but phantomjs provides a way to save client side rendered html.
I'm using
window.postMessage({message: "Hello !"}, url);
to send a message from a Chrome Extension (i don't know if this is relevant) to a specific page in a window with multiples opened pages. I noticed that sometimes i have TWO pages with the same URL.
I have a simple question:
How can i be sure to which page is postMessage sending the message ?
I want to send the message to only one tab. Can i use anything else apart from the url to identify the it?
Thanks in advance !
Considering that you said you can modify the remote website's code, and I don't see how to fix the postMessage solution, here are a couple of alternatives. I would love to know if there is a way to fix the postMessage approach, as it is the recommended one from the docs!
First off, you will need to coordinate your scripts from a central background page, which can keep track of open tabs.
Custom DOM events
This is an old recommendation from Chrome docs, that was replaced with window.postMessage example. It is described here (disregard the old chrome.extension.connect API) and consists of firing a custom event in shared DOM.
So, a sample architecture would be a background page deciding which tab to post message to, and sending that tab a message via chrome.tabs.sendMessage, to which your content script listens with chrome.runtime.onMessage. The tab's content script can then communicate with the page using the above custom event technique.
One possible approach to keeping tack of tabs: have the tabs permission to be able to enumerate all open tabs with the chrome.tabs API. Your background page can then decide which tab to message based on URL.
Another possible approach, to eliminate need for the scary tabs permission, is to have your content scripts report to the background page with chrome.runtime.connect as soon as they are initialized. The background page then can keep track of all active instances of your script and therefore decide which tab to message.
Webpage connecting to your extension
This is a "modern" way of doing communication with one exact extension.
It is described in the Chrome docs here. You can define your extension as externally connectable from your webpage, and your webpage initiates a port connection with your background script.
Then, as above, you can track live ports and use them for communication, cutting out the content script middleman.
I have an asp.net application and am experiencing a surprising behavior.
Whenever I leave one particular page in the application, The back button starts behaving in the following way:
hitting back (which should take me to the offending page) makes the current screen flash - as if going back - but then reloads the current page instead.
It doesn't matter how I leave that page I see this effect. If I click on a link on the offending page and hit back, same thing. If I am on the offending page and type in a new address in the address bar, then hit back, same thing. It doesn't matter if I go to another page in the same application or an external application, same thing.
I tried using fiddler to see what is going on, and all that I see when I hit back, is all of the external links (css, jquery, etc) get reloaded on the current site. I don't see a 320 from the offending page at all.
Note: disabling Active Scripts hides this symptom.
Most likely the external page either is tampering with your browser history (via JS) and setting the same page as the last page in your history when the site is being loaded, or it has another page set between that redirects to the page you are seeing, and when you click back you are loading the redirect page again.
Try to disable JavaScript and see if it is still happening. If yes, try to analyse the first load of the page with fiddler and see if another page is redirecting you.
False alarm:
This is an inherited project and I hadn't read all the code. There is javascript that says:
<script type="text/javascript">
if (window.history.forward(1) != null)
window.history.forward(1);
</script>
Problem solved.