Differences between H5 architecture and native architecture

1. App Of 3 Development methods

On the surface , mobile phone App It's the same thing , It's the app on the phone , Click on the icon to run , But their underlying technology is different . According to the development technology ,App It can be divided into three categories . Native applications （ abbreviation nativeApp）,Web application （ abbreviation WebApp）, Hybrid applications （ abbreviation hybridApp） These three categories App The technical models of , Each has its own advantages and disadvantages .

2. Native architecture

Native application development , Is in Android、iOS And so on the mobile platform uses the official development language 、 Develop class libraries 、 Development tools to carry out App Development . So the native architecture App It should be the best in application performance and interaction experience , But the portability of native applications is poor , Especially a native App,Android and iOS They all need to develop their own , Same logic 、 There are two sets of interface . Such as WeChat app, both Android Version of , Also have iOS Version of .

Native architecture features ：

1. Each mobile operating system requires an independent development project .
2. Each platform requires independent development languages and tools , such as Android The application on the system is to use Java、eclipse、Android studio To develop ,iOS The application of the system is to use Objective-C and Xcode To develop .
3. Closer to the bottom , So his operation is more fluent , It is also easy to access the underlying functions , Like a camera .
4. High development cost （ Independent development should be carried out for different mobile phone operating systems ）, Long development cycle , Update iteration is slow , You need to wait for the official approval when putting on the shelf

3. H5 framework

H5 Development is the use of value Web technology （HTML5、JavaScript、CSS） On going App Development , There are still some development frameworks available , such as phoneGap、bootstrap、jQuery etc. .H5 The advantage of development is that it can cross platform , The code can be written at the same time Android、iOS、Windows Run on . because Web The limitations of technology itself ,H5 Mobile applications cannot directly access device hardware and offline storage , So there are big limitations in experience and performance .

H5 Architectural features ：

1. Convenient test , Just enter the URL to test , Browser based , It can be used across platforms .
2. If you want to add new functions, you can add them directly in the background , There is no need to notify users to upgrade .
3. Low order , The development cost is very low , And accordingly, he does not need to install the package .
4. Very dependent on the Internet , Once the network is disconnected, the food will be stopped, and the function is single , Mainly used to show , Unable to call the underlying function , Like a camera .

4.H5 The difference between architecture and native

1. Native pages run fast , It's smooth .H5 The performance of the page is relatively low , In particular, some animation effects have bright cartoon .
2. H5 A lot of interaction on the page is not as good as native , Like the shell layer 、 Page slide when input etc. .H5 The effect is relatively low, Not as good-looking as the original , There is no native default animation and other effects .
3. Native APP The modified page needs to be republished , Waiting for review （ Now? iOS The audit speed of has been increased to 1 Day to 2 God ）.H5 Page modification You can go online at any time , Don't wait for approval .
4. H5 Cross platform ,iOS and Android Can share a set of code ; Native needs to develop their own relative native ,H5 Low development cost .
5. Native APP Can make good use of the underlying functions of the device , Such as camera 、 Direction sensor 、 Gravity sensor, etc .H5 There are limits , such as Android Inside H5 More work needs to be done on the camera and direction sensor .
6. H5 Over reliance on the network , You can't get stuck when the network is bad , And just opened to see a blank page . default H5 Every time the page opens, it will re request the page （ You can do caching , But there is little to do ）.
7. H5 More traffic than native ,H5 In addition to loading HTML Also load js、CSS These resource files , Compared with the native network, the loading speed is slow .