前端面试-页面性能类

提升页面性能的方法

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

html 压缩、css 压缩、js 的压缩和混乱和文件合并。 资源压缩可以从文件中去掉多余的字符，比如回车、空格。

2.非核心代码异步加载

异步加载的三种方式—— 动态脚本创建、async 和 defer

3.使用浏览器缓存

强缓存、协商缓存

4.使用CDN

5.预解析DNS

异步加载的方式

1.动态脚本加载

也就是动态创建 script 标签，在还没定义 defer 和 async 前，异步加载的方式是动态创建 script，通过 window.onload 方法确保页面加载完毕再将 script 标签插入到 DOM 中

2.defer

defer是在HTML解析后才会执行的，如果有多个，按加载顺序依次执行

3.async

如果有多个async脚本，不能保证加载顺序，谁先下载好谁执行

浏览器缓存

强缓存、协商缓存

什么是CND

Content Delivery Network，内容分发网络

通过将静态资源(例如 javascript，css，图片等等）缓存到离用户很近的相同网络运营商的CDN节点上，不同地区的用户就会访问到离自己最近的相同网络线路上的CDN节点。当请求达到CDN节点后，节点会判断自己的内容缓存是否有效，如果有效，则立即响应缓存内容给用户，从而加快响应速度。

预解析DNS

资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源，当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。例如，我们将来可从 prefetch.com 获取图片或音频资源，那么可以在文档顶部的 标签中加入以下内容：

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

另外需要注意的是，浏览器会对 a 标签的 href 自动启用 DNS Prefetching，所以 a 标签里包含的域名不需要在 head 中手动设置 link。但是在 HTTPS 下不起作用，需要 meta 来强制开启功能。这个限制的原因是防止窃听者根据 DNS Prefetching 推断显示在 HTTPS 页面中超链接的主机名。下面这句话作用是强制打开 a 标签域名解析

   <!--  meta标签内容是强制打开a标签的DNS预解析，https下默认关-->
    <meta http-equiv = "x-dns-prefetch-control" content="on">

转载图：