美文网首页面经
html网页的的加载和渲染过程(webkit内核)

html网页的的加载和渲染过程(webkit内核)

作者: 桃子Lisa | 来源:发表于2018-06-01 10:13 被阅读20次

一个网址从url到页面图像一般分为两个过程:

1. 网页加载过程:从URL到构建DOM树

2. 网页渲染过程:从DOM树到页面图像

整个过程大致流程和参与的模块如下所示:

参考朱永盛的《webkit技术内幕》图1-5

从url到dom树的过程如下所示

参考朱永盛的《webkit技术内幕》图2-6

步骤详解如下:

1.当用户输入网页url的时候,webkit调用资源加载器加载该url对应的网页

2.加载器依赖网络模块建立连接,发送请求并接收答复。

3.webkit接收到各种网页或者资源的数据,其中某些资源可能是同步或异步获取的

4.网页被交给html解释器转换成一系列的词语

5.解释器根据词语创建节点,形成dom树

6.如果节点是javascript代码的话,调用JavaScript解释器并执行(JavaScript代码可能会修改DOM树的结构)

7.如果节点依赖其他资源如图片,视频等,调用资源加载器来加载他们,但这些请求是异步的,不会阻塞当前DOM树的继续创建。但是,如果是JavaScript资源,则当前DOM树停止创建,知道对应的JavaScript资源被加载并被执行后才继续创建。

8.在上述过程中,网页会发出DOMContent和onload事件。DOMContent事件是在DOM树创建完之后,onload事件是在DOM树创建完且网页所依赖的资源都加载完后发生。

页面渲染过程

页面渲染过程指webkit利用css和dom树构建renderObject树直到绘图上下文,大体过程如下

来自朱永盛《webkit技术内幕》图2-7

1.CSS文件被解释器解释成内部表示结构

2.CSS解释器工作完之后,在DOM树上附加解释后的样式信息,这就是RenderObject树

3.RenderObject节点在创建的同时,Webkit会根据网页的层次结构创建RenderLayer树,同时构建一个虚拟的绘图上下文。

4.在网页存续期间:DOM树,RenderObject树,RenderLayer树,绘图上下文一直都会存在,直到网页被销毁。

5. 最后根据绘图上下文生产最终的图像,这一过程主要依赖2D和3D图形库

来自朱永盛《webkit技术内幕》图2-8

在看chrome渲染的时候,发现页面一共有3个事件点,first paint,DOMContentLoaded,onLoad。fisrt paint就是所谓的首屏时间,以下文章很好的解释了为什么css要在head里面,js要放在body最后的原因。

参考文章 https://www.cnblogs.com/hongrunhui/p/8929001.html  (first pain讲的很详细)

FP发生在body中第一个script脚本之前的CSS解析和JS执行完成之后。换句话说就是第一脚本之前的DOM和CSSOM准备就绪之后,便会着手渲染第一脚本前的内容。

first pain有时候在load事件之后(比如没有图片视频等资源的,只有css,js资源的),有的在contentLoaded之前,比如百度首页(资源众多)

first paint一定在html文件加载完之后,要不然CSSOM不能准备好,就不会开始渲染

相关文章

  • html网页的的加载和渲染过程(webkit内核)

    一个网址从url到页面图像一般分为两个过程: 1. 网页加载过程:从URL到构建DOM树 2. 网页渲染过程:从D...

  • Android WebView简单使用以及实现native与h5

    一、WebView 谷歌提供的系统组件,用来加载和展现html网页,其采用webkit内核驱动,来实现网页浏览功能...

  • 网页的渲染机制

    网页的渲染机制 参考文章:ScriptJava——了解HTML页面的渲染过程浏览器加载,解析,渲染的过程HTML渲...

  • 网页的渲染机制

    网页的渲染机制 参考文章:ScriptJava——了解HTML页面的渲染过程浏览器加载,解析,渲染的过程HTML渲...

  • WebKit架构(二)

    WebKit资源加载机制 资源 网络和资源加载是网页的加载和渲染过程中的第一步,也是必不可少的一步。网页本身就是一...

  • Webkit的网页渲染过程

    Webkit的网页渲染过程 1.加载和渲染 浏览器的主要作用就是讲用户输入的'URL'转变成可视化的图片.按照某些...

  • 网页渲染流程简述

    1.网页的渲染过程 webkit渲染html+css1-1.获取dom分割层1-2.计算样式1-3.重排 放置d...

  • 浏览器渲染机制

    1.DOCTYPE 2.浏览器渲染过程 这里讨论webkit内核的浏览器 1、DOM Tree:浏览器将HTML解...

  • WebKit的网页渲染基本过程

    加载与渲染 浏览器的主要作用是将用户输入的“URL”转变为可视化图像。按照某文档的分析,这其中包含两个过程,其一是...

  • 主流浏览器的不同

    常见的浏览器内核(或者说渲染引擎)有很多个,如Trident、Gecko、WebKit等等,不同的内核对网页编写语...

网友评论

    本文标题:html网页的的加载和渲染过程(webkit内核)

    本文链接:https://www.haomeiwen.com/subject/agvqsftx.html