前端页面性能优化的几种方式

时间 2019-11-08

标签前端页面性能优化几种方式栏目系统性能繁體版

原文原文链接

本文最初发表于博客园，并在GitHub上持续更新前端的系列文章。欢迎在GitHub上关注我，一块儿入门和进阶前端。javascript

如下是正文。css

前言

提高页面性能优化的常见方式：html

一、资源压缩合并，减小http请求前端
二、非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别java
三、利用浏览器缓存 --> 缓存的分类 --> 缓存的原理git

缓存是全部性能优化的方式中最重要的一步【重要】github

有的人可能会回答local storage 和session storage，其实不是这个。浏览器缓存和存储不是一回事。面试

四、使用CDN

浏览器第一次打开页面时，缓存是起不了做用的。这个时候，CDN就上场了。segmentfault

五、DNS预解析

1、资源压缩合并，减小http请求

合并图片（css sprites）、CSS和JS文件合并、CSS和JS文件压缩浏览器
图片较多的页面也可使用 lazyLoad 等技术进行优化。
精灵图等

2、非核心代码异步加载

异步加载的方式：（这里不说框架，只说原理）

动态脚本加载
defer
async

动态脚本加载

使用document.createElement建立一个script标签，即document.createElement('script')，而后把这个标签加载到body上面去。

参考连接：

javascript 异步加载

defer

经过异步的方式加载defer1.js文件：

<script src="./defer1.js" defer></script>

async

HTmL5新增特性。

经过异步的方式加载async1.js文件：

<script src="./async1.js" async></script>

defer和async的区别

defer：在HTML解析完以后才会执行。若是是多个，则按照加载的顺序依次执行。
async：在加载完以后当即执行。若是是多个，执行顺序和加载顺序无关。

代码举例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--经过异步的方式引入两个外部的js文件-->
    <script src="./defer1.js" defer></script>
    <script src="./defer2.js" defer></script>
</head>

<body>
<script>
    console.log('同步任务');
</script>
</body>

</html>

上方打印的结果是：

同步任务
defer1
defer2

由于defer的加载是有顺序的，因此两个引入defer文件按顺序执行。若是把引入的文件改成async的方式加载，打印的结果多是：

同步任务
async2
async1

参考连接：

浅谈script标签的defer和async

3、利用浏览器缓存

缓存：资源文件（好比图片）在本地存有副本，浏览器下次请求的时候，可能直接从本地磁盘里读取，而不会从新请求图片的url。

缓存分为：

强缓存
协商缓存

强缓存

强缓存：不用请求服务器，直接使用本地的缓存。

强缓存是利用 http 响应头中的Expires或Cache-Control实现的。【重要】

浏览器第一次请求一个资源时，服务器在返回该资源的同时，会把上面这两个属性放在response header中。好比：

注意：这两个response header属性能够只启用一个，也能够同时启用。当response header中，Expires和Cache-Control同时存在时，Cache-Control的优先级高于Expires。

下面讲一下两者的区别。

一、Expires：服务器返回的绝对时间。

是较老的强缓存管理 response header。浏览器再次请求这个资源时，先从缓存中寻找，找到这个资源后，拿出它的Expires跟当前的请求时间比较，若是请求时间在Expires的时间以前，就能命中缓存，不然就不行。

若是缓存没有命中，浏览器直接从服务器请求资源时，Expires Header在从新请求的时候会被更新。

缺点：

因为Expires是服务器返回的一个绝对时间，存在的问题是：服务器的事件和客户端的事件可能不一致。在服务器时间与客户端时间相差较大时，缓存管理容易出现问题，好比随意修改客户端时间，就能影响缓存命中的结果。因此，在http1.1中，提出了一个新的response header，就是Cache-Control。

二、Cache-Control：服务器返回的相对时间。

http1.1中新增的 response header。浏览器第一次请求资源以后，在接下来的相对时间以内，均可以利用本地缓存。超出这个时间以后，则不能命中缓存。从新请求时，Cache-Control会被更新。

协商缓存

协商缓存：浏览器发现本地有资源的副本，可是不太肯定要不要使用，因而去问问服务器。

当浏览器对某个资源的请求没有命中强缓存（也就是说超出时间了），就会发一个请求到服务器，验证协商缓存是否命中。

协商缓存是利用的是两对Header：

第一对：Last-Modified、If-Modified-Since
第二对：ETag、If-None-Match

一、Last-Modified、If-Modified-Since。过程以下：

（1）浏览器第一次请求一个资源，服务器在返回这个资源的同时，会加上Last-Modified这个 response header，这个header表示这该资源在服务器上的最后修改时间：

（2）浏览器再次请求这个资源时，会加上If-Modified-Since这个 request header，这个header的值就是上一次返回的Last-Modified的值：

（3）服务器收到第二次请求时，会比对浏览器传过来的If-Modified-Since和资源在服务器上的最后修改时间Last-Modified，判断资源是否有变化。若是没有变化则返回304 Not Modified，但不返回资源内容（此时，服务器不会返回 Last-Modified 这个 response header）；若是有变化，就正常返回资源内容（继续重复整个流程）。这是服务器返回304时的response header：

（4）浏览器若是收到304的响应，就会从缓存中加载资源。

缺点：

Last-Modified、If-Modified-Since通常来讲都是很是可靠的，但有可能出现的问题是：服务器上的资源变化了，可是最后的修改时间却没有变化。这一对header就没法解决这种状况。因而，下面这一对header出场了。

二、ETag、If-None-Match。过程以下：

（1）浏览器第一次请求一个资源，服务器在返回这个资源的同时，会加上ETag这个 response header，这个header是服务器根据当前请求的资源生成的惟一标识。这个惟一标识是一个字符串，只要资源有变化这个串就不一样，跟最后修改时间无关，因此也就很好地补充了Last-Modified的不足。以下：

（2）浏览器再次请求这个资源时，会加上If-None-Match这个 request header，这个header的值就是上一次返回的ETag的值：

3）服务器第二次请求时，会对比浏览器传过来的If-None-Match和服务器从新生成的一个新的ETag，判断资源是否有变化。若是没有变化则返回304 Not Modified，但不返回资源内容（此时，因为ETag从新生成过，response header中还会把这个ETag返回，即便这个ETag并没有变化）。若是有变化，就正常返回资源内容（继续重复整个流程）。这是服务器返回304时的response header：

（4）浏览器若是收到304的响应，就会从缓存中加载资源。

提示：若是面试官问你：与浏览器缓存相关的http header有哪些？你能写出来吗？这是一个亮点。

参考连接：

浏览器缓存知识小结及应用[荐]

4、使用CDN

怎么最快地让用户请求资源。一方面是让资源在传输的过程当中变小，另外就是CDN。

要注意，浏览器第一次打开页面的时候，浏览器缓存是起不了做任何用的，使用CDN，效果就很明显。

5、DNS预解析（dns-prefetch）

经过 DNS 预解析来告诉浏览器将来咱们可能从某个特定的 URL 获取资源，当浏览器真正使用到该域中的某个资源时就能够尽快地完成 DNS 解析。

第一步：打开或关闭DNS预解析

你能够经过在服务器端发送 X-DNS-Prefetch-Control 报头。或是在文档中使用值为 http-equiv 的meta标签：

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

须要说明的是，在一些高级浏览器中，页面中全部的超连接（<a>标签），默认打开了DNS预解析。可是，若是页面中采用的https协议，不少浏览器是默认关闭了超连接的DNS预解析。若是加了上面这行代码，则代表强制打开浏览器的预解析。（若是你能在面试中把这句话说出来，则必定是你出彩的地方）

第二步：对指定的域名进行DNS预解析

若是咱们未来可能从 smyhvae.com 获取图片或音频资源，那么能够在文档顶部的标签中加入如下内容：

<link rel="dns-prefetch" href="http://www.smyhvae.com/">

当咱们从该 URL 请求一个资源时，就再也不须要等待 DNS 解析的过程。该技术对使用第三方资源特别有用。

参考连接：

个人公众号

想学习代码以外的软技能？不妨关注个人微信公众号：生命团队（id：vitateam）。

扫一扫，你将发现另外一个全新的世界，而这将是一场美丽的意外：