说明:本文主要介绍前端性能优化点
尽早的使用flush buffer可以让一部分内容先加载出来,提高用户体验。
指定content-type和正确的character编码
对于动态资源:用一个适当的 Cache-Control 头来帮助浏览器控制请求
浏览器利用缓存来减少http请求的数目和大小,让页面加载的更快。web服务器利用http响应中的Expires头来告诉客户端一个资源能够被缓存多久。
需要注意的是,如果你利用了一个“不过期”的Expires头,你必须在资源改变的同时改变资源的名字。这一技术提高页面性能是基于用户已经访问过你的网站的基础之上的。
设置Last-Modified日期为最近资源需要改变的时间。
通过链接到资源的唯一url(每次改变资源时同时改变其文件名)来改变缓存
firefox通过hash表存储url的缓存,但hash值仅仅有8个字符,可能会造成hash冲突,所以你需要确保你的资源urldiff多于8字符边界。
利用Cache-control:public的头可以让资源缓存在一个web代理服务器上面来让其他用户使用。
不要在静态资源的url上面添加查询字符串
不用在代理服务器上缓存设置了cookie的资源
要有使用代理缓存js和css文件的意识
1.固定URL提供资源 2.尽可能的使用URL路径来代替主机域名,例如developer.example.com可以被www.example.com/developer代替。除非有技术上的原因需要不同的主机域名。 3.将从同一主机域名下的需要先加载的js文件作为主要文件送达 4.考虑使用DNS预解析
实现多个资源的并行下载
CDN可以帮助用户更快的获取到所需要的资源。
1.使用服务器端的存储为大多数的cookie来做有效载荷:在cookie里存key,在服务器端存value。 2.移除没有用的或者重复的cookie 3.静态资源请求中不要带上cookie 4.不要将需要提前加载的js放到没有cookie的域中加载
Gzip是当前最流行,最有效的压缩方式。
1.在http/1.1中,web客户端明确支持在http请求中 Accept-Encoding 头 的 Accept-Encoding: gzip, deflate 压缩方式 2.Gzip一般能减少服务器响应文件70%的大小,90%的浏览器都支持gzip 3.服务器基于文件类型来选择gzip压缩,很多网站gzip他们的html文件,同样也可以gzip脚本和样式表 4.事实上,任何的响应文本,包括xml和json都有压缩的价值,图片和pdf文件不应该被gizp,因为他们已经被压缩过了
压缩包括:Javascript、CSS、HTML
让你写的页面能够更有效的压缩: 1.按照字母排序指定css键对值 2.按照字母排序指定html属性 3.对html属性使用一致的引号 4.使用一致的字母(小写字母) 5.移除没有用到的css
1.将样式表移到文件的Head可以让页面加载的更快,这是因为将样式表放在头部有利于页面渲染。 2.将样式表放在底部的问题是它阻止了许多浏览器的渲染进度。这些浏览器会锁定渲染进程来保证页面上的元素在他们的样式改变时重绘。
具体参看性能相关编码规范中的css编码规范
1.将图片水平放置在sprite中可以让文件大小更小。 2.对一起加载的图片使用sprite 3.GIF和PNG图片优先使用sprite 4.小图片优先sprite 5.可缓存的图片使用sprite 6.使用sprite工具 7.尽量减少sprite图片中的空白空间 8.将色彩范围相近的图片进行sprite
利用浏览器缓存,将一些公共的css进行外链,使用缓存,加快用户第一次以后访问页面的速度
这一问题的原因是脚本是并行阻塞下载的。HTTP/1.1协议中建议浏览器不在同一域名下并行下载多于两个的资源。假如你的图片是在多个域名下的,你可以并行下载超过两张的图片。可是一个脚本在下载的时候,浏览器不能再开始其他的下载,即使在不同的域名下。
一个可供采纳的建议是利用延迟加载脚本技术(defer)。这是一种可以让浏览器继续渲染的方案。不幸的是,fireforx不支持defer属性。
1.将重复的js代码去掉 2.将没有使用过的变量去掉 3.将没有调用到的函数去掉
几种下载外部脚本且不被阻塞的技术
1.将外联脚本放在外联样式表之后 2.将行内脚本放在其他资源之后
详细请参看前端性能优化相关编码规范:js编码规范