web页面浏览器渲染过程

1.解析html文件,并构建DOM树:

  在DOM树中,每一个html标签都有一个对应的节点,并且每一个文本也有一个对应 的节点(js的textNode),DOM树的根节点就是documentElement,对应的是html标签。

例如:在chrome中,构建成的DOM树会被将页面划分为很多图层(注:图层并不是节点,一个图层可能包含一个或者多个节点)。

更深入的了解:参考http://www.html5rocks.com/zh/tutorials/speed/layers/

2.解析CSS代码,计算出各层的最终样式数据:

  在这个过程中,CSS代码中的非法语句会被浏览器忽略掉,在改变节点位置,尺寸时会触发这个过程的再次执行,这就是Recalculate style(样式重计算)。

3.根据DOM树以及计算出的各层最终样式构建渲染树:

  在这个过程中,渲染树会忽略掉不需要渲染的元素,如:head、display:none;

  这个过程中包括两部分,一是为每个节点生成图形和位置,这时就会触发我们所说的回流和重布局(layout),二是将每个节点绘制填充到图层位图中,这时会触发重绘(paint)。

4.图层作为纹理上传至GPU,复合多个图层到页面上生成最终图像(Composite Layers—图层重组)

  此过程原理较复杂,请自行查阅。http://www.html5rocks.com/zh/tutorials/speed/layers/,此文中有一些引子可供理解。

触发重布局的属性:

  1.改变盒模型相关的属性:width, height, margin, padding, display, border-width,border,min-height。

  2.改变定位属性及浮动:top,bottom,left,right,position,float,clear。

  3.改变节点内部文字的结构:text-align, overflow, font-weight,font-family,font-size,line-height, vertical-align, white-space。

  总结:其实看了这些属性,也许聪明的你已经猜到,触发重布局的主要原因就是 节点的大小尺寸或位置被改变了。

  触发重绘的属性:color,background,border-radius,border-style,visibility,outline,box-shadow……(background: gradient渐变 GPU杀手啊啊啊!)

  总结:这些属性没有改变节点的大小和位置,只是改变了节点内部的渲染效果,所以只重绘,不重布局。

针对浏览器的CSS性能优化

减少重绘和重排:

  1.不要一个一个地单独修改属性,最好通过一个选集(class)来定义这些修改;

  2.把对节点的大量修改操作放在页面之外:

    ①用documentFragment来修改;

    ②clone节点,做大量修改,然后替换掉之前的节点;

    ③通过display:none隐藏节点(一次重绘和重排),大量修改样式属性,在显   示节点(第二次重绘和重排),共两次重绘和重排。

  3.不要频繁获取计算后的样式。如果你需要使用计算后的样式,最好暂存起来而不            是直接从DOM上读取。

  4.绝对定位元素通常就不会影响其他大部分元素。

CSS选择器的使用:

  由于CSS selector选取元素是从右往左选取,所以在使用CSS selector时,嵌套的层数越深,selector性能会越差,后代选择器+元素选择器的组合性能非常差(比如:.foo p,这个选择器会首先选取页面上所有的p元素,然后再去它们的祖先里面找foo class)。不过这一理论随着现代浏览器的发展,对性能的影响已经越来越微不足道了。在现代浏览器里,甚至属性选择器之类性能都已得到优化,并不会产生明显的性能影响。

高性能CSS3动画注意事项

1.opacity是不会触发重绘的,当opacity值发生改变时,GPU只是通过改变图层的alpha值来达到效果,但前提是被改变opacity值的元素必须是一个图层。在动画制作中,opacity是个很好的选择。

2.在兼容性允许的情况下,transform变形绝对是开发页面动画的最佳选择,目前在很多CSS框架组件中使用的动画,都优选transform来实现。transform:translate3d(0, 0, 0)和transform: translateZ(0)可以强迫浏览器为其创建图层,这样就消除了在动画开始前图层的创建时间,使动画尽快开始。变形的还有一个重要优点是,transform平移、旋转、缩放都不会触发重布局,而以前使用的left、top均会触发重布局。

参考内容:http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

CSS知识总结之浏览器(持续更新)的更多相关文章

  1. css面试题汇总 (持续更新)

    前言:这篇随笔是为了准备后面的面试而整理的,网上各种面试题太多了,但是我感觉很多太偏了,而且实际开发过程中并不会遇到,因此这里我整理一些比较常用的,或者是相对比较重要的知识点,每个知识点都会由浅入深, ...

  2. HTML/CSS/JavaScript学习笔记【持续更新】

    HTML <font> 标签 定义和用法 <font> 规定文本的字体.字体尺寸.字体颜色. 实例 规定文本字体.大小和颜色: <font size="3&qu ...

  3. html+css常用小笔记(持续更新)

    1 去掉input点击时的蓝色边框 outline:none; 2 禁止文本选中 -webkit-touch-callout: none; /* iOS Safari */ -webkit-user- ...

  4. CSS知识总结之浏览器

    web页面浏览器渲染过程 1.解析html文件,并构建DOM树: 在DOM树中,每一个html标签都有一个对应的节点,并且每一个文本也有一个对应 的节点(js的textNode),DOM树的根节点就是 ...

  5. 一些css小用法总结(持续更新~)

    1.用:before和:after实现小尖角效果 <div class="div"></div> .div{ background: #fff; borde ...

  6. linux 调试&各种知识收集2(持续更新)

    1.查看netlink socket 丢包 cat /proc/net/netlink sk Eth Pid Groups Rmem Wmem Dump Locks Drops Inode c91ed ...

  7. 兼容低版本IE浏览器的一些心得体会(持续更新)

    前言: 近期工作中,突然被要求改别人的代码,其中有一项就是兼容IE低版本浏览器,所以优雅降级吧. 我相信兼容低版本IE是许多前端开发的噩梦,尤其是改别人写的代码,更是痛不欲生. 本文将介绍一些本人兼容 ...

  8. PHP持续保有长连接,利用flush持续更新浏览器UI,下载进度条实现

    如何用PHP+JS实现上传进度条,大部分的人可能都实现过,但是下载呢?如何呢?原理也是差不多的,就是分次读写,每次读多少字节,但是这样的不好就是长连接,一般实现下载进度条常用的两种解决方案是:一种是需 ...

  9. 【oracle笔记1】基础知识大集锦:增删改,数据类型,用户操作,持续更新中···

    什么是数据库?数据库就是用来存储和管理数据的仓库.首先我来简单介绍一下各数据库的背景,常见的数据库如下,oracle:甲骨文公司(市场占用率最高),oracle也是一个公司名,翻译过来就是甲骨文的意思 ...

随机推荐

  1. HihoCoder——Trie树

    本文出自:http://blog.csdn.net/svitter 原题:http://hihocoder.com/contest/hiho2/problem/1 题解:使用Trie树..基础题目.一 ...

  2. 移动端 微信 网易 触屏滑动回弹菜单(css版)

    总结一下: 有点:网易新闻,微信 热文 都是 -webkit-overflow-scrolling: touch;实现,css实现,轻巧: bug: 部分安卓浏览器(uc,自带)  只支持持续滑动,不 ...

  3. 泛泰A820L (高通公司MSM8660 cpu) 3.4内核CM10.1(Android 4.2.2) 测试版第二版

    欢迎关注泛泰非盈利专业第三方开发团队 VegaDevTeam  (本team 由 syhost suky zhaochengw(z大) xuefy(大星星) tenfar(R大师) loogeo cr ...

  4. zigbee、profile、cluster、 endpoint、

    1.引用ZigBee联盟的说法 Profile: a collection of device descriptions, which together form a cooperative appl ...

  5. UVA 193 Graph Coloring 图染色 DFS 数据

    题意:图上的点染色,给出的边的两个点不能都染成黑色,问最多可以染多少黑色. 很水的一题,用dfs回溯即可.先判断和当前点相连的点是否染成黑色,看这一点是否能染黑色,能染色就分染成黑色和白色两种情况递归 ...

  6. 章节2:SQL之多表连接

    原文:章节2:SQL之多表连接 Sql的多表连接关系有:内连接.外连接和交叉连接. 先建立两个用于演示的表: TB_Characters: Id Character 1 内向 2 外向 3 中性性格 ...

  7. ArcGIS 10 破解安装(win7 64位)

    上一周换了个win7 64位系统,昨天依照各种各样破解方法装ArcGIS10装了一天,装上之后ArcMap能用,可是装的AO sdk不能用,在VS2008里一拖就报错,确实把我给气坏了.今天早上上班, ...

  8. Class loader:static

    package classloader; public class ClassLoaderDisplayDemo { public static void main(String[] args) { ...

  9. Flex4 Alert PopupManager 演示样本

    Flex4中间PopupManager分类似模仿桌面用户界面弹出窗体,有些人还喜欢JS弹出屏幕操作,底层接口灰色禁用掉. 创建需要要喷射形式的文件,码如下面: <?xml version=&qu ...

  10. Code Forces 414B 很不错的双手,以促进合规

    http://codeforces.com/problemset/problem/414/B 题目挺不错的.留个纪念,活动脑筋不错的题目 #include<iostream> #inclu ...