前端网站性能优化

此情无计可消除，才下眉头，又上心头。

我的github: 李大玄
我的私人博客: 李大玄
我的npm开源库: 李大玄
我的: 李大玄
我的CSDN: 李大玄
我的掘金: 李大玄
哔哩哔哩: 李大玄

1. 首先减少http请求, 首先是图片请求
  1-1.将项目中的图片尽量使用为icon 
  1-2.图片地图 
  1-3.还有精灵图(css-sprites)  
  1-4.图片压缩 压缩后的图片大小会减少
  1-5.小于300k的图片进行压缩 减少http请求 在webpack中可以配置
  1-6.合并脚本和样式表 因为都是外联进来的 每一个文件都需要加载 合并之后减少请求量

2. 使用内容发布网络
  2-1.使用CDN, 将一些资源放在cdn进行引入,发布静态内容
  2-2.节省,将资源放在单独的服务器上

3.添加 Expires Header
  3-1.浏览器使用缓存来减少http请求的数量,减少http的响应大小
      如果为页面中的一个图片返回了这个头,浏览器在后续的页面浏览中会使用缓存的图片
  3-2.max-age  mod_expires 
    浏览器再次请求服务器时，浏览器会先判断max-age，如果到期则直接请求服务器，否则直接从缓存中取，
    mod_expires Apache模块,在使用ExpiresHeader 时能够像max_age那样设置日期,通过 Expires Default 指令来完成
    (如果在规定的时间内,需要发版,但是有缓存任务的时候,可以使用生成新连接的方法进行资源重新请求)
4.压缩组件
  4-1. Accept-Encoding: gzip, deflate (客户端列出来的方法中的一种进行压缩响应)
    很多浏览器不支持deflate,但是支持 gzip
    很多网站会压缩HTML文档,但是像脚本和样式表,XML和JSON 都值得压缩
    图片和PDF不应该压缩,因为都是压缩过的 压缩只会浪费CPU资源,还可能会增加文件大小
    gzip能将响应整体减少66%, deflate能减少60%
  4-2. 配置
    配置gzip时使用的模块取决于Apache的版本 
      Accept1.3使用mod_gzip
      Accept2.x使用mod_deflate 
  4-3.代理缓存
    Vary: Accept-Encoding
  4-4.边缘情形
    服务器和客户端的压缩对等性看似简单,但必须正确才行。无论是客户端还是服务器发生错误，页面都会被破坏，
    错误不会经常发生，但是需要考虑。

5.将样式表放在顶部
  5-1.将DHTML 特征的样式表放在文档顶部,加载更快, 反之放在后面加载更慢
  5-2.逐步呈现
    将样式表放在文档底部会导致浏览器中阻止内容逐步呈现,为避免当样式变化时重绘页面中的元素,
    浏览器会阻塞内容逐步呈现.
  5-3.sleep.cgi
  5-4.将css放在顶部
    为了避免页面白屏,将样式表放在顶部,这样叫做(css at the top),不管页面是如何加载的,窗口新开,重新加载,页面都会逐步呈现
    一个style模块可以包含多个@import 但是@import必须放在所有其他规则之前
    @import有可能导致白屏,即便把@import放在文档的head标签中也是如此
  5-5.无样式内容的闪烁
    样式表在页面中的位置并不影响下载时间,但是会影响页面的呈现

6.将脚本放在底部 可以提高下载的并行度
  6-1.脚本带来的问题
  6-2.并行下载
  6-3.脚本阻塞下载
  6-4.最差情况: 将脚本放在顶部
  6-5.最佳情况: 将脚本放在底部

7.避免css 表达式  CSS表达式是动态设置css属性的一种强大 并且危险的方式.
  7-1.一次性表达式 防抖节流
  7-2.事件处理
  7-3.没有深入了解底层影响的情况下使用css表达式是很危险的

8.使用外部JavaScript 和 css
  8-1.纯粹而言,在HTML文档中写js与css 加载更快,因为减少了http请求 30% ~ 50%
  8-2.组件重用
    如过网站每个页面使用了想通的js和css,那么使用外部文件可以提高这些组件重用率.Expires
    如果重用性底,还是内联更有意义
  8-3.典型的对比结果
    
9.减少DNS查找
  Internet是通过IP地址来查找服务器的,犹豫IP地址很难记,太长使用包含主机名的URL来取代她
  dns也是开销,通常浏览器查找一个给定的主机名的IP地址要花费20~120毫秒
  9-1.DNS缓存和TTL
    DNS查找可以被缓存起来以提高性能

10. 精简JavaScript
  10-1.混淆是可以应用在源代码上的另一种优化方式.和精简一样,他会移除注释和空白,同事他还会改写代码.
  也就是压缩js
  10-2.精简css #000000 => #000  0代替0px

11. 避免重定向
  每一个请求都是要消费时间的

12. 避免重复脚本
  12-1.在页面冲多次包含相同的脚本回事页面变慢
  12-2.在Internet Explorer中,如果脚本没有被缓存,或在重新加载页面时,会产生额外的HTTP请求
  12-3.在Firefox 和 Internet Explorer中,脚本会被多次请求

13. 使用ETag 没看

14. 使ajax 可缓存