网站首屏优化总结

一般来说页面访问的时间有一条著名的“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属性定位来显示其中的一小部分。

• 压缩图片
  图片是最占流量的资源，因此尽量避免使用他，使用时选择最合适的格式（实现需求的前提下，以大小判断），合适的大小，然后使用智图压缩，同时在代码中用Srcset来按需显示。
  PS：过度压缩图片大小影响图片显示效果
  a） 使用智图（ http://zhitu.tencent.com/ ）
  b） 使用其它方式代替图片(1. 使用CSS3 2. 使用SVG 3. 使用IconFont）
  c） 使用Srcset
  d） 选择合适的图片(1. webP优于JPG 2. PNG8优于GIF）
  e） 选择合适的大小（1. 首次加载不大于1014KB 2. 不宽于640（基于手机屏幕一般宽度））

• 少用location.reload()
  使用location.reload() 会刷新页面，刷新页面时页面所有资源（css，js，img等）会重新请求服务器；建议使用location.href=“当前页url” 代替location.reload() ，使用location.href 浏览器会读取本地缓存资源。

• 图片懒加载
  在图片没有进入可视区域时先不给img的src赋值，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能

• 正确使用Display的属性
  Display属性会影响页面的渲染，需要合理使用。
  a） display:inline后不应该再使用width、height、margin、padding以及float
  b） display:inline-block后不应该再使用float
  c） display:block后不应该再使用vertical-align
  d） display:table-*后不应该再使用margin或者float

• 按需加载
  将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载，可以大大提升重要资源的显示速度和降低总体流量。
  PS：按需加载会导致大量重绘，影响渲染性能
  a） LazyLoad
  b） 滚屏加载
  c） 通过Media Query加载

• 合理使用缓存
  使用缓存可以减少向服务器的请求数，节省加载时间，所以所有静态资源都要在服务器端设置缓存，并且尽量使用长Cache（长Cache资源的更新可使用时间戳

• 预加载
  以下是几个通过浏览器特性来很容易提高资源加载速度的方法：
  1：DNS prefetching
  DNS解析的速度可用通过下面的标签来进行预解析
  <link rel=”dns-prefetch” href=”//weibo.com”>
  2：Preconnect
  和DNS预解析差不多，Preconnect还会做TCP握手和TLS Negotiation：
  <link rel=”preconnect” href=”http://css-tricks.com”>。
  3：Prefetching
  如果我们猜测用户接下来将要访问哪个具体的资源，那就可以用prefetching来预加载确定的资源了
  <link rel=”prefetch” href=”image.png”>
  4：Prerendering pages
  预先渲染页面，这是更牛的预加载方式了，他的作用就类似打开一个隐藏的tab差不多
  <link rel=”prerender” href=”http://css-tricks.com”>
  5：新特性：Preloading
  和prefetching不同的是，preloading会让浏览器无论如何都下载指定的资源
  <link rel=”preload” href=”image.png”>
  6：H5音乐预加载
  <audio src=”music.mp3″ autoplay=”autoplay” loop preload=”auto” id=”sendid2″></audio>