文档章节

CSS与浏览器的工作原理

蓝小驴
 蓝小驴
发布于 05/09 15:52
字数 1317
阅读 1
收藏 0

此内容均为借鉴,提炼。

现代浏览器通常拥有两个重要的执行线程,这两个线程相互配合来渲染出页面:主线程 与 排版线程

主线程:

  1. 运行JavaScript
  2. 计算HTML元素的CSS样式
  3. 布局页面
  4. 把页面元素绘制成一个或多个位图
  5. 把这些位图移交给排版线程

排版线程:

  1. 通过GPU渲染位图,并显示在屏幕上
  2. 主线程请求更新位图的可见部分或即将可见的部分
  3. 判断出当前页面处于可见的部分
  4. 判断出即将通过页面滚动而可见的部分
  5. 随着用户滚动页面来移动这些部分(可见部分的和即将可见的部分)

GPU:

  1. 排版线程通过GPU把位图绘制到了屏幕上。
  2. GPU比较擅长于:绘制位图到屏幕、重复的绘制同一个位图、在不同的位置,以不同的旋转角度,或者不同的缩放大小来绘制同一个位图。
  3. GPU相对慢的地方:将位图加载到显存里。

重排与重绘:

浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个内部数据结构——DOM树渲染树

  1. DOM树表示页面结构,渲染树表示DOM节点如何显示。
  2. 当DOM的变化影响了元素的几何属性(宽或高),浏览器需要重新计算元素的几何属性,同样其他元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。这个过程称为重排。完成重排后,浏览器会重新绘制受影响的部分到屏幕,该过程称为重绘。

    tips:并不是所有的DOM变化都会影响几何属性,比如改变一个元素的背景色并不会影响元素的宽和高,这种情况下只会发生重绘。

 

引起重排的情况:

很显然,每次重排,必然会导致重绘,那么,重排会在哪些情况下发生?

  1. 添加或者删除可见的DOM元素
  2. 元素位置改变
  3. 元素尺寸改变
  4. 元素内容改变(例如:一个文本被另一个不同尺寸的图片替代)
  5. 页面渲染初始化(无法避免)
  6. 浏览器窗口尺寸改变

这些都是显而易见的,或许你已经有过这样的体会,不间断地改变浏览器窗口大小,导致UI反应迟钝(某些低版本IE下甚至直接挂掉),现在你可能恍然大悟,没错,正是一次次的重排重绘导致的!

 

Transition:

在整个Transition的每一帧中,浏览器都要去重新布局,绘制页面,并把最新的位图对象加载到GPU。

设计决策:

那么,是否这就意味这我们不要去缓动一个元素的高度?非也,一些情况下,这是你的设计效果的一部分,并且动画效果可以非常快的完成。也许动画的元素是孤立的,不会引起页面其他部分进行重新布局;也许该元素只是单纯的进行重绘,浏览器可以快速的完成;也许该元素很小,浏览器只需将很小的位图对象传递给GPU。
当然了,在不影响你设计的视觉效果的情况下,最好去缓动一个性能较好的CSS属性,如transform,而不是去缓动一个性能较差的CSS属性,如height。举例来说,假设你的设计中有一个按钮,当点击它的时候会出来一个菜单,试着去缓动菜单的transform属性来显示它而不是缓动它的top或height属性来达到类似的效果。
在动画上特别快的CSS属性包括:

  1. CSS transform
  2. CSS opacity
  3. CSS filter

总结

重排和重绘是DOM编程中耗能的主要原因之一,平时涉及DOM编程时可以参考以下几点:

  1. 尽量不要在布局信息改变时做查询(会导致渲染队列强制刷新)
  2. 同一个DOM的多个属性改变可以写在一起(减少DOM访问,同时把强制渲染队列刷新的风险降为0)
  3. 如果要批量添加DOM,可以先让元素脱离文档流,操作完后再带入文档流,这样只会触发一次重排(fragment元素的应用)
  4. 将需要多次重排的元素,position属性设为absolute或fixed,这样此元素就脱离了文档流,它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

 

 

本文转载自:https://www.jianshu.com/p/4c9d91277172

蓝小驴
粉丝 0
博文 17
码字总数 3699
作品 0
广州
私信 提问
《HTML与CSS知识》系列分享专栏

收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站来...

开元中国2015
2018/10/28
24
0
Colorblindly —— 为色盲患者开发的浏览器扩展

Colorblindly 是一个浏览器扩展,可将所有图片转成色盲患者看到的样子。扩展的工作原理是在网页上放置一个 CSS 滤镜,并根据实际的色盲类型修改颜色比例。

局长
2018/11/09
17
0
「前端那些事儿」① 浏览器渲染引擎

前言 浏览器基础是前端知识网中的一个小分支,也是前端开发人员必须掌握的基础知识点。他贯穿着前端的整个网络体系,项目优化也是围绕着浏览器进行的。 开发人员在面试的时候或许会被问到: ...

木羽zwwill
2017/10/31
0
0
深入浏览器研究 CSS 的动画和转换性能

你可能已将在某些项目中使用过CSS Animations 或 CSS Transitions。(如果还没有,可以去CSS-Trick's查看一些和animations、transitions相关的文章。)你也许注意到,在你写的一些动画效果中...

oschina
2014/05/03
2.8K
2
不用任何 JS 的异步 Web 聊天组件 - CSS-Only Chat

CSS-Only Chat 是一个真正的怪兽级异步 Web 聊天组件,直接在浏览器中发送、接收消息,而不重新加载页面,前端没有使用任何 JS。 其简单的工作原理是使用伪选择器与一个永远加载的索引页面加...

匿名
05/09
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

小知识:讲述Linux命令别名与资源文件的区别

别名 别名是命令的快捷方式。为那些需要经常执行,但需要很长时间输入的长命令创建快捷方式很有用。语法是: alias ppp='ping www.baidu.com' 它们并不总是用来缩短长命令。重要的是,你将它...

老孟的Linux私房菜
34分钟前
2
0
《JAVA核心知识》学习笔记(6. Spring 原理)-5

它是一个全面的、企业应用开发一站式的解决方案,贯穿表现层、业务层、持久层。但是 Spring 仍然可以和其他的框架无缝整合。 6.1.1. Spring 特点 6.1.1.1. 轻量级 6.1.1.2. 控制反转 6.1.1....

Shingfi
35分钟前
4
0
Excel导入数据库数据+Excel导入网页数据【实时追踪】

1.Excel导入数据库数据:数据选项卡------>导入数据 2.Excel导入网页数据【实时追踪】:

东方墨天
43分钟前
4
1
正则表达式如何匹配一个单词存在一次或零次并且不占捕获组位置

正则表达式如何匹配一个单词存在一次或零次并且不占捕获组位置 今天要用正则表达式实现匹配一个词出现一次或者不出现的情况,但是又不仅仅是这么简单的需求。先详细说下我这种情况吧,也许有...

Airship
49分钟前
6
0
第八讲:asp.net C# web 读取文件

本讲主要讲解如何在asp.net页面上传文件。 首先,前台页面: 其次,后台页面: 结果: 1、前台效果: 2、后台结果:

刘日辉
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部