前端代码优化小技巧

导读

今天分享一下开测前端代码的一些优化,及使用的一些小技巧,来优化我们的网站,前端开发中最常见的问题就是很少使用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不会对空数组进行检测

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

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

使用定时器注意的问题

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

网页中CSS使用技巧

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

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

避免使用CSS表达式

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

避免图片有空的 src 属性

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

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

尽可能使用CSS动画

避免css的重绘重排

1.重绘(Repaint)

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

2.重排(Reflow)

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

网站中一些兼容优化

1.获取滚动条的兼容

python 复制代码
var scrollTop = document.documentElement.scrollTop || document.scrollTop

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

python 复制代码
preventDefault : function(event) {
if(event.preventDefault) {
      event.preventDefault()
}else {
      event.returnValue = false
    }
}

3.阻止事件冒泡的兼容

python 复制代码
stopPropagation : function(event) {
if(event.stopPropagation) {
   event.stopPropagation()
}else {
   event.canceBubble = true
}
}

最后感谢每一个认真阅读我文章的人,礼尚往来总是要有的,虽然不是什么很值钱的东西,如果你用得到的话可以直接拿走:

这些资料,对于【软件测试】的朋友来说应该是最全面最完整的备战仓库,这个仓库也陪伴上万个测试工程师们走过最艰难的路程,希望也能帮助到你!

相关推荐
mCell13 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip13 小时前
Node.js 子进程:child_process
前端·javascript
excel16 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel17 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼19 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping19 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙20 小时前
[译] Composition in CSS
前端·css
白水清风20 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix20 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780020 小时前
new、原型和原型链浅析
前端·javascript