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知识总结之浏览器(持续更新)

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

  2. WEBBASE篇: 第三篇, CSS知识1

    第三篇, CSS知识1 一,CSS 介绍 CSS: Cascading Style Sheets ---样式表 HTML: 搭建网页结构: CSS: 在网页结构基础上进行网页的美化: 二,CSS的使用 ...

  3. 《HTML与CSS知识》系列分享专栏

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

  4. Web前端基础怎么学? JavaScript、html、css知识架构图

    以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...

  5. html标签和css基础语法与浏览器兼容性等相关基础学习

    <!-- table的使用 --> <h3>前端日常</h3> <form action="https://www.baidu.com"& ...

  6. css属性兼容主流浏览器

    目前,对于网页中一些浏览器兼容性问题,可以使用css hack(css 招数)和浏览器Bug修复的方式解决. 名词解释: css Hack:针对特定浏览器编写冗余代码,这是一种欺骗浏览器的行为,预示着 ...

  7. CSS知识回顾--读《CSS 那些事儿》笔记

    由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...

  8. 转:【总结】浏览器CSS Hacks汇总,浏览器兼容方式CSS Hacks

    [总结]浏览器CSS Hacks汇总   浏览器兼容可以说是前端开发所要面对的第一个挑战,目前我的电脑上已经安装了6种浏览器(基于IE内核的不算,如Maxthon等). CSS hacks利用浏览器的 ...

  9. 学习笔记:js、css、html判断浏览器的各种版本

    js.css.html判断浏览器的各种版本 (转载自:http://www.jb51.net/web/42244.html  版权归原作者所有) 利用正则表达式来判断ie浏览器版本 判断是否IE浏览器 ...

随机推荐

  1. js无缝滚动原理及详解[转自刹那芳华]

    刚刚接触JS,网上找了一些关于无缝滚动的教程,但都大同小异,对我这种新手来说也只是会用,不知道什么意思,想要自己写个更是一头雾水.于是找了一些资料,详细说明一下JS无缝滚动的原理,相信看过这篇文章之后 ...

  2. 获取input file 选中的图片,并在一个div的img里面赋值src实现预览

    代码如下利用html5实现:几乎兼容所有主流浏览器,当然IE必须是IE 6以上 [jquery代码] $(function() { $("#file_upload").change ...

  3. 关于数据库中的JOIN的用法学习

    下面是例子分析 表A记录如下:  aID aNum  1 a20050111  2 a20050112  3 a20050113  4 a20050114  5 a20050115 表B记录如下:  ...

  4. Fiddler代理配置

     1.下载安装软件Fiddler 2.Fiddler设置HTTPS代理(如果代理的是https请求的需要操作这一步) 打开Fiddler,菜单栏:Tools -> Fiddler Options ...

  5. python项目实战-小游戏1

    项目规则: 1.玩家和敌人分别从现有的角色中选择3个角色 2.随机生成目前的血量,和攻击量 3.游戏规则:当玩家向敌人发起攻击,敌人当前的血量=之前的血量-玩家的血量,同理 4.3局两胜 5.自定义玩 ...

  6. 【习题 6-10 UVA - 246】10-20-30

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 发牌的那个牌堆用一个deque,7个牌堆用vector来模拟. 然后按照题意模拟就好. 不难. [代码] /* 1.Shoud it ...

  7. zeromq and jzmq

    install c test install jzmq java test Storm UI Cluster Summary Version Nimbus uptime Supervisors Use ...

  8. amazeui学习笔记--css(常用组件4)--关闭按钮Close

    amazeui学习笔记--css(常用组件4)--关闭按钮Close 一.总结 1.关闭按钮基本用法:关闭按钮样式,可以结合其他不同组件使用.对 <a> 或者 <button> ...

  9. 应用Python来计算排列中的逆序数个数

    在一个排列中,如果一对数的前后位置与大小顺序相反,即前面的数大于后面的数,那么它们就称为一个逆序.一个排列中逆序的总数就称为这个排列的逆序数.一个排列中所有逆序总数叫做这个排列的逆序数.也就是说,对于 ...

  10. 【2017 ACM-ICPC 亚洲区(乌鲁木齐赛区)网络赛 G】Query on a string

    [链接]h在这里写链接 [题意] 让你维护字符串的一段区间内T子串的个数. [题解] 因为t不大,所以. 暴力维护一下a[i]就好. a[i]表示的是S串从i位置开始,能和T串匹配几个字符. 用树状数 ...