From 6c00e75868a5aec3b4952965416aacefa805aa2e Mon Sep 17 00:00:00 2001 From: andycall Date: Tue, 2 Jan 2024 17:19:57 +0800 Subject: [PATCH] doc: add webf 2023 recap. --- website/blog/2024-01-02-webf-2023/index.md | 237 ++++++++++++++++++ .../2024-01-02-webf-2023/windows_support.png | Bin 0 -> 38350 bytes website/blog/authors.yml | 25 ++ website/docusaurus.config.js | 10 +- 4 files changed, 267 insertions(+), 5 deletions(-) create mode 100644 website/blog/2024-01-02-webf-2023/index.md create mode 100644 website/blog/2024-01-02-webf-2023/windows_support.png create mode 100644 website/blog/authors.yml diff --git a/website/blog/2024-01-02-webf-2023/index.md b/website/blog/2024-01-02-webf-2023/index.md new file mode 100644 index 0000000000..28461b5dbf --- /dev/null +++ b/website/blog/2024-01-02-webf-2023/index.md @@ -0,0 +1,237 @@ +--- +slug: welcome +title: WebF 2023 Recap +authors: [ andycall ] +tags: [ Recap ] +--- + +Unnoticeably, it has been a year and a half since WebF separated from the Kraken project and was established. During +this time, we've been busy maintaining the community team and updating the code under various prompts. + +Today, through this article, we want to update everyone on what we have done from the establishment of WebF in July 2022 +to now, and what we are still lacking to achieve our final goal. + +The last official version of Kraken, [version 0.11](https://github.com/openkraken/kraken/releases/tag/0.11.0), was +released in April 2022. The subsequent versioning of WebF +continues this setting, so the first official version of WebF +is [0.12.0](https://github.com/openwebf/webf/releases/tag/0.12.0), released in August 2022. However, most updates +have been concluding the work of Kraken before its maintenance stopped. + +The real updates for WebF, starting from 0.13.0, are as follows: + +## 0.13.0 + +In the second half of 2022, WebF had two main tasks: a complete overhaul and renovation of the bad parts of the existing +Kraken, which, while solving some stubborn problems, significantly improved the performance of some modules. Another +task was to cultivate a new community development team, through bi-weekly intensive sharing sessions, to allow new +members to quickly familiarize themselves with the original Kraken project code and join in the project iteration. + +After four months of uninterrupted development and iteration, the first major version update of WebF brought stunning +improvements: + +### 2x-5x performance improvement in DOM API + +Complete rewriting of all Kraken's existing Binding & DOM code + +Reimplementation of the DOM tree using a double-linked list as the core data structure, significantly improving the +performance of DOM node operations: + ++ Node.appendChild achieved a 2x performance improvement ++ Node.insertBefore achieved a 5x performance improvement + +### Designed a memory management mechanism based on QuickJS, significantly improving stability + +In the past, the C++ code in Kraken used manual memory management for the DOM tree and JavaScript API, which was prone +to memory bugs. + +Facing the support of over a hundred DOM APIs, manual maintenance was undoubtedly a breeding ground for +bugs. In the new version's reconstruction, we customized a fully automatic memory management mechanism for the C++ DOM +implementation based on the characteristics of QuickJS — tying the life cycle of JavaScript objects to C++ objects, and +automatically completing the creation and destruction of related resources through QuickJS GC. + +This memory management mechanism, built on QuickJS GC, prevented any C++ DOM crashes in various special scenarios +throughout 2023. + +### CSS Selector & Animation Support + +In the Kraken era, front-end developers could only control styles through inline styles. After WebF was established, we +changed the project's direction to support CSS selectors directly like browsers. + +Thanks to [devjiangzhou](https://github.com/devjiangzhou)'s strong support, +his first version directly supported all common selectors and nearly 10 pseudo-classes. + +With this foundation, front-end developers can influence the style of DOM elements by introducing a piece of CSS code +through or