CSS 加载存在先后顺序, 不严谨的书写顺序将会导致界面出现偏差并且正确的书写顺序也可以提高代码的可读性
正确的排序方式如下:
(1)定位属性: position display float left top right bottom overflow clear z-index flex
(2)自身属性: width height padding border margin background
(3)文字属性: font-famliy font-size font-style font-weight font-varient color
(4)文本属性: text-align vertical-align text-wrap text-transform text-indent text-ecoration letter-spacing white-spacing white-space text-overflow
(5)CSS3 中新增属性: content box-shadow border-radius transform
css 顺序按照以上顺序书写即可
浏览器的 reflow 回流提高浏览器加载速度 ">目的: 减少浏览器的 reflow(回流), 提高浏览器加载速度
接下来讲解浏览器的渲染原理
浏览器引擎简介
浏览器 FirefoxChrome 和 Safari 是基于两种渲染引擎构建的, Firefox 使用 GeokoMozilla 自主研发的渲染引擎, Safari 和 Chrome 都使用 webkit
渲染主流程
渲染引擎首先通过网络获得所请求文档的内容, 通常以 8K 分块的方式完成下面是渲染引擎在取得内容之后的基本流程:
解析 html 以构建 dom 树 -> 构建 render 树 -> 布局 render 树 -> 绘制 render 树
css 样式解析到显示至浏览器屏幕上就发生在步骤, 可见浏览器并不是一获取到 css 样式就立马开始解析而是根据 css 样式的书写顺序将之按照 dom 树的结构分布 render 样式, 完成第步, 然后开始遍历每个树结点的 css 样式进行解析, 此时的 css 样式的遍历顺序完全是按照之前的书写顺序在解析过程中, 一旦浏览器发现某个元素的定位变化影响布局, 则需要倒回去重新渲染
概念:
DOM Tree: 浏览器将 HTML 解析成树形的数据结构
CSS Rule Tree: 浏览器将 CSS 解析成树形的数据结构
Render Tree: DOM 和 CSSOM 合并后生成 Render Tree
layout: 有了 Render Tree, 浏览器已经能知道网页中有哪些节点各个节点的 CSS 定义以及他们的从属关系, 从而去计算出每个节点在屏幕中的位置
painting: 按照算出来的规则, 通过显卡, 把内容画到屏幕上
reflow(回流): 当浏览器发现某个部分发生了点变化影响了布局, 需要倒回去重新渲染, 内行称这个回退的过程叫 reflowreflow 会从 (html)根节点 这个 root frame 开始递归往下, 依次计算所有的结点几何尺寸和位置 reflow 几乎是无法避免的
repaint(重绘): 改变某个元素的背景色文字颜色边框颜色等等不影响它周围或内部布局的属性时, 屏幕的一部分要重画, 但是元素的几何尺寸没有变
例如: 现在界面上流行的一些效果, 比如树状目录的折叠展开 (实质上是元素的显 示与隐藏) 等, 都将引起浏览器的 reflow 鼠标滑过点击只要这些行为引起了页面上某些元素的占位面积定位方式边距等属性的变化, 都会引起它内部周围甚至整个页面的重新渲染
注意:
(1)display:none 的节点不会被加入 Render Tree, 而 visibility: hidden 则会, 所以, 如果某个节点最开始是不显示的, 设为 display:none 是更优的
(2)display:none 会触发 reflow, 而 visibility:hidden 只会触发 repaint, 因为没有发现位置变化
(3)有些情况下, 比如修改了元素的样式, 浏览器并不会立刻 reflow 或 repaint 一次, 而是会把这样的操作积攒一批, 然后做一次 reflow, 这又叫异步 reflow 或增量异步 reflow 但是在有些情况下, 比如 resize 窗口, 改变了页面默认的字体等对于这些操作, 浏览器会马上进行 reflow
来源: https://www.2cto.com/kf/201802/721145.html