[v3.8.6] Use array.forEach instead of `for of` to optimize code size #18112

dumganhar · 2025-01-02T10:32:07Z

Babel compiles

class Foo {
  arr = [1, 2, 3, 4];
}
const foo = new Foo();
for (const e of foo.arr) {
  console.log(e);
}

to

var Foo = function Foo() {
  _defineProperty(this, "arr", []);
};
for (var _iterator = _createForOfIteratorHelperLoose(arr), _step; !(_step = _iterator()).done;) {
  var e = _step.value;
  console.log(e);
}

JSBenchMark ( Array Iteration)

Paste the following test code to https://jsbench.me/

Setup Javascript

class Foo {
  arr = [];
}

var foo = new Foo();

for (var i=0, t=4000; i<t; i++) {
    foo.arr.push(Math.round(Math.random() * t))
}

function _createForOfIteratorHelperLoose(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (t) return (t = t.call(r)).next.bind(t); if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var o = 0; return function () { return o >= r.length ? { done: !0 } : { done: !1, value: r[o++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }

for of

var count = 0;
for (const e of foo.arr) {
  count += e;
}

for babel iterator

var count = 0;
for (var _iterator = _createForOfIteratorHelperLoose(foo.arr), _step; !(_step = _iterator()).done;) {
  var e = _step.value;
  count += e;
}

for index

var count = 0;
const len = foo.arr.length;
const arr = foo.arr;
for (let i = 0; i < len; ++i) {
	const e = arr[i];
  count += e;
}

forEach

var count = 0;
foo.arr.forEach((e)=> {
	count += e;
});

Result (Array Iteration)

企业微信截图_a002256a-a99f-4907-89d7-b1983eab5b30

JSBenchMark ( Object Iteration)

Setup Javascript

function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var Foo = function Foo() {
  _defineProperty(this, "obj", {});
};
var foo = new Foo();
for (var i = 0, t = 4000; i < t; i++) {
  foo.obj['hello' + i] = Math.round(Math.random() * t);
}

var count = 0;
var obj = foo.obj;

[object] for in

for (var key in obj) {
  var v = obj[key];
  count += v;
}

[object] for in and check whether own property

for (const key in obj) {
  if (!Object.prototype.hasOwnProperty.call(obj, key)) continue;
  const v = obj[key];
  count += v;
}

[object] for index and Object.keys

for (var _i = 0, _Object$keys = Object.keys(obj); _i < _Object$keys.length; _i++) {
  var key = _Object$keys[_i];
  var v = obj[key];
  count += v;
}

[object] for of

for (const key of Object.keys(obj)) {
  const v = obj[key];
  count += v;
}

Result (Object Iteration)

Re: #

Changelog

Continuous Integration

This pull request:

needs automatic test cases check.

Manual trigger with @cocos-robot run test cases afterward.
does not change any runtime related code or build configuration

If any reviewer thinks the CI checks are needed, please uncheck this option, then close and reopen the issue.

Compatibility Check

This pull request:

changes public API, and have ensured backward compatibility with deprecated features.
affects platform compatibility, e.g. system version, browser version, platform sdk version, platform toolchain, language version, hardware compatibility etc.
affects file structure of the build package or build configuration which requires user project upgrade.
introduces breaking changes, please list all changes, affected features and the scope of violation.

github-actions · 2025-01-02T10:46:16Z

👍 Package size ⤵ -1216 bytes, old: 5280335, new: 5279119

Interface Check Report

This pull request does not change any public interfaces !

dumganhar · 2025-01-03T08:07:19Z

@cocos-robot run test cases

dumganhar · 2025-01-03T08:11:17Z

cocos/render-scene/core/render-scene.ts

-        }
-        this._cameras.splice(0);
+        });
+        this._cameras.length = 0;


Use this._cameras.length = 0; instead of this._cameras.splice(0); to improve a little performance.

cocos/rendering/custom/scene-culling.ts

github-actions · 2025-01-03T09:22:11Z

@dumganhar, Please check the result of run test cases:

Test Platform: PR-Test
Editor Version: v3.8.6
Task Result: FAIL
Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/d765a923-f631-4711-8f8f-bc610a9a4778/-1
GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/12594687417

Task Details

Platform	build	boot	runned	crashScene	FailScene
web-mobile	PASS	PASS	FAIL	dynamic-mesh	dynamic-mesh
ios	PASS	PASS	PASS
mac	PASS	PASS	PASS

github-actions · 2025-01-03T09:22:12Z

@dumganhar, Please check the result of run test cases:

Test Platform: PR-Test
Editor Version: v3.8.6
Task Result: FAIL
Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/f1ea129f-21e6-43ae-8fe6-5df8eb8563c7/-1
GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/12594687417

Task Details

Platform	build	boot	runned	crashScene	FailScene
windows	PASS	PASS	PASS
android	PASS	PASS	PASS
wechatgame	PASS	PASS	FAIL	dynamic-mesh	dynamic-mesh

cocos/2d/assets/bitmap-font.ts

cocos/core/data/garbage-collection.ts

dumganhar · 2025-01-09T02:48:55Z

cocos/particle/animator/optimized-curve.ts

-        this.optimizedKeys = new Array<geometry.OptimizedKey>(); // the i-th optimezed key stores coefficients of [i,i+1] segment in the original curve,so if the time of last key of the original key is 1,the last key won't be kept in the opt curve.
-        this.integral = new Array<number>();      // the integral of the curve between 0 and corresponding key,the i-th integral corresponds to the i+1-th key in optimizedKeys (because the integral of the first key is always zero,the first key won't be stored)
+        this.optimizedKeys = []; // the i-th optimezed key stores coefficients of [i,i+1] segment in the original curve,so if the time of last key of the original key is 1,the last key won't be kept in the opt curve.
+        this.integral = [];      // the integral of the curve between 0 and corresponding key,the i-th integral corresponds to the i+1-th key in optimizedKeys (because the integral of the first key is always zero,the first key won't be stored)


[] contains less code than new Array().

cocos/2d/assets/sprite-atlas.ts

cocos/particle/renderer/trail.ts

dumganhar · 2025-01-09T07:45:56Z

@cocos-robot run test cases

github-actions · 2025-01-09T10:02:47Z

@dumganhar, Please check the result of run test cases:

Test Platform: PR-Test
Editor Version: v3.8.6
Task Result: FAIL
Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/bfe420cc-3840-451e-8441-eb4310ec6668/-1
GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/12685647120

Task Details

Platform	build	boot	runned	crashScene	FailScene
web-mobile	PASS	PASS	FAIL	dynamic-mesh	dynamic-mesh
ios	PASS	PASS	PASS
mac	PASS	PASS	PASS

github-actions · 2025-01-09T10:02:48Z

@dumganhar, Please check the result of run test cases:

Test Platform: PR-Test
Editor Version: v3.8.6
Task Result: FAIL
Task URL: https://cctest.cocos.org/#/reportview/PR-TEST/f55f5104-00f2-4d4d-83e6-fe5a001d8768/-1
GitHub Action: https://github.com/cocos/cocos-engine/actions/runs/12685647120

Task Details

Platform	build	boot	runned	crashScene	FailScene
windows	PASS	PASS	PASS
android	PASS	PASS	PASS
wechatgame	PASS	PASS	FAIL	dynamic-mesh	dynamic-mesh

… a PR ( cocos#18112 ) in v3.8.6.

… a PR ( #18112 ) in v3.8.6. (#18188)

[TEST][v3.8.6] Test code size between for of and for index.

dcb8c88

dumganhar marked this pull request as draft January 2, 2025 10:32

dumganhar added 2 commits January 2, 2025 18:52

Update root.ts

9f4bd3a

Don't use for of, continue...

a104a54

dumganhar changed the title ~~[TEST][v3.8.6] Test code size between for of and for index.~~ [TEST][v3.8.6] Test code size between for of and for index, forEach. Jan 3, 2025

dumganhar added 8 commits January 3, 2025 11:09

Use array.find instead of for of in create-mesh.ts

adc6d80

more forEach and for index.

4c36ec3

More forEach, reduce, some

3868aea

as Model[].

b899177

Update format

40db4c8

Use [] instead of new Array.

afbb14f

Update render-scene.ts

7333990

More [] instead of new Array.

c4f4f53

dumganhar commented Jan 3, 2025

View reviewed changes

cocos/rendering/custom/scene-culling.ts Show resolved Hide resolved

Optimize finalizationRegistryCallback

afc7dfd

dumganhar requested a review from minggo January 9, 2025 02:31

dumganhar marked this pull request as ready for review January 9, 2025 02:31

dumganhar changed the title ~~[TEST][v3.8.6] Test code size between for of and for index, forEach.~~ [v3.8.6] Use array.forEach instead of for of to optimize code size Jan 9, 2025

dumganhar commented Jan 9, 2025

View reviewed changes

cocos/2d/assets/bitmap-font.ts Show resolved Hide resolved

dumganhar commented Jan 9, 2025

View reviewed changes

cocos/core/data/garbage-collection.ts Show resolved Hide resolved

dumganhar commented Jan 9, 2025

View reviewed changes

minggo reviewed Jan 9, 2025

View reviewed changes

cocos/2d/assets/sprite-atlas.ts Show resolved Hide resolved

minggo approved these changes Jan 9, 2025

View reviewed changes

star-e reviewed Jan 9, 2025

View reviewed changes

cocos/particle/renderer/trail.ts Show resolved Hide resolved

star-e approved these changes Jan 9, 2025

View reviewed changes

dumganhar merged commit e400883 into cocos:v3.8.6 Jan 10, 2025
12 checks passed

dumganhar added a commit to dumganhar/cocos-engine that referenced this pull request Jan 14, 2025

[v3.8.6] Fix attributes variable conflict in mesh.ts. It's a bug from…

bd58721

… a PR ( cocos#18112 ) in v3.8.6.

dumganhar mentioned this pull request Jan 14, 2025

[v3.8.6] Fix attributes variable conflict in mesh.ts. It's a bug from a PR ( #18112 ) in v3.8.6. #18188

Merged

6 tasks

dumganhar added a commit that referenced this pull request Jan 14, 2025

[v3.8.6] Fix attributes variable conflict in mesh.ts. It's a bug from…

1d61e55

… a PR ( #18112 ) in v3.8.6. (#18188)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[v3.8.6] Use array.forEach instead of `for of` to optimize code size #18112

[v3.8.6] Use array.forEach instead of `for of` to optimize code size #18112

dumganhar commented Jan 2, 2025 •

edited

Loading

github-actions bot commented Jan 2, 2025 •

edited

Loading

dumganhar commented Jan 3, 2025

dumganhar Jan 3, 2025

github-actions bot commented Jan 3, 2025

github-actions bot commented Jan 3, 2025

dumganhar Jan 9, 2025

dumganhar commented Jan 9, 2025

github-actions bot commented Jan 9, 2025

github-actions bot commented Jan 9, 2025

[v3.8.6] Use array.forEach instead of for of to optimize code size #18112

[v3.8.6] Use array.forEach instead of for of to optimize code size #18112

Conversation

dumganhar commented Jan 2, 2025 • edited Loading

JSBenchMark ( Array Iteration)

Setup Javascript

for of

for babel iterator

for index

forEach

Result (Array Iteration)

JSBenchMark ( Object Iteration)

Setup Javascript

[object] for in

[object] for in and check whether own property

[object] for index and Object.keys

[object] for of

Result (Object Iteration)

Changelog

Continuous Integration

Compatibility Check

github-actions bot commented Jan 2, 2025 • edited Loading

👍 Package size ⤵ -1216 bytes, old: 5280335, new: 5279119

Interface Check Report

dumganhar commented Jan 3, 2025

dumganhar Jan 3, 2025

Choose a reason for hiding this comment

github-actions bot commented Jan 3, 2025

Task Details

github-actions bot commented Jan 3, 2025

Task Details

dumganhar Jan 9, 2025

Choose a reason for hiding this comment

dumganhar commented Jan 9, 2025

github-actions bot commented Jan 9, 2025

Task Details

github-actions bot commented Jan 9, 2025

Task Details

[v3.8.6] Use array.forEach instead of `for of` to optimize code size #18112

[v3.8.6] Use array.forEach instead of `for of` to optimize code size #18112

dumganhar commented Jan 2, 2025 •

edited

Loading

github-actions bot commented Jan 2, 2025 •

edited

Loading