Web Mobile-performance tuning and 16ms optimization

This article is just an index, collecting most of the network on debugging and optimization of the article, from which some of the more good articles to share to everyone.

Mobile performance is less than 10 of the desktop browser performance of 1, especially in the case of Android devices, performance is particularly important. Feel to do mobile page, back to the liberation of the computer or 386 years, hehe.

Domestic, 16ms optimization, 60fps indicators and other related articles very little, most of the translation of some excellent foreign articles, very grateful to these translators on the Web front-end contribution, let me and other English illiterate can timely understand the cutting-edge technology ha.

It's important to understand how the browser works in a millisecond-level optimization, which is the key to a good programmer. Like writing win client software, always to understand the principle of computer composition, operating system principles. And we do Web pages, understand how the browser works is the same reason

How the browser works

How browsers work: behind the scenes of modern web browsers

GPU Acceleration Technology for page Rendering – Basics: WebKit software Rendering mode

Chrome Rendering Optimization – Layer model

Understanding WebKit and Chromium:webkit Rendering basics

Understanding GPU hardware acceleration for webkit and Chromium:chromium

Mastering the Debugging method

Mastering the debugging method is more important than remembering the conclusion of others, so-called to give people to fish, such as to teach people to fishing. According to the actual business to find the bottleneck of its page, the corresponding optimization scheme can be developed.

Debugging is primarily done using Chrome's developer tools to learn how to use timeline and discover performance bottlenecks with the content in the rendering option

"Translate" remote debugging on Android

"Recommended" improves Web application performance with chrome Devtools timeline and profiles

Use the chrome tool to analyze the drawing status of a page

Chrome DevTools

Profiling Mobile HTML5 Apps with Chrome DevTools

The secret of the browser's own development tools
It has written to the local computer how to connect the phone, through Chrome to view the page. (Install adb plugin)

Navigation Timing API

Explore and Master Chrome DevTools
A few simple videos about the chrome devtools knowledge

The secret of browser development tools

Mobile-Optimized performance

Web performance optimization, in fact, PC-side, mobile, optimization ideas and techniques are interlinked, but the current PC-side, performance problems are not obvious, many times overlooked.
The main emphasis here is on rendering optimization and rolling optimization, which is a millisecond-level optimization at the micro level.

"Recommended" 16 ms optimization
16 MS Micro-analysis of optimized web front-end performance optimization

HTML5 tips for optimizing your mobile experience

Developing high-performance animations based on web technology

CSS Performance analysis and optimization recommendations for complex applications

Requestanimationframe for Smart animating

Front-end performance optimization: Anti-shake with high frequency execution events/methods
can be optimized using Requestanimationframe on the mobile side

High-performance mobile development

Rendering-without-lumps:

Gone in Frames Per second:a Pinterest Paint performance Case Study

Web Scrolling Performance Optimization combat

Unlimited smooth scrolling for ipad apps with HTML5

Scrolling event stabilization and reflow-redraw loops

Improve HTML5 Web page performance-translation

Reduce JavaScript garbage collection

Images slowing down Your Site? Try this one Weird trick!

If the above article links can not open, it is estimated that someone else's blog down, you can try to Google the title of the article, you may find others reproduced articles.

I am not in touch with the mobile side in fact, a lot of optimization knowledge is still only at the theoretical level, not really implemented experience. There is still a long way to go to optimize the mobile side.

Finally, I lost a classmate and I wrote the PPT
If you cannot view the clickable links

Web Mobile-performance tuning and 16ms optimization