二三面_页面性能

Posted 2021-07-24 煜成'Studio

二三面_页面性能

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

（不止下面这五个，还有其他的基础的自己加上就行）

1.资源压缩合并，减少HTTP请求

（还有开启Gzip压缩，它们其实都是一类内容，就是压缩资源合并，相当于把资源文件变小，这是一类）

2.非核心代码异步加载==》异步加载的方式有哪些==》这些异步加载的区别是什么

3.利用浏览器缓存*》缓存的分类有哪些》缓存的原理是什么

（利用浏览器缓存是提升页面性能非常直接的方法，如果这个你不用，那你资源压缩等方法都没起到关键作用，浏览器缓存才是你提升性能最重要的一步）

4.使用CDN*

（CDN加速资源是非常快的，这属于网络优化这块的，比如说我们网站页面中使用了n个js使用了n个图片使用了n个CSS，怎么让客户用最快的时间把这个资源请求过来，除了我们第一步说的资源文件变小，传输的过程中变小，那重要的一个使用CDN也是，让网络快速到达服务端把文件下载下来，尤其是当页面第一次打开的时候，浏览器缓存是起不了什么作用的，这个时候使用CDN效果是非常明显的，这条一定要说出来）

5.预解析DNS

<meta http-equiv=“x-dns-prefetch-control” content=“on”>

<link rel=“dns-prefetch” href="//host_name_to_prefetch.com">

（下面这条dns-prefetch是DNS预解析，从浏览器输入url到浏览器真正渲染完中间发生了哪些环节，其中第一步做的就是DNS预解析，当你的页面中涉及到多个域名的时候，DNS预解析效果是非常明显的，这里优化的点就是要预解析DNS，怎么预解析DNS那，就是使用这个link语句。页面中所有的a标签，在一些高级浏览器里面是默认打开了DNS预解析，就是说不用加link这句话，a标签也是能做到DNS预解析的，这是浏览器的一个功能，但是如果你的页面是HTTPS协议开头的，很多浏览器是默认关闭DNS预解析的，第一条语句就是强制打开DNS预解析，这句话在面试的时候说出来一定是你面试过程中出彩的地方，面试官会对你刮目相看，能答出link语句来，一点都不惊艳，能答出meta语句来，绝对给面试官耳目一新的感觉）

下面详解地二三条：

异步加载：

1.异步加载的方式

1.动态脚本加载

用document.createElement创建一个标签，最后把标签加载到body上去或者加载到head上去都行，总之，就是动态地加载在文档当中实现加载

2.defer

在加载js的时候，在script上加上这个属性就能完成这个异步加载，下面的async也一样。

例如<script src="./a.js" charset=“utf-8” defer></script>

3.async

2.异步加载的区别

1.defer是在html解析完之后才会执行，如果是多个，按照加载的顺序依次执行

（defer可能是先加载的，但是在HTML解析完之前是不会执行的，这是实现异步加载的原因，非常重要；如果你有两个js都是defer的，那么会按照你加载的顺序依次执行的，任何时刻都只能做一件事。）

2.async是在加载完之后立即执行，如果是多个，执行顺序和加载顺序无关

（特别注意，当有多个脚本的时候，async的执行顺序和加载顺序无关）

浏览器缓存：（一般情况下在面试中会问）

1.缓存的分类

(缓存是你的资源文件在浏览器中存在的备份/副本，说白了就是把网上的东西例如一张图片请求回来缓存在我的本地了，放在电脑磁盘上的，浏览器下一次请求的时候相当于从磁盘上直接读了，而不会再去请求这个图片的地址，这就是缓存的意思)

1.强缓存

（在绝对时间或者相对时间之前，浏览器不会和服务器通信了，浏览器问都不问服务器，直接从浏览器副本拿出来给页面用）

我们在请求文件的时候，HTTP的响应头上会携带一个或两个东西（个数看服务器的配置），一个是Expires，叫过期时间，是一个key-value值，key是Expires，value是Thu,21 Jan 2017 23:39:02 GMT，value值表示的是绝对时间，这个时间一般是服务器下发的服务器的绝对时间，客户端的时间有可能和服务器的时间不一致，下发的时候是下发的服务器的时间，比较的时候是以浏览器的本地的时间做比较，所以这个地方会有偏差，所以这就是为什么后来又增加了一个Cache-Control，也是一个key-value值，key是Cache-Control，value是max-age=3600，value值是相对时间，不管你客户端和服务器的时间是否一致，它最终以客户端的相对时间为止，这个3600的单位时秒（s），也就是说我拿到这个资源之后，在3600秒之内我不会再去请求服务器了，在这个时间之内我都会直接从浏览器拿缓存。

如果服务器中这两个时间都下发了，以哪个为准那？记住以后者为准（这是规定）

Expires

Expires:Thu,21 Jan 2017 23:39:02 GMT

Cache-Control

Cache-Control:max-age=3600

2.协商缓存

（浏览器发现本地有这个副本，但是又不确定用不用它，向服务器问一下这个文件可不可以用，是不是过期了）

协商缓存有四个情况

Last-Modified If-Modified-Since

Last-Modified是上次修改的时间，我在拿到这个文件的时候，浏览器会给这个文件的HTTP响应头中加一个Last-Modified，这个Last-Modified后面就是这个value值Wed,26 Jan 2017 00:35:11 GMT，当强缓存失效了，在强缓存的时间之外了，浏览器不确定这个文件有没有变化，它要携带你上次给我的时间是哪一个，就是携带这个key值If-Modified-Since，它的value值也是Wed,26 Jan 2017 00:35:11 GMT（和Last-Modified值一样），Last-Modified这个是服务器下发的，If-Modified-Since是我请求的时候给服务器带的（因为服务器它要对比），所以一来一回。

有个缺点：就是我的修改时间变了，但是我的内容没有变化，这样用这种也算变了，因为内容没有变化完全可以从副本拿。下面的Etag就是解决这个问题的

Last-Modified:Wed,26 Jan 2017 00:35:11 GMT

Etag If-None-Match

这个Etag可以理解为hash值。服务器给你资源的时候会给你一个Etag值，当过了这个强缓存的时间，浏览器再向服务器请求问它这个资源我可不可以再用的时候，它会通过HTTP中加个If-None-Match值然后加个value值（这个value和最开始服务器发给客户端时的Etag时的value值一样）。Etag优点是当你的修改时间变了，但是内容没变的情况下也是可以直接从浏览器缓存中拿出来东西直接用的。

---

当面试官问你跟浏览器缓存相关的HTTP头有哪些？（腾讯问过）

Expires、Cache-Control、Last-Modified、If-Modified-Since、Etag、If-None-Match

---

为什么在这个将缓存不在HTTP协议中讲，因为缓存是为了提升页面性能的

---

面试就一个小时到一个半小时，面试官问你完全是根据你的简历和项目上的介绍和经历体现的，如果你体现了，面试官大概率会问到你体现的部分