区块链技术博客
www.b2bchain.cn

四、浏览器进程线程详解求职学习资料

D0b2wT.gif

本文介绍了四、浏览器进程线程详解求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

在学习实践中的一些优化方案之前,我们需要对浏览器的工作原理有一个简单的认知。

浏览器的工作,靠不同的进程协同完成。

什么是进程

我们可以很简单的理解什么是应用程序。我们下载一个app,就是一个应用程序。但是有一个很关键的地方需要我们意识到,应用程序是静态的。一个应用程序就是一个安装包,一个代码的集合。而当我们运行了该应用程序,那么应用程序就变成动态的,执行中的,在应用程序运行的同时,操作系统就会对应的启动一个进程,来负责该应用程序的运行。

因此, 进程其实是动态的应用程序。进程是动态的实体。

从理论的角度看,进程是动态的实体,但如果从实现的角度严格来说,进程其实是一种数据结构,进程是一个具有一定独立功能的程序关于某个数据集合的一次运行活动。它是操作系统动态执行的基本单元,在传统的操作系统中,进程既是基本的分配单元,也是基本的执行单元。当然对于前端开发来说,不用思考这么深入。有精力的可以进一步继续了解。

如果将浏览器看成是一个大集团,那么进程就是集团下的某一个工厂。综合这个原理,我们可以总结出一些进程的特点。

动态性 :进程的实质是程序的一次执行过程,于是也有对应的执行状态与生命周期,就绪,运行,阻塞等。
并发性 :一个集团旗下可以同时拥有多个工厂,浏览器也可以同时运行多个进程
独立性 :工厂是独立的,进程是一个能独立运行的基本单位
异步性 :进程因为是独立的,因此各自按照自己逻辑不可预知的执行
协同性 :应用程序相互之间能够协作完成一些任务,只不过相对而言,跨厂沟通成本比较大

浏览器进程

与操作系统一样,浏览器中也有一个对应的任务管理器。在任务管理器中,每一个任务,都是一个独立的进程。如下图。

四、浏览器进程线程详解

从图中,我们得知,浏览器主要包含如下进程:

一、浏览器主进程

浏览器进程 :这是浏览器的主进程,在浏览器中只会创建一个,他的职能主要有

  • 浏览器界面的显示,用户的交互,如前进,后退,标签栏,设置等
  • 各个页面进程的管理,创建,关闭等
  • 网络资源的管理,下载内容,缓存等

二、网页进程

网页进程 :浏览器的网页渲染和JS执行在一个单独进程中进行。这个进程又称为 render 进程 ,由浏览器进程启动。render 进程一般会有多个,每启动一个页面,都会启动一个 render 进程。

网页进程与我们开发的网页应用息息相关,因此我们最应该对这部分有相对深刻的理解。

在这里,我们要引入一个线程的概念。

如果说,进程是一个工厂,那么线程,就是工厂中的流水线。一个工厂的正常运行,往往需要各个流水线通力合作才能完成。在网页进程中也是一样,如果我们想要网页能够正常渲染运行,那么也同样需要多个线程参与合作。

在这个过程中,有如下线程会参与到这个合作中来

GUI 渲染线程

GUI 负责浏览器界面 HTML 元素的渲染。整个渲染过程,可以用一张非常经典的图来表示
四、浏览器进程线程详解

图中的样式规则,就是 「CSSOM」

简单解析一下这张图。

首先,HTML的解析过程,是自上而下的。解析过程中,如果发现了 ** 「link, style, script」**等标签都会使解析过程阻塞,需要等待外部资源加载完成,才会继续解析。基于这个特点,如果我们想要让页面快速显然出效果,那么就应该将 JS 的加载,放在标签的最后来解析。而将 css 样式的加载,放在 DOM结构之前是为了防止页面出现无样式的 DOM 结构。

HTML 会解析出 DOM 树,css 样式文件也会解析出对应的规则「CSSOM」,在 Attachment 环节,GUI 进程将 DOM 树与样式规则合在一起,生成 渲染树「render tree」,DOM Tree 只有骨架,而 render tree 骨架和样式都有了,于是就可以完整的渲染出来,也就可以直接在页面中绘制出来。

当页面在交互过程中,需要重绘(Repaint)或者由于某些操作引发了回流(reflow)时,GUI 会重新计算 render tree,然后重新绘制页面元素。

reflow 与 repaint 是非常重要的概念。也是我们在做性能优化时,需要时常关注的重点。

repaint 重绘:当某个页面元素的样式发生变化「例如颜色,背景,透明度等」,GUI 就会根据新的样式,重新绘制该元素,这个过程,我们称为重绘。

利用 chrome 中的 Paint flashing 工具,我们可以简单观察元素的重绘。

开发者工具 -> more tools -> Rendering,勾选 Paint flashing。如图,重绘中的元素,会被高亮显示。

四、浏览器进程线程详解

我们修改一个文字的颜色。

四、浏览器进程线程详解

后面的闪动是鼠标移动导致,不是修改颜色导致

可以看到,当颜色修改,重绘的元素被高亮显示。

reflow 回流:当某些页面元素的尺寸,结构,或者属性发生改变时,浏览器不得不重新计算多个页面元素位置并绘制的过程,称为回流。例如,某个元素高度改变,那么就会导致其他页面元素的位置发生变化,这个时候 GUI 需要重新计算多个页面元素的位置。

我们也可以观察一下,我们修改一个元素的高度,如果它导致多个元素重绘,那么就表示改操作引发的回流。

四、浏览器进程线程详解

从图中可以看到,当我修改「数据来源」的 line-height 时,该元素高度变高,同时也会导致后续元素的位置调整,这个时候,后面所有受到影响的元素都进行了重绘。这就是回流。

我们可以基于 是否会导致其他元素发生重绘 的标准来判断回流是否产生。

从性能的角度考虑,肯定是回流的成本远大于单个元素的重绘。因此我们在实践过程中,就要尽量避免回流的产生。一些不必要的回流会造成额外的性能消耗。

如果回流无法避免,我们就要考虑影响尽量少的元素,降低 GUI 的计算量。

会导致回流的操作大概有:

  • 浏览器窗口发生变化
  • 元素尺寸或者位置发生变化
  • 元素内容发生变化,例如文字多出一行或者少出一行
  • 字体大小变化
  • 删除或者添加元素
  • 激活 CSS 伪类,例如 hover,鼠标滑过
  • 滚动
  • JS 操作 DOM

我们可以使用 Paint flashing 工具,检查一下某些网站是否有额外的回流,以此标准做一个简单的评判。

例如 掘金首页,效果如图

四、浏览器进程线程详解

再对比看看知乎。

四、浏览器进程线程详解

很明显,当我们刷新浏览器时,掘金首页进行了大量的,多次的重绘,知乎的页面在回流这一块的优化,是要远远好于掘金页面的。 所以我们可以认为,掘金首页还有许多优化的空间。知乎的页面几乎达到了理想状态:首页渲染页面,只绘制一次。

再说性能

减少回流和重绘,是提升页面性能的有效手段。而优化思路,与我们使用 React 大致一致。浏览器会维护一个队列「UI rendering」,这里可以和事件循环结合起来理解,如果一有小改动,就回流一次,那对浏览器来说压力太大了,因此,如果维护一个队列,把同一事件循环内的所有回流计算操作,放在一个队列中一次批量处理,这样浏览器就会减少很多计算压力。

在事件循环中,UI rendering 队列为一个 macro-task。

如何避免回流

抓住一个核心原则, 对于DOM元素的操作,尽量避免影响该元素之外的其他元素

  • 避免使用 table 布局。table中,任何一个元素的改动,都会影响整个组件。而table还有一个很神奇的特点,它的改变,会导致在它之前的元素重绘。使用 table 标签的代价会大于其他标签。

  • 如果我们想要改变元素的样式,通过改变元素的 class 名,而不是使用 JS 来操作。「尽可能在 DOM 树的末端」

  • 如果要实现动画,优先使用 确保父级元素固定, fix 或者 position 都是比较好的选择。在实现动画时,一定要着重考虑回流的影响。更建议在 animation 中 使用 transform-translate,而不是 left top。同样的道理,transform 是相对于元素自身进行位移,不需要考虑对外界元素的影响。 除此之外,有的浏览器还会将 transform 元素提升到单独的图层,跳过重绘回流的计算,使用 GPU 加速帮助提高动画更新的效率。如果我们使用 JavaScript 来实现动画,浏览器无法知道当前处于动画场景,因此不会智能的为动画元素创建新图层,这个时候我们可以通过一些小手段告诉浏览器。早些使用通过设置元素属性 translateZ(0) 来达到目的,现在可以使用 will-change: transform, opacity

  • 避免设置多项内联样式,通过设置 style 来改变样式会导致回流,如果多级内联样式,那么回流的成本就会很大

  • 在低性能机器上,牺牲视觉效果,换取渲染速度

  • 首屏服务端渲染,减少页面内容计算次数。

「关于浏览器渲染,更详细的文章参考 」

在学习实践中的一些优化方案之前,我们需要对浏览器的工作原理有一个简单的认知。

浏览器的工作,靠不同的进程协同完成。

什么是进程

我们可以很简单的理解什么是应用程序。我们下载一个app,就是一个应用程序。但是有一个很关键的地方需要我们意识到,应用程序是静态的。一个应用程序就是一个安装包,一个代码的集合。而当我们运行了该应用程序,那么应用程序就变成动态的,执行中的,在应用程序运行的同时,操作系统就会对应的启动一个进程,来负责该应用程序的运行。

因此, 进程其实是动态的应用程序。进程是动态的实体。

从理论的角度看,进程是动态的实体,但如果从实现的角度严格来说,进程其实是一种数据结构,进程是一个具有一定独立功能的程序关于某个数据集合的一次运行活动。它是操作系统动态执行的基本单元,在传统的操作系统中,进程既是基本的分配单元,也是基本的执行单元。当然对于前端开发来说,不用思考这么深入。有精力的可以进一步继续了解。

如果将浏览器看成是一个大集团,那么进程就是集团下的某一个工厂。综合这个原理,我们可以总结出一些进程的特点。

动态性 :进程的实质是程序的一次执行过程,于是也有对应的执行状态与生命周期,就绪,运行,阻塞等。
并发性 :一个集团旗下可以同时拥有多个工厂,浏览器也可以同时运行多个进程
独立性 :工厂是独立的,进程是一个能独立运行的基本单位
异步性 :进程因为是独立的,因此各自按照自己逻辑不可预知的执行
协同性 :应用程序相互之间能够协作完成一些任务,只不过相对而言,跨厂沟通成本比较大

浏览器进程

与操作系统一样,浏览器中也有一个对应的任务管理器。在任务管理器中,每一个任务,都是一个独立的进程。如下图。

四、浏览器进程线程详解

从图中,我们得知,浏览器主要包含如下进程:

一、浏览器主进程

浏览器进程 :这是浏览器的主进程,在浏览器中只会创建一个,他的职能主要有

  • 浏览器界面的显示,用户的交互,如前进,后退,标签栏,设置等
  • 各个页面进程的管理,创建,关闭等
  • 网络资源的管理,下载内容,缓存等

二、网页进程

网页进程 :浏览器的网页渲染和JS执行在一个单独进程中进行。这个进程又称为 render 进程 ,由浏览器进程启动。render 进程一般会有多个,每启动一个页面,都会启动一个 render 进程。

网页进程与我们开发的网页应用息息相关,因此我们最应该对这部分有相对深刻的理解。

在这里,我们要引入一个线程的概念。

如果说,进程是一个工厂,那么线程,就是工厂中的流水线。一个工厂的正常运行,往往需要各个流水线通力合作才能完成。在网页进程中也是一样,如果我们想要网页能够正常渲染运行,那么也同样需要多个线程参与合作。

在这个过程中,有如下线程会参与到这个合作中来

GUI 渲染线程

GUI 负责浏览器界面 HTML 元素的渲染。整个渲染过程,可以用一张非常经典的图来表示
四、浏览器进程线程详解

图中的样式规则,就是 「CSSOM」

简单解析一下这张图。

首先,HTML的解析过程,是自上而下的。解析过程中,如果发现了 ** 「link, style, script」**等标签都会使解析过程阻塞,需要等待外部资源加载完成,才会继续解析。基于这个特点,如果我们想要让页面快速显然出效果,那么就应该将 JS 的加载,放在标签的最后来解析。而将 css 样式的加载,放在 DOM结构之前是为了防止页面出现无样式的 DOM 结构。

HTML 会解析出 DOM 树,css 样式文件也会解析出对应的规则「CSSOM」,在 Attachment 环节,GUI 进程将 DOM 树与样式规则合在一起,生成 渲染树「render tree」,DOM Tree 只有骨架,而 render tree 骨架和样式都有了,于是就可以完整的渲染出来,也就可以直接在页面中绘制出来。

当页面在交互过程中,需要重绘(Repaint)或者由于某些操作引发了回流(reflow)时,GUI 会重新计算 render tree,然后重新绘制页面元素。

reflow 与 repaint 是非常重要的概念。也是我们在做性能优化时,需要时常关注的重点。

repaint 重绘:当某个页面元素的样式发生变化「例如颜色,背景,透明度等」,GUI 就会根据新的样式,重新绘制该元素,这个过程,我们称为重绘。

利用 chrome 中的 Paint flashing 工具,我们可以简单观察元素的重绘。

开发者工具 -> more tools -> Rendering,勾选 Paint flashing。如图,重绘中的元素,会被高亮显示。

四、浏览器进程线程详解

我们修改一个文字的颜色。

四、浏览器进程线程详解

后面的闪动是鼠标移动导致,不是修改颜色导致

可以看到,当颜色修改,重绘的元素被高亮显示。

reflow 回流:当某些页面元素的尺寸,结构,或者属性发生改变时,浏览器不得不重新计算多个页面元素位置并绘制的过程,称为回流。例如,某个元素高度改变,那么就会导致其他页面元素的位置发生变化,这个时候 GUI 需要重新计算多个页面元素的位置。

我们也可以观察一下,我们修改一个元素的高度,如果它导致多个元素重绘,那么就表示改操作引发的回流。

四、浏览器进程线程详解

从图中可以看到,当我修改「数据来源」的 line-height 时,该元素高度变高,同时也会导致后续元素的位置调整,这个时候,后面所有受到影响的元素都进行了重绘。这就是回流。

我们可以基于 是否会导致其他元素发生重绘 的标准来判断回流是否产生。

从性能的角度考虑,肯定是回流的成本远大于单个元素的重绘。因此我们在实践过程中,就要尽量避免回流的产生。一些不必要的回流会造成额外的性能消耗。

如果回流无法避免,我们就要考虑影响尽量少的元素,降低 GUI 的计算量。

会导致回流的操作大概有:

  • 浏览器窗口发生变化
  • 元素尺寸或者位置发生变化
  • 元素内容发生变化,例如文字多出一行或者少出一行
  • 字体大小变化
  • 删除或者添加元素
  • 激活 CSS 伪类,例如 hover,鼠标滑过
  • 滚动
  • JS 操作 DOM

我们可以使用 Paint flashing 工具,检查一下某些网站是否有额外的回流,以此标准做一个简单的评判。

例如 掘金首页,效果如图

四、浏览器进程线程详解

再对比看看知乎。

四、浏览器进程线程详解

很明显,当我们刷新浏览器时,掘金首页进行了大量的,多次的重绘,知乎的页面在回流这一块的优化,是要远远好于掘金页面的。 所以我们可以认为,掘金首页还有许多优化的空间。知乎的页面几乎达到了理想状态:首页渲染页面,只绘制一次。

再说性能

减少回流和重绘,是提升页面性能的有效手段。而优化思路,与我们使用 React 大致一致。浏览器会维护一个队列「UI rendering」,这里可以和事件循环结合起来理解,如果一有小改动,就回流一次,那对浏览器来说压力太大了,因此,如果维护一个队列,把同一事件循环内的所有回流计算操作,放在一个队列中一次批量处理,这样浏览器就会减少很多计算压力。

在事件循环中,UI rendering 队列为一个 macro-task。

如何避免回流

抓住一个核心原则, 对于DOM元素的操作,尽量避免影响该元素之外的其他元素

  • 避免使用 table 布局。table中,任何一个元素的改动,都会影响整个组件。而table还有一个很神奇的特点,它的改变,会导致在它之前的元素重绘。使用 table 标签的代价会大于其他标签。

  • 如果我们想要改变元素的样式,通过改变元素的 class 名,而不是使用 JS 来操作。「尽可能在 DOM 树的末端」

  • 如果要实现动画,优先使用 确保父级元素固定, fix 或者 position 都是比较好的选择。在实现动画时,一定要着重考虑回流的影响。更建议在 animation 中 使用 transform-translate,而不是 left top。同样的道理,transform 是相对于元素自身进行位移,不需要考虑对外界元素的影响。 除此之外,有的浏览器还会将 transform 元素提升到单独的图层,跳过重绘回流的计算,使用 GPU 加速帮助提高动画更新的效率。如果我们使用 JavaScript 来实现动画,浏览器无法知道当前处于动画场景,因此不会智能的为动画元素创建新图层,这个时候我们可以通过一些小手段告诉浏览器。早些使用通过设置元素属性 translateZ(0) 来达到目的,现在可以使用 will-change: transform, opacity

  • 避免设置多项内联样式,通过设置 style 来改变样式会导致回流,如果多级内联样式,那么回流的成本就会很大

  • 在低性能机器上,牺牲视觉效果,换取渲染速度

  • 首屏服务端渲染,减少页面内容计算次数。

「关于浏览器渲染,更详细的文章参考 」

在学习实践中的一些优化方案之前,我们需要对浏览器的工作原理有一个简单的认知。

浏览器的工作,靠不同的进程协同完成。

什么是进程

我们可以很简单的理解什么是应用程序。我们下载一个app,就是一个应用程序。但是有一个很关键的地方需要我们意识到,应用程序是静态的。一个应用程序就是一个安装包,一个代码的集合。而当我们运行了该应用程序,那么应用程序就变成动态的,执行中的,在应用程序运行的同时,操作系统就会对应的启动一个进程,来负责该应用程序的运行。

因此, 进程其实是动态的应用程序。进程是动态的实体。

从理论的角度看,进程是动态的实体,但如果从实现的角度严格来说,进程其实是一种数据结构,进程是一个具有一定独立功能的程序关于某个数据集合的一次运行活动。它是操作系统动态执行的基本单元,在传统的操作系统中,进程既是基本的分配单元,也是基本的执行单元。当然对于前端开发来说,不用思考这么深入。有精力的可以进一步继续了解。

如果将浏览器看成是一个大集团,那么进程就是集团下的某一个工厂。综合这个原理,我们可以总结出一些进程的特点。

动态性 :进程的实质是程序的一次执行过程,于是也有对应的执行状态与生命周期,就绪,运行,阻塞等。
并发性 :一个集团旗下可以同时拥有多个工厂,浏览器也可以同时运行多个进程
独立性 :工厂是独立的,进程是一个能独立运行的基本单位
异步性 :进程因为是独立的,因此各自按照自己逻辑不可预知的执行
协同性 :应用程序相互之间能够协作完成一些任务,只不过相对而言,跨厂沟通成本比较大

浏览器进程

与操作系统一样,浏览器中也有一个对应的任务管理器。在任务管理器中,每一个任务,都是一个独立的进程。如下图。

四、浏览器进程线程详解

从图中,我们得知,浏览器主要包含如下进程:

一、浏览器主进程

浏览器进程 :这是浏览器的主进程,在浏览器中只会创建一个,他的职能主要有

  • 浏览器界面的显示,用户的交互,如前进,后退,标签栏,设置等
  • 各个页面进程的管理,创建,关闭等
  • 网络资源的管理,下载内容,缓存等

二、网页进程

网页进程 :浏览器的网页渲染和JS执行在一个单独进程中进行。这个进程又称为 render 进程 ,由浏览器进程启动。render 进程一般会有多个,每启动一个页面,都会启动一个 render 进程。

网页进程与我们开发的网页应用息息相关,因此我们最应该对这部分有相对深刻的理解。

在这里,我们要引入一个线程的概念。

如果说,进程是一个工厂,那么线程,就是工厂中的流水线。一个工厂的正常运行,往往需要各个流水线通力合作才能完成。在网页进程中也是一样,如果我们想要网页能够正常渲染运行,那么也同样需要多个线程参与合作。

在这个过程中,有如下线程会参与到这个合作中来

GUI 渲染线程

GUI 负责浏览器界面 HTML 元素的渲染。整个渲染过程,可以用一张非常经典的图来表示
四、浏览器进程线程详解

图中的样式规则,就是 「CSSOM」

简单解析一下这张图。

首先,HTML的解析过程,是自上而下的。解析过程中,如果发现了 ** 「link, style, script」**等标签都会使解析过程阻塞,需要等待外部资源加载完成,才会继续解析。基于这个特点,如果我们想要让页面快速显然出效果,那么就应该将 JS 的加载,放在标签的最后来解析。而将 css 样式的加载,放在 DOM结构之前是为了防止页面出现无样式的 DOM 结构。

HTML 会解析出 DOM 树,css 样式文件也会解析出对应的规则「CSSOM」,在 Attachment 环节,GUI 进程将 DOM 树与样式规则合在一起,生成 渲染树「render tree」,DOM Tree 只有骨架,而 render tree 骨架和样式都有了,于是就可以完整的渲染出来,也就可以直接在页面中绘制出来。

当页面在交互过程中,需要重绘(Repaint)或者由于某些操作引发了回流(reflow)时,GUI 会重新计算 render tree,然后重新绘制页面元素。

reflow 与 repaint 是非常重要的概念。也是我们在做性能优化时,需要时常关注的重点。

repaint 重绘:当某个页面元素的样式发生变化「例如颜色,背景,透明度等」,GUI 就会根据新的样式,重新绘制该元素,这个过程,我们称为重绘。

利用 chrome 中的 Paint flashing 工具,我们可以简单观察元素的重绘。

开发者工具 -> more tools -> Rendering,勾选 Paint flashing。如图,重绘中的元素,会被高亮显示。

四、浏览器进程线程详解

我们修改一个文字的颜色。

四、浏览器进程线程详解

后面的闪动是鼠标移动导致,不是修改颜色导致

可以看到,当颜色修改,重绘的元素被高亮显示。

reflow 回流:当某些页面元素的尺寸,结构,或者属性发生改变时,浏览器不得不重新计算多个页面元素位置并绘制的过程,称为回流。例如,某个元素高度改变,那么就会导致其他页面元素的位置发生变化,这个时候 GUI 需要重新计算多个页面元素的位置。

我们也可以观察一下,我们修改一个元素的高度,如果它导致多个元素重绘,那么就表示改操作引发的回流。

四、浏览器进程线程详解

从图中可以看到,当我修改「数据来源」的 line-height 时,该元素高度变高,同时也会导致后续元素的位置调整,这个时候,后面所有受到影响的元素都进行了重绘。这就是回流。

我们可以基于 是否会导致其他元素发生重绘 的标准来判断回流是否产生。

从性能的角度考虑,肯定是回流的成本远大于单个元素的重绘。因此我们在实践过程中,就要尽量避免回流的产生。一些不必要的回流会造成额外的性能消耗。

如果回流无法避免,我们就要考虑影响尽量少的元素,降低 GUI 的计算量。

会导致回流的操作大概有:

  • 浏览器窗口发生变化
  • 元素尺寸或者位置发生变化
  • 元素内容发生变化,例如文字多出一行或者少出一行
  • 字体大小变化
  • 删除或者添加元素
  • 激活 CSS 伪类,例如 hover,鼠标滑过
  • 滚动
  • JS 操作 DOM

我们可以使用 Paint flashing 工具,检查一下某些网站是否有额外的回流,以此标准做一个简单的评判。

例如 掘金首页,效果如图

四、浏览器进程线程详解

再对比看看知乎。

四、浏览器进程线程详解

很明显,当我们刷新浏览器时,掘金首页进行了大量的,多次的重绘,知乎的页面在回流这一块的优化,是要远远好于掘金页面的。 所以我们可以认为,掘金首页还有许多优化的空间。知乎的页面几乎达到了理想状态:首页渲染页面,只绘制一次。

再说性能

减少回流和重绘,是提升页面性能的有效手段。而优化思路,与我们使用 React 大致一致。浏览器会维护一个队列「UI rendering」,这里可以和事件循环结合起来理解,如果一有小改动,就回流一次,那对浏览器来说压力太大了,因此,如果维护一个队列,把同一事件循环内的所有回流计算操作,放在一个队列中一次批量处理,这样浏览器就会减少很多计算压力。

在事件循环中,UI rendering 队列为一个 macro-task。

如何避免回流

抓住一个核心原则, 对于DOM元素的操作,尽量避免影响该元素之外的其他元素

  • 避免使用 table 布局。table中,任何一个元素的改动,都会影响整个组件。而table还有一个很神奇的特点,它的改变,会导致在它之前的元素重绘。使用 table 标签的代价会大于其他标签。

  • 如果我们想要改变元素的样式,通过改变元素的 class 名,而不是使用 JS 来操作。「尽可能在 DOM 树的末端」

  • 如果要实现动画,优先使用 确保父级元素固定, fix 或者 position 都是比较好的选择。在实现动画时,一定要着重考虑回流的影响。更建议在 animation 中 使用 transform-translate,而不是 left top。同样的道理,transform 是相对于元素自身进行位移,不需要考虑对外界元素的影响。 除此之外,有的浏览器还会将 transform 元素提升到单独的图层,跳过重绘回流的计算,使用 GPU 加速帮助提高动画更新的效率。如果我们使用 JavaScript 来实现动画,浏览器无法知道当前处于动画场景,因此不会智能的为动画元素创建新图层,这个时候我们可以通过一些小手段告诉浏览器。早些使用通过设置元素属性 translateZ(0) 来达到目的,现在可以使用 will-change: transform, opacity

  • 避免设置多项内联样式,通过设置 style 来改变样式会导致回流,如果多级内联样式,那么回流的成本就会很大

  • 在低性能机器上,牺牲视觉效果,换取渲染速度

  • 首屏服务端渲染,减少页面内容计算次数。

「关于浏览器渲染,更详细的文章参考 」

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 四、浏览器进程线程详解求职学习资料
分享到: 更多 (0)
D0b2wT.gif

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们