减少http请求次数
减少DNS查询次数
避免页面跳转
缓存AJAX
延迟加载
提前加载
减少DOM元素数量, 减少dom操作
避免404
80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等);
减少请求次数,是缩短响应时间的关键;
将多个脚本文件捆绑成一个文件,将多个样式表文件捆绑成一个文件,以此来减少文件的下载次数;
将多张图片拼成一副图片,然后通过CSS来控制在什么地方具体显示这整张图片的什么位置;
DNS查询也消耗响应时间,如果我们的网页内容来自各个不同的domain,那么客户端首次解析这些domain也需要消耗一定的时间;
DNS查询结果缓存在本地系统和浏览器中一段时间,所以DNS查询,一般是对首次访问响应速度有所影响;
添加Expires 或Cache-Control报文头,使回复可以被客户端缓存;
延迟加载,需要我们知道我们的网页最初加载需要的最小内容集是什么,剩下的内容就可以推到延迟加载的集合中;
开发网页时,先确保网页在没有Javascript的时候也可以基本工作,然后通过延迟加载脚本,来完成一些高级的功能;
提前加载,是为了提前加载接下来网页中访问的资源;
网页中元素过多,对网页的加载和脚本的执行,都是沉重的负担;
使用CDN加速服务
添加Expires 或Cache-Control报文头
Gzip压缩传输文件
使用GET Ajax请求
第一条黄金定律:减少网页内容的下载时间;
提高下载速度,可以通过CDN(内容分发网络)来提升,CDN通过部署在不同地区的服务器,来提高客户的下载速度;
对于静态内容添加Expires,将静态内容设为永不过期;
对于动态内容应用合适的Cache-Control,让浏览器根据条件来发送请求;
Gzip通常可以减少70%网页内容的大小,包括脚本、样式表、图片等文件;
减少Cookie大小
.页面内容使用无cookie域名
- 设置合适的过期时间,比较长的过期时间可以提高响应速度
将样式表置顶
用<link>代替@import
经样式表(css)放在网页的HEAD中会让网页显得加载速度更快,因为这样做可以使浏览器逐步加载已将下载的网页内容;
@import,相当于将css放在网页内容底部;
将脚本置底
使用外部Javascirpt和CSS文件
减少DOM访问
使用事件代理机制来注册事件
- 把脚本置底,这样可以让网页渲染所需要的内容,尽快加载显示给用户;
- defer关键字,可以指定脚本在文档加载后执行;
- async关键字,可以让脚本异步执行;
使用外部Javascript和CSS文件可以使这些文件被浏览器缓存,从而在不同的请求内容之间重用;
尝试把GIF格式转换成PNG格式
不要通过图片缩放来适应页面,如果需要小图片,就直接使用小图片;
减少 HTTP 请求，适合小尺寸的图片。 若大尺寸的图片使用 base 64 的话，会导致数据太大，加载过慢。
这限制是因为iphone,他只能缓存小于25K,注意这是解压后的大小;
浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。 方案一: 禁止用户缩放 方案二: 使用fastclick.js库 方案三: 指针事件