面试--关于前端性能优化篇

性能优化

性能优化方法

1. 资源压缩合并,减少HTTP请求
2. 非核心代码异步加载
3. 利用浏览器缓存
4. 使用CDN
5. 预解析DNS

异步加载

异步加载方式？

• 动态脚本加载
• defer
• async

加载方式区别？

• defer是在html解析完毕才执行,如果有多个则按加载顺序执行
• async是加载完毕后立即执行,如果是多个,执行顺序与加载顺序无关

浏览器缓存

分类

1. 强缓存
   是指在时间之内不会询问服务器是否需要缓存。
   1. Expires(过期时间) Expries:Sun Jun 16 2019 23:55:21 GMT(服务器时间)
   2. Cache-Control(相对时间)
2. 协商缓存
   如果本地有缓存,则需要向服务器询问是否需要使用本地缓存。
   1. Last-Modified if-Modified-Since
   2. Etag If-None-Match

预加载

在开发中，可能会遇到这样的情况。有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载。

预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件，可以使用以下代码开启预加载

<link rel="preload" href="http://example.com">

预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好。

预渲染

可以通过预渲染将下载的文件预先在后台渲染，可以使用以下代码开启预渲染

<link rel="prerender" href="http://example.com"> 

预渲染虽然可以提高页面的加载速度，但是要确保该页面大概率会被用户在之后打开，否则就是白白浪费资源去渲染。

CDN

CDN 的原理是尽可能的在各个地方分布机房缓存数据，这样即使我们的根服务器远在国外，在国内的用户也可以通过国内的机房迅速加载资源。

因此，我们可以将静态资源尽量使用 CDN 加载，由于浏览器对于单个域名有并发请求上限，可以考虑使用多个 CDN 域名。并且对于 CDN 加载静态资源需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie，平白消耗流量。

DNS 预解析

DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP。

<meta http-equiv='x-dns-prefetch-control' content='<