Bd+ Decoding Vlc

0 views
Skip to first unread message

Jonathon Burnside

unread,
Aug 4, 2024, 3:37:40 PM8/4/24
to pecmileti
Thedecoding property of the HTMLImageElement interface provides a hint to the browser as to how it should decode the image. More specifically, whether it should wait for the image to be decoded before presenting other content updates or not.

The decoding property provides a hint to the browser as to whether it should perform image decoding along with other tasks in a single step ("sync"), or allow other content to be rendered before this completes ("async"). In reality, the differences between the two values are often difficult to perceive and, where there are differences, there is often a better way.


For images that are inserted into the DOM inside the viewport, "async" can result in flashes of unstyled content, while "sync" can result in small amounts of jank. Using the HTMLImageElement.decode() method is usually a better way to achieve atomic presentation without holding up other content.


A better solution, however, is to use the HTMLImageElement.decode() method to solve this problem. It provides a way to asynchronously decode an image, delaying inserting it into the DOM until it is fully downloaded and decoded, thereby avoiding the empty image problem mentioned above. This is particularly useful if you're dynamically swapping an existing image for a new one, and also prevents unrelated paints outside of this code from being held up while the image is decoding.


The decoding property provides a hint to the browser as to whether it should perform image decoding along with other tasks in a single step (\"sync\"), or allow other content to be rendered before this completes (\"async\"). In reality, the differences between the two values are often difficult to perceive and, where there are differences, there is often a better way.


For images that are inserted into the DOM inside the viewport, \"async\" can result in flashes of unstyled content, while \"sync\" can result in small amounts of jank. Using the HTMLImageElement.decode() method is usually a better way to achieve atomic presentation without holding up other content.


Marnie: Oh tic-tac-toe is a fun game. We can play tic-tac-toe with putting words in each square and he reads it before he gets to play, but right now I just want to show them how you do this activity. Can you show them?


So, what he was practicing was Blend As You Read, and he's pretty good at it so you didn't get to see me coach him how to do it as you go, but I want you to consider that this approach will save you time, particularly with your strugglers.


Well that works for some kids.But it's not a fool-proof decoding strategy. Especially if they have good memories, they can remember all of that. I think what happens a lot of times, even if they're saying /s/ /u/ /n/ in their head, they're putting the sounds together as they go.


You hold out the vowel and you hold out the consonant /hellllllllll/ and you gradually reveal the consonants, so the student is Blending As You Read; that's the key decoding strategy here.


Recently I had a student who is a fourth grade student, and she was able to read seventh grade material but she was still struggling in school and she was making mistakes with some of her reading. Her pronunciation, missing words, skipping words, and making some sloppy errors that her mother didn't like and also her teacher said that she wasn't comprehending and lo and behold, her Blend As You Read was very very poor, which matters especially when you read multi-syllable words.


This young girl had such a gap in her decoding and her blending, that when we worked on this activity and Switch It and a couple of other things like Sort It, she jumped ahead really quickly. After six sessions, her word attack or ability to read nonsense words, went up two grade levels and that was largely because of this strategy, along with the Switch It strategy.


So if you are coming here and you haven't tried that strategy, I'd love for you to give it a try. There's more information in the blog post about Read It. In the activity Read It, we teach the Blend As You Read strategy, so it's a strategy the student can use with Word Work opportunities, but, of course, really we want them to transfer it into real reading and that is my main point for today.


If you have seen this young boy in earlier videos learn how to do Switch It, then Read It today, we're demonstrating the second thing that he learned to help move him along as a reader. Read It and the Blend As You Read strategy is the second most important tool in my toolkit or my arsenal for being effective an reading teacher.


Thanks for tuning in and if you have any questions, let me know. Also, if you think this would be helpful for a colleague, I would love for you to forward this post to them, so that they can get access to this information. If you think this information is unusual and it may be helpful, then maybe some of your peers will as well.


Currently, our ASM policies are configured with bare byte decoding check activated.However, this poses problems, as some of our legitimate French pages are flagged with this error. Specifically, it complains about vowels with accents (like ) which are not part of the ASCII character set (the policy is UTF-8)


I've been trying to figure out what this attribute actually does for a while now. Not full time of course (I'm not that sad! Honestly I'm not! Really!), but every so often I read another article where this comes up, or see advice to add this to massively boost image performance and I get curious again as to what it actually does.


In order to aid the user agent in deciding whether to perform synchronous or asynchronous decode, the decoding attribute can be set on img elements. The possible values of the decoding attribute are the following image decoding hint keywords:


Err... thanks for the technical explanation. But what does this actually mean in real life? Which setting should you use? Does it even matter? And if it does, why don't those clever browser engineers just set it to the best setting?


Seriously, that's just not how browsers work! How many times have you seen a page load without images being there yet? Loads of times right? Images are not typically render-blocking and if they were the web would be a very slow and painful place to be.


I'm not going to link to the article I pulled this example from, but it's the first one that comes up when you search for "what does decoding=async do" so that's depressing. Hopefully this post will displace that if I pray to the SEO Gods enough.


Modern browsers all decode images off the main thread, and have done so for a while now, leaving it free for other stuff. And any older, or more simpler, browsers out there that do still decode on the main thread are almost certainly not going to support this attribute. So, in theory, you are not going to free up the main thread with this attribute.


Maybe this wasn't the case when the attribute was originally proposed (in which case it would have been more important than it was now), I'm not sure, but browser engineers tell me it's definitely not the case now.


What's that you say? What's the difference? Well the main thread is where all the critical stuff happens in browsers - all your JavaScript, and also lots of browser processing to layout the page and stuff. Doing it in one place makes lots of nice things on the web work a lot simpler than if there was more parallelisation. But the downside of it is that hogging the main thread for any intensive stuff is very frowned upon and leads to serious performance issues. So if you've an expensive calculation (say decoding an image!) then ideally you don't want to do it on the main thread and want to offload it to its own thread, or if you can't do that, then chunk it up and allow other critical processes to get in on some main thread time. Browsers realised this a while back and so moved image decoding off the main thread leaving it free to run all that JavaScript you love to add to your pages, or all the other stuff.


But after you do all your lovely processing, then you will likely want to update your page. So for image decoding you'll want to display the image. If you hold up all rendering (which is what decoding=sync can do), then some might say you have effectively blocked the main thread. They're wrong as other stuff can often happen in parallel, but if the effect of that other stuff processing can't be displayed, then it can appear the main thread isn't doing what it's supposed to.


So it might be a bit of a pedantic point, but given how critical the main thread is to do other stuff, I still think it's important. Plus I'm a pedant. If decoding happened on the main thread, and then that other stuff had to happen after and only then it could be rendered it would be even slow. Anyway, I'll get back to why this often isn't as important a thing (or that it might be!), later...


However, even after all that pedantry, for images in the main screen we shall see they can also actually block the main thread, even if the decoding is happening off the main thread! It's a little complicated so we'll get back to this later.


Adding this attribute will not make images display faster (though there's some nuance here, mostly about JavaScript-inserted images). This attribute is about allowing other content to potentially display faster (including other images - so there's the nuance).

3a8082e126
Reply all
Reply to author
Forward
0 new messages