Java教程

JavaScript-浏览器线程

本文主要是介绍JavaScript-浏览器线程,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1.JS引擎线程

JS内核,也称JS引擎,负责处理执行javascript脚本。这是JS中的主线程,所以JS是单线程的编程语言,但是实际上JS属于单线程异步。异步是由子线程进行完成,主线程负责调度子线程。所以JS不严格的说也也属于多线程的编程语言

与GUI线程是互斥

2.GUI渲染线程

负责渲染浏览器界面,包括解析HTML、CSS、构建DOM树、Render树、布局与绘制等

当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行

与JS主线程互斥

3.事件监听线程

用来完成事件处理的,例如:click,mouseover...

4.计时器线程

负责处理定时器。setInterval和setTimeout

5.网络线程

负责处理http网络请求的

2.浏览器的渲染流程

每个浏览器内核的渲染流程不一样,下面我们主要以webkit为主。

渲染前奏

  1. 浏览器输入url,浏览器主进程接管,开了一个下载线程

  2. 然后进行HTTP请求(DNS查询、IP寻址等等),等待响应,开始下载响应报文。

  3. 将下载完的内容转交给Renderer进程管理

  4. 开始渲染...

渲染前置概念

1.DOM Tree: 浏览器将HTML解析成树形的数据结构。

2.CSS Rule Tree:浏览器将CSS解析成树形的数据结构。

3.Render Tree:DOM树和CSS规则树合并后生产Render树。

4.layout:有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系,从而去计算出每个节点在屏幕中的位置。

5.painting: 按照算出来的规则,通过显卡,把内容画到屏幕上。

6.reflow(回流):当浏览器发现某个部分发生了点变化影响了布局,需要倒回去重新渲染,内行称这个回退的过程叫 reflow。reflow 会从 <html> 这个 root frame 开始递归往下,依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果,比如树状目录的折叠、展开(实质上是元素的显 示与隐藏)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化,都会引起它内部、周围甚至整个页面的重新渲 染。通常我们都无法预估浏览器到底会 reflow 哪一部分的代码,它们都彼此相互影响着。

7.repaint(重绘):改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时,屏幕的一部分要重画,但是元素的几何尺寸没有变。

注意display:none的节点不会被加入Render Tree,而visibility: hidden则会,所以display:none会触发reflowvisibility: hidden会触发repaint

渲染步骤

浏览器内核拿到响应报文之后,渲染大概分为以下步骤

  1. 解析html生产DOM树。

  2. 解析CSS规则。

  3. 根据DOM Tree和CSS Tree生成Render Tree。

  4. 根据Render树进行layout,负责各个元素节点的尺寸、位置计算。

  5. 绘制Render树(painting),绘制页面像素信息。

  6. 浏览器会将各层的信息发送给GPU,GPU会将各层合成(composite),显示在屏幕上。

这篇关于JavaScript-浏览器线程的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!