前端页面性能优化详解——资源合并、异步加载、缓存、cdn、预解析dns、渲染优化

前言：

在说下面的优化方式之前，我们还要对自己代码的书写也要优化（比如js方面缓存dom，一次性动态添加dom而不是循环每次添加dom；css方面尽量不用后代选择器，少用子代选择器，最好不要超过三层），压缩图片，使用字体图标或者雪碧图、图片懒加载之类的。

一、资源压缩合并，减少http请求

浏览器对同一ip进行请求的最大并发连接数。不同浏览器的并发数量不一样：IE11 、IE10 、chrome、Firefox 的并发连接数是 6个，IE9是10个。

如果页面静态资源（图片等）过多（大于6个）会存在资源请求等待的情况。

所以在开发阶段可能会分为几个样式文件或者js脚本文件引入，但是在上线阶段应该把多个文件压缩为一个文件再引入，从而达到减少http请求。但是也不能全部压缩为一个太大的文件引入，这样加载过慢的话也会影响用户体验。需要合理分析。
还有页面中的ajax请求也需要合理控制数量。
如：

<link rel="stylesheet" type="text/css" href="a.css">
<link rel="stylesheet" type="text/css" href="b.css">
<link rel="stylesheet" type="text/css" href="c.css">
    <!-- 合并压缩为 -->
<link rel="stylesheet" type="text/css" href="all.css">

<!-- ------------------------------------------- -->
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<!-- 合并压缩为 -->
<script src="all.js"></script>

二、非核心代码异步加载

js是会阻塞html解析的，是阻塞资源。其原因在于js可能会改变html现有结构。在首绘不需要js的情况下用async和defer实现异步加载。这样js就不会阻塞html的解析了。
注意，异步加载是指下载。执行js时仍然会阻塞。

异步加载的方式：

1）、动态脚本加载
2）、defer
3）、async

1、动态脚本加载：在需要的时候才动态创建script标签，并指定script的src属性并添加到页面上。

2、defer：在引入js文件的script标签上加上defer属性，属性值为布尔值。

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

defer用于异步加载外部 JavaScript 文件（加载文档元素的过程将和 script.js 的加载异步进行），当异步加载完成后， script.js 的执行要等到整个 HTML 文档加载完成，DOMContentLoaded(在DOM树构建完成后触发，不需要等到所有的资源都加载完毕) 事件触发之前。
如果有多个defer的js文件，那么就按照加载的顺序依次执行。

3、async：在引入js文件的script标签上加上async属性，属性值为布尔值。

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

用于异步加载外部 JavaScript 文件（加载和渲染文档元素的过程将和 script.js 的加载与执行异步进行），当异步加载完成后，该外部 JavaScript文件会立即执行，即使 HTML 文档还没有完全加载完成。
如果有多个为async的js文件并不保证按照指定它们的先后顺序执行。

【defer和async的比较】

• 相同点：
  加载文件时不阻塞页面渲染；
  使用在页面内的script无效；
  使用这两个属性的脚本中不能调用document.write方法（不要把影响首绘的js代码放到异步加载里面）；
  有脚本的onload的事件回调；
  允许不定义属性值，仅仅使用属性名（即直接写defer、async）；

• 不同点：
  1、html的版本html4.x中定义了defer；html5.x中定义了async；这将造成由于浏览器版本的不同而对其支持的程度不同；
  2、执行时刻：每一个async属性的脚本都在它下载结束之后立刻执行，同时会在window的load事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况；每一个defer属性的脚本都是在页面解析完毕之后，按照原本的顺序执行，同时会在document的DOMContentLoaded之前执行。

三、利用浏览器对资源文件进行缓存

浏览器相关的知识点强烈推荐阅读：
彻底吃透浏览器的缓存机制！
(1.6w字)浏览器灵魂之问，请问你能接得住几个？
深入理解浏览器的缓存机制
浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，css等）拷贝一份副本储存在本地中。缓存会根据进来的请求保存输出内容的副本。当下一个请求来到的时候，如果是相同的URL，缓存会根据缓存机制决定是直接使用副本响应访问请求，还是向源服务器再次发送请求。

看下这个浏览器的缓存机制流程图：

如果什么缓存策略都没设置，那么浏览器会怎么处理？
对于这种情况，浏览器会采用一个启发式的算法，通常会取响应头中的 Date 减去 Last-Modified 值的 10% 作为缓存时间。
提示：响应头中的Date / Last-Modified字段的时间可能是比现在少8个小时的（应该是时区引发的八小时问题，我们所在的地方是东八区,有8个小时的时差），所以模拟计算的时候加上8小时就可以了。

我们前端如何设置文件不使用缓存呢？
对于一个html页面，缓存分3部分，一个是页面内容，一个是css和JS文件。在这里html页面又是所有静态资源的载体（建议不缓存html页面）。
1、html页面
在HTML页面的节点中加入< meta />标签。

<meta http-equiv="Expires" content="0"> <!--设置过期时间为永远过期-->
<meta http-equiv="Pragma" content="no-cache">  <!--http协议的向下兼容（http1.0中的字段）-->
<meta http-equiv="Cache-control" content="no-store"><!--http1.1中的字段-->

2、CSS和JS文件
资源路径手动添加版本号。

<link rel="stylesheet" type="text/css" href="../css/register.css"/>
<script src="../scripts/register.js"></script>

改成

<link rel="stylesheet" type="text/css" href="../css/register.css?v=20181212"/>
<script src="../scripts/register.js?v=20181212"></script>

就是只要在每次修改后改一下版本号即可。

四、使用cdn

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
cdn部署这里不介绍，自行百度了解。我们了解下前端如果使用cdn资源。

开源的cdn加速服务：https://www.bootcdn.cn/

我们可以在这个网站上找自己的需要的库文件地址，在项目中添加即可。如下：

<link href="https://cdn.bootcss.com/bootstrap-table/1.12.2/bootstrap-table.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bootcss.com/bootstrap-table/1.12.2/bootstrap-table.min.js"></script>

使用cdn的好处和不足可以看下：https://blog.csdn.net/weixin_41697143/article/details/82758630

如果cdn资源加载失败了，可以使用下面的办法使用本地文件（仅限个别能进行判断的资源文件）：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="./jquery.min.js"%3E%3C/script%3E'))</script>

我们在document.write方法中直接使用了URL编码，把“<”编码为“%3C”，接着我们再使用unescape()方法把字符串还原过来。src中的地址为自己本地jquery文件地址。

五、预解析DNS

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="域名" />

1.用meta信息来告知浏览器, 当前页面要做DNS预解析:
<meta http-equiv="x-dns-prefetch-control" content="on" />
2. 在页面header中使用link标签来强制对DNS预解析:
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
注：dns-prefetch需慎用，多页面重复DNS预解析会增加重复DNS查询次数。

详细阅读相关资料推荐：https://blog.csdn.net/weixin_42594068/article/details/80978492

六、渲染优化

1、css样式放在body标签前面，js代码放在body标签后面
2、懒加载（图片懒加载，下拉加载更多等）
3、减少dom查询，对dom查询做缓存

//缓存dom查询
var pList = document.getElementsByTagName('p');
var i;
for(i = 0 ; i < pList.length ; i++){
// do something
}

4、减少dom操作，主要是减少DOM的重排与重绘，多个dom操作应该合并在一起执行

var listNode = document.getElementById('list');
// 要插入10个li标签，应该使用文档碎片，一次性添加
var frag = document.createDocumentFragment();
var x , li ;
for(x = 0; x < 10; x++){
	li = document.createElement("li");
	li.innerHTML = "list item" + x ;
	frag.appendChild(li);
}
listNode.appendChild(frag);

5、合理使用防抖 / 节流

浅谈 JS 防抖和节流
5.1 防抖

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>防抖</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
  <div>
    <input type="text" id="input">
  </div>
  <script>
    // 防抖：当持续出发时间，一定时间内没有再触发事件，事件处理函数就会执行一次（定时器）
    // 如果设定的定时器延迟到来之前 又触发了事件，那么就会重新开始计时
    // （意味着上一次还没结束掉的定时器需要清除，再重新开始计时）

    // 实际应用：输入搜索
    // （输入结束n秒才进行搜索，如果n秒内还输入内容就会重新计时，这样解决了搜索得到内容不一致的bug）

    /** 
     * 防抖函数
     * fn ：要执行的函数
     * delay：延迟时间（ms）
    **/
    const debounce = (fn, delay = 500) => {
      let timer = null;
      return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, args);
        }, delay);
      }
    }

    const inputFn = (value) => {
      console.log(value);
    };
    const debounceInputFn = debounce(inputFn, 1000);

    $('#input').keyup((e) => {
      // 不使用防抖
      // inputFn(e.target.value);

      // 使用防抖
      debounceInputFn(e.target.value);
    })


  </script>
</body>

</html>

5.2 节流

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>节流</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
  <div>
    <button id="btn">点击提交</button>
  </div>
  <script>
    // 节流： 一段时间只做一件事情，时间没到就不做

    // 实际应用：表单的提交。（解决多次频繁点击提交表单的bug）

    /** 
     * 节流函数
     * fn ：要执行的函数
     * delay：延迟时间（ms）
    **/
    const throttle = (fn, delay = 500) => {
      let timer = null;
      return (...args) => {
        if (!timer) {
          // 执行函数如果放在这里，那么第一次点击会立即执行，最后一次点击有可能执行，也有可能不执行。具体看点击频率和延迟时间
          fn.apply(this, args);
          timer = setTimeout(() => {
            // 如果执行函数放在这里，那么第一次点击会延迟delay ms执行，最后一次的点击也会延迟执行
            // fn.apply(this, args);
            // clearTimeout这句可以不要
            // clearTimeout(timer); // 这里清除了定时器，但是还是要像下面置空，不然不会进入判断
            timer = null;
          }, delay);
        }

      }
    }

    const btnFn = (tag) => {
      console.log('点击提交表单' + tag);
    }
    const throttleBtnFn = throttle(btnFn, 1000);

    $('#btn').click(() => {
      // // 不使用节流
      // btnFn('n');

      // 使用节流
      throttleBtnFn('n');
    })


  </script>
</body>

</html>

6、尽早执行操作（如DOMContentLoaded）

window.addEventListener('load',function(){
// 页面的全部资源加载完了才会执行（包括图片、视频等资源）
});
document.addEventListener('DOMContentLoaded',function(){
// DOM渲染完成即可执行，此时图片、视频还可能没有加载完
});

7、在事件绑定中，合理使用事件委托，减少循环给DOM元素绑定事件处理函数

——————————————————————————————————

参考的相关博文：
https://blog.csdn.net/longholidays/article/details/62063295
https://blog.csdn.net/charleslei/article/details/50786575
https://blog.csdn.net/handsomexiaominge/article/details/80556769
http://www.cnblogs.com/slly/p/6732749.html
https://blog.csdn.net/lihui4291/article/details/72768189