网站首屏优化笔记

一般来说页面访问的时间有一条著名的“2-5-8原则”。当用户访问一个页面：
1、在2秒内得到响应时，会感觉系统响应很快；
2、在2-5秒之间得到响应时，会感觉系统的响应速度还可以；
3、在5-8秒以内得到响应时，会感觉系统的响应速度很慢，但可以接受；
而超过8秒后仍然无法得到响应时，用户会感觉系统糟透了，进而选择离开这个站点，或者发起第二次请求。对于一个网站如果希望抓住用户，网站的速度以及稳定性是非常重要的。

为什么要做性能优化？

从上面可以看出，网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体验。 不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。总结成三点就是：
1、加快页面展示和运行速度
2、节约服务器带宽流量
3、减少服务器压力

二、什么时候做性能优化最合适？

一般来说，遵循避免过早优化的原则，因为网站再发过程中的成本相对来说还是比较高的，web开发工程师、ui、产品、运维、后台服务等等，所以第一我们要保证基本功能完成，再考虑优化。第二在没有找到性能瓶颈之前，不要优化

三、哪方面需要做性能优化？

• 减少http请求
  网页中的的图片、form、flash等等元素都会发出HTTP请求，尽可能的减少页面中非必要的元素，可以减少HTTP请求的次数。
• CSS Sprites ——雪碧图
  图片是增加HTTP请求的最大可能者；把全站的图标都放在一个图像文件中，然后用CSS的background-image和background-position属性定位来显示其中的一小部分。
• 选择先进的图片格式
  使用 WebP 的图片格式来代替现有的jpeg和png，当页面图片较多时，这点作用非常明显。把部分大容量的图片从BaseLine JPEG切换成Progressive JPEG（理解这两者的差别）也能缩小体积。
• 少用location.reload()
  使用location.reload() 会刷新页面，刷新页面时页面所有资源（css，js，img等）会重新请求服务器；建议使用location.href=“当前页url” 代替location.reload() ，使用location.href 浏览器会读取本地缓存资源。
• 图片懒加载
  在图片没有进入可视区域时先不给img的src赋值，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能