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

常见性能优化

前言一、图片优化1.雪碧图（图片精灵）2.图片压缩3.字体图标代替图片4.webp图片 二、DOM优化1.缓存DOM节点查找的结果2.防抖和节流3.事件代理4.减少合并DOM操作5.DOM读写分离6.DOM元素离线更新 三、性能更好的API（脚本优化）1.用requestAnimationFrame代替setTimeout2.使用IntersectionObserver来实现图片可视区域的懒加载 四、加载优化1.使用CDN2.按需加载3.DNS预先解析4.浏览器缓存5.文件压缩、混淆、合并 五、前端缓存1.cookie2.localStorage 总结

前言

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

一、图片优化

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 += `<p>${val}</p>` //字符串拼接 } 批量操作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 1</div> <div class="tabItem">THIS IS TAB 2</div> <div class="tabItem">THIS IS TAB 3</div> <div class="tabItem">THIS IS TAB 4</div> </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=""; document.getElementById("result").innerHTML="网站名：" + localStorage.sitename; }else{ document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。"; }

网站名：

常用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