前端代码优化小技巧
导读
今天分享一下开测前端代码的一些优化,及使用的一些小技巧,来优化我们的网站,前端开发中最常见的问题就是很少使用 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 不会对空数组进行检测
1.闭包会形成一个不销毁的栈内存,过多的栈内存累积会影响页面的性能。
使用定时器注意的问题
如果针对的是不断运行的代码,不应该使用 setTimeout,而应该使用 setInterval,因为 setTimeout 每一次都会初始化一个定时器,setInterval 只会在开始的时候初始化一个定时器。
网页中 CSS 使用技巧
采用 CSS 雪碧图(CSS Sprit / CSS 图片精灵)技术,把一些小图合并在一张大图上,使用的时候通过背景图片定位,比如我们的 icon 图标可以汇总为一张图片。
避免使用 CSS 表达式
避免图片有空的 src 属性
在有些浏览器下,图片空的 src 属性也是会向服务端发送请求的,这些无意义的请求是会增加服务器的压力的。
使用预加载:预加载和延迟加载看似相反,其实它们有两个不同的目的,延迟加载是为了更快的完成页面的加载,而预加载是指提前将页面需要的组件下载下来并缓存,减少页面的响应时间。
尽可能使用 CSS 动画
避免 css 的重绘重排
1.重绘(Repaint)
重绘是一个元素外观的改变所触发的浏览器行为,例如改变 outline、背景色等属性。浏览器会根据元素的新属性重新绘制,使元素呈现新的外观。重绘不会带来重新布局,所以并不一定伴随重排。
2.重排(Reflow)
渲染对象在创建完成并添加到渲染树时,并不包含位置和大小信息。计算这些值的过程称为布局或重排。
网站中一些兼容优化
1.获取滚动条的兼容
2.阻止浏览器默认行为兼容
3.阻止事件冒泡的兼容
点击下方链接免费领取:性能测试+接口测试+自动化测试+测试开发+测试用例+简历模板+测试文档
http://qrcode.testing-studio.com/f?from=infoQ&url=https://ceshiren.com/t/topic/22265
评论