网站性能优化

简要总结：

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协议下会默认开启)

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

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中拉伸图片

网站性能优化

相关推荐