如何快速的呈现我们的网页

一、我们需达解决的麻烦

  • 减少HTTP请求数. 减少HTTP请求数有什么好处
    • 降低服务器跟客户端的建立和消除HTTP请求和响应Header的开销
    • 减少服务器为HTTP连接的进程和线程的开销,如果可能,还会包括GZIP压缩的CPU开销.
  • 减小被请求文件大小, 减少请求数据占用的网络带宽.
  • 让用户更快的看到想要的结果.
  • 提高客户端渲染速度.
  • 让浏览器同时能请求更多的数据.
  • 提高服务器相应速度.
  • 通过版本化控制客户端Cache.

二、如何解决我们的麻烦
A.如何减少HTTP请求数

  1. 合并JS文件跟CSS文件。
  2. 合并框架图片以及相对变动较少的图片成一张,通过CSS背景切割来完成渲染,比如:加速图片显示
  3. 合理使用本地Cache来缓存JS/CSS/IMAGE。
  4. 合理使用UserData缓存JS文件,对于FF用户可以单独请求服务器,这样能解决80%用户的问题.代码可以蓉儿(meizz)的js framework1(标注1)。
  5. 把JS跟CSS合并成一个文件

B.减小被请求文件大小,减少请求数据占用的网络带宽

  1. 压缩JS体积:删除JS中空白换行,注释,混淆把长变量换成短变量;
  2. 压缩CSS体积:删除CSS注释、写法尽量用简写;
  3. 使用(X)HTML+CSS方式搭建网站结构,提高CSS重用性,来减少(X)HTML文件大小;
  4. 使用服务器端GZIP压缩JS/ CSS文件,缩小传输文件大小。附注:Apache1跟Apache2的GZIP的效率跟方式不一样的,根据需要自行选择。
    嗷嗷补充说明:压缩、合并JS和CSS都由程序处理。而不是自己手动去缩删,不然不利于后期维护。

C.让用户更快的看到想要的结果
用户对于一个站点的白页的忍受时间根据统计是8-12秒。白页的产生可能由于各种原因引起,我们能做的就是怎么让用户能变的稍微能等待更久。

  1. 方案1:多做一个引导页,让用户体会其中的变化
    案例:mail.aol.com中的loading引导页
  2. 方案2:优先载入页面结构以及结构图片,后一步载入当前页面数据,再后一步载入Iframe,Flash等数据.让用户尽早的看到被打开页面的希望.

D.提高客户端渲染速度
这个问题就比较泛泛了,影响客户端的渲染速度有多方面的,主要目的都是提高程序方面的效率.

  1. 对于大索引的结构,尽可能的少用索引访问,能用访问兄弟节点的方式尽可能用访问兄弟节点的方式.
  2. 字符串拼接尽可能用数组方式
  3. 大规模添加节点数据,请不要使用appendChild方式,尽量使用类似innerHTML的insertAdjacentHTML方式,FF下需修正(标注1)

E.让浏览器同时能请求更多的数据.
浏览器默认只是支持单域名同时有两个HTTP请求,使用多域名将能把请求数提高,在网络条件优良的情况下,能更快的下载数据,呈现结果.
F.提高服务器相应速度
对于需快速响应的文件,把其放入快速响应的服务器,应该是不错的方案,优化方案请系统储备组提供.
G.通过版本化控制客户端Cache
通常js/css这类文件改动比较频繁,但是为了加载速度变快,我们有可能需要设定这类文件的过期时间为几天后,这样我们碰到的问题就是,如何及时更新这些在cache的文件?
通过一个简单的配置,通过修改JS的版本来及时告诉浏览器,这些文件必须重新请求了,不要继续使用浏览器cache中的数据. 方案有好几个:

  1. 手动改这些js的文件名
  2. 手动改这些js的路径
  3. 通过URL Rewrite方式来改重定位js路径
  4. 通过一个在高响应服务器上的一个js配置告知页面,这个页面该链接哪些JS文件
  5. 大版本不变,小版本不断追加,等一定时间后,统一更新,高效利用cache

标注

  1. meizz的js framework还没出正式版,有兴趣在CSDN的页面翻一下
  2. Firefox修正方式

转载于:http://www.blueidea.com/tech/site/2007/4822.asp

[转]关于大家问的uc开发手册不能同步登陆问题

最近在做一个整合 UCenter 的项目,下载了一份 uc开发手册,测试结果是这样的:
通过uch 登陆 可以同步登陆到论坛,但是不能登陆到 ucexample_1.php 和 2 这个开发手册自带的例子中。
但是通过ucexample_1.php 和 2 的例子登陆是可以登陆到 uch 和 论坛的
所有都是在配置正确的前提下进行,在 uc管理中的 应用管理 通信是要成功的。
那么问题是如何出现的呢?
看一下 api/uc.php
99-110行

  1. //同步登录 API 接口
  2. include './include/db_mysql.class.php';
  3. $db = new dbstuff;
  4. $db->connect($dbhost, $dbuser, $dbpw, $dbname, $pconnect);
  5. unset($dbhost, $dbuser, $dbpw, $dbname, $pconnect);
  6. $uid = intval($get['uid']);
  7. $query = $db->query("SELECT uid, username FROM {$tablepre}members WHERE uid='$uid'");
  8. if($member = $db->fetch_array($query)) {
  9. header('P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"');
  10. dsetcookie('Example_auth', authcode($member['uid']."\t".$member['username'], 'ENCODE'), 86400 * 365);
  11. }

复制代码

你会发现是一个读取数据库的操作,读取到才能设置咱们自己应用的 cookies 的
那么样例中似乎说的是要连接到自己的数据库中,可想如果咱们自己的数据库没有会员数据那么就登陆不成功了,所以解决办法就是读取uc自己的数据库!
在 app 的 config.inc.php 中
21-28行,不要看提示说是设置自己的,咱们直接设置 uc 的数据库

  1. //ucexample_2.php 用到的应用程序数据库连接参数
  2. $dbhost = 'localhost';                        // 数据库服务器
  3. $dbuser = 'root';                        // 数据库用户
  4. $dbpw = '';                                // 数据库密码
  5. $dbname = 'uc';                        // 数据库名
  6. $pconnect = 0;                                // 数据库持久连接 0=关闭, 1=打开
  7. $tablepre = 'uc_';                   // 表名前缀, 同一数据库安装多个论坛请修改此处
  8. $dbcharset = 'gbk';                        // MySQL 字符集, 可选 'gbk', 'big5', 'utf8', 'latin1', 留空为按照论坛字符集设定

然后你在测试一下,通过论坛 uch登陆 也可以直接同步登陆到 示例的应用中了!
转自:http://www.discuz.net/viewthread.php?tid=1043330&extra=page%3D1&frombbs=1

隐藏IE横向滚动条

在以前的HTML标准下,要隐藏横向滚动条,只需要在CSS里加上
Body
{
overflow-x:hidden;
}
但是在现在的标准下"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"下面,上面的代码不产生任何效果,因为现在不是以Body作为容器,而是html标签,所以
加入:
HTML
{
overflow-x:hidden;
}
但是这样做了以后,在IE7下,鼠标滚轮上下滚动不起作用了,IE6下却是正常的。多加上一行代码就解决问题了
HTML
{
overflow-x:hidden;
overflow-y:auto;
}

JavaScript中获取元素的绝对位置

在一些应用中,可能会有需要知道某一个控件在页面中的位置,在网上比较容易找到下面这个解决方法。
在页面中有一个按钮:

在脚本中响应点击事件的是这个函数:

这个方法的实现相当精炼,意思就是先取得自己的相对位置,再叠加其最近的相对位置容器(offsetParent,它不一定是其父节点)的相对位置,直至顶层位置容器(一般就是body),从而得出该节点的相对位置。
不过,很快就发现这个函数也许并不够用,因为我在页面里有可能使用了一些CSS来使得本来平铺的画面变成一个滚动区域,例如设置了父节点的height为 某个值,并且其overflow设为auto或者scroll。这时,上面的方法因为没有计算其滚动偏移,所以所得的值不一定是元素当前的绝对位置,所以 我对上面的方法进行了一些小改动,实际上就是加入了对其滚动偏移量的计算。

稍微测试了一下,基本上在IE和FF中都能正常运转。
在运用方面,由于使用到往上遍历,如果节点树结构过于复杂,而且有不会有滚动出现的话,那么还是用第一个方法就足够了。

scrollLeft,scrollWidth,clientWidth,offsetWidth之完全详解

scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

Javascript学习笔记–类的继承

最近在看天雪发给我看的一本Javascript的书,是JQuery之父写的,写得很棒,里面推荐的资源也很棒。为了弥补我的差记性,特写下学习笔记。
http://javascript.crockford.com/inheritance.html
这个是讲Js里面的类继承的写法,这个作者太犯贱了,上面的例子都是用自己写的方法,结果方法在最下面才写出来,告诉我们。搞得我一开始以为是内置的方法呢。。。不过他的方法写得太酷了,下面列举一下:

Sugar(作者管他写的方法叫做糖,确实很甜)

To make the examples above work, I wrote four sugar methods. First, the method method, which adds an instance method to a class.
为了上面的例子跑起来,我写了四个很甜的方法。首先,是method方法,它是用来把方法添加到class里的。

This adds a public method to the Function.prototype, so all functions get it by Class Augmentation. It takes a name and a function, and adds them to a function's prototype object.
It returns this. When I write a method that doesn't need to return a value, I usually have it return this. It allows for a cascade-style of programming.
Next comes the inherits method, which indicates that one class inherits from another. It should be called after both classes are defined, but before the inheriting class's methods are added.

Again, we augment Function. We make an instance of the parent class and use it as the new prototype. We also correct the constructor field, and we add the uber method to the prototype as well.
The uber method looks for the named method in its own prototype. This is the function to invoke in the case of Parasitic Inheritance or Object Augmentation. If we are doing Classical Inheritance, then we need to find the function in the parent's prototype. The return statement uses the function's apply method to invoke the function, explicitly setting this and passing an array of parameters. The parameters (if any) are obtained from the arguments array. Unfortunately, the arguments array is not a true array, so we have to use apply again to invoke the array slice method.
Finally, the swiss method.

The swiss method loops through the arguments. For each name, it copies a member from the parent's prototype to the new class's prototype.
才翻译了一个,发现懒得翻译了。。。实在是个懒人啊。。。大家将就着看,我什么时候想到了再来翻译一下好了,其实都是很简单的英语。