This article was originally published on the public account CoyPan as expected

Writing in the front

Not long ago, Apple surprised us with the WWDC20. Safari is getting a major update. As a Web Developer, I watched Apple’s official introductory video. This article takes a look at some of the optimizations and new features Safari 14 brings to Web developers.

What’s new for web developers

The video here: developer.apple.com/videos/play…

This paper will start from the following aspects:

1, the Performance; 2. Web Api; 3, CSS; 4, Media; 5, JavaScript; 6, Platform integration

Performance

Performance.

Safari 14 dramatically improves browsing performance for users. As can be seen from the official data in the figure below, clicking the connection to jump to, open the page, go back, close the TAB that does not respond, etc., has a significant performance improvement, the response is faster.

For developers,

1. CPU usage drops 3 times when the page scrolls. This means that it will be smoother to implement the special scrolling logic on Safari.

IndexedDB is 10 times faster.

3. The for-of loop is 5 times faster.

4. Promise is twice as fast.

Delete in JS is 12 times faster.

Safari for… of.. Is iteration time consuming? Let’s use the old Safari and Chrome for a comparison. I tested it on the console using the following code:

var arr = [];
for(var i = 0; i < 100000000; i++) { 
  arr[i]=i; 
}
console.time('test');
for(var j of arr) {}
console.timeEnd('test');
Copy the code

After several tests, the above for… of… Iteration, old Safari (version 13.1.1) averaged 4000ms up, while Chrome (version 83.0.4103.106) averaged 1700ms up.

Web API

The API mentioned in the video is a summary of the past year (Safari 13 – Safari14).

Web Animation API

JavaScript can directly call the Animation Api to achieve Animation effects easily. Take a look at the official example:

With the help of this Api, you can directly manipulate the DOM for motion, rather than modify the DOM properties, CSS classes and other ways to achieve animation.

The Web Animation API is currently only a draft in the W3C specification. Safari 13.1 is available, and Chrome implemented the API in version 36 six years ago.

Resize observer

The Resize Observer can listen for DOM elements to change in size, window sizes to change, display attributes to change, DOM child elements to be added, and so on. Example code is as follows:

The API is currently only in an author draft stage. Safari has supported this API since 13.1 and Chrome has supported it since version 64.

Async Clipboard API, asynchronous Clipboard API

Support clipboard read and write, support files and rich text. However, context security and user interaction must be required.

This API is in the W3C working draft stage and is supported for Chrome starting with version 66 and Safari starting with 13.1.

Better support for Web Components

CSS Shadow Part is also supported

Enterkeyhint HTML attribute is supported

The keyboard displays different text depending on the value of this property.

Web Authentication API

This API allows you to call iOS fingerprint ID and Face ID

CSS

Here are the CSS updates.

New font

Add a CSS property to truncate text
line-break: anywhere
Copy the code
Two new CSS pseudo-class selectors — : is and: WHERE

Use :is to reduce repetition

: WHERE and :is have the same syntax and function, but :where has a priority of 0 and can be easily overridden by other CSS rules.

Media

1, support webP format pictures.

2, support according to the default picture proportion space.

3. Set the orientation of the image

4. Remote playback API

Supports remote video playback

5. Picture-in-picture API

Supports video playback in the form of picture in picture

JavaScript

BigInt

Safari 14 supports BigInt

Coalescing (Nullish coalescing)

Optional Chaining

Logical Assignment operator

Public class fields

String ReplaceAll

Platform Integration

In the video, this part only briefly mentioned Customize AR Quick Look, Apple Pay, and App Clips (Apple wants to build its own ecosystem of small apps), without further introduction. For more details, check out the related video. This article also does not do more introduction.

Write in the back

There are many other safari-related updates mentioned at WWDC, such as support for Http3, JS plugins, new Web Inspector, no Flash support, and more.

The updates to Safari only work within Apple’s own ecosystem. But for the average business developer, it just provides more possibilities and doesn’t make a big difference. But these updates also offer a glimpse into the general direction of Web technology:

1. In terms of language and interface, browsers are implementing more and more new specifications, and our future Web development will be more and more simple and convenient.

2. The combination of Web technology, terminal and OS is getting closer and closer, and there will be more possibilities for future Web applications.