Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chain elementStart/elementEnd instructions #44994

Closed
wants to merge 2 commits into from

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Feb 7, 2022

Split up into two commits to make it easier to review:

  1. refactor(compiler): rework instruction generation logic for improved flexibility
    Previously the logic for generating chained instructions was somewhat rigid, because we had to collect all of the calls ahead of time and then call one of the chained instruction helpers. This doesn't work for something like elementStart, because we have to descend into other elements that could add to the chain.

These changes refactor the code so that we collect the list of instructions in a flat array and we do the chaining only once at the end when we have the entire instruction set for the code block.

The new approach has the advantage of being (almost) entirely configuration-based via the CHAINABLE_INSTRUCTIONS array and being more flexible in allowing us to chain instructions that span across elements.

  1. perf(compiler): chain element start/end instructions

In templates with several levels of nested nodes, it's common for several elementStart/elementEnd instructions to show up in a row which can be optimized away.

These changes add chaining support for elementStart, elementEnd, elementContainerStart and elementContainerEnd to shave off some bytes when possible.

@alfaproject
Copy link
Contributor

OOC don't compression algorithms already take care of this?

Can it be opt-in at least? I think for debugging the ability to step on each call is easier with the current way

@crisbeto
Copy link
Member Author

crisbeto commented Feb 7, 2022

A while ago when we first started chaining instructions, we had a testing setup that showed it compressing slightly better with the chained instructions. Unfortunately, I haven't been able to dig it up, but a quick test against the interpolation_nested_context.js example showed that the template is 2 bytes smaller after gzipping. As for debugging, hasn't this been the case already? The majority of instructions have been chained for a long time now.

@crisbeto crisbeto marked this pull request as ready for review February 7, 2022 13:16
@pullapprove pullapprove bot requested a review from atscott February 7, 2022 13:16
@crisbeto crisbeto added action: review The PR is still awaiting reviews from at least one requested reviewer area: compiler Issues related to `ngc`, Angular's template compiler area: performance target: patch This PR is targeted for the next patch release labels Feb 7, 2022
@ngbot ngbot bot modified the milestone: Backlog Feb 7, 2022
@crisbeto
Copy link
Member Author

crisbeto commented Feb 7, 2022

Caretaker note: I'll run a TGP for this tomorrow. It moves around a bunch of code in the template builder and I want to double-check that there are no regressions.

@atscott atscott added action: presubmit The PR is in need of a google3 presubmit and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Feb 7, 2022
Copy link
Contributor

@AndrewKushnir AndrewKushnir left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

packages/compiler/src/render3/view/util.ts Show resolved Hide resolved
…flexibility

Previously the logic for generating chained instructions was somewhat rigid, because we had to collect all of the calls ahead of time and then call one of the chained instruction helpers. This doesn't work for something like `elementStart`, because we have to descend into other elements that could add to the chain.

These changes refactor the code so that we collect the list of instructions in a flat array and we do the chaining only once at the end when we have the entire instruction set for the code block.

The new approach has the advantage of being (almost) entirely configuration-based via the `CHAINABLE_INSTRUCTIONS` array and being more flexible in allowing us to chain instructions that span across elements.
In templates with several levels of nested nodes, it's common for several `elementStart`/`elementEnd` instructions to show up in a row which can be optimized away.

These changes add chaining support for `elementStart`, `elementEnd`, `elementContainerStart` and `elementContainerEnd` to shave off some bytes when possible.
@crisbeto crisbeto added action: merge The PR is ready for merge by the caretaker and removed action: presubmit The PR is in need of a google3 presubmit labels Feb 8, 2022
@crisbeto
Copy link
Member Author

crisbeto commented Feb 8, 2022

Passes TGP, marking as ready to merge.

@dylhunn dylhunn closed this in 8f1f35b Feb 8, 2022
dylhunn pushed a commit that referenced this pull request Feb 8, 2022
In templates with several levels of nested nodes, it's common for several `elementStart`/`elementEnd` instructions to show up in a row which can be optimized away.

These changes add chaining support for `elementStart`, `elementEnd`, `elementContainerStart` and `elementContainerEnd` to shave off some bytes when possible.

PR Close #44994
@dylhunn
Copy link
Contributor

dylhunn commented Feb 8, 2022

This PR was merged into the repository by commit 1b91e10.

dylhunn pushed a commit that referenced this pull request Feb 8, 2022
…flexibility (#44994)

Previously the logic for generating chained instructions was somewhat rigid, because we had to collect all of the calls ahead of time and then call one of the chained instruction helpers. This doesn't work for something like `elementStart`, because we have to descend into other elements that could add to the chain.

These changes refactor the code so that we collect the list of instructions in a flat array and we do the chaining only once at the end when we have the entire instruction set for the code block.

The new approach has the advantage of being (almost) entirely configuration-based via the `CHAINABLE_INSTRUCTIONS` array and being more flexible in allowing us to chain instructions that span across elements.

PR Close #44994
dylhunn pushed a commit that referenced this pull request Feb 8, 2022
In templates with several levels of nested nodes, it's common for several `elementStart`/`elementEnd` instructions to show up in a row which can be optimized away.

These changes add chaining support for `elementStart`, `elementEnd`, `elementContainerStart` and `elementContainerEnd` to shave off some bytes when possible.

PR Close #44994
crapStone pushed a commit to Calciumdibromid/CaBr2 that referenced this pull request Feb 19, 2022
This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@angular/animations](https://github.com/angular/angular) | dependencies | patch | [`13.2.2` -> `13.2.3`](https://renovatebot.com/diffs/npm/@angular%2fanimations/13.2.2/13.2.3) |
| [@angular/common](https://github.com/angular/angular) | dependencies | patch | [`13.2.2` -> `13.2.3`](https://renovatebot.com/diffs/npm/@angular%2fcommon/13.2.2/13.2.3) |
| [@angular/compiler](https://github.com/angular/angular) | dependencies | patch | [`13.2.2` -> `13.2.3`](https://renovatebot.com/diffs/npm/@angular%2fcompiler/13.2.2/13.2.3) |
| [@angular/compiler-cli](https://github.com/angular/angular) | devDependencies | patch | [`13.2.2` -> `13.2.3`](https://renovatebot.com/diffs/npm/@angular%2fcompiler-cli/13.2.2/13.2.3) |
| [@angular/core](https://github.com/angular/angular) | dependencies | patch | [`13.2.2` -> `13.2.3`](https://renovatebot.com/diffs/npm/@angular%2fcore/13.2.2/13.2.3) |
| [@angular/forms](https://github.com/angular/angular) | dependencies | patch | [`13.2.2` -> `13.2.3`](https://renovatebot.com/diffs/npm/@angular%2fforms/13.2.2/13.2.3) |
| [@angular/platform-browser](https://github.com/angular/angular) | dependencies | patch | [`13.2.2` -> `13.2.3`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser/13.2.2/13.2.3) |
| [@angular/platform-browser-dynamic](https://github.com/angular/angular) | dependencies | patch | [`13.2.2` -> `13.2.3`](https://renovatebot.com/diffs/npm/@angular%2fplatform-browser-dynamic/13.2.2/13.2.3) |
| [@angular/router](https://github.com/angular/angular) | dependencies | patch | [`13.2.2` -> `13.2.3`](https://renovatebot.com/diffs/npm/@angular%2frouter/13.2.2/13.2.3) |

---

### Release Notes

<details>
<summary>angular/angular</summary>

### [`v13.2.3`](https://github.com/angular/angular/blob/HEAD/CHANGELOG.md#&#8203;1323-2022-02-16)

[Compare Source](angular/angular@13.2.2...13.2.3)

##### animations

| Commit | Type | Description |
| -- | -- | -- |
| [0050b01b62](angular/angular@0050b01) | perf | made errors in the animations package tree shakeable ([#&#8203;45079](angular/angular#45079)) |

##### compiler

| Commit | Type | Description |
| -- | -- | -- |
| [09f0254bdd](angular/angular@09f0254) | perf | chain element start/end instructions ([#&#8203;44994](angular/angular#44994)) |

##### core

| Commit | Type | Description |
| -- | -- | -- |
| [92cf9fbebe](angular/angular@92cf9fb) | fix | `ViewContainerRef.createComponent` should consult module injector when custom one is provided ([#&#8203;44966](angular/angular#44966)) |

#### Special Thanks

AlirezaEbrahimkhani, Amer Yousuf, Andrew Kushnir, Aristeidis Bampakos, Dario Piotrowicz, Esteban Gehring, Jessica Janiuk, JiaLiPassion, Kristiyan Kostadinov, Mina Hosseini Moghadam, Patrick Cameron, Srdjan Milic, Yousaf Nawaz, dario-piotrowicz, markostanimirovic, mgechev and zuckjet

<!-- CHANGELOG SPLIT MARKER -->

</details>

---

### Configuration

📅 **Schedule**: At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about these updates again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, click this checkbox.

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).

Co-authored-by: cabr2-bot <cabr2.help@gmail.com>
Reviewed-on: https://codeberg.org/Calciumdibromid/CaBr2/pulls/1178
Reviewed-by: Epsilon_02 <epsilon_02@noreply.codeberg.org>
Co-authored-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
Co-committed-by: Calciumdibromid Bot <cabr2_bot@noreply.codeberg.org>
@mihaipanait
Copy link

this caused a lot of pain

TypeError: t.TgZ(...) is not a function
TgZ being ɵɵelementStart()

2022-02-24 15_12_31-localhost_4200 and 4 more pages - Personal - Microsoft​ Edge

the compiler produced something like this, but the ɵɵelementStart was returning null:

2022-02-24 16_06_21-localhost_4200 and 20 more pages - Personal - Microsoft​ Edge

it was fixed after this change:

2022-02-24 20_56_02-Sourcetree

this seems like a breaking change

@JoostK
Copy link
Member

JoostK commented Feb 24, 2022

this seems like a breaking change

@mihaipanait Angular framework packages must be exactly in sync with each other, any other configuration is not supported.

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker area: compiler Issues related to `ngc`, Angular's template compiler area: performance target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

7 participants