Excerpts from the reading notes of HTML5 and Javascript Web Apps

It must be admitted that this book, written by Wesley Hales, is an absolute boon for programmers who want to move into web apps, a thin book that concisely explains the principles of web apps implementation, tools, and pros and cons. Merely, make this excerpt:

1 principle:

The browser (ie platform) is already known as another platform for applications, and our front-end code is now packaged as HTML5-driven native applications, extensions and operating systems. H5,open web and mobile devices have further driven the browser platform, enabling browsers to store data and run applications offline.

2 Mobile First:

Mobile first requires that we consider code quality. Developers must consider battery life when using CSS for hardware-accelerated animation, which not only leads to better performance, but also encourages us to focus on clearer semantics. Check the device Battery status API (http://www.w3.org/TR/battery-status/).

3QA and device testing:

You can find the simulator you need on the Mobilexweb website (http://www.mobilexweb.com/emulators)

4 This type of work should be avoided in the software when the user interface can be pre-stored in the image. This means that the "Genie" should be used, and the device simply needs to download a picture and sneak a data URI into the CSS file to get a smaller image. The following few animations do not need to be redrawn: Trandition-propetry;opacity;transform.

5 using div[style*= ' foo ' will reduce the performance of 4.3.x and previous versions of iOS devices.

6 adding animations and hardware acceleration with CSS code, the actual animation occurs when we switch the class of the page DIV element

. page{    Position:absolute;    Width:%;    Height:%; // activating the GPU, combining each page    -webkit-transform:translate3d (0,0,0);}

Although Translate3d (0,0,0); Known as the All-purpose method on the WebKit, but still some browser engines do not support, this should be removed from the z-axis 2D transform (2D transform does not have GPU-accelerated function).

7 Flipping:

Flipping on a mobile device is a real feature of cleaning up the page. You can see the source code on GitHub (https://github.com/html5e/slidfast/blob/master/slidfast.js#L411).

8 Debugging hardware Acceleration

8.1 Reducing the number of layers

8.2 Keep the layer as simple as possible

8.3 Do not update layers frequently

8.4 Adjust layer composition as intended

8.5 repeated trials.

Start debugging by starting the WebKit-based browser and selecting the IDE.

Use Safari or use chrome to view the frames per second and the edges of the composition layer (1 open Chrome 2 in the URL bar, enter ABOUT:FLAGS3 to scroll down several entries, click Enable FPS counter)

9 inserting an AJAX response into the DOM with innerHTML () is dangerous.

10 If you create a new child node in a different document, an error occurs, so it is best to use Adoptnode (AppendChild (Document.adoptnode (newPage));)

To be continued ——————————————————————————————————————————————————————————————————————————

Excerpts from the reading notes of HTML5 and Javascript Web Apps