What is Blink?

Key Takeaways

[Music] foreign you may have heard of chromium well this is the open source browser project on which Chrome and some other browsers are built and chromium has several components blink is the rendering engine used by chromium and the rendering engine of a web browser is the part of the software that's used to transform HTML CSS and JavaScript along with you know images and other resources into web pages that you can view and interact with I'm Sam Dutton and in this video I'll give you an overview of what blink is and how it works so the blink rendering engine has a lot of work to do web pages usually include a variety of different resources potentially you know from multiple Origins and that's called composability and you know it's one of the web's special powers first of all blink needs to retrieve HTML CSS JavaScript to images and any other resources that a web page asks for and to do that blink needs to manage interactions with the network stack in chromium and the underlying operating system so as soon as CSS and HTML is loaded blink can begin to transform that code it's in the form of text into a representation that it can work with and that's called parsing JavaScript also needs to be parsed and then executed and once all that's done blink can then begin the work of laying out and displaying web pages that you can view and interact with and this is called rendering so at a high level rendering has several tasks a rendering engine displays web page content on your screen animates visual effects enables scrolling and Route input from users to scripts and underlying subsystems now as you can see there are multiple stages in the pipeline of rendering tasks I won't go into the details here but bear in mind that some stages can be skipped if they're not needed for example scrolling can skip layout pre-paint and paint now for the job of interacting with the underlying Graphics Hardware on your device you know your phone or laptop or whatever blink uses the skier Graphics engine rather than try to support multiple different operating systems and devices all on its own and keep up with platform changes skier uses a graphics Library that's built for the job such as opengl or Vulcan or DirectX so the graphics Library used by skier depends on the platform it's running on such as Android on mobile or Windows on desktop for example and you can find out a lot more about how rendering Works in Chrome in the Chrome University video life of a pixel and there's an excellent article from the Chrome rendering team as well okay so enough about rendering let's go back to JavaScript for a moment so to parse and execute JavaScript and webassembly code blink uses V8 V8 is the open source engine developed by the chromium project to run JavaScript and webassembly code in Chrome and by the way in case you're wondering webassembly abbreviated as wasm is a binary format for code which can be run even faster than JavaScript V8 makes it possible for a developer to use JavaScript or webassembly code to access the capabilities of the the underlying browser for example to manipulate the document object model which is the representation that blink builds from HTML code V8 uses a number of techniques that make it very fast and efficient in fact the speed and capability of JavaScript engines like V8 have transformed the web lots of things that used to be impossible on the web because they were you know too slow or too memory hungry are now commonplace V8 needs to process JavaScript in accordance with the JavaScript standard which is known as ecmascript in fact the point a web engines like blink is to interoperably implement web standards that way developers and users can be confident that web pages work well no matter what browser they're using for example blink interoperably implements web standards for HTML CSS JavaScript webassembly and more but let's take a closer look at the HTML standard if you look at the specifications for each HTML element you'll see a section that defines the Dom interface this is written in a language called Web IDL web interface definition language and the web IDL in this section defines how a developer should be able to use JavaScript to interact with an element this definition is known as an interface and in this example it's for an image element web IDL is a standardized way of describing functional interfaces like those that make up most web standards to implement a feature Engineers put that web IDL code in a file and this automatically gets transformed by Blink to provide an interface to Developers for that feature once the interface is defined with web IDL Engineers can build the implementations that respond to interface calls blink also makes use of lots of fantastic third-party libraries for example webgl is used to render interactive 2D and 3D graphics libraries like webgl are highly optimized and carefully tested and they give blink access to important features and functionality you know without needing to reinvent the wheel so the webgl IDL is defined and the blink Engineers connect that web interface with code and libraries under the hood that know how to render things so all in all to sum up all those components make up blink and blink is the rendering engine used by the open source web browser chromium and you can actually download and run chromium as your browser if you want but be aware that Chrome adds some really important features for example Chrome adds proprietary software for decoding audio and video files known as codecs Chrome can report errors if users give permission and chrome provides a number of user agent features like password management shared history bookmarks and more using your Google account but best of all I think Chrome downloads updates automatically Chrome will update automatically you know if you restart but if you do see that update button make sure to click it and relaunch Chrome also goes through rigorous additional testing processes through its release channels Chrome Canary Chrome Dev Chrome Beta And Chrome stable you can find out lots more about that from our video what are Chrome release channels now you might be wondering does Chrome use Blink everywhere on all operating systems and devices well nearly Chrome on Windows Linux and Mac on desktop use Blink and on Android and on Chromebooks of course however on iOS so on iPads and iPhones it's currently Apple's policy that all browsers have to use the webkit rendering engine and here's a little history webkit was actually a fork of another project KDE which goes all the way back to 1998. in fact Safari and chromium initially were both based on webkit now the problem was the chromium project used a different multi-process software architecture and you know maintaining two separate architectures in one code base was just becoming problematic chromium also wanted to use features that weren't being built into webkit so starting from version 28 Chrome Engineers decided to Begin work on their own rendering engine they forked their code from webkit and they called it blink rumor has it in fact that blink was named after the blink tag that was available in the Netscape Navigator browser to make text blink on and off yeah classy uh anyway to sum up Chrome Microsoft Edge Opera Vivaldi Brave and other chromium-based browsers and Frameworks use Blink Safari and some other browsers use webkit along with all browsers including Chrome on iOS Firefox uses a rendering engine called gecko anyway enough history that's the basics of blink to find out more take a look at our article you might also want to take a look at our video what our blink intents which describes how new features make their way into blink so thanks for watching and be sure to check out the other videos in the Chrome Concepts series [Music] [Applause] [Music] thank you foreign [Music]