UDN-企业互联网技术人气社区

板块导航

浏览  : 2404
回复  : 8

[Web] 提高网页效率的14条准则

[复制链接]
蜡笔小新的头像 楼主
发表于 2014-6-22 16:13:14 | 显示全部楼层 |阅读模式
本帖最后由 蜡笔小新 于 2014-6-22 16:31 编辑

第一条 尽可能的减少HTTP的Request请求数

    80%的用户响应时间都是浪费在前端。而这些时间主要用于下载图片、样式表、JavaScript脚本、flash等文。减少这些资源文件的Request请求数将是提高网页显示效率的重点。
    1、用一个大图片代替多个小图片    2、合并css文件    3、合并javascript文件

第二条 使用CDN

    根据不同的地理位置增设服务器以加快网络访问。

第三条 添加Expores头

    充分使用浏览器缓存,设置文件过期时间。设置了Expires头的内容在过期前浏览器不会从服务器端重新下载。

第四条 压缩组件

    对传输的内容采用gzip压缩,可以显著减少传输时间。尤其是文件较大的js文件、css样式表压缩能收到显著的效果。

第五条 把CSS样式放在页面的上方

    无论是HTML还是XHTML还是CSS都是解释型的语言,而非编译型的。所以CSS到上方的话,那么浏览器解析结构的时候,就已经可以对页面进行渲染。这样就不会出现,页面结构光秃秃的先出来,然后CSS渲染,页面又突然华丽起来,这样太具有“戏剧性”的页面浏览体验了。

第六条 将脚本放在底部
   
    原因同第五条一样。只是脚本一般是用来于用户交互的。所以如果页面还没有出来,用户连页面都不知道什么样子,那谈交互简直就是扯谈。所以,脚本和CSS正好相反,脚本应该放在页面的底部。

第七条 避免使用CSS表达式

    首先有必要先说明一下CSS Expressions是什么一个东西。其实它就像其它语言中的if……else……语句。这样在CSS中就可以进行简单的逻辑判断了。举个简单的例子——
  1. <style>
  2. input{background-color:expression((this.readOnly && this.readOnly==true)?"#0000ff":"#ff0000")}
  3. </style>
  4. <INPUT TYPE="text" NAME="">
  5. <INPUT TYPE="text" NAME="" readonly="true">
复制代码

这样css就可以根结一些情况分别使用不同的样式了,但是CSS中Expressions 的代价却是极高的。当你的页面需要根据判断来渲染效果的元素很多的时候,那么你的浏览器将长期处于假死状态,从而给用户带来极差的用户体验。


第八条 使用外部javascript和css

    纯粹而言,内联CSS和JS要快一些,但外部CSS和JS文件有机会被浏览器缓存起来,当一个页面被重复访问时,就不需要重复下载外部CSS和JS了。
    你的网页究竟是使用外部还是内联的CSS和JS?
    这个问题要根据你网页的实际情况而定。关键点在于:
    1、 页面查看的数量
    2、页面缓存(空缓存 VS 完整缓存)
    3、组件(css或js)的重用率

第九条 减少DNS查找

   1、如果不是必须,请不要把网站放到两台服务器上。
    2、网页中的图片、css文件、js文件、flash文件等等,不要太多的分散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子,要比壁纸图片来源于不同网站的帖子显示要快得多的原因。

第十条 精简JavaScript和CSS

    在你的最终发布版本中把没有必要的空行、空格和注释全部去掉。

第十一条 避免重定向
    重定向用于将用户从一个URL重新路由到另一个URL,它会使你的页面变慢。
    重定向有很多种,“301 Moved Permancenty”和“302 Moved Temporarily (也叫 Found)”是最常用的两种。
    有一种重定向很频繁和浪费,那就是URL的结尾必须出现斜线(/)而没有出现时。

第十二条 移除重复的脚本

    导致重复脚本的因素:团队大小和脚本数量。
    避免重复脚本的一种方法是:实现一个脚本代码管理模块(用javascript编写避免重复加载.js文件的代码)。

第十三条 配置ETag

    ETag,全称为:Entity Tag,意思是实体标签,从名字上看,是对于某种实体的一个标识。它属于HTTP协议的一部分,也就是所有的Web服务器都应该(也确实能)支持这个特性。它的作用是用一个特殊的字符串来标识某个资源的“版本”,客户端(浏览器)来请求的时候,可以比较,如果ETag一致,则表示该资源并没有修改过,客户端(浏览器)可以使用自己缓存的版本。

ETag与其他技术的比较
响应标头优势和特点劣势和可能的问题
Expires 1. HTTP 1.0就有,简单易用。
2. 服务器通过这个Header告诉浏览器,某资源直到某个时间才会过期,所以在没有过期之前,浏览器就直接使用本地的缓存了。
1. 因为这是时间是由服务器发送的(UTC),但如果服务器时间和客户端事件存在不一致,可能会有些问题。
2. 可能存在版本的问题,因为如果在到期之前修改过了,客户端是不会知道的。
3. Cache-Control中的max-age可以实现类似的效果,但更加好,因为max-age是一个以秒为单位的时间数,而不是具体的时间,所以不存在上面提到的第一个问题。
Cache-Control1. 服务器通过一个HeaderLast-Modified)告诉浏览器,某资源最后修改的时间。
2. 浏览器在请求的时候,包含一个HeaderIf-Modified-Since,然后服务器可以进行比较,如果在该时间后没有修改过,则返回304。
3.
它比Expires多很多选项设置。
Last-Modified 也是一个时间,但该时间只能精确到秒,如果在同一个秒中有多次修改(这个在现在的环境下应该确实是可能的),则可能会发生问题。
ETag1. 可以更加精确地判断资源是否被修改,因为它不是一个时间值,而是对时间经过处理的一个长整型数值(当然具体算法我们目前还不得而知)。
2. 浏览器发起新请求时需要包含 If-None-Match。
1. 如果部署在服务器场环境中,配置不当的话,可能每个服务器会对相同的资源生成不一样的ETag,这样就增加了重复下载的可能性。要理解这个问题的原因,以及如何解决,请参考这里的文档:http://support.microsoft.com/kb/922703/en-us
2.  该问题在IIS 7以及以后的版本中应该不存在了
这几个技术其实很多时候是会结合起来用的,而且优先级也有所不同。通常,ETag是优先于Cache-Control的,而Cache-Control又是优先于Expires的。

第十四条 使Ajax可缓存

    下面这些原则同样可以应用在Ajax的场景中:
    对资源添加缓存控制
    对资源启用压缩
    减少DNS查找的次数
    最小化JAVASCRIPT和CSS
    避免重定向
    配置ETags

什么样的AJAX请求可以被缓存?
    对于AJAX而言,有一些特殊性,并不是所有的AJAX请求都是可以缓存的。这是由于AJAX的请求通常有两种不同的方法:POST和GET。他们在进行请求的时候,就会略有不同。
    1、POST的请求,是不可以在客户端缓存的,每次请求都需要发送给服务器进行处理,每次都会返回状态码200。(这里可以优化的是,服务器端对数据进行缓存,以便提高处理速度)
    2、GET的请求,是可以(而且默认)在客户端进行缓存的,除非指定了不同的地址,否则同一个地址的AJAX请求,不会重复在服务器执行,而是返回304。



以上总结自书籍《高性能网站建设指南》,虽然年代久远,但是。。。




高性能网站建设指南.pdf

21.92 MB, 下载次数: 8

售价: 5 U币  [记录]

相关帖子

发表于 2014-7-7 15:40:48 | 显示全部楼层
赞!自己写代码的时候要记得遵守
使用道具 举报

回复

蜡笔小新的头像 楼主
发表于 2014-7-7 20:00:09 | 显示全部楼层
AceYang 发表于 2014-7-7 15:40
赞!自己写代码的时候要记得遵守

嗯,这段时间趁这个机会好好学学前端。
使用道具 举报

回复

发表于 2014-7-8 12:38:51 | 显示全部楼层
第九条 减少DNS查找

   1、如果不是必须,请不要把网站放到两台服务器上。
    2、网页中的图片、css文件、js文件、flash文件等等,不要太多的分散在不同的网络空间中。这就是为什么那种只发一个网站中的壁纸图片的帖子,要比壁纸图片来源于不同网站的帖子显示要快得多的原因。




这个值得商榷吧?

使用道具 举报

回复

蜡笔小新的头像 楼主
发表于 2014-7-8 23:43:15 | 显示全部楼层
NsGFr 发表于 2014-7-8 12:38
第九条 减少DNS查找

   1、如果不是必须,请不要把网站放到两台服务器上。

确实,火眼金睛呐。
把所有资源放在一台服务器虽然会减少DNS查找次数,但是减少了并行下载的数量。可以适当增加服务器。
使用道具 举报

回复

发表于 2014-7-9 08:38:33 | 显示全部楼层
蜡笔小新 发表于 2014-7-8 23:43
确实,火眼金睛呐。
把所有资源放在一台服务器虽然会减少DNS查找次数,但是减少了并行下载的数量。可以适 ...

把静态资源都放在一个服务器上,代理了呗
使用道具 举报

回复

发表于 2014-7-10 12:26:01 | 显示全部楼层
winy 发表于 2014-7-9 08:38
把静态资源都放在一个服务器上,代理了呗

互联网web站点的经常这样处理:图片有专门的服务器,常用图片资源和js资源用cdn,甚至page的不同区域都是来自于不同的服务器...
所以我说这条早都过时了。在当前的网络条件下,DNS的查找可以忽略掉。


使用道具 举报

回复

发表于 2014-7-10 12:27:39 | 显示全部楼层
没有提到js的并行加载,例如使用script的defer。
使用道具 举报

回复

发表于 2015-1-29 08:57:39 | 显示全部楼层
第六条 将脚本放在底部


本人前段不是很在行,但是以我的经验和看法
我觉得这一条有点以偏概全
关于脚本要放在顶部还是放在底部,需要看脚本的作用域
如果是局部的,当然放在底部比较好
否则还是放在顶部比较好


个人意见,有不同意见可以一同探讨
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部