Friday, September 30, 2011

Send email in linux

In new walk-through environment, there are some configuration issues need look at application logs to see what is going on. SSH to application server (tomcat) and vi the application log is the common way. Ops team can alsomail the log file to other developers to analyze, so need sendmail. Luckily there is "sendmail" in Linux.

Command Line:

  1. Check if sendmail is running => ps ax | grep sendmail
  2. Check if sendmail is running => /etc/init.d/sendmail status
  3. Check sendmail listening info (IP and port) => netstat -tnlp | grep sendmail
  4. Send email (please use man mail for user guide)
    1. mail -s "Email subject" < /tmp/test.txt
    2. cat /tmp/test.txt | mail -s "Email subject"
    3. echo "The message in email body" | mail -s "Email subject"
    4. (df -h;free -m) | mail -s "Disk and Memory Info"
    5. less /proc/cpuinfo | mail -s "CPU Info" -c
Shell script:
#df -h | mail -s "disk space"
df -h > /tmp/mail_report.log
free -m >> /tmp/mail_report.log
mail -s "disk and RAM report" < /tmp/mail_report.log
rm -f /tmp/mail_report.log

Friday, September 23, 2011

jQuery 10 performance tips

This is a summary of 10 jQuery performance tips from
  1. Use the latest jquery release
  2. Know your selectors (ID, element, class, pseudo & attribute)
  3. Use .find() -> $parent.find('.child').show() is the fastest than others (scoped selector)
  4. Don't use jQuery unless it's absolutely necessary -> is fater than $(this).attr('id')
  5. Caching -> storing the result of a selection for later re-use, no repeat selection
  6. Chaining
  7. Event delegation -> if possible, use delegate instead of bind and live
  8. Each DOM insertion is costly -> keep the use of .append(), .insertBefore() and .insertAfter() to a minimum; .data() is better than .text() or .html(); $.data('#elem', key, value) is faster than $('elem').data(key, value)
  9. Avoid loops -> Javascript for or while loop is faster than jQuery .each()
  10. Avoid constructing new jQuery object unless ncessary -> use $.method() rather than $.fn.method(); $.text($text) is faster than $text.text(), $.data() is faster than $().data
Update (11/30/2011):
In recent jQuery performance discussion, I summarized the following points based on different messages.
  1. Scope jquery selectors (use find)
  2. Know selectors performance => ID > element (tag) > class > pseudo & attribute
  3. Avoid loops =>  if loop is inevitable, consider for/while > $.each()  if possible
  4. Cache the result of a selection for later use (using local variables if possible)
  5. DOM operation is expensive (esp. in a loop)
  6. Don't use $ unless it's necessary => > $(this).attr('name’) 

    Thursday, September 22, 2011

    Fundamentals of WPO

    There are two fundamental factors (action items) for Web Performance Optimization (WPO), request number and data size. There are top rules and plenty of tools to assist these two optimization. This is common sense and very straightforward to understand the importance. One metaphor about moving in real life, if you can throw away what you don't necessarily need, and keep your belongs to minimum say 1 U-haul truck can hold, then you can make the move fast because you only need 1 round trip with minimum stuff.

    Reduce Http request - Send it as infrequently as possible
    Http round trip is expensive esp. with a long RTT, or for new http connection. Reducing http request can be achieved using the following:
    • Merge static resources (CSS, JS, Image)
    • Add Cache control (including ajax?)
    • Combine dynamic requests
    • Build Single page application (using Ajax)
    • Avoid redirect
    • Fewer DNS lookup
    Reduce download size - Send as little data as possible
    Small data size saves bandwidth (tcp package numbers). It can be achieved using below ways:
    • Gzip resources
    • Minify JS and CSS (Code optimization, obfuscation, duplication removal)
    • Crush images
    • Add Cache control (caching in browser)
    • HTML5 local storage, local cache
    For more info, refer to 14 Rules for Faster-Loading Web Sites

    Friday, September 9, 2011

    DNS Override

    DNS server keeps website domain name and its IP address mapping. Public DNS servers are supposed to keep in sync (eventually consistence), so every browser (user agent) can do DNS lookup using different DNS servers, and get same IP address for same domain name.
    Domain sharing is a technique to optimize web performance for parallel downloading, but it brings more DNS lookup effort on browser side. The lookup sequence is described below, and browse stops if found corresponding IP address, then loads the website.
    1. Browser cache
    2. Computer hosts file for a DNS entry (OS dns cache?)
    3. Default DNS server (this is usually ISP's or your employer's DNS server)
    4. Other DNS servers
    5. If domain name can not be resolved, browser will display "server not found" error page
    DNS override is to change domain name to IP address mapping in step 2 or step3, so that local computer will point to another IP address for the same domain, but public users still connect to existing IP address for the same domain name.

    Override DNS entry using local DNS server
    In step 3, it is usually done in internal DNS server or local DNS server which is used internally in your corporate, and it will impact all employees. Change ISP's DNS sever is actually changing all public DNS servers, so override should not happen on this DNS server.

    Override DNS entry using hosts file
    It is kind of key-value pair mapping file for domain name and IP address. Here is the list of file path on different operating systems.
    1. Windows: C:\Windows\System32\etc\drivers\hosts
    2. Linux:  /etc/hosts
    3. Mac: /etc/hosts 
    DNS Suffix
    When you ipconfig /all, it will print out details about your network connections. Two more entries about DNS are Primary Dns Suffix (usually it is your computer registered domain) and DNS Suffix Search List (which is a list of your domains suffix when you connect using partial of FQDN).

    For example, if the ipconfig /all output looks like below:

    C:\Documents and Settings\mypc>ipconfig /all

    Windows IP Configuration

            Host Name . . . . . . . . . . . . : mypc23434
            Primary Dns Suffix  . . . . . . . : example.local
            Node Type . . . . . . . . . . . . : Hybrid
            IP Routing Enabled. . . . . . . . : No
            WINS Proxy Enabled. . . . . . . . : No
            DNS Suffix Search List. . . . . . : example.local

    If you have some FQDN like test.example.local,,, then if you ping using short name test, exam or motor, you will get DNS suffix appended to find the FQDN.

    Friday, September 2, 2011

    Javascript and Flash communication

    In previous blog two errors when javascript calls flash methods I listed out 2 major errors when Javascript calls Flash methods. That was one way communication, but actually Flash can also call Javascript functions. Here is a quick summary about the typical two way communications between these 2 web technologies.

    Flash (ActionScript):“JS_FunctionName”, [args]); // calls a JavaScript function from inside your Flash or Actionscript file, passing arguments as additional parameters after the string function name of the JavaScript function.

    ExternalInterface.addCallback(“ExposedName4JS”, AsMethod); // exposes the ActionScript method AsMethod to javascript under the javascript function name ExposedName4JS, which is passed as a string.

    1. Get the Flash object
    function getFlashObject(name)
      if (window.document[name])
          return window.document[name];
      if (navigator.appName.indexOf("Microsoft Internet")==-1)
        if (document.embeds && document.embeds[name])
          return document.embeds[name];
      else //IE uses object, FF uses embed, getElementById only works for <object> tag
        return document.getElementById(name);

    2. Call flash method

    <object id="name" data="mymovie.swf" width="640" height="360" type="application/x-shockwave-flash" >
        <param name="allowfullscreen" value="true">
        <param name="allowscriptaccess" value="always">
        <param name="wmode" value="opaque">
        <param name="flashvars" value="backgroundColor=#ffffff">
        <embed name="name" src="mymovie.swf" swliveconnect="true" quality="high" bgcolor="#FFFFFF" width="640" height="360" type="application/x-shockwave-flash">
        </embed >
    </object >

    Random notes:
    1. SWFObject is an easy-to-use and standards-friendly method to embed Flash content, which utilizes one small JavaScript file
    2. Flash is not fully loaded when the body's onload event fires or domcontentloaded event fires. At least it is true in Chrome.
    3. IE doesn’t destroy instances of the flash correctly when a page is reloaded, suggest to reset the instance like below
    if(navigator.appName.indexOf(‘Microsoft Internet’) != -1)
   window[this._id] = new Object();

    Thursday, September 1, 2011

    Summary about High Performance Mobile Meetup

    This Tuesday (Aug 30, 2011) I attended the SF web performance meetup at LinkedIn (Mountain View). Steve Souders presented a great talk "High Performance Mobile". Apart from this year Velocity conference HttpArchive lighting demo, this is the second time I joined his session. I read twice his previous talk slide "High Performance HTML5" at SF performance meet up, but could not join in person. Of course, I borrowed and read his two famous books.

    The event started at 6:30pm, welcomed attendees with portable plastic water bottle and Mexican food. Steve began his talk around 7pm after some introduction from meetup organizer (Aaron Kulick) and LinkedIn performance lead (they are hiring performance engineers). The talk consisted of 4 parts, you can find details from

    Part 1: WPO
    Nothing new, but he reiterated the importance and role of WPO. The Web Is Dead (, will this be true and what is the fate of WPO? It might be too early to conclude "The web is dead". One thing is true, the web is evolving with HTML5.

    Benefits of WPO
    1. drives traffic
    2. improves UX
    3. increases revenue
    4. reduces costs
    Part 2: Why Mobile
    Data and analysis show that Mobile is very important, but slow. Also the "Road is not clear" for performance optimization

    Part 3: Mobile Best practices
    Most desktop Web performance rules still apply. Steve mainly shared 5 items to which he thinks Web performance engineers need pay more attention.
    1. Reduce Http request (sprite/dataURI/CSS3/Canvas) - this should be the golden rule
    2. Responsive images ( src/DeviceAtlas/ - previously read an article tweeted by Stoyan, have some general idea about this
    3. script async & defer (execute when available, execute when parsing finished. He also mentioned his controlJS) - heard this many times, are all new browsers supporting them? should we include javascript using async & defer
    4. Appcache (5M+ limit) - from HTML5
    5. Local storage (window.localStorage) - from HTML5
    Part 4: Mobile tools
    The impressive one of this part was his demo after he briefed following 4 tools. Steve also mentioned his bookmarklet for mobile performance but he didn't add into his deck.
    1. pacpperf
    2. jdrop
    4. weinre (WEb INspector REmote)
    After that, there was book giveaway and e-book lottery. Somehow I didn't have a number, so left before venue was clear up. (I hope I can get a signed copy of his book)

    Key takeaways
    1. Mobile is important but very slow
    2. There are challenges to make mobile fast
    3. There are tools to assist mobile performance
    4. Mobile winners will be fast
    Thanks Steve/Aaron/Sponsors to make this meetup so successful. Looking forward to next meetup in south bay area.

    Different Testings

    Testing is an art than science. There are different testings for different purposes to ensure the software quality. The goal is same, but the process, strategy and methodology are different from different testings.

    Correctness testing
    Correctness is the minimum requirement of software, the essential purpose of testing. It is for software quality, also called function testing.

    Black-box testing
    test data are derived from the specified functional requirements without regard to the final program structure. It is also termed data-driven, input/output driven, or requirements-based testing.

    White-box testing
    the structure and flow of the software under test are visible to the tester.

    Performance testing
    a process that focuses on testing individual components of the web app, such as databases, algorithms, network infrastructure, and cache layers under certain load

    Load testing
    a process of determining how an application under specific volumes of load, usually a range of the upper and lower limits expected by the business. Endurance testing is also part of this testing type.

    Stress testing
    a process of identifying when and how systems fail (and recover) under extreme levels of load. Also known as negative testing or destructive testing.

    Reliability testing

    a process of finding the probability of failure-free operation of a system.

    Security testing
    identifying and removing software flaws that may potentially lead to security violations, and validating the effectiveness of security measures. Simulated security attacks can be performed to find vulnerabilities.

    I summarized above testings based on below excellent blogs and paper. It is interesting to understand these terms better while working with QA (quality assurance) team in daily work.