Onelong

分享知识,与你一起进步......
RSS icon Home icon
  • 改善网页加载

    post by onelong / 2010-11-8 18:52 Monday [html+css]

    事实上浏览器加载网页并不是多线程的,我做个小测试啦!看看下面代码啦!

    代码一:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="ss.js"></script>

    </head>

    <body>

    <div>finish</div>

    </body>

    </html>

     

    代码二:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    </head>

     

    <body>

    <div>finish</div>

    </body>

    <script type="text/javascript" src="ss.js"></script>

    </html>

    为了做测试,我的ss.js文件大小为1MB多!两段代码运行的结果是: 代码一,页面加载大半天才显示出finish!而代码呢,先显示finish,但是页面还是在加载中!通过这个测试我们是不是有些想法呢?那就是如何安排外部文件加载的位置呢?或者我们应该想多一点,就是改善用户体验,如何同步加载jscss,即使在加载网页元素的同时加载cssjs!减少预加载的时间,使得页面显示的更快一些,有个同事说facebook就是使用了类似的加载技术!

    如果所有内容都放在同一张页面加上合理安排jscss的位置,的确可以提高用户体验的!内嵌css和内嵌javascript,维护怎么办呢?所以事先这一技术就寄托在服务器上了,就是使用动态语言在加载事时动态内嵌cssjavascript!当然这好像对seo优化带来了难题,我要解释的是:任何技术都有适用范围的。所以这只是提供一个参考的思考方向而已

    优化加载还可以考虑使用压缩技术,也是gzip压缩技术啦!很多理论说明使用压缩技术对搜索引擎友好!我在网上看到一些php的例子!

    代码一:自己写压缩函数

    <?php

    ob_start('ob_gzip');

    ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    </head>

    <body>

    <?php

    for($j=0;$j<10;$j++){

             for($i=0;$i<1000000;$i++){

                       echo 'Hello World!';

             }

    }

    ?>

    </body>

    </html>

    <?php

    ob_end_flush();

    //压缩函数

    function ob_gzip($content){

    if(!headers_sent()

             &&extension_loaded("zlib")

             &&strstr($_SERVER["HTTP_ACCEPT_ENCODING"],"gzip")){

    $content = gzencode($content,9);

    header("Content-Encoding: gzip");

    header("Vary: Accept-Encoding");

    header("Content-Length: ".strlen($content));

    }

    return $content;

    }

    ?>

    代码二:使用内置函数

    <?PHP

    if(Extension_Loaded('zlib')){

             Ob_Start('ob_gzhandler');

             echo 'open';

    }

    Header("Content-type: text/html");

    ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    </head>

    <body>

    <?php

    for($i=0;$i<10000;$i++){

    echo 'Hello World!';

    }

    ?>

    </body>

    </html>

    <?PHP

    if(Extension_Loaded('zlib')) Ob_End_Flush();

    ?>

    当然,实现这技术还需要一个前提就是服务器支持!经过测试,使用压缩技术极大限度的提高了加载速度!不信的话,可以去测试一下啦,让实现说话!

    我在想,是不是css sprite技术也是考虑了页面单线程加载的问题吧!预加载会阻塞页面加载的!

    思考从未停止过!下次测试一下自己想的出来加载技术!下午要专业英语考试了,大学真是麻烦,老是考试!

    引用地址:
     

    我要评论