前端性能优化是程序员日常工作中非常重要的工作内容,今天通过案例分析,我们来看看常见的前端性能优化方法有哪些。
1、避免纸箱
60fps和设备刷新率
目前,大多数设备的屏幕刷新率为60次/秒。 因此,如果页面具有动画或渐变效果,或者用户正在滚动页面,则浏览器呈现动画或页面的每个帧的速度也必须与设备屏幕的刷新率一致。
其中,每个帧的预算时间只比16毫秒稍多。 1秒/60=16.66毫秒)。 但实际上,由于浏览器有整理工作,所有工作都必须在10毫秒内完成。 如果不符合这个预算,帧频会下降,内容会在画面上抖动。 这种现象一般称为纸箱,会对用户体验产生负面影响。
2、使用web工作器
WebWorker可以独立于主线使用其他工作线程来执行任务,而不会干扰用户界面。 worker可以将消息发送到编写的JavaScript代码,也可以将消息发送到代码指定的事件处理程序。
WebWorker适用于处理纯数据或长时间执行与浏览器UI无关的脚本。
3、使用位操作
所有JavaScript数字都使用IEEE-754标准以64位格式存储。 但是,在位操作中,数字会转换为有符号的32位格式。 即使需要转换,位操作也比其他数学和布尔操作快得多。
4、不涵盖母语方法
不管你的JavaScript代码如何优化,都不会去使用母语方法。 因为本机方法是用低级语言编写的,编译成机器代码,成为浏览器的一部分。 如果有可用的本机方法,请尽量使用它们。 特别是数学运算和DOM操作。
5、使用flexbox而不是旧的布局模型
早期的CSS布局方法可以相对于图元进行绝对、相对或浮动对齐。 现在我们有了新的布局方式flexbox。 那个比初期的布局方式更好。 那就是性能很好。
【免责事项】:此内容转载于互联网,转载目的为传达信息。 文章内容仅为作者个人意见,本平台对文章陈述、观点保持中立,形式上不保证所含内容的准确性、可靠性和完整性。 读者请作为参考。