锐客网

  1. 首页 > 睿知 > it技术 > >

常用的计算机优化方法,前端性能优化常用的五个优化方法分享

前端性能优化是程序员的日常工作中非常重要的一个工作内容，而今天我们就通过案例分析来了解一下，常见的一些前端性能优化方法都有哪些。
常用的计算机优化方法,前端性能优化常用的五个优化方法分享
文章图片

1、避免页面卡顿
60fps与设备刷新率
目前大多数设备的屏幕刷新率为60次/秒。因此，如果在页面中有一个动画或渐变效果，或者用户正在滚动页面，那么浏览器渲染动画或页面的每一帧的速率也需要跟设备屏幕的刷新率保持一致。
其中每个帧的预算时间仅比16毫秒多一点(1秒/60=16.66毫秒)。但实际上，浏览器有整理工作要做，因此您的所有工作需要在10毫秒内完成。如果无法符合此预算，帧率将下降，并且内容会在屏幕上抖动。此现象通常称为卡顿，会对用户体验产生负面影响。
2、使用WebWorkers
WebWorker使用其他工作线程从而独立于主线程之外，它可以执行任务而不干扰用户界面。一个worker可以将消息发送到创建它的JavaScript代码,通过将消息发送到该代码指定的事件处理程序(反之亦然)。
WebWorker适用于那些处理纯数据，或者与浏览器UI无关的长时间运行脚本。
3、使用位操作
JavaScript中的数字都使用IEEE-754标准以64位格式存储。但是在位操作中，数字被转换为有符号的32位格式。即使需要转换，位操作也比其他数学运算和布尔操作快得多。
4、不要覆盖原生方法
无论你的JavaScript代码如何优化，都比不上原生方法。因为原生方法是用低级语言写的(C/C++)，并且被编译成机器码，成为浏览器的一部分。当原生方法可用时，尽量使用它们，特别是数学运算和DOM操作。
5、使用flexbox而不是较早的布局模型
在早期的CSS布局方式中我们能对元素实行绝对定位、相对定位或浮动定位。而现在，我们有了新的布局方式flexbox，它比起早期的布局方式来说有个优势，那就是性能比较好。
【常用的计算机优化方法,前端性能优化常用的五个优化方法分享】【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。

    推荐阅读


    上一篇：json|js数组使用JSON.stringify()和toString()的区别，JSON.parse

    下一篇：其他|东软始业教育结业考试 2021.12.30