常见性能优化
- 前言
- 一、图片优化
- 1.雪碧图(图片精灵)
- 2.图片压缩
- 3.字体图标代替图片
- 4.webp图片
- 二、DOM优化
- 1.缓存DOM节点查找的结果
- 2.防抖和节流
- 3.事件代理
- 4.减少合并DOM操作
- 5.DOM读写分离
- 6.DOM元素离线更新
- 三、性能更好的API(脚本优化)
- 1.用requestAnimationFrame代替setTimeout
- 2.使用IntersectionObserver来实现图片可视区域的懒加载
- 四、加载优化
- 1.使用CDN
- 2.按需加载
- 3.DNS预先解析
- 4.浏览器缓存
- 5.文件压缩、混淆、合并
- 五、前端缓存
- 1.cookie
- 2.localStorage
- 总结
前言
想要成为一名合格的前端开发工程师,必须要掌握前端性能优化,本文将为大家介绍一些常见的前端性能优化问题,如有遗漏,欢迎补充~
一、图片优化
1.雪碧图(图片精灵)
图像精灵是放入一张单独的图片中的一系列图像。包含大量图像的网页需要更长时间来下载,同时会生成多个服务器请求。使用图像精灵将减少服务器请求数量并节约带宽。
具体操作可以去W3C里面查看教程:https://www.w3school/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/0/88/03b0d39583f48206768a7534e55bcpng.png">
把图片的真实资源地址存放在标签自定义的属性里面,如 ‘data-src
’,当触发动作时,交换属性,就可以达到按需加载。
3.DNS预先解析
域名(DNS)解析是把域名指向网站空间IP,让人们通过注册的域名可以方便地访问到网站的一种服务。域名解析就是域名到IP地址的转换过程。
图片来源:百度百科
- 预解析的方法
在 head 标签里面写上几个 link 标签。
<link rel="dns-prefecth" href="https://www.csdn">
<link rel="dns-prefecth" href="https://www.baidu">
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 属性中设置、 等通用顶级域名、以及在国家及地区顶级域下注册的二级域名,以减小攻击发生的范围。 |
Secure | 指定是否使用HTTPS安全协议发送Cookie。使用HTTPS安全协议,可以保护Cookie在浏览器和Web服务器间的传输过程中不被窃取和篡改。 |
HTTPOnly | 用于防止客户端脚本通过 |
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://wwwblogs/xiaohuochai/p/9178390.html
更多推荐
【前端性能】常见前端性能优化
发布评论