`

34条网站加速方法

阅读更多

  1.Minimize HTTP Requests 减少HTTP请求
  图片、css、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应该写进CSS里,利用 CSS sprites 将小图拼合后利用background来定位。
  2.Use a Content Delivery Network 利用CDN技术
  CDN 确实是好东西,8过服务器提供商的这项服务一般是要收费的,我以前买的国内空间是有这个的但是我当时根本不知道啥用,现在没了。。。
  3.Add an Expires or a Cache-Control Header 设置头文件过期或者静态缓存
  浏览器会用缓存来减少http请求数来加快页面加载的时间,如果页面头部加一个很长的过期时间,浏览器就会一直缓存页面里的元素。不过这样如果页面里的东西变动的话就要改名字了,否则用户端不会主动刷新,看自己衡量了~ 这项可以通过修改.htaccess文件来实现。
  4.Gzip Components Gzip压缩
  Gzip格式是一种很普遍的压缩技术,几乎所有的浏览器都有解压Gzip格式的能力,而且它可以压缩的比例非常大,一般压缩率为85%。压缩没压缩,可以到 这里 做下测试。
  5.Put Stylesheets at the Top 把CSS放顶部
  让浏览者能尽早的看到网站的完整样式。
  6.Put Scripts at the Bottom 把JS放底部
  网站呈现完毕后再进行功能设置,当然这些JS要在你的加载过程中不影响内容表现。


  7.Avoid CSS Expressions 避免CSS Expressions
  CSS表达式很可怕,这个只被IE支持的东西执行时候的运算量非常大,你移动一下鼠标它都要进行重计算的,但有时候为了做浏览器的兼容必须要用到这个||| IE6去死去死!~
  8.Make JavaScript and CSS External 将JS和CSS外链
  前面讲到了缓存这个事情,一些较为公用的JS和CSS,我们可以使用外链的形式,譬如我就是从Google外链来的Jquery文件,如果我的浏览者在浏览别的使用了这个外链文件的网站时已经下载并缓存了这个文件,那么他在浏览我的网站的时候就不需要再进行下载了!~
  9.Reduce DNS Lookups 减少DNS查找
  貌似是要减少网站从外部调用资源,我的Google分析和picasa的外链图片都算在里面了。
  10.Minify JavaScript and CSS 减小JS和CSS的体积
  写JS和CSS都是有技巧的,用最少的代码实现同样的功能,减少空白,增强逻辑性,用缩写方式等等,当然也有不少工具也能够帮你实现这一点。
  11. Avoid Redirects 避免重定向
  再写入链接时,虽然”http://www. today-s-ooxx. com”和”http://www. today-s-ooxx. com/” 仅有一个最后的”/”只差,但是结果是不同的,服务器需要花时间把前者重定向为后者然后进行跳转,这个要自己注意,也可以在Apache里用Alias 或者mod_rewrite或者DirectorySlash解决。
  12. Remove Duplicate Scripts 删除重复脚本
  重复调用的代码浏览器并不会识别忽略,而是会再次运算一遍,这当然是大大的浪费。
  13. Configure ETags 配置ETags
  搞不清楚咋回事,总之我是在. htaccess里把它删除了。
  14. Make Ajax Cacheable 缓存Ajax
  Ajax是实时响应的,在浏览器接收到新的数据前,旧的数据被缓存,这样能够更好的提高效率。
  15. Flush the Buffer Early 尽早的释放缓冲
  当用户进行页面请求时,服务器端需要花费200到500毫秒时间来拼合HTML,将写在head与body之间,释放缓冲,这样可以将文件头先发送出去,然后再发送文件内容,提高效率。
  16. Use GET for AJAX Requests 用GET方式进行AJAX请求
  Get 方法和服务器只有一次交互(发送数据),而 Post 要两次(发送头部再发送数据)。
  17. Post-load Components 延迟加载组件
  最先加载必须的组件进行页面初始化,然后再加载其他,YUI Image Loader 是很好的例子。
  18. Preload components 预加载组件
  提前加载以后可能用到的东西,和延迟加载并不冲突,它的目的是为后续请求提供更快的响应,参见Google首页上的CSS sprites应用。
  19. Reduce the Number of DOM Elements 减少DOM元素数量
  复杂的页面结构意味着更长的下载及响应时间,更合理更高效的使用标签来架构页面,是好的前端的必备条件。
  20. Split Components Across Domains 跨域分离组件
  页面组件多个来源可以增大你的平行下载量,但注意不要过多,超过2-4个域名会引起上面说到的DNS查找浪费。
  21. Minimize the Number of iframes 减少iframe数量
  需要更有效的利用 ifames。
  iframe 优点:有利于下载缓慢的广告等第三方内容,安全沙箱,并行下载脚本
  iframe 缺点:即使为空也会有较大资源消耗,会阻止页面的onload,非语义
  22. No 404s 不要出现404页面
  站点本身里(非搜索结果)出现404页面,无意义的404页面会影响用户体验并且会消耗服务器资源。
  23. Reduce Cookie Size 减小Cookie
  Cookie在服务器及浏览器之间的通过文件头进行交换,尽可能减小Cookie体积,设置合理的过期时间,能够很好的提高效率。
  24. Use Cookie-free Domains for Components 对组件使用无Cookie的域名
  对静态组件的Cookie读取是一种浪费,使用另一个无Cookie的域名来存放你的静态组件式一个好方法,或者也可以在Cookie中只存放带www的域名。
  25. Minimize DOM Access 减少DOM的访问次数
  JS访问DOM是很慢的,尽量不要用JS来设置页面布局。
  26. Develop Smart Event Handlers 开发灵活的事件处理句柄
  DOM树上过多的元素被加入事件句柄的话,反应效率肯定会低,YUI事件工具有一个 onAvailable 方法可以帮助你灵活的设置DOM事件句柄
  27. Choose < link >over @import 使用< link >而非 @import
  在IE中使用@import就和在页面底部用< link >一样,我们前面说要把< link >放顶部的。
  28. Avoid Filters 避免过滤器的使用
  如果需要Alpha透明,不要使用AlphaImageLoader,它效率低下而且只对IE6及以下的版本适用,用PNG8图片。如果你非要使用,加上_filter以免影响IE7+用户。
  29. Optimize Images 优化图片
  将你的GIF转为PNG8会是个减小体积的好办法,另外有很多方法处理你的JPG及PNG图片以达到优化效果。
  30. Optimize CSS Sprites 优化CSS Sprites
  在CSS Sprites中竖直并尽量紧凑的排列图片,尽量将颜色相似的图片排在一起,会减小图片本身的大小及提高页面图片显示速度。
  31. Don’t Scale Images in HTML 不要在HTML中缩放图片
  图片要用多大的就用多大的,1000X1000的图片被width=”100″ height=”100″以后,本身的KB数是不会减少的。
  32. Make favicon. ico Small and Cacheable 缩小favicon. ico的大小并缓存它
  站点的浏览器ICO应该不是经常换吧,那就长时间的缓存它,并且最好控制在1K以下。
  33. Keep Components under 25K 保证组件在25K以下
  iPhone不能缓存25K以上的组件,并且这还是要在被压缩前。
  34. Pack Components into a Multipart Document 将组件打包进一个多部分的文档中
  就好像在邮件中加入附件一样,一个HTTP请求就够了,但是这一技术需要确保你的代理支持,iPhone就不支持。

分享到:
评论

相关推荐

    雅虎给出的34条网站加速方法

    雅虎给出的34条网站加速方法

    雅虎给出的34条优化网站访问速度加快方法

    雅虎,作为早期的互联网巨头,基于其丰富的经验和深入的研究,总结出了34条优化网站访问速度的方法,这些建议对于任何希望提高网站性能的开发者或网站管理员都极具价值。下面,我们将详细解析这些方法,帮助你理解并...

    写出高性能SQL语句的35条方法

    **方法十三:别名的重要性** 在多表连接的查询中使用表的别名,并在列名前加上表的别名前缀,可以减少解析时间,避免因列名歧义导致的语法错误,简化查询语句,提升执行效率。 以上策略不仅适用于Oracle数据库,也...

    三十岁女人保养秘籍及皮肤保养方法20条.docx

    ### 三十岁女性皮肤保养秘籍及方法 随着年龄的增长,女性的身体机能和皮肤状态会发生变化,特别是进入三十岁之后,肌肤开始面临更多的挑战。为了维持肌肤健康与活力,采取有效的保养措施至关重要。本文将详细介绍...

    yahoo 前端优化34条规则

    #### 十四、配置ETag - **解释**:ETag是一种版本控制机制,用于验证资源是否有变化。 - **设置方式**: - **自动生成ETag**:大多数现代服务器框架都会自动为资源生成ETag。 - **手动配置**:对于特定情况,可以...

    基于GPU的弹道快速计算方法.pdf

    实验结果表明,本文提出的基于GPU的弹道快速计算方法可以满足计算精度要求,并且获得了几十倍的加速效果。该方法不仅可以应用于飞行器航迹规划,还可以扩展到其他大规模并行计算领域。 四、结论 本文提出的基于GPU...

    CAD实用技巧共80条

    #### 十四、目标捕捉(OSNAP)的重要性 - **重要性**:目标捕捉在绘制精度要求较高的图形时非常关键,可以实现精确的定点。 - **建议**:避免直接使用光标线定位,应利用目标捕捉来提高绘制精度。 #### 十五、解决...

    海量数据处理常用方法

    假设有一个包含数十亿条记录的日志文件,我们需要对其中的时间戳进行排序。一种可行的方法是先将数据按时间范围分割成多个小文件,然后分别对每个小文件进行排序,最后合并所有排序好的文件得到最终的结果。 ##### ...

    成为编程高手的二十二条军规

    ### 第四条军规:掌握核心编程语言 C语言作为编程基础,掌握它对于后续学习其他高级语言至关重要。C语言的严谨性、高效性使其在系统级编程、嵌入式开发等领域有着不可替代的地位。因此,深入学习C语言,是成为一名...

    Oracle之SQL语句性能优化(34条优化方法)

    以下是对34条优化方法的详细解释: 1. **选择最有效的表名顺序**:在FROM子句中,应将记录条数最少的表放在最后,以减少ORACLE处理的数据量。 2. **WHERE子句的连接顺序**:将能过滤最多记录的条件写在WHERE子句的...

    汽车驾驶教程图解

     起步时,关键是加速踏板(油门踏板)的踩踏板方法和离合器的回位方法。  *加速踏板的踩踏方法  加速踏板的踩踏量过小,离合器抬得过急,容易引起发动机熄火。相反,加速踏板的踩踏量踩得过大、离合器连接过急,...

    保证安全行车的方法.docx

    根据《道路交通安全法》第四条规定:“同车道行驶的机动车,后车应当与前车保持足以采取紧急制动措施的安全距离。”这条规定强调了与前车保持合理距离的必要性。此外,《道路交通安全法实施条例》第四十七条还提到,...

    获取MySQL的表中每个userid最后一条记录的方法

    INSERT INTO t1 VALUES (1, '2013-08-12 11:05:25'), (2, '2013-08-12 11:05:29'), (3, '2013-08-12 11:05:32'), (5, '2013-08-12 11:05:34'), (1, '2013-08-12 11:05:40'), (2, '2013-08-12 11:05:43'), (3, '2013-...

    自动驾驶参考轨迹分段多项式平滑方法.pdf

    这种连续性要求通常称为G continuity,在自动驾驶的轨迹生成中尤为重要,因为它可以确保车辆行驶过程中不会产生突兀的转弯或加速,从而提升了行驶的平滑度和舒适性。 平滑处理的关键技术包括最小二乘法、分段处理...

    Web 2.0 编程思想:16条法则

    #### 法则十四:内容组织与标签化 在海量信息面前,合理地组织和分类内容是必不可少的。为每篇内容添加标签(Tagging)是一种简单有效的方法,它可以帮助用户快速找到感兴趣的主题。此外,还可以利用folksonomies...

    海量数据处理的方法

    - 如何为一个包含数十亿条记录的大表设计高效的索引策略? #### 七、倒排索引(Inverted Index) **定义**: 倒排索引是一种特殊的索引结构,主要用于文本搜索。它将文档中的关键词映射到包含这些关键词的所有文档...

    PCB布局设计及商业制造时应牢记10条法则

    第四条法则建议将相关元件和测试点进行分组。这样的设计便于在布局阶段优化布线长度,特别是在有旁路电容和电阻的运算放大器设计中。元件的分组和位置的规划还能够简化测试和故障检测过程。 第五条法则涉及到PCB...

Global site tag (gtag.js) - Google Analytics