{"id":32465,"date":"2021-05-13T16:00:01","date_gmt":"2021-05-13T20:00:01","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=32465"},"modified":"2021-05-12T17:10:13","modified_gmt":"2021-05-12T21:10:13","slug":"google-docs-switching-from-dom-to-canvas","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2021\/05\/13\/google-docs-switching-from-dom-to-canvas\/","title":{"rendered":"Google Docs Switching From DOM to Canvas"},"content":{"rendered":"

Google<\/a> (via Hacker News<\/a>):<\/p>\n

\n

We’re updating the way Google Docs renders documents. Over the course of the next several months, we’ll be migrating the underlying technical implementation of Docs from the current HTML-based rendering approach to a canvas-based<\/a> approach to improve performance and improve consistency in how content appears across different platforms.<\/p>\n<\/blockquote>\n\n

Steve Newman<\/a>:<\/p>\n

Speaking as one of the original three authors of Google Docs (Writely), but zero involvement in this project (I left Google in 2010): I’m seeing a lot of comments asking how JavaScript-on-Canvas could possibly outperform the highly optimized native code built into the browser engines. It’s been a long time since I’ve really been involved in browser coding, but having written both Writely and, farther back, several native-app word processing engines, here are some thoughts.<\/p>

Word processors have extremely specific requirements for layout, rendering, and incremental updates. I’ll name just two examples. First, to highlight a text selection in mixed left-to-right \/ right-to-left text, it’s necessary to obtain extremely specific information regarding text layout; information that the DOM may not be set up to provide. Second, to smoothly update as the user is typing text, it’s often desirable to “cheat” the reflow process and focus on updating just the line of text containing the insertion point. (Obviously browser engines support text selections, but they probably don’t expose the underlying primitives the way a word processor would need. Similarly, they support incremental layout + rendering, but probably not specifically optimized in the precise way a word processor would need.)<\/p>

Modern browser engines are amazing feats of engineering, but the feature set they provide, while enormous, is unlikely to exactly match the exacting requirements of a WYSIWYG word processor. As soon as your requirements differ even slightly from the feature set provided, you start tipping over into complex workarounds which impact performance and are hell on developer productivity and application stability \/ compatibility.<\/p><\/blockquote>","protected":false},"excerpt":{"rendered":"

Google (via Hacker News): We’re updating the way Google Docs renders documents. Over the course of the next several months, we’ll be migrating the underlying technical implementation of Docs from the current HTML-based rendering approach to a canvas-based approach to improve performance and improve consistency in how content appears across different platforms. Steve Newman: Speaking […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2021-05-13T20:00:09Z","apple_news_api_id":"48e4428a-518c-4668-9ddc-83b6640b9750","apple_news_api_modified_at":"2021-05-13T20:00:09Z","apple_news_api_revision":"AAAAAAAAAAD\/\/\/\/\/\/\/\/\/\/w==","apple_news_api_share_url":"https:\/\/apple.news\/ASORCilGMRmid3IO2ZAuXUA","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[610,339,346,138,71,96,892],"class_list":["post-32465","post","type-post","status-publish","format-standard","hentry","category-technology","tag-google-docs","tag-html","tag-javascript","tag-optimization","tag-programming","tag-web","tag-word-processing"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/32465","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=32465"}],"version-history":[{"count":1,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/32465\/revisions"}],"predecessor-version":[{"id":32466,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/32465\/revisions\/32466"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=32465"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=32465"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=32465"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}