This is the 8th day of my participation in Gwen Challenge

In addition to more fully regulating the DOM, HTML5 introduces some emerging apis that give Web development more power, and this article takes a quick look at those apis.

A, requestAnimationFrame

RequestAnimationFrame is used to solve the problem of setTimeout and setInterval not performing well in animation. It calls a function before redrawing the screen and is therefore aware of screen changes, whereas setTimeout and setInterval are not aware of screen changes.

Cancelling is cancelAnimationFrame.

Page Visibility API

It is used to judge the visibility of the page. When the page is not visible, it can stop polling or animation for performance optimization. The page visibility API itself is relatively simple, as follows:

  • Document. hidden: True indicates that the page is hidden, false indicates that the page is displayed
  • Document. visibilityState: represents the page state
  • Page document. Visibilitychange: hide/switch triggered when the event

Third, Geolocation API

Geolocation API, which requires user permission before access. In browser implementation, it is navigator. Geolocation object.

  • GetCurrentPosition: Gets the current location, triggering a dialog asking users to share location information
  • WatchPosition: Tracks the user’s position. This is equivalent to a periodic call to getCurrentPosition, but it waits for the system to signal a position change rather than polling.
  • ClearWatch: Clears watchPosition

Fourth, the File API

Used to enhance operations on local files, including the following contents:

  • Files: New attribute on file input element, representing file information set
  • FileReader: Reads files asynchronously.
    • ReadAsText: Reads the file as plain text, saving the read text in the Result property
    • ReadAsDataURL: Reads a file that will be stored as a data URI in the Result property
    • ReadAsBinaryString: Reads the file, which will be stored as a string in the Result property
    • ReadAsArrayBuffer: Reads the file and stores the ArrayBuffer containing the contents in the Result property
  • Load: the event is triggered after the file is successfully loaded
  • Progress: event, every 50ms do fish trigger
  • Error: indicates an event that is triggered when a failure occurs

Web timing

The window. Performance object has the following properties that represent the point in time of each phase:

  • performance.navigation
    • RedirectCount: indicates the number of redirection times
    • Type: the navigation type that just happened
  • performance.timing
    • NavigationStart: The time to start navigation to the current page
    • UnloadEventStart: Previous page Unload EventStart time
    • UnloadEventEnd: Previous page Unload EventEnd time
    • Others are no longer listed

Six, Web Workers

Having JavaScript running in the background is equivalent to “multi-threaded JS”, sending and receiving messages via onMessage and postMessage.