|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站。
1、我们需达办理的贫苦
- 削减HTTP哀求数.削减HTTP哀求数有甚么优点
- 下降服务器跟客户真个创建和打消HTTP哀求和呼应Header的开支
- 削减服务器为HTTP毗连的历程和线程的开支,假如大概,还会包含GZIP紧缩的CPU开支.
- 减小被哀求文件巨细,削减哀求数据占用的收集带宽.
- 让用户更快的看到想要的了局.
- 进步客户端衬着速率.
- 让扫瞄器同时能哀求更多的数据.
- 进步服务器响应速率.
- 经由过程版本化把持客户端Cache.
2、怎样办理我们的贫苦
A.怎样削减HTTP哀求数
- 兼并JS文件跟CSS文件。
- 兼并框架图片和绝对变化较少的图片成一张,经由过程CSS背景切割来完成衬着,好比:减速图片显现。
- 公道利用当地Cache来缓存JS/CSS/IMAGE。
- 公道利用UserData缓存JS文件,关于FF用户能够独自哀求服务器,如许能办理80%用户的成绩.代码能够蓉儿(meizz)的jsframework1(标注1)。
- 把JS跟CSS兼并成一个文件
B.减小被哀求文件巨细,削减哀求数据占用的收集带宽
- 紧缩JS体积:删除JS中空缺换行,正文,搅浑把长变量换成短变量;
- 紧缩CSS体积:删除CSS正文、写法只管用简写;
- 利用(X)HTML+CSS体例搭建网站布局,进步CSS重用性,来削减(X)HTML文件巨细;
- 利用服务器端GZIP紧缩JS/CSS文件,减少传输文件巨细。附注:Apache1跟Apache2的GZIP的效力跟体例纷歧样的,依据必要自行选择。
嗷嗷增补申明:紧缩、兼并JS和CSS都由程序处置。而不是本人手动往缩删,否则倒霉于前期保护。
C.让用户更快的看到想要的了局
用户关于一个站点的白页的忍耐工夫依据统计是8-12秒。白页的发生大概因为各类缘故原由引发,我们能做的就是怎样让用户能变的略微能守候更久。
- 计划1:多做一个引诱页,让用户体味个中的变更
案例:mail.aol.com中的loading引诱页
- 计划2:优先载进页面布局和布局图片,后一步载进以后页面数据,再后一步载进Iframe,Flash等数据.让用户尽早的看到被翻开页面的但愿.
D.进步客户端衬着速率
这个成绩就对照平常了,影响客户真个衬着速率有多方面的,次要目标都是进步程序方面的效力.
- 关于年夜索引的布局,尽量的罕用索引会见,能用会见兄弟节点的体例尽量用会见兄弟节点的体例.
- 字符串拼接尽量用数组体例
- 年夜范围增加节点数据,请不要利用appendChild体例,只管利用相似innerHTML的insertAdjacentHTML体例,FF下需修改(标注1)
E.让扫瞄器同时能哀求更多的数据.
扫瞄器默许只是撑持单域名同时有两个HTTP哀求,利用多域名将能把哀求数进步,在收集前提优秀的情形下,能更快的下载数据,出现了局.
F.进步服务器响应速率
关于需疾速呼应的文件,把其放进疾速呼应的服务器,应当是不错的计划,优化计划请体系储蓄组供应.
G.经由过程版本化把持客户端Cache
一般js/css这类文件修改对照频仍,可是为了加载速率变快,我们有大概必要设定这类文件的过时工夫为几天后,如许我们碰着的成绩就是,怎样实时更新这些在cache的文件?
经由过程一个复杂的设置,经由过程修正JS的版原本实时告知扫瞄器,这些文件必需从头哀求了,不要持续利用扫瞄器cache中的数据.计划有好几个:
- 手动改这些js的文件名
- 手动改这些js的路径
- 经由过程URLRewrite体例来改重定位js路径
- 经由过程一个在高呼应服务器上的一个js设置告诉页面,这个页面该链接哪些JS文件
- 年夜版本稳定,小版本不休追加,等必定工夫后,一致更新,高效使用cache
标注
- meizz的jsframework还没出正式版,有乐趣在CSDN的页面翻一下
- Firefox修改体例
<P>functionaddHTML(oParentNode,sHTML){
if(window.addEventListener){//forMOZ
varoRange=oParentNode.ownerDocument.createRange();
oRange.setStartBefore(oParentNode);
varoFrag=oRange.createContextualFragment(sHTML);
oParentNode.appendChild(oFrag);
}
else{//forIE5+
oParentNode.insertAdjacentHTML("BeforeEnd",sHTML);
}
}
属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。 |
|