Optimization: Loading content using ajax

Question

I want to hear your ideas on optimizing the loading of content using ajax. Next, I will propose a few ways of doing it and I'll come up with my own thoughts about each one.

• Loading html directly - This allows to load the content easily with not much further computation needed. More suited for content that is not affected by user operations or content with parts that should be updated regularly
• Getting a json object from server - Seems like a good way to have content of a page in a json object. Allows for modifying only some parts by comparing the current values to the new object
• Loading by parts (chunks) - Might seem the hardest way to update. You have to know which part's changed and where to load it (specific dom access to the node that should be changed/updated). Also, from a computational stand point seems easier to do than getting a json object and 'manually' creating the tags or having a template which we load data into

So, what do you think about each approach? Feel free to propose a new approach!

Answer 1

I classify contents 3 parts.

1. HTML, not db cached and ajax
2. db cached, and not ajax (contents change cycle is periodic)
3. db cached and ajax (high db operation time)

if page is slow, analyze it and change to 2 or 3. Before using ajax content loading, you must analyze your pages access speed and db load.

for db cache, I pass function and arguments.

$c1 = db_cache("main_top_naver_cache", 300, "naver_popular('naver_popular', 4)");
db_cache - php function(my own)
main_top_naver_cahce : cache name
300 : cache duration
naver('naver_popular',4) : php function and arguments

and this code is my ajax contents loading method. very simple.

link

I consider ajax loading method for many years, and last month I got very simple code. try my ajax content loading code.

<div id='main_b'>
// codes for ajax content loading...
// enter this code at the end of program.
// your home page is boosted.
<?
function remove_nr($str) {
$reg_e = array('/\n/', '/\r/', '/\"/', "/<\/script>/i"); 
$reg_p = array(' ', ' ', '\\"', "<\/SCRIPT>"); 
return preg_replace($reg_e, $reg_p, $str);
}
?>
<script type="text/javascript">
$("#main_b").html( " <? echo remove_nr(db_cache("main_top_naver_cache", 300, "naver_popular('naver_popular', 4)"))?> " );
</script>

and my db_cache code. you can analyze this.

function db_cache($c_name, $seconds=300, $c_code) {

    global $g4;

    $result = sql_fetch(" select c_name, c_text, c_datetime from $g4[cache_table] where c_name = '$c_name' ");
    if (!$result) {
        // 시간을 offset 해서 입력 (-1을 해줘야 처음 call에 캐쉬를 만듭니다)
        $new_time = date("Y-m-d H:i:s", $g4['server_time'] - $seconds - 1);
        $result['c_datetime'] = $new_time;
        sql_query(" insert into $g4[cache_table] set c_name='$c_name', c_datetime='$new_time' ");
    }

    $sec_diff = $g4['server_time'] - strtotime($result['c_datetime']);
    if ($sec_diff > $seconds) {

        // $c_code () 안에 내용만 살림 
        $pattern = "/[()]/";
        $tmp_c_code = preg_split($pattern, $c_code);

        // 수행할 함수의 이름
        $func_name = $tmp_c_code[0];

        // 수행할 함수의 인자
        $tmp_array = explode(",", $tmp_c_code[1]);

        if ($func_name == "include_once" || $func_name == "include") {

            ob_start();
            include($tmp_array[0]);
            $c_text = ob_get_contents();
            ob_end_clean();

        } else {

        // 수행할 함수의 인자를 담아둘 변수
        $func_args = array();

        for($i=0;$i < count($tmp_array); $i++) {
            // 기본 trim은 여백 등을 없앤다. $charlist = " \t\n\r\0\x0B"
            $tmp_args = trim($tmp_array[$i]);
            // 추가 trim으로 인자를 넘길 때 쓰는 '를 없앤다
            $tmp_args = trim($tmp_args, "'");
            // 추가 trim으로 인자를 넘길 때 쓰는 "를 없앤다
            $func_args[$i] = trim($tmp_args, '"');
        }
        // 새로운 캐쉬값을 만들고
        $c_text = call_user_func_array($func_name, $func_args);
        }

        // db에 넣기전에 slashes들을 앞에 싹 붙여 주시고
        $c_text1 = addslashes($c_text);

        // 새로운 캐쉬값을 업데이트 하고
        sql_query(" update $g4[cache_table] set c_text = '$c_text1', c_datetime='$g4[time_ymdhis]' where c_name = '$c_name' ");

        // 새로운 캐쉬값을 return (slashes가 없는거를 return 해야합니다)
        return $c_text;

    } else {

        // 캐쉬한 데이터를 그대로 return
        return $result['c_text'];

    }
}

I operate db intensive web site 450,000 pages/day on 5 years old web server in boosting speed with is codes and many other mysql tips. My web server has 1 CPU/4Core, RAM 12G, 2 SATA HDD/Raid 1.

Answer 2

Well I work in the enterprise software field (as a mere consultant, not a developer ;) ) and I've seen many times the third approach used extensively because it's the more flexible in terms of dynamicity of the page.

Aside from that the first two approaches don't seem to compelling from the point of view of updating just some parts: even in the second case (using JSON) you have to compare the two page fragments, which I think it's a naive approach (and not so mantainable, I fear).

But your question lacks some important information, like what you are using to generate the page. This is less important in the first case because you are simply generating a string (which contain the page soure code) but it can become a mess in the third case if your AJAX loading code interferes with the HTML templating engine you are using.

I hope this helps and please add more information to the question if you need to!