【前端性能】常见前端性能优化

前言

  想要成为一名合格的前端开发工程师，必须要掌握前端性能优化，本文将为大家介绍一些常见的前端性能优化问题，如有遗漏，欢迎补充~

一、图片优化

1.雪碧图（图片精灵）

  图像精灵是放入一张单独的图片中的一系列图像。包含大量图像的网页需要更长时间来下载，同时会生成多个服务器请求。使用图像精灵将减少服务器请求数量并节约带宽。
  具体操作可以去W3C里面查看教程：https://www.w3school.com.cn/css/css_image_sprites.asp

2.图片压缩

  要无损压缩！！！

• 优先使用png而不是GIF
• 压缩png / gif动画 / 动态生成的图像
• 使用 CSS sprites / png8
• 避免使用AlphaImageLoader（用来解决IE6不支持png图片透明度的问题）
• 去除JPEG的metadata

3.字体图标代替图片

• SVG
    SVG（Scalable Vector Graphics）是一种图像文件格式，意思为可缩放的矢量图形，是一种用XML定义的语言，用来描述二维矢量及矢量/栅格图形。优势在于：可以任意放大图形显示，但绝不会以牺牲图像质量为代价，平均来讲，SVG文件比JPEG和PNG格式的文件要小很多，因此渲染速度也很快。
• iconfont
    iconfont是阿里妈妈MUX倾力打造的矢量图标管理、交流平台，设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式（支持AI/ SVG/ PNG / 代码格式）的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

4.webp图片

  WebP（发音：weppy）是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自影像编码格式VP8。根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45%的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以 减少28% 的文件大小。

二、DOM优化

1.缓存DOM节点查找的结果

  在同一个节点无需多次查询的情况下，可以缓存DOM。

var div = document.getElementById('div');

2.防抖和节流

• 防抖
    所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

//以鼠标滚轮事件为例
function debounce(fn,delay){  //fn为真正执行的函数，delay为间隔时间
       var timerId = null;
       return function(){
            var arg = arguments[0];  //访问调用方法的第1个参数
            if(timerId){
                clearTimeout(timerId); //清除定时器
            }
            timerId = setTimeout(function(){  //设置定时器
                  fn(arg);
            },delay)
       }
}

function move(ev){  //测试上述代码
     if(ev.wheelDeltaY > 0){
          console.log('向上');
     }else{
          console.log('向下');
     }
}
document.onwheel = debounce(move,2000);  //每隔两秒执行一次

• 节流
    所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率，单位时间内, 只会触发一次事件，如果事件触发后，又重复触发了同一事件，则忽略后面触发的事件，直到第一次事件的计时结束。

//以鼠标滚轮事件为例
function throttle(fn,delay){
       var timerId = null;
       return function(){
            var that = this;
            var arg = arguments[0];  //访问调用方法的第1个参数
            if(timerId) return;
            timerId = setTimeout(function(){  //设置定时器
                  fn(arg,that);
                  timerId = null;
            },delay)
       } 
}

function move(ev,obj){  //测试上述代码
      console.log(obj);
      if(ev.wheelDeltaY > 0){
           console.log('向上');
      }else{
           console.log('向下');
      }
}
document.onwheel = throttle(move,1000);

3.事件代理

  指将事件监听器注册在父级元素上，把原本需要绑定在子元素的响应事件（click、keydown等）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

  简单来说，比如你们宿舍的人都要取快递，一种方法是你们一个个去取各自的快递；还有一种方法是把所有要取的快递委托给某一个人，当他把所有快递取回来后，再根据收件人信息分发给每一个人。这个被委托的人就相当于父元素。

• addEventListener( )
  1） 语法：element.addEventListener(event, function, useCapture)
  2）参数值

参数	描述
event	必须。字符串，指定事件名。注意：不要使用"on”前缀（例如使用“click”，而不是“onclick”）
function	必须。指定事件触发时要执行的函数。当事件对象会作为第一个参数传入函数。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。

3）移出事件监听：element.removeEventListener(event, function,useCapture)

4.减少合并DOM操作

• 在内存中操作DOM
    使用createDocumentFragment()方法创建虚拟的节点对象，让DOM操作发生在内存中，而不是页面上。
  语法：document.createDocumentFragment()
• 批量操作DOM
    由于DOM操作可能会造成浏览器回流，所以要避免频繁操作DOM。可以使用innerHTML属性批量生成DOM节点，具体操作为字符串拼接，再用innerHTML更新DOM。
    不过如果代码比较多的情况下，手动拼接就比较麻烦。（因为编辑器里不会有提示~~）

<div id="p">div>  
<input type="text" id='msg'>  
<button onclick="sendMsg()">发送button>

var pNode = document.getElementById('p');  //获取p标签节点
var msg = document.getElementById('msg');  //获取节点的文字内容
function sendMsg(){
    var val = msg.value;  //存放文字内容
    p.innerHTML += `
${val}
`  //字符串拼接
}

• 批量操作CSS样式
  1）切换class

<style>
    #tab{
        width: 600px;
        height: 300px;
        margin: 50px auto;
        border: 1px solid #000;
    }
    #tab ul{
        display: flex;
        justify-content: space-between;
    }
    #tab li{
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        flex-grow: 1;
        background: #f1f1f1;
        transition: 0.3s;
    }
    #tab li.current{
        background: deeppink;
    }
    .tabItem{
        display: none;
    }
    .tabItem.current{
        display: block;
    }
style>
<div id="tab">
     <ul>
         <li class="current">电影li>
         <li>电视li>
         <li>动漫li>
         <li>新闻li>
     ul>
     <div class="tabCont">
         <div class="tabItem current">THIS IS TAB 1div>
         <div class="tabItem">THIS IS TAB 2div>
         <div class="tabItem">THIS IS TAB 3div>
         <div class="tabItem">THIS IS TAB 4div>
     div>
div>

//jQuery代码
$('#tab li').on('click',function(){
    var index=$(this).index()//返回元素的索引
    $(this).add($('.tabItem').eq(index)).addClass('current').siblings().removeClass('current')
})

运行效果：

 2）新的类

<style>
.box{
    width: 300px;
    height: 300px;
    border: 1px solid #000;
    /*...*/
}
style>

element.className += " box";

5.DOM读写分离

  浏览器具有惰性渲染机制，连接多次修改DOM可能只触发浏览器的一次渲染。而如果修改DOM后，立即读取DOM，为了保证读取到正确的DOM值，会触发浏览器的一次渲染。因此，修改DOM的操作要与访问DOM分开进行。

6.DOM元素离线更新

  当对DOM节点进行较大的改变时，需要先将元素脱离文档流，然后进行改变操作，最后再放回到文档流中。例如appendChild等都可以使用Document Fragment对象进行离线操作，带元素“组装”完成后再一次插入页面，或者使用 display:none 对元素隐藏，在元素“消失”后进行相关操作。

<ul id='list'>ul>

var ul = document.getElementById('list')
ul.style.display = 'none';  //脱离文档流
// 对ul进行相关操作
ul.style.display = 'block';  //放回文档流

三、性能更好的API（脚本优化）

1.用requestAnimationFrame代替setTimeout

  requestAnimationFrame是浏览器用于定时循环操作的一个接口，主要用途是按帧对网页进行重绘。而使用 setTimeout或者 setInterval 来触发更新页面的函数，该函数可能在一帧的中间或者结束的时间点上调用，进而导致该帧后面需要进行的事情没有完成，引发丢帧。
  设置这个API的目的是为了让各种网页动画效果（如DOM动画、Canvas动画、SVG动画等）能够有一个统一的刷新机制，从而节省系统资源。
  目前，主要浏览器Firefox 23 / IE 10 / Chrome / Safari都支持这个方法。可以用下面的方法，检查浏览器是否支持这个API。如果不支持，则自行模拟部署该方法。

//检查浏览器是否支持这个API
window.requestAnimFrame = (function(){
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || 
             window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
              function( callback ){
                window.setTimeout(callback, 1000 / 60);
              };
})();

2.使用IntersectionObserver来实现图片可视区域的懒加载

  传统的做法中，需要使用scroll事件，并调用getBoundingClientRect方法，来实现可视区域的判断，即使使用了函数节流，也会造成页面回流。使用IntersectionObserver，则没有上述问题。

四、加载优化

1.使用CDN

  CDN（Content Delivery Network），即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

2.按需加载

  按需加载是前端性能优化的一大措施，顾名思义就是根据需要去加载资源。换句话说就是当用户触发某个动作的时候，才主动去请求资源，这样可以减少HTTP请求，节省宽带，让页面首屏的内容更快展现在用户的视线范围内，提高用户体检。触发的动作有很多，如鼠标点击，拉动页面滚动条，输入文字等等；加载的文件，可以是JS、图片、CSS、HTML等。

• 图片的按需加载

<img src="伪装的图片" data-src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">

  把图片的真实资源地址存放在标签自定义的属性里面，如 ‘data-src’，当触发动作时，交换属性，就可以达到按需加载。

3.DNS预先解析

  域名（DNS）解析是把域名指向网站空间IP，让人们通过注册的域名可以方便地访问到网站的一种服务。域名解析就是域名到IP地址的转换过程。

图片来源：百度百科

• 预解析的方法
  在 head 标签里面写上几个 link 标签。

<link rel="dns-prefecth" href="https://www.csdn.net">
<link rel="dns-prefecth" href="https://www.baidu.com">

4.浏览器缓存

  浏览器缓存（Browser Caching）是为了节约网络的资源加速浏览，浏览器在用户磁盘上对最近请求过的文档进行存储，当访问者再次请求这个页面时，浏览器就可以从本地磁盘显示文档，这样就可以加速页面的阅览。它是网站访问统计最难解决的问题之一。

• 彻底缓存：cache-control、exprices
    彻底缓存的意思是在缓存失效之前不再需要跟服务器交互。浏览器总是优先使用cache-control，如果没有cache-control才考虑Expires。
• 缓存协商：Last-modified 、Etag
    缓存协商的意思是需要去服务器端询问页面有没有修改过，没有修改过则返回304直接使用缓存内容，否则返回新内容。
  协商步骤：
  1）服务器发送带Last-modified:GMTtime 头的http response
  2）浏览器下次请求时带上if-modified-since:GMTtime http 请求头
  3）服务端用本地Last-modified时间与if-modified-since比较，计算浏览器数据是否过期并发送响应

5.文件压缩、混淆、合并

• 合并
  ☑如果不进行文件合并，有如下3个隐患
  1）文件与文件之间有插入的上行请求，增加了N-1个网络延迟；
  2）受丢包问题影响更严重；
  3）经过代理服务器时可能会被断开；
  ☑当然，文件合并不一定完美，它也有一些自己的问题
  1）首屏渲染问题
  2）缓存失效问题
  ☞改进建议
  1）公共库合并
    将公共库单独打包成一个文件。
  2）不同页面单独合并
    按需加载（异步组件）。
• 压缩与混淆
  1）HTML压缩
    HTML压缩就是压缩在文本文件中有意义，但是在HTML中不显示的字符（包括空格、制表符Tab、换行符等）
    ☑使用在线网站压缩；
    ☑html-minifier工具；
    ☑后端模板引擎渲染时压缩；
  2）CSS压缩
    CSS压缩包括无效代码删除与CSS语义合并。
    ☑使用在线网站压缩
    ☑对于html中的css可以使用html-minifier压缩
    ☑clean-css工具
  3）JS压缩与混淆
    JS压缩与混淆包括无效字符及注释的删除、代码语义的缩减和优化、降低代码可读性，实现代码保护。
    ☑使用在线网站进行压缩
    ☑对于html中的js可以使用html-minifier压缩
    ☑UglifyJS2工具

五、前端缓存

1.cookie

  类型为“小型文本文件”，是某些网站为了辨别用户身份，进行Session跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。Cookie是一段不超过4KB的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制Cookie有效期、安全性、使用范围的可选属性组成。

属性	作用
Name/Value	设置Cookie的名称及相对应的值，对于认证Cookie，Value值包括Web服务器所提供的访问令牌 。
Expires	设置Cookie的生存期。有两种存储类型的Cookie：会话性与持久性。Expires属性缺省时，为会话性Cookie，仅保存在客户端内存中，并在用户关闭浏览器时失效；持久性Cookie会保存在用户的硬盘中，直至生存期到或用户直接在网页中单击“注销”等按钮结束会话时才会失效。
Path	定义了Web站点上可以访问该Cookie的目录。
Domain	指定了可以访问该 Cookie 的 Web 站点或域。Cookie 机制并未遵循严格的同源策略，允许一个子域可以设置或获取其父域的 Cookie。因而，浏览器禁止在 Domain 属性中设置.org、.com 等通用顶级域名、以及在国家及地区顶级域下注册的二级域名，以减小攻击发生的范围。
Secure	指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议，可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。
HTTPOnly	用于防止客户端脚本通过document.cookie属性访问Cookie，有助于保护Cookie不被跨站脚本攻击窃取或篡改。但是有一定局限性。

2.localStorage

  用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
  在使用 web 存储前,应检查浏览器是否支持 localStorage：

<div id="result">div>

if(typeof(Storage) !== "undefined"){
  localStorage.sitename="CSDN";
  document.getElementById("result").innerHTML="网站名：" + localStorage.sitename;
}else{
  document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}

网站名：CSDN

• 常用API
  1）保存数据
    localStorage.setItem(key,value);
  2）读取数据
    localStorage.getItem(key);
  3）删除单个数据
    localStorage.removeItem(key);
  4）删除所有数据
    localStorage.clear();
  5）得到某个索引的key
    localStorage.key(index);

总结

  前端性能优化的手段有很多，本文并没有罗列完整。
  另：部分内容参考——https://www.cnblogs.com/xiaohuochai/p/9178390.html