【学习笔记】浏览器渲染原理

1、浏览器和内核对应关系

浏览器名称 渲染引擎(内核) ECMAScript引擎(JS引擎)
IE6-8 Trident JScript(ie3-8)、Chakra(ie9)
Firefox 3.5+ Gecko TraceMonkey
Chrome4+ WebKit V8
Safari4+ WebKit SquirrelFish Extreme
Opera10+ Presto Carakan

2、浏览器的主要构成

浏览器的主要组件包括:

  1. 用户界面 - 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。

  2. 浏览器引擎 - 用来查询及操作渲染引擎的接口。

  3. 渲染引擎 - 用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来。

  4. 网络 - 用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作。

  5. UI后端 - 用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系统的用户接口。

  6. js解释器 - 用来解释执行JS代码。

  7. 数据存储 - 属于持久层,浏览器需要在硬盘中保存类似cookie的各种数据,Html5定义了web database技术,这是一种轻量级完整的客户端存储技术

【学习笔记】浏览器渲染原理_第1张图片

3、浏览器的工作过程和渲染过程

3.1 浏览器工作过程:
  1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;
  2. 浏览器开始载入html代码,发现标签内有一个标签引用外部CSS文件;
  3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
  4. 浏览器继续载入html中部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;
  5. 浏览器在代码中发现一个标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
  6. 服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布,因此浏览器需要回过头来重新渲染这部分代码;
  7. 浏览器发现了一个包含一行JavaScript代码的

你可能感兴趣的:(APP测试,计算机网络,学习笔记)