weedo Posted December 30, 2008 Share Posted December 30, 2008 Being new to web software I have been working on an idea to make a web application that feels more like a client based app, i.e. with no load delays when clicking menu links to change between display views. I would be grateful for any feedback if what I have come up with is considered good practice or not, or if there is a better way to achieve my goal. The technique is to hold each web page as a text file, then use Ajax calls to transfer these text files to the index.html calling web page which will store them in an array. Here are some of the details The index.html page uses several Ajax calls to a simple php script which then passes each new web page (stored as a text file) back to the initiating web page. <?php ; $filename = $_REQUEST['filename']; $fp = @fopen($filename, 'r'); echo file_get_contents($filename); fclose($fp); ?> Each of the text file (which containts a whole page of HTML coding) gets sent back to the initiating html page which loads them into array. pageDetails[pageCount] = pageRequest.responseText; Essentialy this array then becomes an array of web pages. Then I make the menu links call a function that dynamicaly swaps out the HTML code for the whole page as follows. function setPage(pageRef) { divhook = document.getElementById("placeholder"); divhook.innerHTML = pageDetails[pageRef]; } <body id="home"> <div id="placeholder">This is where the data will go</div> </body> This way the user only ever loads one web page url but they can instantaneosuly switch between many pages. Sounds like a good idea, but I am sure I am missing something. Will this work ? Quote Link to comment Share on other sites More sharing options...
Flames Posted December 30, 2008 Share Posted December 30, 2008 Ajax may only use one page, but changing the page can sometimes take a long time and in my experience its faster to go to another page then to get ajax to change a whole page if that page has images, any queries etc. Quote Link to comment Share on other sites More sharing options...
xtopolis Posted December 31, 2008 Share Posted December 31, 2008 The bottleneck will come from their connection, then their computer, then your server. Connection is not really an issue as most people have at least DSL.. [though that depends on your area] Computer, it depends.. javascript goes faster now, but not everyone has the latest browser.. as well as a decent pc that can process the javascript [on their end] fast.. Your server, to send the response that the client requests.. not much of an issue if it's a proper server. ~~~ After reading the rest of your post, I doubt you will see much savings. You aren't doing anything significant... the pages are still loading the majority of the content per click. read this Best Practices for Speeding Up Your Web Site (by Yahoo!) Quote Link to comment Share on other sites More sharing options...
weedo Posted December 31, 2008 Author Share Posted December 31, 2008 Thanks for the feedback. I am not sure based on your response that I explained my idea very well. When a user loads the index.html page they are in fact loading multiple pages one after the other, but they obviously only see page 1. The other pages continue to load in the background into a javascript array in the browses memory. Thus while the user is reading page 1, pages 2,3,4 etc. are loading in the background. So when it comes time for the user to switch pages by selecting a menu option, there is no more need for the browser to contact the server as the new page is already in the browsers memory stores in an array. The javascript simply uses the innerHTML method to swap out the currently displayed HTML code with the code in the array. I am assuming that should be a lot quicker than requesting the new page to be sent from the server. Its a bit like caching the web pages into memory by loading them into a javascript array, before they are actualy needed. Does this help understand what I am attempting to do ? Quote Link to comment Share on other sites More sharing options...
xtopolis Posted December 31, 2008 Share Posted December 31, 2008 I understand what you're saying... everything is loaded up front. Still, those Yahoo tips can apply. But I still stand by my statement saying you won't be saving much. Will all users always view every page? If not, that's quite a waste of bandwidth, let alone slower up front since you're forcing them to load all pages anyway. And it will still come down to how fast their PC is... it really depends what you're displaying. Storing 5~ pages in javascript of text isn't that bad... but storing 5 pages of big content is. Lastly, I'm not sure if you're doing it right based on what you're saying. You might load the html code, but will you be preloading the images as well? And the CSS? What is it about your webpage that warrants loading everything up front? Quote Link to comment Share on other sites More sharing options...
weedo Posted December 31, 2008 Author Share Posted December 31, 2008 The Yahoo tips are excellent, thanks I think I understand the issues better now. As you point out, I may be loading the HTML code up front, but in reality this also means I have to include all the CSS code and javascript for all pages into Page 1 which will slow the load of this page down, which as gthe Yahoo article explains is not good for the user. There is a lot more to designing fast web pages than I realised. The other piece of information I didn't share was that the web site I am planning is in fact a game. The game is a simulation and will hold lots of data in a database. A php program on the server will update the database with new data regulaly. The user will have only about 5 to 8 web pages to interact with their data, but there will be lots of data for each page that needs to be sent from the server to the client each time they call up a new page. They will switch between pages frequently during the game. I am planning on using JSON format to send the data. So what I am realy trying to achieve is caching this data which will display in tables on multiple web pages, rather than caching the web page. But I don't think I can separate the two. Is there a way to hold a javascript array in the browswer memory when a user calls up a new page ? I looked at using cookies, but there are limits to their storage amount so that doesn't work. Quote Link to comment Share on other sites More sharing options...
xtopolis Posted January 1, 2009 Share Posted January 1, 2009 You can use sessions to store data... However, I honestly am not sure how much savings you will gain. You should try it without the extra work of caching certain things to see just how "slow" it is. But, it is up to you. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.