Knowledge Base - Apache Optimization

The default Apache settings that cPanel sets upon install are definitely something that can be improved on. With a few small tweaks, the efficiency with which Apache runs with can be greatly improved.

Please noted: This article assumes that you are using a Linux server running Apache and cPanel or Plesk, and that you are familiar with editing files from the command line.


To start, open the Apache configuration file and finding the directives section. On a cPanel server, it will be located in /usr/local/apache/conf/. On a Plesk server, it will be in /etc/httpd/conf/. If you are using vi or vim: once you open the file, you can find the directives by scrolling through the file, or by typing forward-slash ‘/’ and typing the exact string that you are looking for (search is case specific).

[root@host /] vim /usr/local/apache/conf/httpd.conf

or

[root@host /] vim /etc/httpd/conf/httpd.conf

or

  nano /etc/apache2/apache2.conf

This list is a composite of the settings we will be reviewing from fresh install on a cPanel server:

Timeout 300
KeepAlive On
MaxKeepAliveRequests 100
KeepAliveTimeout 15
MinSpareServers 5
MaxSpareServers 10
StartServers 5
MaxClients 150
MaxRequestsPerChild 0

Please note, the settings that we will review in this article are by no means a complete list of tweakable options in the Apache configuration file. The settings we will be focusing on are the ones that control how Apache handles webpage requests.

Timeout

Timeout 300

Usually this value doesn’t require editing and a default of 300 is sufficient. Lowering the ‘Timeout’ value will cause a long running script to terminate earlier than expected.
On virtualized servers like VPS servers, lowering this value to 100 can help improve performance.


KeepAlive

KeepAlive On

This setting should be “On” unless the server is getting requests from hundreds of IPs at once.
High volume and/or load balanced servers should have this setting disabled (Off) to increase connection throughput.


MaxKeepAliveRequests

MaxKeepAliveRequests 100

This setting limits the number of requests allowed per persistent connection when KeepAlive is on. If it is set to 0, unlimited requests will be allowed.
It is recommended to keep this value at 100 for virtualized accounts like VPS accounts. On dedicated servers it is recommended that this value be modified to 150.


KeepAliveTimeout

KeepAliveTimeout 15

The number of seconds Apache will wait for another request before closing the connection. Setting this to a high value may cause performance problems in heavily loaded servers. The higher the timeout, the more server processes will be kept occupied waiting on connections with idle clients.

It is recommended that this value be lowered to 5 on all servers.


MinSpareServers

MinSpareServers 5

This directive sets the desired minimum number of idle child server processes. An idle process is one which is not handling a request. If there are fewer spareservers idle then specified by this value, then the parent process creates new children at a maximum rate of 1 per second. Setting this parameter to a large number is almost always a bad idea.
Liquidweb recommends adjusting the value for this setting to the following:

Virtualized server, ie VPS 5
Dedicated server with 1-2GB RAM 10
Dedicated server with 2-4GB RAM 20
Dedicated server with 4+ GB RAM 25

MaxSpareServers

MaxSpareServers 10

The MaxSpareServers directive sets the desired maximum number of idle child server processes. An idle process is one which is not handling a request. If there are more than MaxSpareServers idle, then the parent process will kill off the excess processes.
The MaxSpareServers value should be set as double the value that is set in MinSpareServers.


StartServers

StartServers 5

This directivesets the number of child server processes created on startup. This value should mirror what is set in MinSpareServers.


MaxClients

MaxClients 150

This directive sets the limit on the number of simultaneous requests that will be served. Any connection attempts over the specified limit will be queued. Once a process is freed at the end of a different request, the queued connection will then be served.
For virtualized servers such as VPS accounts, it is recommended to keep this value at 150. For all dedicated servers the recommended value for this setting is 250.

MaxRequestsPerChild

MaxRequestsPerChild 0

This directive sets the limit on the number of requests that an individual child server process will handle. After the number of requests reaches the value specified, the child process will die. When this value is set at 0, then the process will never expire.
Liquidweb recommends adjusting the value for this setting to the following:

Virtualized server, ie VPS 300
Dedicated server with 1-4GB RAM 500
Dedicated server with 4+GB RAM 1000

How to use sessions on Google App Engine with Python and gae-sessions?

Google App Engine with Python does not provide built in session capabilities. This step by step walkthrough sets up a Google App Engine app using the lightweight gae-sessions utility.

1. Download gae-sessions

Download the gae-sessions code from https://github.com/dound/gae-sessions/

2. Create your app directory

Create a directory for your application. I’ll be using gaesessiontest/

3. Copy gaesessions to your app

From the gae-sessions download file, copy the gaesessions/ directory to your app directory.

4. Create your app.yaml file

Within your app directory create an app.yaml file with the contents:

application: gaesessiontest
version: 1
runtime: python
api_version: 1
 
handlers:
- url: /.*
  script: main.py

5. Create your appengine_config.py file

Within your app directory create an appengine_config.py file with the contents:

from gaesessions import SessionMiddleware
def webapp_add_wsgi_middleware(app):
    app = SessionMiddleware(app, cookie_key="You must change this")
    return app

6. Change the cookie_key

Change the cookie_key value to a secret combination of characters.

7. Create your main.py file

Within your app directory create a main.py file with the contents:

import os
 
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
from google.appengine.ext.webapp import template
 
from gaesessions import get_current_session
 
class MainPage(webapp.RequestHandler):
    def get(self):
 
        # Get the current session        
        session = get_current_session()
 
        # Get the value of the counter,
        # defaulting to 0 if not present
        counter = session.get('counter', 0)
 
        # Increment the counter
        session['counter'] =  counter + 1 
 
        context = {
             "counter": counter 
        }
 
        path = os.path.join(os.path.dirname(__file__), 'index.html')
        self.response.out.write(template.render(path, context))
 
application = webapp.WSGIApplication(
                                     [('/', MainPage)],
                                     debug=True)
 
def main():
    run_wsgi_app(application)
 
if __name__ == "__main__":
    main()

8. Create your index.html file

Within your app directory create an index.html file with the contents:

<html lang="en">
<head>
<title>GAE Sessions</title>
</head>
<body>
Counter = {{ counter}}
</body>
</html>

9. Run your application

My GAE installation is located in /opt/google_appengine/ so I start the application with the command:

/opt/google_appengine/dev_appserver.py gaesessiontest

10. View your app

Open your browser and go to http://localhost:8080/. You should see a counter that increments each time you refresh the page.

This entry was posted in Google App Engine and tagged GAE, GAE-Session, Google App Engine, Python, Session. Bookmark the permalink. Both comments and trackbacks are currently closed.

Another 10 Interesting JavaScript Features

I previously posted about 10 Interesting JavaScript Features. Here’s ten more JavaScript features that I’ve recently found interesting.

1. Dynamically call object methods

Javascript objects can contain functions as object members. Object members can be referenced using square bracket [] notation. Combining these ideas together we can dynamically call object methods:

var foo = {
 one: function() { console.log("one") },
 two: function() { console.log("two") }
};
 
var ok = true;
var result = foo[ok ? "one" : "two"]();
 
console.log( result ); // Prints "one"

2. Multi line strings

You can create multi-line strings in JavaScript by terminating lines that should be continued with a backslash:

var s = "Goodbye \
cruel \
world";
 
console.log( s === "Goodbye cruel world" ); // true

3. Recursion in anonymous functions

JavaScript allows functions to be created that have no names. These are called anonymous functions. A recursive function is one that calls itself, but how does a function call itself if it has no name?
First let’s consider a small program that applies a factorial function to numbers in an array.

// Our recursive factorial function
var factorial = function(n) {
    return n<=1 ? 1 : n * factorial(n-1);
};
 
// Function that applies a function to each element of the array
var applyTo = function(array,fn) {
 var i=0, len=0;
 for (i=0, len=array.length; i<len; i++) {
  array[i] = fn( array[i] );
 }
 return array;
};
 
// Test our function
var result = applyTo( [2,4,6], factorial );
 
console.log( result ); // Prints [2, 24, 720]

Rather that defining the factorial function separately, we can define it inline as a parameter to the applyTo() function call.

var result = applyTo([2,4,6], 
                     function(n) {
                         return n<=1 ? 1 : n * ???WhatGoesHere???(n-1);
                     }
                 );

Previously, JavaScript allowed us to replace the ???WhatGoesHere??? part with arguments.callee, which was a reference to the current function.

var result = applyTo([2,4,6], 
                     function(n) {
                         return n<=1 ? 1 : n * arguments.callee(n-1);
                     }
                 );

This method still works in modern browsers but has been deprecated, so remember what it means but don’t use it.
The new method allows us to name our inline functions.

var result = applyTo([2,4,6], 
                     function fact(n) {
                         return n<=1 ? 1 : n * fact(n-1);
                     }
                 );

4. Short cuts with ‘or’ and ‘and’ operators

When you or together several variables in a statement, JavaScript will return first ‘truthy’ value it finds (see previous post about truthy values). This is useful when you want to use a default value if an existing variable is undefined.

// Create an empty person object with no properties
var person = {};
 
// person.firstName is undefined, so it returns 'unknown'
var name = person.firstName || 'unknown';
 
// Prints 'unknown'
console.log(name);

In contrast, the and operator returns the last element, but only if all of the expressions are truthy, else it returns undefined.

var o = {};
o.x = 1;
o.y = 2;
o.z = 3;
 
var n = o.x && o.y && o.z;
 
// Prints 3
console.log(n);

5. A note about ‘undefined’

It turns out that undefined is not a JavaScript keyword, instead undefined is a global variable, which in browsers is defined as window.undefined.
It is not uncommon to see code that tests if a variable is undefined like this:

if (someObject.x === undefined) {
    // do something
}

Which is the same as writing

if (someObject.x === window.undefined) {
    // do something
}

If by some chance your window.undefined variable is modified then checks for undefined like this will fail. No conscientious developer would ever do this intentionally, but it may happen by accident causing hard to find bugs, like this:

var o = {};
window[o.name] = 'unknown'; // BLAM!, window.undefined is now a string

A better way to test for undefined is to use the typeof operator. Typeof an undefined variable will always return the string ‘undefined’.

// Good way to test for undefined
if (typeof someObject.x === 'undefined') {
    // do something
}

6. Return statement

The return statement needs it’s value to be on the same line as the return keyword. This may cause problem depending on your coding style. For example

// This is ok
return x;
 
// This returns undefined
return
    x;
 
// This is ok
return {
    result:'success'
}
 
// This returns undefined
return
{
    result:'success'
}

This behaviour is due to JavaScript’s automatic semicolon insertion.

7. Length of a function

JavaScript functions have a length property that provides a count of the number of arguments the function expects.

function foo(a,b,c) {
}
 
console.log( foo.length ); // Prints 3

8. The plus operator

The plus operator can be used to easily convert anything into a number by simply prefixing the value with “+”.

console.log( +"0xFF" );  // 255
console.log( +"010" );   // 10 
console.log( +null );    // 0
console.log( +true );    // 1
console.log( +false );   // 0

This is actually a just a nice shortcut for using the Number() function.

9. Object property names can be any string

JavaScript object members can have any string as their name.

var o = {
    "What the!": 'a',
    "Hash": 'b',
    "*****": 'c'
};
 
for (var key in o) {
    console.log( key );
}

Which prints:

What the!
Hash
*****

10. The ‘debugger’ statement

In the past we were limited to using alert() statements to debug our JavaScript. After that we were rescued with the much more sane console.log(). Things have come a long way and we now have solid line debugging available in modern browsers.
However, there is one addition to our debugging arsenal which I’ve found particularly invaluable when debugging JavaScript in Internet Explorer; the debugger statement.
When you add the debugger statement to your code the browser will stop execution and open the debugging environment ready for you to continue stepping through your code.
This is moderately useful on Chrome, Firefox and Safari but I have found essential for debugging IE.
Note that within IE, this statement only works in IE7 and above and you need to first start the debug mode.
OK, so that’s 10 features, but just one more thing to wrap up which is not really a JavaScript feature.

JavaScript Coding Coventions

If you’re not following a JavaScript coding convention then here are a couple to get you started:

• Douglas Crockford’s JavaScript Coding Conventions
• Google’s JavaScript Style Guide

This entry was posted in JavaScript and tagged Tips. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Should you use semicolons in JavaScript?

There has been a quite a bit of chatter recently on whether or not you should use semicolons in your JavaScript code.

JavaScript provides a feature called Automatic Semicolon Insertion (ASI). For the most part there are rarely problems in omitting semicolons, but there are a few cases where semicolons are required to prevent syntax errors or resolve code ambiguities.


A site that triggered a lot of chatter was aresemicolonsnecessaryinjavascript.com which boldly states ‘NO’. The author is really trying to explain we should not just include semicolons everywhere due a fear that our code might break in some environments or parsers (such as JavaScript minifiers). Others are also continuing the same point that we should better understand why semicolons in JavaScript are optional.

Douglas Crockford, a leading expert in JavaScript recommends using semicolons at the end of every simple statement and his ubiqitious JavaScript code quality tool, JSLint, by default expects semicolons to be inserted. A poll on Stack Overflow strongly recommends using semicolons everywhere.

Lastly, I found Armin Ronacher’s post on dealing with JavaScript’s automatic semicolon insertion to be most useful. In particular his summary where he writes:

Are Semicolons Necessary in Javascript? Despite popular belief the answer is "sometimes" and not "no". But to save yourself time and troubles, just place them all the time. Not only will it save yourself some headaches, your code will also look more consistent. Because there will be situations where a semicolon becomes necessary to resolve ambiguities.

So what will I be doing? My vote goes to following Douglas Crockford’s JavaScript coding guidelines for now and I’ll be happily including semicolons in my code.

If you are interested, there are also a couple of discussions on Reddit regarding these couple of posts; Dealing with JavaScript’s automatic semicolon insertion and Are semicolons necessary in JavaScript?.

This entry was posted in JavaScript and tagged ASI, Coding, Convention, Semicolon. Bookmark the permalink. Both comments and trackbacks are currently closed.

Creating namespaces in JavaScript

In the past it was very common to see global variables in snippets of JavaScript code across the web, such as:

name = "Spock";
function greeting() {
 return "Hello " + name;
}

A better approach is to place all of your code within a namespace; an object that contains all of your code and helps to prevent name clashes with JavaScript code written by others.

The simplest method of creating a namespace is to use an object literal.

var foo = {};
foo.name = "Spock";
foo.greeting = function() {
 return "Hello " + foo.name;
}

This can also be specified using a different syntax.

var foo = {
 
 name: "Spock",
 
 greeting: function() {
  return "Hello " + foo.name;
 }
 
};

This approach is better that having outright global variables, but it exposes everything within the namespace as global. In other words both foo.name and foo.greeting are available everywhere.

Another problem with this approach is that greeting needs to refer to ‘foo.name’ rather than just ‘name’.

Another method of creating a namespace is through the use of a self executing function.

var foo = (function(){
 
 // Create a private variable
 var name = "Spock";
 
 // Create a private function
 var greeting = function() {
  return "Hello " + name;
 };
 
 // Return an object that exposes our greeting function publicly
 return {
  greeting: greeting
 };
 
})();

Here, when the function is executed it creates a private variable and a private inner function. The inner function can refer to the private variable directly. The main function then returns an object literal containing a reference to the greeting private function – this then exposes the greeting function as a public function so we can call it via the foo namespace.

console.log(foo.greeting() === "Hello Spock"); // true

This post was inspired by a good post from David B. Calhoun about spotting outdated JavaScript.

Preventing Hotlinking with Nginx and NodeJS

If you are running a NodeJS site via Nginx then you may be using proxy_pass to route requests from Nginx to Node.

If you’d like to also prevent hot linking then you might like to first have a read of Marcel Eichner’s post on preventing hot linking which this post is based on.

Then you can use a slightly modified version of that code which includes the proxy_pass directive in both of the location sections.

server {
    server_name yourdomain.com www.yourdomain.com;
    location ~* (\.jpg|\.png|\.gif)$ {
        valid_referers none blocked yourdomain.com www.yourdomain.com ~\.google\. ~\.yahoo\. ~\.bing\. ~\.facebook\. ~\.fbcdn\.;
        if ($invalid_referer) {
            return 403;
        }
        proxy_pass http://127.0.0.1:8123;
    }
    location / {
        proxy_pass http://127.0.0.1:8123;
    }
}

Some notes about this code:
In the valid_referers line, ‘blocked’ allows Referers that have been blocked by a firewall, ‘none’ allows requests with no Referer.

This is then followed by a list of domains and domain patterns that are also allowed. Google, Bing, etc are allowed for their image bots to access your site.

Decoding jQuery – domManip: DOM Manipulation

In the Decoding jQuery series, we will break down every single method in jQuery, to study the beauty of the framework, as an appreciation to the collective/creative geniuses behind it.



Inside manipulation.js within the jQuery source, there is an interesting internal method named

domManip, this is mainly used for methods like: .append(), .prepend(), .before() and .after().

domManip: function( args, table, callback ) {
  //...
}

Using fragment
In domManip, jQuery first checks if we are dealing with fragment node. In DOM, there are 12 different node types, and the one jQuery is checking is type 11 (Node.DOCUMENT_FRAGMENT_NODE == 11).
If we’re in a fragment, just use it, otherwise, building a new one using jQuery.buildFragment.

if ( jQuery.support.parentNode && parent && parent.nodeType === 11 && parent.childNodes.length === this.length ) {
    results = { fragment: parent };
} else {
    results = jQuery.buildFragment( args, this, scripts );
}

jQuery.buildFragment
Let’s take out jQuery.buildFragment and see what it does. The method comes with excellent explanation that talks about what each block of code does:

1. nodes may contain either an explicit document object, a jQuery collection or context object. The following checks if nodes[0] contains a valid object to assign to doc

if ( nodes && nodes[0] ) {
  doc = nodes[0].ownerDocument || nodes[0];
}

2. Ensure that an attr object doesn’t incorrectly stand in as a document object, Chrome and Firefox seem to allow this to occur and will throw exception

if ( !doc.createDocumentFragment ) {
  doc = document;
}

With the above check, the script will then fragment

if ( !fragment ) {
  fragment = doc.createDocumentFragment();
  jQuery.clean( args, doc, fragment, scripts );
}

3. To check if an element is cacheable. The method only caches “small” (1/2 KB) HTML strings that are associated with the main document. Cloning options loses the selected state, so it doesn’t cache them. IE 6 doesn’t like it when you put object or embed elements in a fragment. Also, WebKit does not clone ‘checked’ attributes on cloneNode, so it doesn’t cache them either. Lastly, IE6, 7, 8 will not correctly reuse cached fragments that were created from unknown elements.

if ( args.length === 1 && typeof first === "string" && first.length < 512 && doc === document &&
    first.charAt(0) === "<" && !rnocache.test( first ) &&
    (jQuery.support.checkClone || !rchecked.test( first )) &&
    (jQuery.support.html5Clone || !rnoshimcache.test( first )) ) {
 
    cacheable = true;
 
    cacheresults = jQuery.fragments[ first ];
    if ( cacheresults && cacheresults !== 1 ) {
      fragment = cacheresults;
    }
  }

The following script does the caching once it’s determined cacheable:

if ( cacheable ) {
  jQuery.fragments[ first ] = cacheresults ? fragment : 1;
}

Appending script
I first discovered this while inserting a script tag using jQuery and inspect the element without seeing this. This is because within the domManip, there is a check for script elements.

if ( scripts.length ) {
  jQuery.each( scripts, function( i, elem ) {
    if ( elem.src ) {
      jQuery.ajax({
        type: "GET",
        global: false,
        url: elem.src,
        async: false,
        dataType: "script"
      });
    } else {
      jQuery.globalEval( ( elem.text || elem.textContent || elem.innerHTML || "" ).replace( rcleanScript, "/*$0*/" ) );
    }
 
    if ( elem.parentNode ) {
      elem.parentNode.removeChild( elem );
    }
  });
}

This check does 4 things here:
1. first it detects and loop through all the script elements
2. if the script element has a src attribute, then jQuery uses jQuery ajax to load the script
3. if the script is embedded, jQuery uses jQuery.globalEval to evaluate the script
4. it removed the child from the parent element