前端代码优化小技巧

导读

今天分享一下开测前端代码的一些优化，及使用的一些小技巧，来优化我们的网站，前端开发中最常见的问题就是很少使用 ES6 方法导致代码冗余，不够清晰，定时器和闭包导致内存溢出及泄露,网站中 css 导致排版错乱，请求图片过多，导致网站加载缓慢，网站中兼容各种浏览器的问题。

ES6 语法和 JS 优化技巧

逻辑与运算

if() else() 可以简化为 flag==1?true:false

includes 处理多重条件

if(code===‘202’ || code === ‘203’ || code === ‘204’) 可以简化为 if([‘202’,‘203’,‘204’].includes(code))

map 的使用

var arr=[‘1’,‘2’,‘3’];

假如我们有一个需要把这些数据都转为 Number 类型呢？是不是第一时间想到了 for 循环,其实还有更简单的方法。

arr=arr.map((v)=>Number(v));

var str=[[‘1’,‘2’],[‘2’,‘3’]];

every："一假则假"

注意哦 every 不会对空数组进行检测

arr.every((currentValue,index,array)=>{   //适合用于全选   // currentValue = 当前执行元素   // index = 当前索引值   // array = 执行的数组})arr.some((currentValue,index,array)=>{   // currentValue = 当前执行元素   // index = 当前索引值   // array = 执行的数组})arr.filter((currentValue,index,array)=>{    // currentValue = 当前执行元素    // index = 当前索引值    // array = 执行的数组})

1.闭包会形成一个不销毁的栈内存，过多的栈内存累积会影响页面的性能。

使用定时器注意的问题

如果针对的是不断运行的代码，不应该使用 setTimeout，而应该使用 setInterval，因为 setTimeout 每一次都会初始化一个定时器，setInterval 只会在开始的时候初始化一个定时器。

网页中 CSS 使用技巧

采用 CSS 雪碧图（CSS Sprit / CSS 图片精灵）技术，把一些小图合并在一张大图上，使用的时候通过背景图片定位，比如我们的 icon 图标可以汇总为一张图片。

.main{     background:url('../img/sprit.png') no-repeat;     background-size:x y; /*和原图的大小保持一致*/}.box{     background-position:x y; /*通过背景定位，定位到具体的位置，展示不同的图片即可*/}

避免使用 CSS 表达式

/*CSS表达式*/.box{    background-color:expression((new Date()).getHours()%2?'red':'blue')}

避免图片有空的 src 属性

在有些浏览器下，图片空的 src 属性也是会向服务端发送请求的，这些无意义的请求是会增加服务器的压力的。

使用预加载：预加载和延迟加载看似相反，其实它们有两个不同的目的，延迟加载是为了更快的完成页面的加载，而预加载是指提前将页面需要的组件下载下来并缓存，减少页面的响应时间。

尽可能使用 CSS 动画

避免 css 的重绘重排

1.重绘(Repaint)

重绘是一个元素外观的改变所触发的浏览器行为，例如改变 outline、背景色等属性。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。重绘不会带来重新布局，所以并不一定伴随重排。

2.重排(Reflow)

渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排。

网站中一些兼容优化

1.获取滚动条的兼容

var scrollTop = document.documentElement.scrollTop || document.scrollTop

2.阻止浏览器默认行为兼容

preventDefault : function(event) {if(event.preventDefault) {      event.preventDefault()}else {      event.returnValue = false    }}

3.阻止事件冒泡的兼容

stopPropagation : function(event) {if(event.stopPropagation) {   event.stopPropagation()}else {   event.canceBubble = true}}

更多学习资料戳下方！！！

https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=infoQ&timestamp=1662366626&author=xueqi