2018-03-10 23:14:00 +08:00
2019-04-13 17:28:47 +08:00
> 本文最初发表于[博客园](https://www.cnblogs.com/smyhvae/p/8550195.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，
2018-03-12 21:01:35 +08:00
> 以下是正文。
2018-03-10 23:14:00 +08:00
## 前言
提升页面性能优化的方法有哪些：
- 1、资源压缩合并，
- 2、**非核心代码异步加载** --> 异步加载的方式 --> 异步加载的区别
如果回答出`非核心代码异步加载`，就会层层深入。
- 3、利用浏览器缓存 --> 缓存的分类 --> 缓存的原理
**缓存**是所有性能优化的方式中最重要的一步，这个一定要答好。【重要】
有的人可能会回答local storage 和session storage，
- 4、使用CDN
浏览器第一次打开页面时， ，
- 5、DNS预解析
## 一、资源压缩合并，
- 合并图片（ ）
- 图片较多的页面也可以使用 lazyLoad 等技术进行优化。
- 精灵图等
## 二、非核心代码异步加载
异步加载的方式：（这里不说框架，只说原理）
- 动态脚本加载
- defer
- async
### 动态脚本加载
使用document.createElement创建一个script标签， ，
参考链接：
- [javascript 异步加载 ](https://www.jianshu.com/p/13cf23a90328 ) 动态脚本加载的那部分代码，看不太懂。
### defer
通过异步的方式加载defer1.js文件：
```html
< script src = "./defer1.js" defer > < / script >
```
### async
> HTmL5新增特性。
通过异步的方式加载async1.js文件：
```html
< script src = "./async1.js" async > < / script >
```
### defer和async的区别
- defer： ，
- async： ，
代码举例：
```html
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
< title > Document< / title >
<!-- 通过异步的方式引入两个外部的js文件 -->
< script src = "./defer1.js" defer > < / script >
< script src = "./defer2.js" defer > < / script >
< / head >
< body >
< script >
console.log('同步任务');
< / script >
< / body >
< / html >
```
上方打印的结果是：
```
同步任务
defer1
defer2
```
因为defer的加载是有顺序的， ， ：
```
同步任务
async2
async1
```
参考链接：
- [浅谈script标签的defer和async ](https://segmentfault.com/a/1190000006778717 )
## 三、利用浏览器缓存
2018-03-12 21:01:35 +08:00
**缓存**：资源文件（比如图片）在**本地的硬盘**里存有副本， ， ，
2018-03-10 23:14:00 +08:00
缓存分为：
- 强缓存
- 协商缓存
### 强缓存
**强缓存**：不用请求服务器，直接使用本地的缓存。
2018-03-11 17:49:50 +08:00
强缓存是利用 http 响应头中的**`Expires`**或**`Cache-Control`**实现的。【重要】
2018-03-10 23:14:00 +08:00
浏览器第一次请求一个资源时， ， ：
2018-03-11 17:49:50 +08:00
2018-03-10 23:14:00 +08:00
2018-03-11 17:49:50 +08:00
**注意**： ， ， ，
2018-03-10 23:14:00 +08:00
下面讲一下二者的区别。
2018-03-11 17:49:50 +08:00
**1、`Expires`**：服务器返回的**绝对时间**。
2018-03-10 23:14:00 +08:00
2018-03-11 17:49:50 +08:00
是较老的强缓存管理 response header。浏览器再次请求这个资源时， ， ， ， ， ，
2018-03-10 23:14:00 +08:00
2018-03-11 17:49:50 +08:00
如果缓存没有命中， ，
2018-03-10 23:14:00 +08:00
2018-03-11 17:49:50 +08:00
**缺点：**
2018-03-10 23:14:00 +08:00
2018-03-11 17:49:50 +08:00
由于`Expires`是服务器返回的一个绝对时间， ： ， ， ， ， ， ，
2018-03-10 23:14:00 +08:00
2018-03-11 17:49:50 +08:00
**2、`Cache-Control`**：服务器返回的**相对时间**。
2018-03-10 23:14:00 +08:00
2018-03-11 17:49:50 +08:00
http1.1中新增的 response header。浏览器第一次请求资源之后， ， ， ，
2018-03-10 23:14:00 +08:00
### 协商缓存
**协商缓存**：浏览器发现本地有资源的副本，但是不太确定要不要使用，于是去问问服务器。
2018-03-11 17:49:50 +08:00
当浏览器对某个资源的请求没有命中强缓存（也就是说超出时间了），就会发一个请求到服务器，验证协商缓存是否命中。
2018-03-10 23:14:00 +08:00
2018-03-11 17:49:50 +08:00
协商缓存是利用的是两对Header：
2018-03-10 23:14:00 +08:00
2018-03-11 17:49:50 +08:00
- 第一对：`Last-Modified`、`If-Modified-Since`
2018-03-10 23:14:00 +08:00
2018-03-11 17:49:50 +08:00
- 第二对：`ETag`、`If-None-Match`
2018-03-12 21:01:35 +08:00
ETag（ ） ：
2018-03-11 17:49:50 +08:00
**1、`Last-Modified`、`If-Modified-Since`**。过程如下：
（ ） ， ， ， ：
（ ） ， ，
（ ） ， ， ， （ ， ） ； ， （ ） ：
2018-03-10 23:14:00 +08:00
2018-03-11 17:49:50 +08:00
2018-03-10 23:14:00 +08:00
2018-03-11 17:49:50 +08:00
（ ） ，
2018-03-10 23:14:00 +08:00
2018-03-11 17:49:50 +08:00
**缺点：**
2018-03-12 21:01:35 +08:00
`Last-Modified` 、`If-Modified-Since`一般来说都是非常可靠的，但面临的问题是：
- **服务器上的资源变化了，但是最后的修改时间却没有变化**。
- 如果服务器端在一秒内修改文件两次，但产生的`Last-Modified`却只有一个值。
这一对header就无法解决这种情况。于是，
2018-03-11 17:49:50 +08:00
**2、`ETag`、`If-None-Match`**。过程如下：
（ ） ， ， ，
（ ） ， ，
3） ， ， ， （ ， ， ， ） ， （ ） ：
（ ） ，
提示： ： ？ ？
参考链接：
- [浏览器缓存知识小结及应用 ](https://www.cnblogs.com/lyzg/p/5125934.html )[荐]
2018-03-10 23:14:00 +08:00
## 四、使用CDN
怎么最快地让用户请求资源。一方面是让资源在传输的过程中变小，
要注意， ， ， ，
## 五、DNS预解析（ ）
通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源，当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。
2018-03-12 21:01:35 +08:00
**第一步**：
2018-03-10 23:14:00 +08:00
你可以通过在服务器端发送 X-DNS-Prefetch-Control 报头。或是在文档中使用值为 http-equiv 的meta标签：
```html
< meta http-equiv = "x-dns-prefetch-control" content = "on" >
```
需要说明的是，在一些高级浏览器中，页面中所有的超链接（`< a > `标签） ， ， ， ， （ ， ）
2018-03-12 21:01:35 +08:00
**第二步**：
2018-03-10 23:14:00 +08:00
如果我们将来可能从 smyhvae.com 获取图片或音频资源，那么可以在文档顶部的 < head > 标签中加入以下内容：
```html
< link rel = "dns-prefetch" href = "http://www.smyhvae.com/" >
```
当我们从该 URL 请求一个资源时，就不再需要等待 DNS 解析的过程。该技术对使用第三方资源特别有用。
参考链接：
- [前端性能优化 - 资源预加载 ](http://bubkoo.com/2015/11/19/prefetching-preloading-prebrowsing/ )[荐]
- [DNS预解析详解 ](https://www.xuanfengge.com/dns-prefetching-analysis.html )
2018-03-12 21:01:35 +08:00
## 我的公众号
2019-02-03 14:06:03 +08:00
想学习< font color = #0000ff > **代码之外的技能**< / font > ？不妨关注我的微信公众号：**千古壹号**（ ：
2018-03-12 21:01:35 +08:00
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
