Today was another day of learning. As part of a redesign, I had to convert a JavaScript object to an array used in the jQueryUI autocomplete plug-in. I have a service that returns a JSON object containing a list of category ID and Names that match a search for terms entered into an auto complete text box. I need to convert this to an array of arrays containing the category’s ID, Name, and the term highlighted in the Name. If you have a problem like this, here’s one way to solve it. Read more »
In this new post about some of my daily issues I’m going to finally get around to understanding Visual Studio find and replace with regular expressions. I have always used find and replace to update simple string matches, but now I want to up the ante and find and replace with regular expression matching. Regular expressions are awesome and I use them in my code, but never had the time or need to explore their use in Visual Studio find and replace. I hope it isn’t too different from normal regex.
I am using an old school ASP.net DataGrid with inline editing. When I click on a row’s edit link the row values turn into HTML textboxes and other controls for inline editing. The Id of the controls are scoped by the Id of parent container (e.g. the DataGrid), your normal ASP.net unique naming convention. I need to attach a JavaScript event handler function to a textbox’s onclick event. This function will open an image file browser in a new window (popup). The image file browser let’s me upload select an image from an image library. Once selected, I click a button and it triggers a function to pass data to the caller (generally passing the image URL to a textbox/WYSIWYG editor). The basic mechanics of the button’s onclick handler is to call a function that uses window.opener to send the data back to the original window. My mission today is cross window communication where I have the image file browser’s button onlick handler pass the selected image URL to the textbox that was clicked in the DataGrid. Additionally, I have to shorten the URL to a virtual URL because the image file browser sends an absolute URL. Read more »
I have ventured into the wonderful world of enterprise PHP development at work. This is a big change from ASP.net and a lot of work to get up to speed. I thought I’d share my adventure in setting up debugging for a tool in my dev environment, NotePad++. An added plus after running through this exercise was that debugging was also working in Netbeans. Read more »
We found that the problem was related to a mismatch in the build date of the DLL and the time on the server. The build date is in the future compared to the server system date. Read more »
I remember when I first started getting into website performance optimization, the more I dug into it, the less I seemed to know. I remember hearing of browser repaint and not knowing what reflow is, and not realizing how important either of them really are in performance optimization. I definitely didn’t have many strategies in my toolbox to address issues with reflow. So, after reading a quick overview of reflow on Google Code, I decided to get up to speed on the subject.
I’m not going to go into a deep explanation, because the links below provide more than enough info to get you well versed on reflow. Basically, reflow is how a browser calculates the positioning or layout of elements. This may not be the best definition. So here is video of the process for those of you who are more visual.
Well I know that JavaScript blocks anything else from downloading on the page. My strategy to lessen this effect has been to move JavaScript to the bottom of the page. After reading 12 Steps to Faster Web Pages with Visual Round Trip Analyzer, I have to question this strategy. It describes a technique for using JavaScript to write the external script tags.
function AsyncLoad()
{
var l = arguments.length;
for (var i=0;i<l;i++)
{
document.write("<script src='" + arguments[i] + "'></" + "script>");
}
}
AsyncLoad("file1.js", "file2.js", "file3.js");
The article states that although moving external scripts to the bottom reduces their blocking effect, it doesn’t take advantage of the bandwidth available to get everything downloaded as soon as possible. So, loading files with a document.write allows them to be loaded outside of the JavaScript engine, hence no blocking by JavaScript. How is this so?
Well let’s take a trip deep into geek land and check into how browsers actually interact with external scripts. Reading through this Mozilla bug report (https://bugzilla.mozilla.org/show_bug.cgi?id=364315) and a few other sites, when the browser encounters a script tag that references an external script it will download the script. It will not allow parallel downloading of other assets until the script is done downloading and parsing. Don’t take this as gospel, because I haven’t looked at browser source code or anything. I am just interpreting what I have read from multiple sources. This bug report also suggest that the browser vendors are already attacking the blocking behavior so the technique I am describing here won’t be needed in newer browsers.
So, although async JavaScript loading doesn’t address the problem of HTTP requests, but it prevents those pesky JavaScript blockers from causing a traffic jam, allows other elements to download in parallel, and efficiently uses bandwidth.
Well I’m off to do some testing. If you haven’t played around with Visual Round Trip Analyzer, I will be blogging about it soon (if I have the time).
I have a team member experimenting with base64 encoding of images to reduce HTTP requests (that’s a mouthful). I’m not going to try to explain what this involves, but it isn’t as complex as it first sounds. You can get more info on base64 encoding on this blog post by James McCaffrey. One of the side effects of this technique is it increases file size. So, the question is, what’s better for the performance of your web pages, a few large files or many small ones? Since HTTP requests are costly and bandwidth is plentiful, I’ll take a few large files for $500 Alex.
Did you know it’s faster to download a few large files than it is to download multiple small files of the same cumulative size as the large files? How is that so? It’s because of our nemesis Round Trip Time or RTT for short. RTT is the measure of the time it takes for a TCP packages to be sent to a server in a client request and sent back to the client in a server response. If you look at Yahoo’s Best Practices for Speeding Up Your Website, many of the rules address reducing RTT.
The main problem with RTT is that there is a delay caused by network latency. The latency is compounded when a DNS lookup has to be performed. When every you can reduce DNS lookups you reduce RTT delay. So, requesting one file instead of many is a great strategy. Whether you base64 encode images into your CSS file, combine images to sprites, use caching to prevent unchanged assets from being requested, reduce the number of domain names requested, or you combine your JavaScript files to one file, anything you do to reduce RTT will improve the performance of your web pages.
There are still a lot of people out there that believe the way to improve performance is to first improve issues on the back end, optimize servers and server side code. Don’t be fooled, about 80% of the time used to download a page is affected client side in the browser. You can look at this easy to understand research from Yahoo’s UI team. Next time you look at a waterfall performance report, remember that if the little bar that represents the initial request and response from your server is small in comparison to the rest of the assets downloaded, forget about throwing servers and backend code optimization at your performance problem. Look at client side optimization and maybe even base64 encoding.
In website performance the client is probably not right. Fix the client and your site will not suffer from the effects of RTT delay.
We are working on a performance project at work. One of the marketing guys wrote a blog post for our customers that talked about improving website performance. There is a lot of talk about performance going on at the company. One of the drivers of this talk is the desire to satisfy visitors with a fast responsive website. Another reason to jump on the performance bandwagon is Google’s commitment to a faster internet and backing up the philosophy with a change to the page rank algorithm to add page speed as a factor in where your site sits in search results. Lastly, we just want to be competitive. Beating the performance of the competition is just another notch on the belt and another battle won in the fight for market share. So, to keep visitors happy, maintain top 10 in the Google SERP (search engine result page), and to stay competitive, our site has to be fast. Read more »
I have been building websites for over 10 years now. It’s usually the same drill each time. Use a graphics editing program to design the site and cut and optimize the images. Use an HTML editor to script the site. View, test, and debug in a browser. Normally, I go back and forth between these apps until I achieve the desired results in the browser. Well it looks like all of this will all be done inside the browser soon. Being able to design and edit in the platform I’m targeting is huge to me. So, I am very excited by all of the innovation in this space. Read more »
Using jQuery.map() to Map One Object To Another
Today was another day of learning. As part of a redesign, I had to convert a JavaScript object to an array used in the jQueryUI autocomplete plug-in. I have a service that returns a JSON object containing a list of category ID and Names that match a search for terms entered into an auto complete text box. I need to convert this to an array of arrays containing the category’s ID, Name, and the term highlighted in the Name. If you have a problem like this, here’s one way to solve it. Read more »
| No Comments » 
I remember when I first started getting into website performance optimization, the more I dug into it, the less I seemed to know. I remember hearing of browser repaint and not knowing what reflow is, and not realizing how important either of them really are in performance optimization. I definitely didn’t have many strategies in my toolbox to address issues with reflow. So, after reading a quick overview of reflow on Google Code, I decided to get up to speed on the subject.
I have a team member experimenting with base64 encoding of images to reduce HTTP requests (that’s a mouthful). I’m not going to try to explain what this involves, but it isn’t as complex as it first sounds. You can get more info on base64 encoding on this 
We are working on a performance project at work. One of the marketing guys wrote a blog post for our customers that talked about improving website performance. There is a lot of talk about performance going on at the company. One of the drivers of this talk is the desire to satisfy visitors with a fast responsive website. Another reason to jump on the performance bandwagon is 
