简要总结:
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
方面- 减少
HTTP
请求:合并文件、CSS
精灵、inline Image
- 减少
DNS
查询:DNS
缓存、将资源分布到恰当数量的主机名 - 减少
DOM
元素数量
- 减少
-
Server
方面- 使用
CDN
- 配置
ETag
- 对组件使用
Gzip
压缩
- 使用
-
Cookie
方面- 减小
cookie
大小
- 减小
-
css
方面- 将样式表放到页面顶部
- 不使用
CSS
表达式 - 使用
<link>
不使用@import
-
Javascript
方面- 将脚本放到页面底部
- 将
javascript
和css
从外部引入 - 压缩
javascript
和css
- 删除不需要的脚本
- 减少
DOM
访问
-
图片方面
- 优化图片:根据实际颜色需要选择色深、压缩
- 优化
css
精灵 - 不要在
HTML
中拉伸图片