Prismic | What's the difference between layout painting and compositing? ft Bruno Simon | Prismic @Prismic | Uploaded October 2021 | Updated October 2024, 2 hours ago.
Sam had an interview question for Bruno Simon: What's the difference between layout painting and compositing?
Answer:
- Layout: Calculates the size and position of each DOM element to be displayed on the screen. The layout of elements on a Web page is relative, which means a single element can affect others. For example, in case there is a change in the width of the element, the widths of its child and grandchild elements get affected. Therefore, the layout process often gets involved for the browser.
- Paint: Essentially, painting is the process of filling in pixels. It requires painting of text, colors, images, borders, shadows, and other visual effects of a DOM element.
- Composite: Once Paint is complete, the browser combines all the layers into one layer in the correct order and displays them on the screen. This process is especially important for pages with overlapping elements as the incorrect layer composition order may result in an abnormal display of the elements.
Bruno Simon twitter: twitter.com/bruno_simon
---
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a full website with Next.js 13, Prismic, Tailwind and Typescript:
youtu.be/nfZu56KsK_Q
► [Tutorial] Build a full website with Nuxt 3 and Prismic's new Page Builder:
youtu.be/8GmfcbuYOWE
► [Starters] Try Slice Machine on Nuxt: prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: prismic.club/nextjs-starters
► [Learn more about Slice Machine]: prismic.club/slice-machine
---
► Find us also on:
Twitter: twitter.com/prismicio
Instagram: instagram.com/prismicio
LinkedIn: linkedin.com/company/prismic-io
► [Who are we?] : Prismic is a headless Website Builder, for Next.js and Nuxt.js developers.
---
📍 00:00 Intro
📍 00:39 What is layout?
📍 03:05 What is painting?
📍 04:49 What is compositing
📍 11:43 How to simply animation or transform
#Prismic #BrunoSimon #WebDevelopment
Sam had an interview question for Bruno Simon: What's the difference between layout painting and compositing?
Answer:
- Layout: Calculates the size and position of each DOM element to be displayed on the screen. The layout of elements on a Web page is relative, which means a single element can affect others. For example, in case there is a change in the width of the element, the widths of its child and grandchild elements get affected. Therefore, the layout process often gets involved for the browser.
- Paint: Essentially, painting is the process of filling in pixels. It requires painting of text, colors, images, borders, shadows, and other visual effects of a DOM element.
- Composite: Once Paint is complete, the browser combines all the layers into one layer in the correct order and displays them on the screen. This process is especially important for pages with overlapping elements as the incorrect layer composition order may result in an abnormal display of the elements.
Bruno Simon twitter: twitter.com/bruno_simon
---
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a full website with Next.js 13, Prismic, Tailwind and Typescript:
youtu.be/nfZu56KsK_Q
► [Tutorial] Build a full website with Nuxt 3 and Prismic's new Page Builder:
youtu.be/8GmfcbuYOWE
► [Starters] Try Slice Machine on Nuxt: prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: prismic.club/nextjs-starters
► [Learn more about Slice Machine]: prismic.club/slice-machine
---
► Find us also on:
Twitter: twitter.com/prismicio
Instagram: instagram.com/prismicio
LinkedIn: linkedin.com/company/prismic-io
► [Who are we?] : Prismic is a headless Website Builder, for Next.js and Nuxt.js developers.
---
📍 00:00 Intro
📍 00:39 What is layout?
📍 03:05 What is painting?
📍 04:49 What is compositing
📍 11:43 How to simply animation or transform
#Prismic #BrunoSimon #WebDevelopment
