前端面试7：页面性能

这里有一份简洁的前端知识体系等待你查收，看看吧，会有惊喜哦~若是以为不错，恳求star哈~

课程思惟导图

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：服务器下发时间，客户端请求时带上下发时间，服务器判断文件是否过时。存在的问题服务器下发的时间难以定义
      2. Etag/If-None-Match：服务器下发hash值，客户端请求时带上hash值，服务器判断文件是否过时。优先级高

Q：什么是CND？

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

Q：预解析DNS

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

Q：如何开启DNS预解析？

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