当前位置:  编程技术>WEB前端

提高网页效率的14条注意事项图文第1/3页

    来源: 互联网  发布时间:2014-10-04

    本文导语:  网站最基本的东西是什么? ——内容?SEO(搜索引擎优化)?UE(用户体验)?都不对!是速度! 内容再丰富的网站,如果慢到无法访问也是毫无意义的; SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭; UE设计的再人性...

网站最基本的东西是什么?
——内容?SEO(搜索引擎优化)?UE(用户体验)?都不对!是速度!
内容再丰富的网站,如果慢到无法访问也是毫无意义的; SEO做的再好的网站,如果搜索蜘蛛抓不到也是白搭; UE设计的再人性化的网站,如果用户连看都看不到也是空谈。
所以网页的效率绝对是最值得关注的方面。如何才能提高一个网页的效率呢?Steve Souders(Steve Souders的资料http://www.oreillynet.com/pub/au/2951)提出的提高网页效率的14条准则,而这些准则也将是我们下篇中介绍到的YSlow工具的理论基础:


Make Fewer HTTP Requests
Use a Content Delivery Network
Add an Expires Header
Gzip Components
Put CSS at the Top
Move Scripts to the Bottom
Avoid CSS Expressions
Make JavaScript and CSS External
Reduce DNS Lookups
Minify JavaScript
Avoid Redirects
Remove Duplicate Scripts
Configure ETags
Make Ajax Cacheable
这里我们将逐一的讲解这些准则,对其中开发者密切相关的准则我将详细讲解。小弟个人技术实在有限,错误和无知在所难免,还请高人指点。
第一条:Make Fewer HTTP Requests 尽可能的减少HTTP的Request请求数。

80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。
这里好像有个矛盾,就是如果我减少了很多的图片,样式,脚本或者flash,那么网页岂不是光秃秃的,那多难看呢?其实这是一个误解。我们只是说尽量的减少,并没有说完全不能使用。减少这些文件的Request请求数,当然也有一些技巧和建议的:

1:用一个大图片代替多个小图片。这的确有点颠覆传统的思维了。以前我们一直以为多个小图片的下载速度之和会小于一个大图片的下载速度。但是现在利用httpwatch工具的对多个页面进行分析后的结果表明事实并不是这样。
第一张图是一个大小为40528bytes的337*191px的大图片的分析结果。
第二张图是一个大小为13883bytes的280*90px的小图片的分析结果。

一个大小为40528bytes的337*191px的大图片的分析结果(点击图片可以查看完整大图片)


一个大小为13883bytes的280*90px的小图片的分析结果(点击图片可以查看完整大图片)
第一张大图片花费时间为:
Blocked:13.034s
Send:0.001s
Wait:0.163s
Receive:4.596s
TTFB:0.164s
NetWork:4.760s
功耗时:17.795s
真正用于传输大文件花费的时间为Reveive时间,即4.596s,多数的时间是用来检索缓存和确定链接是否有效的Blocked时间,供花费13.034s,占总时间的73.2%。

    
 
 

您可能感兴趣的文章:

  • 提高CSS网页渲染效率的11点注意事项
  • 请问在编写Java小应用程序的时候,有些功能用JavaScript实现是否可以提高效率呢?
  • **关于大数据量如何提高效率。
  • 哪位结合原码说明下Linux内核开发人员是如何处心积虑的提高效率的
  • 有没有提高java运行效率的方法,工具或是编程的技巧!
  • 使用精简的linux系统效率会提高吗?
  • 提高sql中带in条件的查询效率
  • 请问:如何提高查询的效率和优化数据库
  • 8个你应该了解的正则表达式提高你的工作效率
  • 【请教】应用程序中likely和unlikely宏能提高代码效率吗?
  • 急:如何提高驱动程序的运行效率,处理大数据量??
  • MySQL查询优化:LIMIT 1避免全表扫描提高查询效率
  • Oracle 创建监控账户 提高工作效率
  • 来一个高难的问题:怎样能保证文件的物理连续存储?或者说如何能最大限度提高文件I/O的效率?
  • Oracle提高sql执行效率的心得建议
  • 对于这样的问题该如何提高其效率?
  • MySQL 联合索引与Where子句的优化 提高数据库运行效率
  • mysql中提高Order by语句查询效率的两个思路分析
  • Oracle提高SQL执行效率的3种方法
  • PHP中几个可以提高运行效率的代码写法、技巧分享
  • 正则用(?>…)实现固化分组提高效率
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 怎么提高主页显示的速度
  • 请推荐几本java的入门和提高书籍.
  • Oracle收购TimesTen 提高数据库软件性能
  • 请教如何提高SD卡的读写速度?
  • JAVA提高~
  • 《jsp入门与提高》,
  • 怎么才能提高一个进程能打开的描述符数量
  • 提高cpu使用率
  • 怎样提高读取文件的速度?
  • 急求redhat liunx8.0电子文档。(安装指南和入门指南和提高或相关的电子文档)
  • 如何提高Powerpc 8270嵌入式系统性能?
  • 只有256内存,如何让fc8响应速度提高?
  • 十万火急!(100分) unix下如何提高Coll(网络发生碰撞的次数)
  • 关于提高Oracle数据库性能的四个错误认识
  • 如果要研究源代码以提高自己,哪一个开放源代码的软件比较合适?
  • 请各位帮忙:描述一些项目(要能提高编程水平,java水平)
  • @@@@@@@ 提两个80386保护编程方面的问题,为提高本版的贴子量尽点力 @@@@@@@@@@@
  • 如何提高LINUX4网卡的速度?
  • Linux下提高数据库操作速度
  • Xwindow的刷新频率能提高吗——mm提


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3