2019独角兽企业重金招聘Python工程师标准>>>

移动Web简介

移动产品列表

•基于电视的设备,包括:智能电视,游戏机(如Xbox)和机顶盒(如Chromecast,亚马逊火 Fire TV等)
•桌面设备,包括使用笔记本电脑的操作系统,如Windows,Mac OS X中,Linux的或Chrome OS
•平板

•Phablets,屏幕大于5.5的手机
•智能手机,采用了大操作系统的手机如Android,iOS的,Windows或黑莓手机等。
•社交设备:Firefox OS, Nokia AshaOS,诺基亚的Asha或功能手机等
•智能手表等穿戴设备。

移动硬件

主要衡量指标如下:

•CPU: 解析,渲染和执行
•内存:DOM树,图像缓存和解压数据存储
•GPU:一些渲染操作(通常称为硬件加速)
•GPU内存: 图像缓冲区和层存储

移动设备的CPU速度通常只有桌面设备的20%,内存通常只有30%。

移动网络

移动网络比Wi-Fi更不稳定。移动网络切换时不稳定。主要移动网络类型如下:
    
• GPRS (2G)
• EDGE (2G, 2.5G or 3G)
• UMTS (3G)
• WCDMA (3G)
• TD-SCDMA (3G 非主流)
• HSPA (3G)
• EVDO (3G)
• HSPA+ (3G or 4G)
• Mobile WiMax (4G)
• LTE (4G)
• TDD-LTE (4G非主流)

根据https://gsmaintelligence.com/的分析数据,2014年底,2G 64%、3G 30%、4G 6%。
美国:2G 20%、3G 55%、4G 25%。http://www.4gamericas.org/index.cfm?fuseaction=page&pageid=2253也提供了类似的数据。

移动网络的速度:

注意对于不大的数据而言,不一定是带宽越大越好。

延迟: Round Trip Time (RTT) ,因为多了手机到基站,基站到承载网管的过程,通常相当大。

手机通常有radio休眠机制以节能,3G唤醒连接可能要2.5s,4G可以在100ms内完成。

移动操作系统

主流:iOS,Android

其次: BlackBerry 10, Windows,Firefox OS, Tizen, Sailfish , ubuntu

再次:Symbian、MeeGo、webOS、Nokia Series 40等

引擎

渲染引擎

渲染引擎(也称为布局引擎)是下载、解析和渲染HTML和CSS代码和其他相关的内容,如SVG(Scalable Vector Graphics)和图像在屏幕上的代码。

WebKit称雄移动设备多年,在iOS,Android,黑莓,Symbian等都有。

现在的渲染引擎:
• WebKit
• Blink
• Trident
• Gecko
• Presto

WebKit是苹果公司于2001年创建的开源项目, 基于KHTML(1998年创建的基于Linux的浏览器引擎), 用于支持Safari浏览器。布局和渲染相关的组件被称为WebCore。黑莓,诺基亚,谷歌,三星和Palm,iOS的Safari浏览器都有使用它,是最常用的移动领域渲染引擎。但是HTML5的兼容性不怎么好。

Google Chrome放弃WebKit,开发了分支Blink。Opera也使用Blink。WebKit2是另外一项目,主要在Nokia的MeeGo使用。

Trident是在Internet Explorer中的专有引擎,而Gecko是Mozilla基金会管理的开源引擎发动机由。

Opera多年使用专用引擎Presto。从Opera 12起改用Blink。

执行引擎

用于解释JavaScript代码,管理变量和对象内存的运行时。

JavaScript执行引擎有2种:经典和JIT(Just in time)编译器。经典引擎解释的JavaScript的同时执行。JIT引擎预编译JavaScript代码为本地代码,然后再执行,在性能方面有了很大的改进。

第一个新引擎Carakan是由Opera为其桌面浏览器创建的; 然后V8,由谷歌开发的开源的JavaScript引擎,
目前在谷歌Chrome和其他项目,如node.js中使用。其他现代JavaScript引擎包括JägerMonkey(Mozilla基金会),IonMonkey(Mozilla基金会,自2013年),Nitro(也称为SquirrelFish)和Chakra(Internet Explorer)。

没有JIT功能的引擎有:JavaScriptCore(WebKit的一部分)和SpiderMonkey(Netscape和Firefox等)。

WEB平台

WEB平台解析和执行网页内容。分类如下:
•Web浏览器
•Web应用程序
•Web View

•电子书(比如epub和mobi都使用HTML5)

Web Apps

Web应用安装在应用程序菜单或屏幕上。用户看起来像应用,但是实质是HTML5,CSS和JavaScript。

但从性能的角度来看,Web应用程序包括:
•承载文件服务器
•可能的本地资源安装
•安装的元数据
•网页渲染引擎和JavaScript的执行引擎加载内容,可能有浏览器进程的上下文
•没有编译或打包过程
•Web应用程序可以从浏览器或从应用商店安装

常见的Web应用程序的平台有:
•iOS的主屏幕Web应用程序
•Chrome浏览器主屏幕Web应用程序
•Firefox开放Web应用程序

iOS的主屏幕Web应用程序

Safari在苹果系统上有“Add to the Home Screen”功能。

当然站点要定义了 <meta>,添加后会以全屏显示:

实例:http://app.ft.com/

Web应用运行在iOS上的Web进程。这个处理过程使用WebCore和Nitro, 但是和safari比有所修改。iOS 5.0 Web应用才支持JIT。

Chrome浏览器主屏幕Web应用程序

谷歌Chrome浏览器Android版33支持主屏幕Web应用程序:

网站添加到主屏幕后默认不是一个Web应用程序,直接用chrome打开。需要声明manifest文件才行。参考资料:https://developer.chrome.com/multidevice/android/installtohomescreen。Android 4.4以后WEB应用程序和WebViews有不同的兼容性和性能。

Firefox开放Web应用程序

Firefox已经为网络应用程序创建了开放的平台,目前只能在Firefox Android版和Firefox OS上使用。

在Firefox OS或Firefox Android上,可以网站或Firefox的市场安装的Web应用程序。网站安装需要manifest文件和安装
JavaScript的API, 市场安装Mozilla的将处理好这些。

Web View

Web view在大多数平台上是允许本机应用运行网页内容的(类似按钮,标签和文本输入)控件,允许本机应用程序,包括和运行网页内容。它可以使用整个屏幕或只小部分。Web view的性能可能和浏览器有差异。
Web view的用途:
•显示丰富的内容
•执行JavaScript代码
•显示动画或广告
•应用的浏览器
•伪浏览器
•创建整个用户接口和逻辑与web内容(通常被称为本地Web应用程序或混合应用程序),如使用Apache Cordova或PhoneGap。
•在线web应用的本地shell

本地Web应用程序

一些平台上有官方平台来创建Web本地应用,无需创建本地项目,并添加Web视图。比如:
• Apache Cordova(又名PhoneGap),其中包含Adobe的PhoneGap构建服务
•JavaScript的Windows应用
•黑莓的WebWorks
•亚马逊Fire OS和Android的WebApp。

•Tizen Apps

相比Web应用程序,本地Web或混合应用程序包括:
•打包网页内容到zip或容器
•创建manifest

•签署包
•应用商店分发

另外注意:有把web view编译为本地代码的方法,比如Titanium Appcelerator。

应用内置浏览器

伪浏览器

伪浏览器不提供自己的渲染和执行引擎,是类似浏览器的本地web view应用。iOS上的Chrome就是伪浏览器。

iOS的Web view

iOS的Web View基于WebKit的,和嵌入式Safari浏览器不同。iOS 8.0版起,我们有两个Web View:旧的UIWebView和新的WKWebView。

Android的Web view

多年来Android上的Web View是让许多公司不敢使用HTML5创建本地应用程序。Android 2.X的Web View极其缓慢,4.0有所改善,但直到4.4才比较完备。4.3及以前Web View基于WebKit,从4.0到4.3基本类似。为此一些Android的厂商,包括三星和HTC用现代版的WebKit或Chromium替换默认Web View。

亚马逊Kindle Fire保持着原生Android Web View,2代增加了Amazon Web View,基于Chromium 18。Fire Phone中在Android 4.2使用了Amazon Web View。
Android 4.4 (KitKat),谷歌用Chromium 30替换了Android Web View。4.4.1使用33。Android 5.0使用39,并支持更新。

Crosswalk:英特尔基于Chromium的开源项目。可以为Android 4.0+注射的WebView,支持Chrome浏览器的最新版本,但是包比较大。

Windows的Web view

基于Trident和Chakra,不支持注射web view。

注意Firefox OS没有本地应用,一切都是web app。

转载于:https://my.oschina.net/u/1433482/blog/494054

高性能移动Web High Performance Mobile Web - 待更新迁移相关推荐

  1. 高性能网站建设进阶指南:Web开发者性能优化最佳实践 pdf扫描版

    高性能网站建设进阶指南:Web开发者性能优化最佳实践是<高性能网站建设指南>姊妹篇.作者Steve Souders是Google Web性能布道者和Yahoo!前首席性能工程师.在本书中, ...

  2. 让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能

    让jQuery Tools Scrollable控件在Mobile Web里面支持resize功能 项目中有两份代码,一份是Main Site,一份是Mobile Site.Main Site里面主页 ...

  3. mobile web retina 下 1px 边框解决方案

    http://www.tuicool.com/articles/ZRv6bun 再谈mobile web retina 下 1px 边框解决方案 时间 2015-01-03 12:03:31  Hug ...

  4. 易安卓 html5,Developing a Multi Platforms Web Applications for Mobile Device Using HTML5

    摘要: As the mobile phone has become more mature, the continuous development of both hardware and soft ...

  5. 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 默认配置与事件基础

    使用 jQuery Mobile 与 HTML5 开发 Web App -- jQuery Mobile 默认配置与事件基础 时间:2012年9月25日 分类:JavaScript 标签:HTML5‚ ...

  6. mobile web开发遇到的问题

    移动web开发之道(Android与Iphone) 1.javascript篇 (1)使用querySelector和querySelectorAll这两个方法获取文档对象中DOM节点的引用 由于这两 ...

  7. web test IBM Page Detailer / IBM Rational Performance Tester / Web Page Performa

    S IBM测试分类-AVT,BVT,CVT,FVT,GVT,TVT,SVT,PVT http://blog.csdn.net/hpf911/article/details/7095785 AVT,ac ...

  8. 关于Mobile Web App你所应该知道的

    Native App与Web App的争论从未停息过,尽管很多人在批判Web App的各种不是,但也阻止不了各种各样的Web App如雨后春笋般出现,尤其是伴随智能手机的普及而受到重视的Mobile ...

  9. 一个基于SAE Channel的综合应用--mobile web IM(1)

    2019独角兽企业重金招聘Python工程师标准>>> 关键词:Mobile IM, SAE Channel, JQM动态加载, 滚动刷新,设计模式,编程范式 Hi, 我是Leona ...

最新文章

  1. 走近TCP/IP协议
  2. Ubuntu mysql连接错误10060/10061的方法
  3. Android 关于长按back键退出应用程序的实现
  4. 小明爱跑步-扩展-多个对象属性之间互不干扰
  5. 方法重载,new,override
  6. 单因素方差分析_基于R语言开展方差分析(一)——单因素方差分析
  7. Linux与Windows中动态链接库的分析与对比
  8. 通过ActiveX执行文件
  9. vue form validate 多个input_Vue表单校验插件Vuerify使用详细教程及示例
  10. so库调用java函数_linux下so动态库调用主程序函数
  11. ssh连接虚拟机的linux_openstack系列之运维排障:虚拟机SSH连接失败
  12. java连接sql server数据库的代码如何改成连接mysql_Java连接sql server或mysql数据库(代码)...
  13. 主机管理+堡垒机系统开发:前端批量命令结果(十二)
  14. ElasticSearch全文搜索引擎之Windows集群搭建
  15. L1、L2 正则项详解 - 解空间、先验分布、最大似然估计 and 最大后验估计
  16. Java--数组和集合之间的相互转换
  17. JNA 中 String 转 Pointer
  18. 又双叒叕上调派送费,这次“四通一达”们能坚持多久?
  19. 淘宝四大经典骗局及防骗技巧
  20. 一款适合全自动智能锁电机驱动芯片方案

热门文章

  1. 第3章 C语言的输出函数putchar与printf (一)
  2. matlab中特殊符号ommiga,在MATLAB中输入特殊符号---方法集锦
  3. echarts 柱形图
  4. JS键盘键捕捉 ctrlKey和shiftKey
  5. 短期内从一个外行变成了解行业的人
  6. Python3.X subprocess、os.system/os.popen/os.spawn*、commands:与系统进行交互,如测试时常用的adb命令
  7. 这是个超级好用的免费无损放大软件 Topaz Gigapixel AI
  8. Android 系列 5.9使用Inkscape创建Android Launcher图标
  9. php session在高并发问题
  10. 在64位操作系统上运行32位的程序