webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add file:页面性能优化

Browse Source
This commit is contained in:
qianguyihao 2018-03-11 17:49:50 +08:00
parent 303a705ce9
commit ffb084fd9a
1 changed files with 58 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

90
06-前端基础/14-页面性能优化.md
View File

@ -22,7 +22,6 @@
- 5、DNS预解析 - 5、DNS预解析
## 一、资源压缩合并，减少http请求 ## 一、资源压缩合并，减少http请求
- 合并图片（css sprites）、CSS和JS文件合并、CSS和JS文件压缩 - 合并图片（css sprites）、CSS和JS文件合并、CSS和JS文件压缩
@ -41,7 +40,6 @@
- async - async
### 动态脚本加载 ### 动态脚本加载
使用document.createElement创建一个script标签，即`document.createElement('script')`，然后把这个标签加载到body上面去。 使用document.createElement创建一个script标签，即`document.createElement('script')`，然后把这个标签加载到body上面去。
@ -50,7 +48,6 @@
- [javascript 异步加载](https://www.jianshu.com/p/13cf23a90328) 动态脚本加载的那部分代码，看不太懂。 - [javascript 异步加载](https://www.jianshu.com/p/13cf23a90328) 动态脚本加载的那部分代码，看不太懂。
### defer ### defer
通过异步的方式加载defer1.js文件： 通过异步的方式加载defer1.js文件：
@ -59,15 +56,12 @@
<script src="./defer1.js" defer></script> <script src="./defer1.js" defer></script>
``` ```
### async ### async
> HTmL5新增特性。 > HTmL5新增特性。
通过异步的方式加载async1.js文件： 通过异步的方式加载async1.js文件：
```html ```html
<script src="./async1.js" async></script> <script src="./async1.js" async></script>
``` ```
@ -78,7 +72,6 @@
- async：在加载完之后立即执行。如果是多个，执行顺序和加载顺序无关。 - async：在加载完之后立即执行。如果是多个，执行顺序和加载顺序无关。
代码举例： 代码举例：
```html ```html
@ -121,66 +114,106 @@ async2
async1 async1
``` ```
参考链接： 参考链接：
- [浅谈script标签的defer和async](https://segmentfault.com/a/1190000006778717) - [浅谈script标签的defer和async](https://segmentfault.com/a/1190000006778717)
## 三、利用浏览器缓存 ## 三、利用浏览器缓存
**缓存**：资源文件（比如图片）在本地存有副本，浏览器下次请求的时候，可能直接从本地磁盘里读取，而不会重新请求图片的url。 **缓存**：资源文件（比如图片）在本地存有副本，浏览器下次请求的时候，可能直接从本地磁盘里读取，而不会重新请求图片的url。
缓存分为： 缓存分为：
- 强缓存 - 强缓存
- 协商缓存 - 协商缓存
### 强缓存 ### 强缓存
**强缓存**：不用请求服务器，直接使用本地的缓存。 **强缓存**：不用请求服务器，直接使用本地的缓存。
强缓存是利用 http 响应头中的`Expires`或`Cache-Control`实现的。 强缓存是利用 http 响应头中的**`Expires`**或**`Cache-Control`**实现的。【重要】
浏览器第一次请求一个资源时，服务器在返回该资源的同时，会把上面这两个属性放在response header中。比如： 浏览器第一次请求一个资源时，服务器在返回该资源的同时，会把上面这两个属性放在response header中。比如：
20180310_2310.png ![](http://img.smyhvae.com/20180310_2310.png)
**注意**：这两个response header属性可以只启用一个，也可以同时启用。当response header中，Expires和Cache-Control同时存在时，**Cache-Control的优先级高于Expires**。
**注意**：这两个response header属性可以只启用一个，也可以同时启用。当response header中，Expires和Cache-Control同时存在时，Cache-Control的优先级高于Expires。
下面讲一下二者的区别。 下面讲一下二者的区别。
**1、`Expires`**：服务器返回的**绝对时间**。
1、**`Expires`**：绝对时间。 是较老的强缓存管理 response header。浏览器再次请求这个资源时，先从缓存中寻找，找到这个资源后，拿出它的Expires跟当前的请求时间比较，如果请求时间在Expires的时间之前，就能命中缓存，否则就不行。
如果缓存没有命中，浏览器直接从服务器请求资源时，Expires Header在重新请求的时候会被更新。
**缺点：**
由于`Expires`是服务器返回的一个绝对时间，存在的问题是：服务器的事件和客户端的事件可能不一致。在服务器时间与客户端时间相差较大时，缓存管理容易出现问题，比如随意修改客户端时间，就能影响缓存命中的结果。所以，在http1.1中，提出了一个新的response header，就是Cache-Control。
**2、`Cache-Control`**：服务器返回的**相对时间**。
http1.1中新增的 response header。浏览器第一次请求资源之后，在接下来的相对时间之内，都可以利用本地缓存。超出这个时间之后，则不能命中缓存。重新请求时，`Cache-Control`会被更新。
### 协商缓存 ### 协商缓存
**协商缓存**：浏览器发现本地有资源的副本，但是不太确定要不要使用，于是去问问服务器。 **协商缓存**：浏览器发现本地有资源的副本，但是不太确定要不要使用，于是去问问服务器。
当浏览器对某个资源的请求没有命中强缓存（也就是说超出时间了），就会发一个请求到服务器，验证协商缓存是否命中。
协商缓存是利用的是两对Header：
- 第一对：`Last-Modified`、`If-Modified-Since`
- 第二对：`ETag`、`If-None-Match`
**1、`Last-Modified`、`If-Modified-Since`**。过程如下：
（1）浏览器第一次请求一个资源，服务器在返回这个资源的同时，会加上`Last-Modified`这个 response header，这个header表示这该资源在服务器上的最后修改时间：
![](http://img.smyhvae.com/20180311_1715.png)
（2）浏览器再次请求这个资源时，会加上`If-Modified-Since`这个 request header，这个header的值就是上一次返回的`Last-Modified`的值：
![](http://img.smyhvae.com/20180311_1716.png)
（3）服务器收到第二次请求时，会比对浏览器传过来的`If-Modified-Since`和资源在服务器上的最后修改时间`Last-Modified`，判断资源是否有变化。如果没有变化则返回304 Not Modified，但不返回资源内容（此时，服务器不会返回 Last-Modified 这个 response header）；如果有变化，就正常返回资源内容（继续重复整个流程）。这是服务器返回304时的response header：
![](http://img.smyhvae.com/20180311_1720.png)
（4）浏览器如果收到304的响应，就会从缓存中加载资源。
**缺点：**
`Last-Modified`、`If-Modified-Since`一般来说都是非常可靠的，但有可能出现的问题是：**服务器上的资源变化了，但是最后的修改时间却没有变化**。这一对header就无法解决这种情况。于是，下面这一对header出场了。
**2、`ETag`、`If-None-Match`**。过程如下：
（1）浏览器第一次请求一个资源，服务器在返回这个资源的同时，会加上`ETag`这个 response header，这个header是服务器根据当前请求的资源生成的**唯一标识**。这个唯一标识是一个字符串，只要资源有变化这个串就不同，跟最后修改时间无关，所以也就很好地补充了`Last-Modified`的不足。如下：
![](http://img.smyhvae.com/20180311_1735.png)
（2）浏览器再次请求这个资源时，会加上`If-None-Match`这个 request header，这个header的值就是上一次返回的`ETag`的值：
![](http://img.smyhvae.com/20180311_1737.png)
3）服务器第二次请求时，会对比浏览器传过来的`If-None-Match`和服务器重新生成的一个新的`ETag`，判断资源是否有变化。如果没有变化则返回304 Not Modified，但不返回资源内容（此时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag并无变化）。如果有变化，就正常返回资源内容（继续重复整个流程）。这是服务器返回304时的response header：
![](http://img.smyhvae.com/20180311_1740.png)
（4）浏览器如果收到304的响应，就会从缓存中加载资源。
提示：如果面试官问你：与浏览器缓存相关的http header有哪些？你能写出来吗？这是一个亮点。
参考链接： 参考链接：
- [浏览器缓存知识小结及应用](https://www.cnblogs.com/lyzg/p/5125934.html)[荐] - [浏览器缓存知识小结及应用](https://www.cnblogs.com/lyzg/p/5125934.html)[荐]
## 四、使用CDN ## 四、使用CDN
怎么最快地让用户请求资源。一方面是让资源在传输的过程中变小，另外就是CDN。 怎么最快地让用户请求资源。一方面是让资源在传输的过程中变小，另外就是CDN。
@ -203,7 +236,6 @@ async1
### 第二步：对指定的域名进行DNS预解析 ### 第二步：对指定的域名进行DNS预解析
如果我们将来可能从 smyhvae.com 获取图片或音频资源，那么可以在文档顶部的 <head> 标签中加入以下内容： 如果我们将来可能从 smyhvae.com 获取图片或音频资源，那么可以在文档顶部的 <head> 标签中加入以下内容：
```html ```html
@ -220,9 +252,3 @@ async1