android Webview（hybird）生命周期详解

BoYang
985 阅读2分钟

前端

h5加载流程

部分引用自: www.kancloud.cn/cyyspring/m…

image.png

  1. 浏览器会从服务器中获取到HTML内容。
  2. 浏览器在解析HTML文档时，是自上而下解析的，从上到下依次加载、解析。
  3. <head>元素内容会先被解析，此时浏览器还没开始渲染页面。当遇到'head' 标签内部一般会有。
    3.1 <meta>标签，设置缓存策略、 编码及页面属性等
    3.2 <title>标签，没有title浏览器会将域名地址作为title
    3.3 <link>标签，涉及外部资源（如图片、CSS 样式等）
    3.4 <script>标签，脚本，通过src属性指向外部资源
  4. 当浏览器解析到<script>，会暂停文档解析并加载执行 JavaScript 脚本。当脚本执行完成后,控制权会交回给渲染引擎，渲染引擎继续往下解析 HTML元素。

浏览器的 UI 渲染线程和 JS 引擎是互斥的，当 JS 引擎执行时 UI 线程会被挂起

javascript加载执行流程

  • 浏览器会按照<script>标签出现的顺序，依次解析并执行。
  • 未加任何属性的<script>都是同步执行的，后一个<script>必须等待前一个执行完成。如:
<script>do any thing</script>  

<script src="xxx.js"/>
  • <script>可开启异步加载。异步加载可有大致三种方式:
<script src="xxx.js" defer="defer"/>  

<script src="xxx.js" async="async"/>

<script>
   function loadJs(url) {
     var script=document.createElement("script");
     script.src=url; // 设置src，浏览器开始异步加载
     document.head.appendChild(script);
   }
   loadJs(xxx.js);
</script>

h5加载生命周期

document.readyState

document.readyState生命周期执行事件

  • loading
    开始解析html文档
    1. 创建document对象，解析web元素。创建HTMLHtmlElement对象到document中。这个阶段。
    2. 遇到link外部css，创建线程加载（异步），并继续解析文档。
    3. 遇到script外部js：
      a. 未设置async、defer，浏览器创建线程加载，并阻塞，等待js加载完成并执行该脚本，然后继续解析文档。
      b. 设置有async、defer，浏览器创建线程异步加载，并继续解析文档。
    4. 遇到img等，浏览器创建线程加载（异步），并继续解析文档。
  • interactive
    互动，文档已经完成加载，文档已被解析，DOMContentLoaded事件即将触发，但是诸如图像，样式表和框架之类的子资源仍在加载。
  • complete
    • 所有<script>解析并执行完成,包含async、defer修饰的异步加载，但并不会等待<script>内如：setTimeout等异步操作。

      ps：script中的XMLHttpRequest异步请求会被等待执行，很奇怪求大神解析

    • 页面完全载入(包括图片、css文件等等)

window.load

document.readyState = complete 事件触发后，紧接着触发 window.load。从调用时间戳来看只相差1ms，几乎可以判断 document.readyState[complete] == window.load。

webview

h5加载生命周期

html-lifecycle.drawio (1).png

avatar
文章
阅读
粉丝