Chrome 94 starts webgpu trial, and the 3D rendering and machine learning capabilities of the web are stronger

Cold goose talk 2021-10-14 07:11:01

9 month 21 Officially released on Chrome 94, What are the interesting features ?


For more than 10 years ,Web Technology is advancing by leaps and bounds , among Chrome " , understand Chrome It can help us understand the development trend of the front-end industry .

therefore , I will be 《 great Chrome browser 》 entitled , Yes Chrome The important features of each version of the , At the same time, share some thoughts :

By focusing on Chrome Writing , It can improve my professional ability , It can also improve personal influence . My long-term goal is to 2025 A book about Chrome The book of , After all, publishing your own books is the highest pursuit of every writer .

I'm Han Yan , A programmer who loves to write code and articles , Welcome to my WeChat official account. winter wild goose Talk.


  • Chrome 94 What's the biggest highlight ? The prettiest kid in the village There is no doubt that is WebGPU, It's for Web The application provides direct use GPU The ability of , Can be used to accelerate 3D Rendering and data parallel computing , by Web Applications have opened another window in the field of games and artificial intelligence .WebGPU Supported by various mainstream browsers , So it becomes W3C Standards are only a matter of time . however ,Chrome 94 Just start trying (origin trial), The official release will wait until Chrome 98, The time is about next year 2 month .

  • Chrome 94 When was it released ?2021-09-21

  • Chrome 94 How many features have been updated ?13 individual , You can see the specific features Chrome Platform Status

  • Chrome 94 Which version of V8 engine ?v9.4

  • What are the formal features I'm interested in ?

  • I'm interested in trying (origin trial) What are the features ?

    • WebGPU

    • 103 Early Hints for Navigation

Detailed interpretation


Chrome 94 New trial feature WebGPU, Provides the use of GPU Of Web API, Can be used for image rendering ( such as 3D Rendering ) And data parallel computing ( For example, machine learning ).

WebGPU about Web It is undoubtedly a revolutionary feature , The computer industry is essentially through Moore's law ( Mole is CPU manufacturer Intlel One of the founders of ) And Huang's law ( Huang's family is Huang Renxun ,GPU The founder of NVIDIA , The godfather of the nuclear bomb ) Driven by , The improvement of chip computing power has brought us all previous computer industry revolutions : Personal computer 、 Internet 、 Mobile Internet 、 Artificial intelligence . When GPU Our computing power is getting stronger and stronger , When it becomes more and more important ,Web But can't make good use of , This is clearly unreasonable .

WebGPU This feature corresponds to WebGPU and WebGPU Shading Language this 2 A proposal , from Google、Mozilla as well as Apple Our engineers are responsible for .WebGPU and WebGPU Shading Language The proposals are made by W3C Of GPU for the Web Draft by the working group , The composition of the work is based on 2017, after 4 Year's efforts ,WebGPU Finally started to try , It's not easy !WebGPU The proposal defines Web Use in GPU Of API,WebGPU Shading Language(WGSL) The proposal defines GPU The programming language of the code .WebGPU Got it 4 Big browser giant (Safari,Firefox、Edge) Support for , therefore WebGPU Become formal W3C Standards are only a matter of time .

WebGPU On Chrome 94 Start experimenting with , It is expected that Chrome 98 Official release , The time is about next year 2 month . Such an important feature , Maybe you haven't learned how to use it yet , Trial only 3 It will be officially released in six months , It seems a little too hasty .

WebGPU yes WebGL Heirs of , Their goals are similar , however WebGPU Provides a lower level of GPU Ability . therefore ,WebGPU Better image rendering ability , Better performance , Easier to use , It is also more suitable for data parallel computing and machine learning .

according to Safari Test results ,WebGPU The performance of is much higher than that of WebGL:


picture source :WebGPU and WSL in Safari

Front end machine learning library TensorFlow.js Also tested WebGPU, Results found WebGPU Better performance , But the gap is different from WebGL Not particularly obvious , It needs further study :


picture source :Fast client-side ML with TensorFlow.js

Here's the picture ,WebGPU It's based on all kinds of GPU API( for example DirectX 12、Metal、Vulkan) Realized .


picture source :Access modern GPU features with WebGPU

WebGPU What is provided is the bottom layer API, Very powerful , It's also very complicated . Use WebGPU Vector multiplication code 200 That's ok , Third party libraries will appear in the visual community WebGPU, Provide simpler usage for different application scenarios .

According to the test , Use WebGPU When doing vector multiplication , As the vector length increases , Its performance is much better than that of GPU:


picture source :Get started with GPU Compute on the web


Chrome 94 Officially released WebCodecs, So that we can use Chrome Images provided 、 Audio and video coding / Decoding ability .

WebCodecs by W3C The proposal , from Google、Mozilla as well as Microsoft Our engineers are responsible for , On Chrome 86 Start experimenting with . come from Firefox and Edge Our engineers jointly drafted WebCodecs The proposal , Therefore, it is expected that the proposal will eventually become W3C standard .

Codec by coder and decoder Compound words , Codec , It can be hardware , It can also be software , Used to encode and decode specific data formats , such as MP3/AAC/VP9/H264 etc. .

The browser supports pictures in various formats 、 Audio and video , But we can't call the corresponding codec directly before .WebCodecs To solve this problem , Give Way Web Developers can directly use various codecs .

To optimize performance while maintaining consistency ,Google Docs In this year 5 In January, it was announced that it would migrate to Canvas Rendering scheme . however , Before Google Docs Processing GIF when , Still using HTML Of <img> label . later ,Google Docs Used WebCodecs Picture codec ImageDecoder take GIF decode , And then use Canvas Rendering , This optimizes performance , At the same time, it simplifies the code architecture .

Zoom In its Web Meeting SDK and Web Video SDK Used in WebCodecs, Because the source code is not open source , Therefore, how to use it is unknown , It should use the video related codec . It is worth mentioning that , because Chrome 93 Right WebCodes The updates for are Breaking changes, Lead to Zoom Of Web Meeting SDK and Web Video SDK There is BUG, It seems that in the third party SDK Directly use features that have not been officially released in , There is still a big risk .

Prioritized scheduler.postTask

Chrome 94 Officially released Scheduling APIs: Prioritized scheduler.postTask characteristic :

  • Added scheduler.postTask Method , Support scheduling tasks according to priority , It also supports specified delay scheduling tasks ;

  • Defined 3 Task priorities , From high to low :user-blocking、user-visible、background;

  • Added TaskController, Support dynamic modification of task priority and cancellation of tasks ;

Prioritized Task Scheduling by WICG The proposal , from Google The engineer is responsible for , On Chrome 86 Start experimenting with . Because the proposal has not been participated and supported by other browser manufacturers , Therefore, the biggest risk of this feature is whether it can become a general standard .

When we use Lighthouse When detecting a page , One of the test items is "Minimize main-thread work", It divides the work of the main thread into the following 7 A classification , It can be seen that the task undertaken by the main thread is extremely heavy :


Because the main thread is responsible for too many tasks , If the main thread is a low priority task or a time-consuming task (Long Task, That is, the execution time exceeds 50ms The task of ) Overuse , It will cause the browser to respond too slowly to user operations , For example, clicking a button for a long time does not respond , This will greatly damage the user experience .

Take the most extreme example , If JavaScript The code is stuck in an endless loop , Then the page will be basically completely stuck , Unable to respond to user action . interested , You can execute the following code on the console :

while (true) { console.log("hello, Chrome!");}

If not critical JavaScript Mission ( Like logs ) Excessive occupation of main thread or critical JavaScript Mission ( For example, respond to user actions ) Waiting too long , Will hurt the user experience . In order to optimize the scheduling of the main thread ,requestIdleCallback and isInputPending And so on ,requestIdleCallback You can use the idle time of the main thread to render the page to perform low priority tasks ,isInputPending Can be used to avoid time-consuming tasks blocking response to user actions . And requestIdleCallback and isInputPending comparison ,Prioritized Task Scheduling The scheduling function of the proposal is more complete and powerful , Support scheduling tasks according to priority , Support specified delay scheduling tasks , Support dynamic modification of task priority and cancellation of tasks .

By using scheduler.postTask,Aribnb Our engineers break down time-consuming tasks into small tasks 、 Postpone non critical tasks 、 Pre download pictures . From the optimization effect , Of the search results page Total Blocking Time(TBT) from 16s Down to 6s, Greatly optimize the user experience . however ,Total Blocking Time The best value of 300ms within , therefore Airbnb The optimization doesn't look very ideal . Of course , This value should be relevant to the specific application .

Aribnb It's used by our engineers Scheduling APIs Realize the picture pre download :

  • When the user slides to the 2 Search results , I downloaded the... In advance 2 A picture ;

  • When the user slides to the 2 The... Of the first search results 2 A picture , Download the... In advance 3、4、5 A picture ;

  • We can do it in Network See... In the console 4 A picture download request , According to the waterfall (Waterfall),4 Requests are requested in chronological order ;


picture source :Building a Faster Web Experience with the postTask Scheduler

With Web Applications are getting more and more complex , The main thread takes on more and more tasks , How to reduce the burden of the main thread will become the focus of browsers and Web Major issues faced by developers , Scheduling tasks according to priority may become Web Application and Web One of the best practices of the framework . in addition , Similar proposals to reduce the burden on the main thread will continue to emerge , This will further strengthen Web Ability to apply .

Idle Detection API

Chrome 94 Officially released Idle Detection API, Used to check whether the user is active , The judgment is based on whether the user uses the keyboard 、 mouse 、 Touch screen, etc. .

Idle Detection API by WICG The proposal , from Google The engineer is responsible for , On Chrome 84 Start experimenting with ,Chrome 94 Official release . At present, this feature is only Chrome Support ,Firefox and Safari To protect user privacy , Are clearly opposed to this feature .

Apple The insistence on users' privacy and security has become a part of their corporate culture , Affected many of its product and technical decisions , This is determined by its business model that does not rely on advertising to make money . according to statcounter The latest data ,Chrome and Safari Market share of 64% and 18%, therefore Safari yes Chrome The biggest competitor . Yes Safari Such a powerful opponent restricts Chrome, Conducive to ensuring Web The healthy development of .

I personally object to this feature Idle Detection API( Although my objection is useless, ha ha ), It is suspected of violating user privacy , It can be used to track the daily behavior of users , It may be used in more abnormal scenes .

In order to protect the privacy and security of users , call Idle Detection API You need to be authorized by the user :

// obtain Idle Detection API to grant authorization const state = await IdleDetector.requestPermission();if (state !== "granted") { // Need to request permission first. return console.log("Idle detection permission not granted.");}

Idle Detection API It can be used in the following scenarios : For instant chat 、 social media 、 Online games , Check whether the user is active , It can help users determine whether their contacts are online . in fact , Chat app Slack and Google Chat All expressed interest in this feature .

That year PC Version of QQ The state can be automatically switched to... According to the user's mouse and keyboard operation " Leave ", However, the default users of chat applications in the mobile Internet era 24 Hour online . While mobile Internet brings convenience to users , It also kidnapped everyone's time and energy , You can do it 24 Don't you use your cell phone for hours ?

Google Engineers provide a very intuitive Demo application Ephemeral Canvas, We can use it to draw pictures , When we 60 When the computer is not operated within seconds , The drawing will be erased automatically .

JS Self-Profiling API

Chrome 94 Officially released JS Self-Profiling API, Used to get JavaScript Performance data at execution time .

JS Self-Profiling API by WICG The proposal , from Facebook Our engineers are responsible for , On Chrome 78 Start experimenting with ,Chrome 94 Official release .

Not surprisingly ,Safari Oppose this feature , The reason is performance and safety issues . The performance problem is easy to understand , collect JavaScript Performance data during execution can degrade performance . As for security ,Safari Engineers are worried about hackers getting JavaScript The compilation time is long, which may cause timing attacks (Timing attack).

It seems , For how to develop Web technology ,Chrome And Safari Have very different views , The former is much more radical , The latter is relatively conservative . From what I wrote 《 great Chrome browser 》 A series of blogs can also be seen ,Google Engineers have developed many new browser features , As a tracker Chrome I can't even learn the writer of features , For most developers who are addicted to writing code , Many features may not have been heard of ( You might as well advertise here , If you are right about Chrome The latest sexy interest , My official account of WeChat. winter wild goose Talk). This is a Google and Apple Determined by different business models ,Apple Create a closed and complete iOS/macOS/iPadOS/watchOS The ecological system , Yes Web The enthusiasm for technology is not as high as his own son ; and Web Technology for Google, It is the foundation for him to settle down , The web page is gone , Search engines also search for a ball ? therefore ,Chrome about Google Come on , It's far more than just a traffic entrance, so simple and boring ,Chrome Committed to promoting Web Technology moving forward is not empty talk ,Chrome The product leader of that year became Google Of CEO It's no coincidence , On this point , See me 2 I wrote a blog years ago 《Chrome How to succeed ?》.

although Safari about JS Self-Profiling API Not interested in , however , come from Facebook and Microsoft All the engineers said they passed JS Self-Profiling API Some very serious performance problems have been identified , Illustrate this API There should still be two brushes . because JS Self-Profiling API It does not affect the product function , therefore Safari It's not a big problem if you don't support it . Anyway, Apple's self-developed chip is fast enough , There will probably be no performance problems ?

Canvas color management

Chrome 94 Support in creating 2D canvas when , Use Display P3 Color gamut , This will enhance 2D canvas Color restoration ability .

canvas.getContext('2d', { colorSpace: "display-p3"} );

Canvas color management On Chrome 90 Start experimenting with ,Chrome 94 Official release . This feature I'm in 《 great Chrome browser (4):Chrome 92 newly added at and randomUUID Method ,Canvas Support Display P3 Color gamut 》 The blog introduces , But what's embarrassing is that I made a mistake , It is not Chrome 92 Officially released features . This feature has been Firefox and Safari Support for , Therefore, it will become a general standard .

Before ,2D canvas Only obsolete sRGB Color gamut , But today's screens and cameras have long supported a larger color gamut .

What is the color gamut ? Its English name is Color Gamut perhaps Color Space, It's a device ( Monitor 、 Projector 、 The printer ) The range of colors that can be expressed . The range of colors visible to the human eye is limited , The color range that the device can express is a subset of the color range visible to the human eye , And different color gamut standards, such as sRGB and Display P3 The range of colors that can be expressed is also different .

Display P3 Gamut ratio sRGB Large color gamut 25%, When we compare the two , Will find Display P3 than sRGB Much brighter , The difference is very obvious :


picture source :Get Started with Display P3

For the image 、 video 、 Design 、 game 、 Map 、 Food and other applications , The importance of color accuracy is self-evident .

Some seemingly color independent applications , If our application can't accurately restore the color of the object , It will also affect the business . Most of the time , The obvious difference between the Buyer show and the seller show is due to the excessive PS As a result of , But it is also possible that the color has not been accurately restored .

103 Early Hints for Navigation

Chrome 94 New trial feature 103 Early Hints for Navigation.

103 Early Hints for Navigation The corresponding IETF The proposal is RFC 8297: 103 Early Hints, It is essentially right HTTP Update of the agreement , The proposal is made by cloud service providers Fastly The engineer Kazuho Oku Put forward .103 Early Hints for Navigation On Chrome 94 Start experimenting with , Officially released Chrome The version is uncertain .

It is worth mentioning that ,Fastly Of CDN Service this year 6 There was a breakdown in January , Lead to Amazon、Hulu、Reddit、Shopify And other well-known services are down , It can be seen that it has great influence .Fastly Put forward 103 Early Hints It's not all about generating electricity with love , This feature also helps it CDN service . Its CDN The node received a message from the source site 103 After the status code , According to it Header Include in Cache-Control: private, To decide in advance whether to reuse CDN Resources cached by the node , Improve response time . It can also be seen from this simple example , Sometimes some technical problems cannot be well solved within the existing technical standard system , The standard itself needs to be changed . It follows , Chinese programmers should participate more in the formulation of international technical standards , This is of practical significance . Of course , In the short run, the input-output ratio may not be so high , But in the long run , It's also the only way .

The figure below shows 103 Early Hints for Navigation The role of , It can be in the previous HTTP request Header as well as response When you haven't returned yet preload Follow up resources , So that the following HTTP Request a substantial advance , This reduces the overall request time , Improve network utilization .

  • The first 1 In this case :body After returning , analysis HTML, Then make a request to get css as well as js resources :


picture source :Towards ever faster websites with early hints and priority hints

  • The first 2 In this case :header After returning ,body Before returning , according to Header Medium preload Information , Initiate a request to get css as well as js resources :


picture source :Towards ever faster websites with early hints and priority hints

  • The first 3 In this case :103 After the status code returns , according to Header Medium preload Information , Initiate a request to get css as well as js resources :


picture source :Towards ever faster websites with early hints and priority hints

obviously , The first 3 Under different circumstances , The overall response time is much faster , The utilization of the network has also improved . We might as well take a look at the first 3 Under different circumstances , Specific request process .

Browser initiated access Request :

GET / HTTP/1.1Host:

Server return 103,Header Contained in the preload Information , Then the browser can launch style.css as well as script.js Request the :

HTTP/1.1 103 Early HintsLink: </style.css>; rel=preload; as=styleLink: </script.js>; rel=preload; as=script

Server return 200,Header Contained in the preload Information , also html The text also contains the required css as well as js file ( Isn't that nonsense ?).

HTTP/1.1 200 OKDate: Fri, 26 May 2017 10:02:11 GMTContent-Length: 1234Content-Type: text/html; charset=utf-8Link: </style.css>; rel=preload; as=styleLink: </script.js>; rel=preload; as=script
<!doctype html>[... rest of the response body is omitted from the example ...]


from Chrome 94 Start ,Chrome Will speed up its update frequency , By each 6 Update one version every week to every 4 Update a version every week . For a world with 26 Million users of products , Speeding up the release frequency can provide users with a better experience , At the same time, it will also bring great challenges to the R & D team .Chrome Can always maintain a stable iteration frequency , While providing transparency , Provide rich documentation , This is Chrome It's convenient for developers in the ecosystem , This is worth learning .

This is 《 great Chrome browser 》 Of the 6 piece , Created a personal record of writing a special series of blogs , Previous 《JavaScript Explain profound theories in simple language 》 The series only wrote 5 piece .Chrome After speeding up the update frequency , I also have to adjust my writing plan , And Chrome Keep your version iterations synchronized .

Careful students may find that , My blog has some subtle differences , I will insist on doing so in the future :

  • Start introducing each Chrome The standard proposal corresponding to the characteristic , The top technology companies master technical standards , It is also necessary to understand these proposals . These proposals come from different standardization organizations , such as W3C、WICG、IETF, For now ,Chrome Master all kinds of Web Dominance of technical standards , There are pros and cons ;

  • Begin to introduce Safari、Firefox、Edge And the attitude of other large companies towards various proposals and the business reasons behind them , Technology can drive business progress , Business can influence Technological Development , The two cannot be separated , If you only know technology , Without understanding the business logic behind it , It's not enough ;

  • Began to Chrome Express negative views on some practices of , As the title of my blog series , On the whole, I am right Chrome It's a positive attitude , Because it does completely change the front-end ecosystem , Changed my industry , Affected my personal career development , however , That doesn't mean I'm interested in Chrome Everything you do is supportive , I will ask myself to be more objective ;

  • Start introducing the trial (origin trial) characteristic ,Chrome Each version of will release some trial features , These trial features are often more important than formal features , Not to miss , This can also let you know for the first time Web The latest development trend of Technology ;

In this paper, 7 A feature , among 6 Both features involve new Web technical standard , so Chrome Is really committed to Make Web Gread Again(MWGA),Google Programmers for OKR It's also very hard . by comparison ,Firefox and Safari It seems that there are many Buddhist systems , This is related to the business model and investment level of each company . however ,Chrome In control Web After the dominance of Technology , A little free , Some features ignore the opposition of their peers , The propulsion speed is a little too fast , That's not so good .Web What is different from other platforms is , It's open , It belongs to everyone , There are also backward compatibility problems , therefore Web Technical standards can not has the final say , Not too casual , Otherwise, yes Web The long-term development of technology is not detrimental . It is a pity , Now? Web Technical standards have little to do with domestic programmers , We have nothing to say , Only when eating melons ... Wait until the domestic browser has a greater voice .

And a little bit more , For each feature , I spent a lot of time reading various materials to understand its principle , Then write according to your personal understanding , Many features I don't have time to write code tests , Therefore, there are inevitable mistakes in my statement , Welcome to criticize and correct . Interested students can add my personal wechat communication :KiwenLau.

Welcome to your attention winter wild goose Talk official account , Focus on 《 great Chrome browser 》 Series of blogs , Witness with me the sea of stars in the front end !

Reference material

  • New in Chrome 94: Color management for canvas, WebCodecs, WebGPU, and more!

  • V8 release v9.4

  • Intent to Ship: Scheduling APIs: Prioritized scheduler.postTask

  • Building a Faster Web Experience with the postTask Scheduler

  • Zoom on Web: getting connected with advanced web technology

  • Intent to Ship: WebCodecs

  • Chrome 93 Breaking Changes for Web Meeting/Video SDK

  • Benefits of using ImageDecoder when rendering using WebCanvas in Docs

  • Intent to Ship: VirtualKeyboard API

  • Full control with the VirtualKeyboard API

  • HTTP/2 Push is Being Removed, let us discuss

  • Intent to Remove: HTTP/2 and gQUIC server push

  • Detect inactive users with the Idle Detection API

  • Get Started with Display P3

  • Improving Color on the Web

  • Pixar in a Box: Color science

  • Access modern GPU features with WebGPU

  • Get started with GPU Compute on the web

  • Fast client-side ML with TensorFlow.js

  • RFC 8297: 103 Early Hints

  • Towards ever faster websites with early hints and priority hints


Alibaba business platform business unit long term recruitment P6 And above , Participate in the construction of the most cutting-edge front-end ecosystem of Ali , Promote the development of industry technology , Extrapolate the address

Welcome to my WeChat official account. winter wild goose Talk.


Please bring the original link to reprint ,thank
Similar articles