Web front end, mobile development Specification Overview

The following specifications suggest that all are Alloyteamin the daily development process to summarize the refining experience, the specification has a good project practice, highly recommended to useFont settings

Use sans serif fonts

body {    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;}

iOS 4.0+ uses the English font Helvetica Neue, before the iOS version is degraded using Helvetica. The Chinese font is set to Chinese blackbody stheiti. It should be added that the Chinese blackbody does not exist in the iOS font library (http://support.apple.com/kb/HT5878), but the system will automatically hit the Chinese blackbody Stheiti compatible with the system default English font Blackbody-Simple or bold-complex

Heiti light blackbody-Simple thin body (after IOS 7 discarded)HeitiMedium blackbody-Jane black Heiti light blackbody-Complex fine body heitiMedium blackbody- medium black             

Native Android Chinese fonts and English fonts are selected by default sans serif font

4.0 Previous version English font native Android   using  droidsans android Span class= "pun" > will hit  droid sans  fallback4.0 android  New  roboto  font   Other third party  android  The system also chooses the default sans serif font                

Basic interaction

Set the global CSS style to avoid long pressing of the pop-up menu and the selected text in the diagram

a, img {    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */}html, body { -webkit-user-select: none; /* 禁止选中文本（如无文本选中需求，此为必选项） */ user-select: none;}

Mobile performance to consider AndroidLow-end machines and 2GPerformance under Network scenariosWatch out!

Required checks before publishing

• All pictures must have been compressed
• Consider moderate lossy compression, such as JPG images converted to 80% quality
• Consider cutting large images into multiple small plots, which are common in banner plots.

Load performance optimization to open fast enough

• Data offline, consider caching data in Localstorage
• Initial request Resource Count < 4 Note!
• Images using CSS Sprites or Datauri
• Avoid @import introduction in the outer chain CSS
• Consider embedding small, static resource content
• Initial request Resource Gzip total volume< 50kb
• is static resource (Html/css/js/image) optimized for compression?
• Avoid packaging large class libraries
• Ensure that the access layer has gzip compression turned on (consider upgrading the gzip level, using CPU overhead in exchange for load time) Note!
• Try to use CSS3 instead of pictures
• Static resource (JS/CSS) delay loading outside of initial first screen note!
• Image resources other than the initial splash screen load on demand (judging the viewable area) Note!
• Single page application (SPA) consider delaying loading of non-first-screen business modules
• Turn on keep-alive link multiplexing

Operational performance optimization to achieve smooth enough operation

• Avoid IOS 300+ms Click Delay issues Note!
• Cache DOM Selection and calculation
• Avoid triggering page redraw actions
• Debounce continuously triggered events (Scroll/resize/touchmove, etc.) to avoid high frequent triggering of execution attention!
• Avoid bulk-bound events by using event proxies whenever possible
• Use CSS3 animations instead of JS animations
• Avoid using a large number of CSS3 gradient shadows on low-end machines to improve fluency by considering the downgrade effect
• HTML hierarchy remains simple enough
• Use the CSS Advanced selector and the wildcard selector as little as possible
• Keep it simple

Online Performance Testing Assessment Tool User Guide

• Visit the Google pagespeed Online assessment website
• Enter the destination URL address in the Address bar and click the Analyze button to start detection
• Optimization by pagespeed Analysis of recommendations, priority to solve the problem of red category

Web front end, mobile development Specification Overview