课程思维导图

页面性能.png

Q：提升页面性能的方法有哪些？

1. 资源压缩合并，减少HTTP请求
2. 非核心代码异步加载
3. 使用浏览器缓存
4. 使用CDN
5. 预解析DNS
6. HTML优化，如使用语义化标签，避免重定向等
7. CSS优化，如布局代码写前面，根据需求加载的网络字体，避免使用表达式

Q：异步加载的方式有哪些？

1. 动态脚本加载
2. defer
3. async

Q：defer、async的区别是什么？

1. defer是在HTML解析后才会执行的，如果有多个，按加载顺序依次执行
2. async是在加载完之后立即执行，如果是多个，执行顺序与加载顺序无关

Q：什么是浏览器缓存？

资源文件在电脑磁盘上的备份

Q：缓存的分类有哪些？（跟缓存相关的HTTP头部有哪些？）

1. 强缓存
   1. 特点：不请求，直接使用缓存
   2. 相关的HTTP头部字段：
      1. Expires：过期时间，是个绝对时间，下发的是服务器时间，比较用的是客户端的时间，所以会有偏差
      2. Cache-Control：过期时间，是个相对时间，优先级高，以客户端的相对时间为准，浏览器拿到资源之后的多少时间内都不会再去服务器请求
2. 协商缓存
   1. 特点：浏览器不确定备份是否过期，需与服务器请求确认
   2. 相关的HTTP头部字段：
      1. Last-Modified/If-Modified-Since：服务器下发时间，客户端请求时带上下发时间，服务器判断文件是否过期。<font style="color: red">存在的问题服务器下发的时间难以定义</font>
      2. Etag/If-None-Match：服务器下发hash值，客户端请求时带上hash值，服务器判断文件是否过期。优先级高

Q：什么是CND？

1. 特点：在不同的地点缓存内容，将用户的请求定向到最合适的缓存服务器上去获取内容。
2. 优点：解决Internet网络拥堵状况，提高用户访问网络的响应速度。

Q：预解析DNS

1. 背景：DNS预解析会消耗前端的性能，优化建议是：减少DNS的请求次数，进行DNS预解析
2. 方式：是让具有此属性的域名自动在后台解析，从而减少用户的等待时间，提升用户体验

Q：如何开启DNS预解析？

```html
<meta http-equiv = "x-dns-prefetch-control" content="on">
（强制打开a标签的DNS预解析，https下默认关闭）
<link rel="dns-prefetch" href="//host_name_to_prefetch.com"/>
```