仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 508|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来谈谈:怎样疾速的出现我们的网页

[复制链接]
柔情似水 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:17:30 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

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);
}
}

属性值就追加上去,重复的属性值就以最后一个为准。这里要注意的是,样式的先后不是根据页面上应用的名字顺序,而是样式表里的样式顺序。
莫相离 该用户已被删除
沙发
发表于 2015-1-18 05:53:48 | 只看该作者
直接用代码建立链接,如:可以直接输入<aherf=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
第二个灵魂 该用户已被删除
板凳
发表于 2015-1-24 22:07:09 | 只看该作者
Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
因胸联盟 该用户已被删除
地板
发表于 2015-2-2 15:35:21 | 只看该作者
使用所见即所得的接口,亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。
愤怒的大鸟 该用户已被删除
5#
发表于 2015-2-8 02:39:00 | 只看该作者
经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅.
灵魂腐蚀 该用户已被删除
6#
发表于 2015-2-24 07:00:25 | 只看该作者
直接用代码建立链接,如:可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接,可以再选中文字后在代码中插入html标签,页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。
活着的死人 该用户已被删除
7#
发表于 2015-3-7 12:00:04 | 只看该作者
俗话说:兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中,我们难免会遇到各种各样的问题。
精灵巫婆 该用户已被删除
8#
发表于 2015-3-15 06:01:51 | 只看该作者
学Dreamweaver技术的过程其实是一个增加信心的过程。
兰色精灵 该用户已被删除
9#
发表于 2015-3-21 21:58:17 | 只看该作者
技术的学习如同长跑。只要越过极限,就会越跑越轻松。技术的学习其实并不像想象中那么可怕,任何技术都并不高深莫测。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-6-5 18:16

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表