如何快速的呈现我们的网页的技巧整理

前几天小芳同学一直在群发起一些加速的话题，我已经把聊天记录抽出来，正打算整理出份像样的，没想到小芳同学非常速度的出了这篇。我的就省掉了，挖哈哈。

特别说一下了，这些方案并非适合所有的网站，很多部分有的网站还是不要做反而会更好。如果你还有更多的想法，可以到这里讨论或者评论，我只是归档成为方便阅读的，对了论坛和群讨论的另一些结果如果有价值我也会补充进来。

如何快速的呈现我们的网页 作者：flashsoft，（内容被我略修删过）。

一.我们需达解决的麻烦


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

D.提高客户端渲染速度

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

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

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修正方式 
    function addHTML(oParentNode, sHTML) {
       if(window.addEventListener) {// for MOZ
         var oRange = oParentNode.ownerDocument.createRange();
         oRange.setStartBefore(oParentNode);
         var oFrag = oRange.createContextualFragment(sHTML);
         oParentNode.appendChild(oFrag);
       }
       else {// for IE5+
         oParentNode.insertAdjacentHTML("BeforeEnd", sHTML);
       }
    }

赞 (0)

相关推荐

  • 如何快速的呈现我们的网页的技巧整理

    前几天小芳同学一直在群发起一些加速的话题,我已经把聊天记录抽出来,正打算整理出份像样的,没想到小芳同学非常速度的出了这篇.我的就省掉了,挖哈哈. 特别说一下了,这些方案并非适合所有的网站,很多部分有的网站还是不要做反而会更好.如果你还有更多的想法,可以到这里讨论或者评论,我只是归档成为方便阅读的,对了论坛和群讨论的另一些结果如果有价值我也会补充进来. 如何快速的呈现我们的网页 作者:flashsoft,(内容被我略修删过). 一.我们需达解决的麻烦 减少HTTP请求数. 减少HTTP请求数有什么

  • 优化网页之快速的呈现我们的网页

    一.我们需要解决的麻烦        A.减少HTTP请求数.                减少HTTP请求数有什么好处:                       降低服务器跟客户端的建立和消除HTTP请求和响应Header的开销                         减少服务器为HTTP连接的进程和线程的开销,如果可能,还会包括GZIP压缩的CPU开销.        B.减小被请求文件大小, 减少请求数据占用的网络带宽.        C.让用户更快的看到想要的结果.    

  • mysql通过文档读取并执行命令之快速为mysql添加多用户和数据库技巧

    复制代码 代码如下: # vi mysqlusers.txt create database dataname; grant all privileges on dataname.* to username@localhost identified by 'password'; flush privileges; # /usr/local/mysql/bin/mysql -u root -p password < mysqlusers.txt 蓝色斜体部分为对应的用户名和密码,添加多个用户及数据

  • 详解10个可以快速用Python进行数据分析的小技巧

    一些小提示和小技巧可能是非常有用的,特别是在编程领域.有时候使用一点点黑客技术,既可以节省时间,还可能挽救"生命". 一个小小的快捷方式或附加组件有时真是天赐之物,并且可以成为真正的生产力助推器.所以,这里有一些小提示和小技巧,有些可能是新的,但我相信在下一个数据分析项目中会让你非常方便. Pandas中数据框数据的Profiling过程 Profiling(分析器)是一个帮助我们理解数据的过程,而Pandas Profiling是一个Python包,它可以简单快速地对Pandas 的

  • js获取网页高度(详细整理)

    网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.body.offsetWidth (包括边线的宽) 网页可见区域高: document.body.offsetHeight (包括边线的高) 网页正文全文宽: document.body.scrollWidth 网页正文全文高: document.body.scrollHeight 网页被卷去的高: document.b

  • 快速学习JavaScript的6个思维技巧

    快速学习JavaScript的6个思维技巧

    我们在学习JavaScript,或其他任何编码技能的时候,往往是因为这些拦路虎而裹足不前: 有些概念可能会造成混淆,尤其当你是从其他语言转过来的时候. 找不到时间(有时是动力)学习. 很容易忘记已经理解了的东西. 工具多又在不断变化,所以不知道从哪里开始. 幸运的是,这些拦路虎是可以被识别,并消灭的.在这篇文章中,我将介绍六个思维技巧来帮助你更快地学习JavaScript,并成为一个更快乐.更富有成效的程序员. 1.不要让未来的决策阻止你现在前进的方向 很多人学习JavaScript,问的第一个

  • 网站关键词标题和网页描述技巧_站长必看

    在我们的搜索引擎优化工 作中,可能很多朋友会遇到这样一个问题,网站一些关键词排名不错,但是点击访问的不多,甚至有朋友曾调查过,发现有时候排名靠前的访问量比靠后的点击率更 低,有些网站访问量很高,但是网站广告的点击率很低,产品销售型网站也会同样遇到这种,高访问量,低咨询,低成交量的问题. 本人一直学习研究网站如何获得 真正高质量的流量,真正帮企业从网上获得订单,根据以往自己的经验,并参考众多网友的研究成功,发现网页标题和网页描述是吸引用户点击你网站,是吸引产品 的潜在客户点击你的直接原因.比如,我

  • 快速增强路由器安全的十个小技巧

    要不是思科最新发布的安全警告的提醒,很多网络管理员还没有认识到他们的路由器能够成为攻击的热点.路由器操作系统同网络操作系统一样容易受到黑客的攻击.大多数中小企业没有雇佣路由器工程师,也没有把这项功能当成一件必须要做的事情外包出去.因此,网络管理员和经理人既不十分了解也没有时间去保证路由器的安全.下面是保证路由器安全的十个基本的技巧. 1.更新你的路由器操作系统:就像网络操作系统一样,路由器操作系统也需要更新,以便纠正编程错误.软件瑕疵和缓存溢出的问题.要经常向你的路由器厂商查询当前的更新和操作系

  • 借助javascript代码判断网页是静态还是伪静态

    最近一直在研究Dedecms,准备建站之前,就一直在想用不用伪静态,到现在还没有决定下来,想来想去,最好的办法还是看一看同类型的网站采用的是静态还是伪静态.那么我们打开一个网站,在基础知识不够的情况下,如何简单快速的判断出这个网页是静态还是伪静态呢?下面给大家来简单介绍一下: 伪静态和静态单从URL来看,很难分辨出来,一般网页后缀都是以.html结尾.我们可以借助一段简单的javascript代码判断一下: 首先说明这段javascript代码只能在IE里打开,用Chrome和Firefox无法

  • 网站制作之网页技巧

    相信众位网友在网上尽情冲浪时,一定会看到不少设计独特.创意新颖.页面诱人的个人网页,遇到这些网页你也一定会驻足停留.仔细欣赏一番,同时脑海中大概也会有一丝想要制作一个属于自己的个人主页的念头.如果你确实有这个想法,那就请你继续看完下面的内容,下面提供的网页设计技巧一定会使你大饱眼福,并让你在以后设计自己的主页过程中游刃有余.好了,说了这么多,还是让我们直接切入正题,和大家一起看看笔者今天带来了哪些网页制作技巧吧: 1.设计前要有筹划 设计主页也许并不是很困难.但这一工作与编制传统的宣传品一样,都

随机推荐