高性能网站指南 14点.

文中内容大多摘自
High Performance Web Sites
14 Steps to Faster-loading Web Sites

一 减少HTTP请求

图片

1:图片地图 那就是html的<map>标签,不过浏览器支持不是太好

2:Css Sprite 使用一张大图保存所需要的图片,减少下载所需要的次数,同时也可以衍生出了Google那种图片的使用方式
设置一个元素中一种类型元素的css样式的background-img:url(/...)
然后在其他子元素中进行修改偏移量 background-position:100px,0;margin-right:0px

3:使用内嵌图片,在img标签的src:"data:url.jpg" 这样页面生成的时候就会自动嵌入图片,不过缺点也是IE不支持,使用
这种的情况下,也建议放在css文件中

合并脚本和样式表(后面也会涉及到脚本和样式表的精简)

二 使用内容发布网络(CDN)

就是通过专门的服务提供商,在不同的区域方式放置保存静态文件的服务器,便于加快局部地区的加载速度

三 在Http Header中添加Expires

Web服务器通过Expires头来告诉Web客户端它可以使用一个组件的当前副本,直到指定的日期为止(比如10年)
会在Http的响应中看到
Expires: Sat, 30 Mar 2019 10:52:16 GMT //表示过期的时间

在Http1.1中又提出了另外一种选择,因为Expires会要求和服务器时间严格同步
Cache-Control:max-age=315360000
这里使用max-age 标签表示被缓存多久

PS: 有少量浏览器不支持http1.1,且上面两种同时出现,则会优先使用max-age

这种头部的配置,可以通过Apache模块进行配置

对于可缓存的文件,应该包括图片,脚本,样式表,flash组件

对于缓存文件的情况,为了便于更新,可以使用统一的改名规则,比如将版本嵌在文件名中

四 压缩组件

主要使用Gzip

客户端请求的 Accept-Encoding:gzip,deflate
服务端通过判断返回 Content-Encoding:gzip

主要也是通过Apache来进行模块化配置,需要注意图片和PDF不需要进行压缩

五 将样式表放在顶部

将样式表放在顶部的Head标签中 (css at the Top),防止白屏的出现,会逐步的呈现
将样式表文件包含到页面的两种方法
<link rel="stylesheet" href="stx.css"> //注意这里标签不需要进行/闭合
<style>
@import url("stx.css");
</style>
两种的区别在于后者会导致下载的无序,所以建议还是使用Link标签,并且放在Head中

六 将脚本放在底部

在浏览器中,一般都会从同一个主机发起两个请求,实现并行的下载,不过用户可以通过设置进行修改.
而对于脚本进行下载的时候,会阻塞其他的并行下载,知道其完成下载,因为浏览器设置需要等待,为了
避免Js对页面的修改,以及保证JavaScript执行顺序的正确.

七 避免CSS表达式

只能在IE中使用
width:expression(document.body.clientWidth < 600 ? "600px" : "auto")
min-width:600px
由于IE忽视min-width,所以需要expression进行表示

问题在于,表达式有可能在很多时候被触发,比如鼠标移动,从而导致性能问题

有两种解决的方法

1:使用一次性表达式,就是将A属性中使用expression(function(this))调用一个JavaScript的Function
然后在Function中修改掉通过传入的参数.style.A属性进行修改原数据,这样表达式只会执行一次

2:使用事件处理器,就是在指定的事件中进行修改样式,比如onrisize中修改大小

八 使用外部的JavaScript和CSS

小规模的情况下,内部Js和CSS速度会更快一些,如果大规模,则外部文件会更有效的提高重复利用率和缓存
可以同时使用两种情况,比如在首页中使用内嵌,同时在首页的onload事件中设置setTimeOut延迟1秒去加载
当前以及后面所需要的js和css

//加载JavaScript
function downloadJs(url){
var elem = document.createElement("script");
elem.src = url; //发起请求
document.body.appednChild(elem);
}

//加载CSS
function downloadCss(url){
var elem = document.createElement("link");
elem.rel = "stylesheet";
elem.type = "text/css";
elem.href = url; //发起请求
document.body.appednChild(elem);
}

九 减少DNS查找

唯一能做的还是增加缓存的对象,其他一般是服务器硬件进行的部署

十 精简JavaScript

精简 是从代码中移除不必要的字符以减少其大小,进而改善加载时间(包括空格,换行,制表符)
混淆 会修改函数和变量的名字(类似J2Me的混淆),不过会变的更难阅读

精简的工具有JSMin,ShrikSafe
混淆能够带来更多的节省,不过经过GZip压缩后,差距会减小
可以使用JSMin对内嵌的脚本进行精简(可以关注下)

对于CSS,精简的意义不大,更多的去利用继承关系,也就是层叠

十一 避免重定向

30x的http状态码用于表示重定向,其中301和302使用的最多
需要对组件中的减少重定向的次数,否则会引起延迟

可以用于改善的技巧
1:注意在必要的URL结尾加上/,漏掉就会发生301响应,这是由于服务器的设置照常,比如Apache
2:减少后端的重定向请求使用次数

信标的概念
一个HTTP请求,其URL中包含了跟踪信息,然后从Web服务器的日志中提取出来,通常是响应一个1px * 1px的透明图片
因为,更小,不会被缓存,也不会改变浏览器的状态,可以保证页面被卸载前,能够请求传输完毕.

十二 移除重复的脚本

这个是有可能避免的,主要因素是团队的大小和脚本数量

十三 配置ETag

配置或者移除ETag,并不方便使用

十四 使Ajax可缓存

操作比较复杂.需要从实际情况触发进行处理.