Rendering page with HUGE amount of HTML - html

I'm creating a website that has a huge amount of HTML (many thousands of div elements). There's no real way to get away from having all these div elements and it's making the site load very slow (7-12 seconds). I've tried putting caching on the site, but it doesn't help, since the site still has to render all these div elements.
More specifically it's 140 dropdowns, that each contain 100-800 div elements and they take a long time to show.
My thoughts, was to render the div elements that are inside the dropdowns, after the page loads, but I don't know how to go about that?
What is the easiest way to render some of your partials AFTER the page has loaded? I'm using Rails 4 btw.
Any other suggestions on how to deal with HUGE amounts of HTML?

I have a similar issue on one of my pages. Here are some things to try related to the select boxes.
(The top two may not be relevant since you said you tried caching, but I'm including for completeness. What type of caching did you try? How did you verify it was the browser rendering that was slow?)
Double check the cause of the problem
Comment out the code that generates the select boxes and check whether the time in your rails logs (as opposed to your browser measurements) drops. This establishes your "lower bound" for performance improvements on that measure.
Avoid using rails helpers.
If you're using select_tag, options_for_select, or any of that family of methods you may be doing a lot of repeated work since each time they are called they need to rebuild the list of options. If the options are the same for each select box, you can build them up once then just dump them in the page:
<% options = options_from_collection_for_select(#array, "id", "name") %>
<%= select_tag "myfield", options %>
If you need different selected values for each, you can try:
Processing options after creation to add them. This is pretty gross and possibly won't give you much speed up over the default generators.
Dump the defaults into a javascript variable, then set them with JS after the page loads.
AJAX in partials
This will give the illusion of loading faster, even though server time is the same (though it may be parallelized somewhat, you add extra network delay). The easiest way to do this is with jQuery's .load method.
$("#element-1").load("/path/to/partial/1")
Generate select boxes in JS
If you can get all the data you need to the client relatively fast (maybe serve it up in a JSON endpoint?) you can try building up the select boxes directly with jQuery, which is covered in Programmatically create select list
Remove redundant HTML
Why do your dropdowns have divs inside them? Is there a way to simplify?

Although the question is few years old, maybe someone will benefit from this one.
1) in controller:
#companies = Company.all.pluck(:name, :id) #order is important here
2) in view:
<%= f.select(:company_id, options_for_select(
#companies, selected: #user.company_id
), {}, class:"form-control m-b") %>
pluck grabs only :name, :id values, array of arrays, e.g,
=> [["Sumptus xiphias canto.", 5], ["My First Co.", 1]]
is created and then options_for_select populates options.
My 5000 records are populated in ~300ms in AJAX modal window. Not super fast, however I don't think regular user would complain.

Related

Can Go capture a click event in an HTML document it is serving?

I am writing a program for managing an inventory. It serves up html based on records from a postresql database, or writes to the database using html forms.
Different functions (adding records, searching, etc.) are accessible using <a></a> tags or form submits, which in turn call functions using http.HandleFunc(), functions then generate queries, parse results and render these to html templates.
The search function renders query results to an html table. To keep the search results page ideally usable and uncluttered I intent to provide only the most relevant information there. However, since there are many more details stored in the database, I need a way to access that information too. In order to do that I wanted to have each table row clickable, displaying the details of the selected record in a status area at the bottom or side of the page for instance.
I could try to follow the pattern that works for running the other functions, that is use <a></a> tags and http.HandleFunc() to render new content but this isn't exactly what I want for a couple of reasons.
First: There should be no need to navigate away from the search result page to view the additional details; there are not so many details that a single record's full data should not be able to be rendered on the same page as the search results.
Second: I want the whole row clickable, not merely the text within a table cell, which is what the <a></a> tags get me.
Using the id returned from the database in an attribute, as in <div id="search-result-row-id-{{.ID}}"></div> I am able to work with individual records but I have yet to find a way to then capture a click in Go.
Before I run off and write this in javascript, does anyone know of a way to do this strictly in Go? I am not particularly adverse to using the tried-and-true js methods but I am curious to see if it could be done without it.
does anyone know of a way to do this strictly in Go?
As others have indicated in the comments, no, Go cannot capture the event in the browser.
For that you will need to use some JavaScript to send to the server (where Go runs) the web request for more information.
You could also push all the required information to the browser when you first serve the page and hide/show it based on CSS/JavaScript event but again, that's just regular web development and nothing to do with Go.

html page takes over time for load the content

I've used one static cfm page and it's has a single select query for showing a above 3000 records(without pagination). When i am try to view that page in FF its takes the 15 sec for shows the content. If any way(without pagination) to reduce the browser loading time?
Create a page that uses that uses AngularJS to show the table. Then populate the table via an AJAX call to get JSON.
Use fixed table layout so that the browser does not have to re-flow the content as it loads.
Don't load the data into a table at all. Do the layout with div's and span's
Optimize the SELECT query
Only select columns you need.
Avoid wildcards (*) in the SELECT clause
Don't join unnecessary tables.
You can also consider loading content dynamically via ajax.
Without seeing your code (or example code), we can't provide anything specifically tailored to your implementation of the query.
You could potentially
<cfflush>
the content, so it will start sending the response to the browser straight away, rather than building the entire page, then pushing the response back
Some other solutions are better options, especially for long term scalability and maintenance. However, if you're looking for a quick solution for now you could try breaking it up into a series of HTML tables. Every 500 records or so add this:
</table>
<cfflush>
<table...
This will insure that html rendered so far is sent to the browser (via the cfflush) while ColdFusion continues to work on the rest. Meanwhile, by closing out the table before doing so you're allowing the browser to properly render that block of the content in full without risking it waiting for the remainder.
This is a patch, and something you should only do until you can put a more involved solution (such as JQGrid) in place.

My website contains lots of sub pages, is it the common practice or is there an alternative for that?

I am making a website which will have lots of photographs. When a user clicks on a particular photo, a new page will be loaded with that photo being displayed bigger in size. There is a next button which will take the user to another page where there is another photograph. Therefore, my website will have lots of sub webpages( a little more than the number of photographs I have on the website). So is it usually how these kinds of websites are made,i.e., with lots of webpages or is there any other alternative for it?
No, that's not the usual aproach, al least on these days.
When we encounter with a similar situation like your case, we usually try to make it dynamic.
For example, if you need to show a lot of photos with the same markup and format, maybe the best option is to have a template with a variable.
The variable will be the photo url and the template will be everything surrounding it.
The page is the same, but only the photo changes.
There are a lot of advantages of doing this. Mainteneance, simplicity, work-load, cache...
Of course that can be use in another cases, like viewing a new details, when you would have only a ViewNew page, and you pass a parameter with the identifier of the new so you can show the correct request.
There are plenty ways to achieve this, most of them require server side code, to handle and process the request, like:
PHP
ASP/ASP.NET
Java
ColdFusion
Perl
Ruby
Phyton
...
But, some of this operations, could be also achieve by javascrip, a client side script code.
You could work with pure javascript or use a framework to make things easy and compatible. Here's some examples of javascript frameworks:
jQuery
YUI
Mootools
Dojo
Midori
...
I don't know if you want a particular examples using one of this languages or only know alternatives. If you need examples or need more information I'll be pleased of provide some.
Also, It's common that even if you are using a server side code, use javascript too, because can handle the behaviour on the website and/or make ajax request for asyncronous requests.
EXAMPLES
JavaScript simple:
jsFiddle
HTML:
<div>
<button id="previous" onClick="previousImg();">Previous</button>
<button id="next" onClick="nextImg();">Next</button>
</div>
<div>
<img id="imgViewer" src="http://icons.iconarchive.com/icons/mattahan/umicons/256/Number-1-icon.png" />
</div>
JavaScript:
var imgUrlTemplate = 'http://icons.iconarchive.com/icons/mattahan/umicons/256/Number-$number$-icon.png';
var imgCounter = 1;
var imgViewerNode = document.getElementById("imgViewer");
function previousImg() {
if(imgCounter > 1) {
imgCounter--;
imgViewerNode.src=imgUrlTemplate.replace("$number$",imgCounter);
}
}
function nextImg() {
if(imgCounter < 9) {
imgCounter++; imgViewerNode.src=imgUrlTemplate.replace("$number$",imgCounter);
}
}
If you have 1 html page and in that you write the PHP include 'photographlink' in the body with a case system of some sort. It will use 1 html page and it will include a different photograph depending on which photograpg is clicked
http://www.php.net/manual/en/function.include.php
I think the better way is to use javascript, my tip is to use jQuery framework to dynamically load and visualize images. You can find in the web some plugins that can simplify your life.
demo of one plugin

Benefit of some rails commands over direct HTML

Can someone explain why I woud use rails link_to etc instead of straight HTML code? Given that they will render the same once they get to the browser - what is the actual benefit here?
<img id="logo" src="images/logo.png" alt="logo" />
<%= link_to image_tag("logo.png", :alt => "logo", :id => "logo"), root_path %>
Background - I was changing this in a template and stopped to think why am I doing this?
In Rails 3.1, using the helper method would make use of the asset pipeline. For the URLs, that means that the images are postfixed with a checksum (this is called fingerprinting, at least in the Rails guide linked above). That allows to set the HTTP server cache expiration to a maximum - if the file content changes, it will result in another filename and thus force redownloading the file. Otherwise it'll be served from the browser cache.
Also, if you specify an asset host in your configuration, the helper methods will use this information - check out the documentation for image_url.
As for link_to, well, I suppose you could also do something like Link, but using the ruby code is more elegant in my opinion.
You should never hardcode the URL in HTML - it might change, and you really don't want to go through your source code and change all references to index.html to home.html or anything like that.
This is a great question. I consider it better practice to use the rails link_to method as well as the other html helper methods. In this case, it may not have an clear advantage, but more times than not it does. Here are some cases where it is helpful:
Changing Routes
If you have a named route, say foo_path which directs to /foo. You can use <a href='/foo'>, but if you wanted to change foo_path to route to /foo_bar - you would have to go through each view and manually change the links.
Variables
It is common to need a variable for a link. It is more elegant to have <%= link_to #foo.name, foo_path %> than <a href='/foo'><%= #foo.name %></a>
Look and maintainability
In my experience, view code that utilizes helper methods tends to look better and is easier to refactor and maintain.
The helpers expose functionally you don't necessarily always use, like ":remote => true", or automatically including an app context, or bringing in the asset pipeline.
For the simplest use cases there is often little or no benefit, but that's not where helpers shine-they're for when things go cows-legs-up and the "raw" form includes logic too bulky to remain in the mainline template.
Using them for the simple use-cases keeps things consistent, and makes templates more resilient to change.

URL Masking in .Net / HTML

I have a website in which I have many categories, many sub-categories within each one and many products within each of those. Since the URLs are very user-unfriendly (they contain a GUID!!!), I would like to use a method which I think is called URL Masking. For example instead of going to catalogue.aspx?ItemID=12343435323434243534, they would go to notpads.htm. This would display the same as going to catalogue.aspx?ItemID=12343435323434243534 would display, somehow.
I know I could do this by creating a file for each category / sub-category (individual products cannot be accessed individually as it is a wholesale site - customers cannot purchase directly from the site). This would be a lot of work as the server would have to update each relevant file whenever a category / sub-category / product visibility changes, or a description changes, a name changes... you get the idea...
I have tried using server-side includes but that doesn't like it when a .aspx file is specified in an html file.
I have also tried using an iframe set to 100% width / height and absolutely positioned left 0 and top 0. This works quite well, but I know there are reasons you should not use this method such as some search engines not coping with it well. I also notice that the title of the "parent" page (notepads.htm) is not the title set in the iframe (logically this is correct - but another issue I need to solve if I go ahead and use this method).
Can anyone suggest another way I could do this, or tell me whether I am going along the right lines by using iframes? Thanks.
Regards,
Richard
PS If this is the wrong name for what I am trying to do then please let me know what it actually is so I can rename / retag it.
Look into URL Rewrites. You can create a regular expression and map it to your true url. For example
http://mysite.com?product=banana
could map to
http://mysite.com?guid=lakjdsflkajkfj3lj3l4923892&asfd=9234983920894893
I believe you mean URL Rewriting.
IIS 7+ has a rewrite module built in that you can use for this kind of thing.
URL Rewriters solve the problem you are describing - When someone requests page A, display page B - in a general way.
But yours is not a general requirement. You seem to have a finite uuid-to-shortname mapping requirement. This is the kind of thing you could or should set up in your app, yourself, rather than inserting a new piece of machinery into your system.
Within a default .aspx page, You'd simply do a lookup on the shortname from the url in a persistent table stored somewhere, and then call Server.Transfer() to the uuid-named page associated to that shortname.
It should be easy to prototype this.