网站性能优化

简要总结：

1.资源压缩合并，减少http请求

2.非核心代码异步加载（异步加载方式，异步加载区别）

异步加载到方式

• • 动态脚本加载
  • defer
  • async

异步加载的区别

• • defer是在HTML解析完之后执行，如果有多个，按照加载的顺序依次执行
  • async是在加载完立即执行，如果有多个，执行顺序和加载顺序无关

3.利用浏览器缓存（缓存的分类，缓存的原理）

响应头
1.强缓存
　　Expires: Thu,21 Jan 2017 23:39:02 GMT
　　Cache-Control: max-age=3600. (秒)
2.协商缓存
　　Last-Modified If-Modified-Since（Last-Modified Wed,26 Jan 2017 00:35:11 GMT）
　　Etag If-None-Match （内容hash）
跟缓存相关的http头

4.使用CDN

5.与解析DNS

　　<mata http-equiv="x-dns-prefetch-control" content="on">   // https 协议下开启a链接的prefetch(http协议下会默认开启)

　　<link rel="dns-prefetch" href="//host_name_to_prefetch.com">

 

//=========================================================================

 

• content方面

  1. 减少HTTP请求：合并文件、CSS精灵、inline Image
  2. 减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
  3. 减少DOM元素数量

• Server方面

  1. 使用CDN
  2. 配置ETag
  3. 对组件使用Gzip压缩

• Cookie方面

  1. 减小cookie大小

• css方面

  1. 将样式表放到页面顶部
  2. 不使用CSS表达式
  3. 使用<link>不使用@import

• Javascript方面

  1. 将脚本放到页面底部
  2. 将javascript和css从外部引入
  3. 压缩javascript和css
  4. 删除不需要的脚本
  5. 减少DOM访问

• 图片方面

  1. 优化图片：根据实际颜色需要选择色深、压缩
  2. 优化css精灵
  3. 不要在HTML中拉伸图片