Leanote's Blog
I love Leanote!
Toggle navigation
Leanote's Blog
Home
Chrome
Git
Linux
Windows
Others
工具大全
VsCode
Expo
Html
JavaScript
Npm
Node
Mock
React-Native
React
TypeScript
小程序
插件
正则
Dva
Ant-Design-React
Umi
Vue
Vux
Ant-Design-Vue
Http
Java
flutter
开发小工具
About Me
Archives
Tags
js性能优化
2023-05-23 02:18:10
5
0
0
admin
### 测试网站 - `jsperf` - `jsfiddle` - `JSBench` 执行并比较不同 `JavaScript` 代码片段的执行速度。 通过简单而简短的 `URL` 与他人在线共享和协作。 ### 合并 | 测试条件 | Chrome版本94.0.4606.81 | Firefox版本93.0 (64 位) | | ---- | ---- | ---- | |Object.assign对象合并|14.07080078125 ms|12.11 ms| |展开运算符对象合并|18201.126953125 ms|7424.69 ms| |展开运算符数组加单个|42.848876953125 ms|877.14 ms| |push方法数组加单个|0.489013671875 ms|0.89 ms| |concat方法数组加单个|0.6640625 ms|2.40 ms| |展开运算符两个大数组合并|38.1337890625 ms|43.64 ms| |concat方法两个大数组合并|4.3740234375 ms|31.28 ms| ### 性能测试结论 在循环比较多或者操作的数组长度比较大的情况下： 1. `Object.assign` 多数情况下性能比 `展开运算符(...)` 的性能高 2. 数组自带的方法 `connat、push` 性能比 `展开运算符(...)` 的性能高 ### 小结 在 `Chrome版本94.0.4606.81` 、 `Firefox版本93.0 (64 位)` 的浏览器下 - 对象合并，数组合并，`Object.assign、connat` 的性能会比 `展开运算符“...”` 的性能高 - `Object.assign` 会触发 `Proxy/Object.definedProperty` 的 `set` 方法，`展开运算符“...”` 不会触发 - `Object.assign` 和 `展开运算符` 都是浅拷贝 - 合并对象、数组的时候，`展开运算符放在前面的性能比放在后面的性能高` - 不定参数(`function (a, ...b) {}`)的时候，有自己的使用方式 - 在拷贝的情况下, `展开运算符“...”` 比 `Object.assign` 性能高
Pre:
antd的Upload图片回显问题
Next:
获取dom到body左侧和顶部的距离
0
likes
5
Weibo
Wechat
Tencent Weibo
QQ Zone
RenRen
Submit
Sign in
to leave a comment.
No Leanote account?
Sign up now.
0
comments
More...
Table of content
admin
No Leanote account? Sign up now.