转眼又两个礼拜过去了,每天的“三见”一见太阳、二见星星、三见月亮。让自己的生活紧张而充实,不过总是想着每周一定要抽出时间与那些一样奋斗在一线的你们分享些什么,那么今天就分享一些做为PM的我们必知的一些基本加速的技巧吧,拿走不谢。
需要指出的是在我们提供的无论是应用还是WEB上,用户的耐心是绝对有限的,甚至于“上帝”的耐心只有那么300ms,所以你的产品一些要快,唯“快”不破,绝对也一定可以用在这里。望你,绝对速度一定要及时,在及格的基础上越快越好.
1、减少http请求数:
用户在打开一个网页的时候,后台程序响应用户需求所有的时间并不多,用户等待的时间主要都浪费在下载网页元素上了,即HTML、CSS、Javascript、Flash、图片等等。据统计,第增加一个元素,网页载入的平均时间就增加40毫秒(宽带)或250毫秒。为了证明减少HTTP请求数可以让世界变得更美好一点。
(1)减少不必要的http请求、例如用CSS圆角代替圆角图片,减少图片的使用。
(2)合并文件,对于文本,可以直接合并内容。例如将多个JS文件合并为一个,将多个CSS文件合并为一个:对于图片文件,可以采用样式表贴图定位(CSS sprites)的方式将多张图片拼成一线大图。在需要显示某个图片的时候通过CSS调用大图中的一部分显示。或者采用图像区块(IMAGE MAPS)的方式将网页中相邻的多个图片(例如导航条中的多个栏目图片)合并为一个,然后为它定义多个图像区块,在区块上建立链接。
(3)优化缓存,对于没有变化的en D网页元素,用户再次访问的时候没有必要重新下载。直接从浏览器缓存读取就可以有效减少HTTP请求数。技术层面,增加xpires Header可以告诉浏览器一个元素可以缓存的时间长度,设定Etags可以帮助浏览器确定缓存中元素是否与服务器端的元素相匹配。
2、使用内容分发网络(CDN,ContentDelivery, Network)
用户与你网站服务器的接近程度会影响响应时间长短,把网站内容分散到多个,处于不同地域位置的服务器上可以加快下载速度,内容分发网络是由一系列分散到各个不同地理位置上的Web服务器组成的,它根据和用户在网络上的靠近程度来指定某台服务器响应用户请求。例如,设定拥有最少网络跳数(network hogs)和响应速度最快的服务器会被选定。对于小公司而言,很难负担CDN的成本,大型公司可以租用第三方的CDN,甚至自建CDN。
3、压缩网页元素
每个元素越小,下载所需的时间就越少,通过Gzip,一般可以将文本内容减少70%。通过JSMin和YUI Compressor等工具,可以将JS文件进一步压缩,此外,YSlow还提供了一个工具Smush,it,它可以无损压缩网页中所有的图片元素。
4、把样式表放在网页的HEAD部分
把样式表(CSS)移到网页的HEAD部分可以让页面尽快开始渲染,用户所感觉到的载入速度将会更快。
5、把脚本文件放在网页底部
把脚本文件JS下载完毕之前,其后面元素的顺序显示将被阻塞,因此把脚本尽量放在底部意味着更多内容能被快速显示。脚本引起的第二个问题是它阻塞并行下载数量,HTTP/1.1规范建议浏览器在每个域名下的并行下载数不超过2个,因此当脚本文件下载时,只剩下一个下载配额可以下载其他网页元素。
6、把样式表和脚本放到外部文件中
将样式表和脚本直接写入到网页HTML中,可以减少文件数量,从而减少HTTP请求数。。但是,这样做也增加了网页的大小。综合来看,将样式表和脚本放到外部文件中,在首次浏览之后通过缓存来减少HTTP请求数,是更优的做法。
7、减少DNS查询次数
当我们在浏览器中输入一个域名的时候,浏览器首先要查询DNS(域名解析系统),根据DNS返回的域名与IP的对应关系来确定要向哪个IP发送http请求。一般一次域名解析需要20-120毫秒,减少域名的使用可以有效减少DNS解析所花费的时间,但是由于每个域名有并行下载数的限制,Hahool建议使用2-4个域名以获取DNS解析时间与下载数的平衡。
8、缓存Ajax
Ajax同样也是可以被缓存的,优化缓存,压缩网页元素,减少DNS查询次数等规则同样适用于Ajax
在提升速度时经常被忽视的一个问题是响应,对于用户的操作,不管返回结果的绝对速度是快还是慢,都要及时响应。而响应问题之所以普遍存在,是因为很多人都把响应问题归结为性能问题,一个按钮点击以后没有响应,测试团队、产品经理和研发团队首先想到的都是系统的执行速度太慢,认为性能问题解决了,响应问题也就不是问题了,当性能使之可以在0.1钞内响应用户需求的时候,的确可以解决响应问题,但很多时候性能提升是无法满足用户的需求的。所以我们在日常项目进展过程中,一定要把功能与响应分别来对待。
备注如有转载请注明:来自于PM产品之颠公众号