Hi guys, I've just learned that you can make just one request to the server for the whole website like a trick below: <!doctype html><html lang="en"> #Head #CSSfile <body> #Navigation_main #MainContainer #Footer #JSfile </body></html> Code (markup): In this case, I send just one request for a simple html file to the server. At the server, I replace a hastag like #Footer with block of code like something below: <div id="footer"> Footer Stuffs <div> Code (markup): Now, I was wondering if it is better than a normal html file like example below: <!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <link rel="stylesheet" href="/css/styles.css" media="screen,projection,tv"> <!-- This sends another request --> </head><body> <div id="navigation_main"> <h1>Site Name</h1> </div> <div id="mainContainer"> BLAH BLAH BLAH BLAH & BLAH </div> <div id="footer"> Footer Stuffs <div> <script src="/js/main.js"></script> <!-- This sends another request --> </body></html> Code (markup): My concern is speed and overall performance, so which one is better since you can read files asynchronously today. Thank you,
I bet if you look at your network traffic using developer tools you're still making a ton of requests. The only way I could see you getting a page to load with a single request is to have all css and js on the page, all images are inline and not separate files - it's essentially what angular does The big question is why don't you want content cached?
That reminds me a bit of when I used server-side-include-files on a massive project back in the day. Developers would also use frames on the client-side UI to speed up response times without the end-user having to reload the entire page. I've worked on project that would essentially do the same as what you're doing but using XML. I vaguely remember seeing hashtag placeholders in another language, ...I think... well, if you've got a massive web site that needs to get up and running fast, you could create and easily manage templates using server-side includes, and/or client-side frames. If you're using a 14.4K dial-up modem (I've been using America Online since 1996 and I've got an Intel DX2 i486 desktop computer to run Windows 95!), you probably want to send and receive as little data as possible. Just let some computer elsewhere handle the work. I like redundancy. If you distribute your demands across multiple systems, that helps ensure up-time redundancy, efficiency, and it can also provide a security benefit in the event of a breach or loss. Just distribute all the work to other independent systems. That's what comes to mind...
Thank you, That's very useful information. I have no idea if what I'm doing a server side include or not. I'm doing something similar to Gulpjs here: https://gulpjs.com/ But instead of using a library I write my own code and it's much much lightweight than them.
Do you have a link to the source you got this... gibberish from? I have absolutely zero clue what you're even talking about, or what the code you shared filled with # is even supposed to do; apart from being invalid markup that no browser or server-side software I'm aware of would do anything with. Is that some sort of template system or something?!?
Yes, it begins with this page: https://css-tricks.com/the-simplest-ways-to-handle-html-includes/ But I write all the code by myself without looking at them code and go further a bit. It is just javascript after all. You can view pretty much everything on the console and you can manipulate anything as you wish. My example code is just a mock up though.
I think I maybe misunderstood what you're doing. You're not trying to get the content with a single request - you're trying to load a page and then change the content using ajax, right? The main downsides with that approach are that users see a single url which makes it harder to share content, bookmark content. search engines probably don't see all your content
Thanks @sarahk I didn't think of that I just send a request for page load normally, but since it's a node.js you can monitor incoming requests on the server Let's me explain further a bit. Look at this normal request for page load: http//www.mysite.com/video.html?video_id=5 Code (markup): and at the server, you can see inbound requests like this: /video.html //=> a request for page load /videos/How%40To%40Get%40Rich.mp4 //=> a request for a video which ID = 5, %40 is spacing /images/previous.png //=> a request for a thumbnail image of prvious video /images/next.png //=> a request for a thumbnail image of the next video /js/main.js //=> a request for a JavaScript file that do awesome stuffs on the page /css/style.css //=> a request for a CSS file to make the page look fancy Code (markup): And here's how I can eliminate these requests. Look at this code: ... <body> @@include('./header.html') Content @@include('./footer.html') </body> ... Code (markup): If I put @@include('./css/style.css') in the header.html file you won't see a request for a CSS file on the server console. This is also true if I put @@include('./js/main.js') in the footer.html. So if I put @@include('./videoContent.html') on the page I can eliminate all requests for videos and thumbnail images. What do you see in the console is just: /video.html Code (markup): Now, I'm confused should I send a bulk payload on a single response or do it normally. Thank you,
So when you view the source you see that style.css is on the page, right? Which means that it's not cached That's ok if you're brutal with your styles and only have the ones that are relevant to that actual page Most of us aren't, we have one style.css and we have it cached and every page calls the exact same file. I don't see a huge benefit in spending the time making sure the right styles are included and having it all on the page. If your users are still on dial-up, or 2G networks there may be a benefit in tight, small pages - but you could end up with huge, wallowing, bloated pages just as easily with this technique.
Whilst I'm still utterly lost in what you're talking about, if it's putting style into the markup /FAIL/ at web development. You'd be better off using HTTP/2 push
Thank you for all the inputs. I'll see if I can cache data by manipulating the response headers and eliminate request along the way.