提升html5的性能体验系列之五webview启动速度优化及事件顺序解析]

webview加载时有3个事件。触发顺序为loading、titleUpdate、loaded。
webview开始载入页面时触发loading,
载入过程中如果title已经解析并赋予新值,则触发titleUpdate,
载入完毕触发loaded。

如果页面加载足够快,那么titleUpdate和loaded几乎同时触发。
如果页面加载太慢,则loaded是全部载入完成才触发。

loaded常用于判断页面是否载入完毕,载入完毕才显示新页面。
但有时页面内容很长时,全部载入完毕比较慢,导致显示新窗体比较慢。为了让新窗体打开快点,我们可以在titleUpdate时就显示新窗体。
因为网页本身有分步渲染的机制,所以一般只要第一屏页面渲染完毕就不会让用户看到白屏。

有人问plus ready和DOMContentLoaded、onload以及上面3个事件的顺序。
plus的ready和HTML原本的事件是异步并行的,不一定谁快。
但有一些基本规律。
首先新webview的loading是最开始触发的。
然后是新webview的titleUpdate,
然后是新webview里的HTML的DOMContentLoaded,
一般情况下新webview里plus ready在DOMContentLoaded之后发生,
然后是新webview的loaded事件。
最后还有一个是新页面的body里的onload事件。

另外再提供一个判断webview载入时间的方法。
一般webview载入要多久,开发者可以自己使用计时器计时,计算从开始载入到loaded的时间差。
但首页的载入速度开发者无法编程获得,5+runtime提供了首页的webview的载入时间,plus.runtime.launchLoadedTime。
这个time最大的用途是判断手机性能。
首页正常是本地页面,同样的首页在不同手机上loadedtime值是不同的,根据这个值,就知道了这台手机载入网页的速度到底多快。
这个速度与本地io性能有关,也与渲染能力有关。
根据这个值,我们可以做很多优化。
比如在一些高性能手机上,载入新窗体很快,导致出现雪花闪一下又立即消失的情况,此时就没必要让雪花出现了,直接切屏就好了。而低性能手机即loadedtime值较低的则老老实实转雪花

时间: 2024-10-24 12:26:12

提升html5的性能体验系列之五webview启动速度优化及事件顺序解析]的相关文章

提升HTML5的性能体验系列之五 webview启动速度优化及事件顺序解析

webview加载时有5个事件.触发顺序为loading.titleUpdate.rendering.rendered.loaded.webview开始载入页面时触发loading,载入过程中如果<title>节点已经解析并赋予新值,触发titleUpdate,页面开始渲染,触发rendering,页面渲染完毕,触发rendered,页面载入完毕触发loaded. loaded常用于判断页面是否载入完毕,载入完毕才显示新页面.但有时页面内容很长时,全部载入完毕比较慢,导致显示新窗体比较慢.为了

提升html5的性能体验系列之一避免切页白屏

窗体切换白屏的现实问题 HTML5的性能比原生差很多,比如切页时白屏.列表滚动不流畅.下拉刷新和上拉翻页卡顿.在低端Android手机上,很多原生App常用的功能和体验效果都很难使用HTML5技术模拟.我们首先来看第一个问题,如何避免切页白屏. 浏览器的页面在切换时,由于其页面加载机制,在跳转到下一个页面时,先要请求联网.载入页面代码.构建dom.渲染,最后才显示出来.在最终结果渲染完毕前,会出现几十毫秒甚至数秒的白屏.原生App是没有这个问题的.虽然使用SPA单页应用模型,即ajax+div切

提升HTML5的性能体验系列之三 流畅下拉刷新和上拉

下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是webview. 既然拉div卡,那就不拉div,改拉webview.webview的拉动是原生的,回弹效果也是原生的,体验与原生一致.思路是在父页面写titlebar,titlebar下面10像素左右写一个"下拉可刷新".然后append一个子webview,并设置为可下拉.那么在把子webv

提升html5的性能体验系列之三流畅下拉刷新

下拉刷新 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机(Android4.4以下)上,DIV动画经常出现卡顿现象(特别是图文列表的情况).解决方案还是webview. 既然拉div卡,那就不拉div,改拉webview.webview的拉动是原生的,回弹效果也是原生的,体验与原生一致.思路是在父页面写titlebar,titlebar下面10像素左右写一个“下拉可刷新”.然后append一个子webview,并设置为可下拉.那么在把子webview往下

提升HTML5的性能体验系列之四 使用原生UI

原生UI的设计目的 HTML和css有一个优势就是灵活的样式设计.在大多数情况下,我们都应该使用HTML+css来负责UI.但是有些情况下,我们发现HTML+css的UI不满足需求.1. 绝对置顶HTML的video等元素,以及5+的map等原生元素,这些原生控件的层级高于div.对于一些弹出的需要置顶的控件,会造成div模式的控件无法绝对置顶,就像在web开发里弹出的div被flash遮住一样.使用div方式开发的如下弹出控件:alert.confirm.actionSheet.waiting

提升html5的性能体验系列之四使用原生ui

原生UI即nativeUI的设计目的 HTML和css有一个优势就是灵活的样式设计.在大多数情况下,我们都应该使用HTML+css来负责UI.但是有些情况下,我们发现HTML+css的UI不满足需求.1. 绝对置顶HTML的video等元素,以及5+的map等原生元素,这些原生控件的层级高于div.对于一些弹出的需要置顶的控件,会造成div模式的控件无法绝对置顶,就像在web开发里弹出的div被flash遮住一样.使用div方式开发的如下弹出控件:alert.confirm.actionShee

提升html5的性能体验系列之二列表流畅滑动

App的顶部一般有titlebar,下面是list.常见的一个需求是要在list滚动时,titlebar不动.这个简单的需求,实现起来其实并不简单. 在普通web上的做法是使用div的滚动条,把list放到div里.但是很不幸的是,div滚动条在Android4.4以下的手机上非常非常卡,滚动完全无法商用. 还有一种做法是把titlebar使用fix来固顶.但此时手机浏览器的滚动条会通到顶部,当titlebar的右侧出现滚动条时,看起来非常怪异.还有一个副作用是滚动太快时,titlebar的di

oracle学习入门系列之五 内存结构、数据库结构、进程

oracle学习入门系列之五 内存结构.数据库结构.进程 上篇蛤蟆简单描述了oracle公司的数据库产品.其他产品及oracle软件的一些特点.干货虽有但是真心是比较少的,这篇开始就是以干货为主,其中夹杂一些扯淡的事情了.蛤蟆一直也在想如何能生动的通过这干巴巴的文字来描述着世界级的软件,太理论大家都看不下去,太实践又缺乏深度.想想自己上大学那会,老师的讲课,无不枯燥乏味啊,满满的兴趣尽是消耗殆尽.所以不能仿效之,我们得走自己特色的路.以最易懂的形式.比喻等手段描述深奥的计算机知识.走起~ 开篇问

Python猫荐书系列之五:Python高性能编程

稍微关心编程语言的使用趋势的人都知道,最近几年,国内最火的两种语言非 Python 与 Go 莫属,于是,隔三差五就会有人问:这两种语言谁更厉害/好找工作/高工资-- 对于编程语言的争论,就是猿界的生理周期,每个月都要闹上一回.到了年末,各类榜单也是特别抓人眼球,闹得更凶. 其实,它们各有对方所无法比拟的优势以及用武之地,很多争论都是没有必要的.身为一个正在努力学习 Python 的(准)中年程序员,我觉得吧,先把一门语言精进了再说.没有差劲的语言,只有差劲的程序员,等真的把语言学好了,必定是"