移动端实战总结

Posted 2020-09-07

概述

操作系统：现在分成两大阵营：ios和android，基本局势已定。

基于这两种操作系统，网页开发的共同点：

1.两个系统浏览器都是webkit内核的，so--移动端的web开发主要面向webkit内核的浏览器开发，不用顾及IE等浏览器。

2.移动端的浏览器对html5支持较理想，可以使用HTML5的特性。

移动端的浏览器按照存在形式可以分为下面几类：

• 内置浏览器
• 用户安装浏览器
• WebView
• 代理浏览器

内置浏览器

内置浏览器搭载在系统固件中，一般由系统产商开发，如 iOS 的 Safari，Android 的 Android WebKit 或 Chrome。

内置浏览器一般无法单独升级，需要升级系统才能更新。所以，有时会被又老又烂的内置浏览器拖住开发后腿，尤其是 Android 平台。所以适配内置浏览器的时候要关注系统的版本。

用户安装浏览器

有许多浏览器是用户可以自行下载安装的，如 Chrome、Firefox、Opera、UC、QQ 等。

需要注意的是，同是用户安装浏览器，不同平台上会有本质差别，如 iOS（包括 Windows Phone）不允许使用其他的渲染引擎，所以 iOS 上的 Chrome 并非它该有的 Blink 内核，Firefox 的内核也不是Gecko。

用户安装浏览器可以被更新，获得最新的功能和更好的体验，这点区别于系统自带的浏览器。

用户习惯地域差异：

• 国外（例如美国）：很少有用户去安装别的浏览器——就算知道可以安装；
• 我国：用户会下载（有时可能是「全家桶」之类的被下载）安装各种浏览器，如 QQ、UC 浏览器。

WebView

WebView 是系统提供给原生应用的内置浏览器接口。比如 iOS 上的第三方浏览器，都是基于系统 WebView 开发。

WebView 一般是独立的程序，使用内置浏览器的底层组件（如渲染引擎、javascript 引擎），但某些方面可能会有所不同，如性能上会有所限制。从实际操作情况来看，有些时候确实调用的webview和系统自带浏览器是不一样的。浏览器里一个样，webview里又是一个样。

代理浏览器

代理浏览器在其服务器上渲染 HTML、CSS，执行 JavaScript，然后把结果返回给浏览器。如 Opera Mini、早期的 UC 浏览器、Nokia Express 等。

与代理浏览器相对应的是完整浏览器（full browser），即把资源下载到客户端渲染、执行的浏览器。

ios  VS android 不同：

1.对于浏览器来说，android厂商碎片化比较严重，然后webkit浏览器又是开源的，所以市面上的webkit内核浏览器的版本很多。厂商总是根据自己的喜好来修改webkit浏览器，这导致HTML5碎片化很严重。Android 4.4 之前的 Android 系统浏览器内核是 WebKit，Android4.4 系统浏览器切换到了Chromium，内核是 Webkit 的分支 Blink。

（例子，需要实际设备试验截图）例如对input type="date"的实现，有些厂商实现了这个标准，有些没有实现，而对于实现了这个标准的浏览器，界面展现及交互又不尽相同。而除去系统自带浏览器，还有各app的webview，微信6.1版本以上的android用户，都是使用的QQ浏览器的X5内核，5.4-6.1之间的版本，若用户安装了QQ浏览器就是使用的X5内核，若用户未安装浏览器，使用的是系统内核。

2.从系统的角度而言，android系统版本的碎片化也很严重，现在已经到6.0了。之前主要分2.X和4.X阶段(3.X主要为TV等设备制作)，其中2.X版本的浏览器是webkit533.X版本，这个版本的浏览器是谷歌为手机订制的，是精简版的，对HTML5的实现不是特别彻底。其中又以2.3版本为界限，2.3之前的版本对HTML5支持不是很好，2.3之后的版本开始移植PC的Chrome代码，有了一次飞跃。截至2016年3月，可能还有超多用户再用Android 2.3版本，比如微信用户中有3%用户使用Android 2.3及以下版本。

3.ios是封闭的，苹果不允许使用其他渲染引擎。且apple对于HTML5标准的实现较好，so ios上HTML5的支持情况较好。这种封闭性对浏览器厂商可能是束缚，对用户和 Web 开发者则是好事，保持一致的用户体验，降低开发、测试成本。

然而，虽然同样基于 iOS 提供的 WebView，Chrome、Firefox、微信 WebView、QQ 浏览器、UC 浏览器等还是会存在细微差别，在 Safari 上正常的功能，在这些用户代理上未必。

4.ios和android对于html5的规范实现在界面层和交互层的实现是不同的，就拿上面的列子来说 type date的日期控件，ios和android的交互实现，不太一样。虽然都按照w3c的标准进行了实现。select的实现也不尽相同，UI五花八门。

移动端设备性能

移动端和桌面端开发差异比较大的地方还有移动端设备的性能。需要了解下移动端设备的性能特点。

移动端设备的硬件发展还是很迅速的，但是与桌面设备比起来还是有差异。所以在移动端，性能和功能需要一个平衡点。例如一些复杂的动画，看上去很炫酷，但在网页运行的时候，会发现手机有点发烫，并且电量消耗很快，不一会又要充电了。所以移动端网页，性能是会受到一定的限制的。web受性能的影响比起native还是会大些，由于web不是编译型语言，只能在设备上解析运行，加上webkit内核所占用的内存较大，并且是单进程的应用，所以受CPU、内存的影响更大。

页面渲染

移动端web在性能上影响较大的是渲染问题，js问题不那么突出，原因是android使用了V8引擎，比较大幅度的提升了脚本执行性能。移动端页面渲染和PC端有较大差别，原因在于桌面端在页面渲染上，有高性能的硬件，加上强劲的显卡，性能甩移动端好几条街。而移动端有限的硬件性能，加上没有专门的显卡，使得所有页面渲染的工作都由CPU来执行，CPU本身的执行频率有限，会造成页面渲染缓慢。所以在手机上，页面大量渲染的时候，容易出现卡顿，比如渲染一个很长的列表，滑动的时候就容易卡。还有比如页面的切换，也容易卡。所以涉及到页面渲染，就更需要小心处理了。

键盘

键盘和桌面端也有很多不同。

移动端使用软键盘，在唤起软键盘的时候，布局会发生微妙的变化，可能会影响页面的布局。由于手机的界面非常小，所以键盘会占据很多空间。对键盘布局的处理，ios和android也是不同的。