研讨浏览器绘制和Web性能的注意事项

>>>点击获取更多文章<<<

浏览器绘制

Web浏览器将HTML、CSS和JavaScript转换成已完成的过程视觉化表示是至关复杂的，涉及到很好的"魔术"。下面是一组简化的浏览器步骤：

1. 浏览器建立DOM和CSSOM(CSS Object Model)。
2. 浏览器建立呈现树，其中考虑到来自CSSOM的DOM和样式(其中样式 display: none 是避开的)。
3. 浏览器根据呈现树计算布局的几何形状及其元素。
4. 浏览器逐个像素绘制，以建立咱们在屏幕上看到的可视化表示。

在这里，咱们重点对painting，也就是绘画，进行讨论。

全部这些步骤加在一块儿，对于浏览器来讲，在加载时要作的工做不少.实际上，不只仅是在加载上，而是在DOM(或CSSOM)被更改的任什么时候候。这就是为何许多Web开发人员倾向于经过使用某种前端框架来部分解决这个问题，好比React，除了许多其余优势以外，它还能够帮助高度优化DOM中的更改，以免没必要要的从新计算或渲染。

你可能据说过这样的术语，状态（state）, 组件渲染（component rendering），或不可变数据（Immutability）。全部这些都与DOM更改的优化有关，换句话说，只有在必要时才对DOM进行更改。

举个例子，Web应用程序的状态可能会发生变化，这将致使UI的更改。可是，某些或更多组件不受此更改的影响。React帮助咱们的是，对实际受状态变化影响的元素进行限制写入，最终将呈现限制在Web应用程序的最小部分：

DOM/CSSOM → render tree → layout → painting

可是，浏览器绘制有其自身的特殊性，由于它甚至能够在不对DOM或CSSOM进行任何更改的状况下进行。

上图是页面性能摘要示例，图表是使用DevTools中的Chrome性能面板生成的(稍后将详细介绍)，它显示了浏览器中的每一个任务在从新加载页面后在记录的时间(0-7.12s)中花费了多少时间。正如你所看到的，绘画起着重要的做用，而这并非一件坏事。在这个特殊的例子中，增长的绘画是由页面上的动画GIF和canvas drawing(在60 fps)的组合形成的，二者都不会致使DOM或其样式的任何更改，同时仍然触发绘画。

另外一个能够在没有任何外部干预的状况下致使绘画的特性的好例子是css的animation属性，而且与动画GIF或canvas相比，它在Web上更常见。动画一般由用户触发，如悬停houver，感谢animation和@keyframes，咱们甚至能够建立至关复杂的动画在页面上不断运行，无需付出多大的努力。

有些人可能没有意识到，这些动画很容易失控，并不断触发绘画，这可能会耗费咱们大量的浏览器处理能力。固然，有一些规则能够用来避免绘画。最明显的就是将元素的操做限制在css的transform和opacity属性，在默认状况下不会触发画图，除非存在一些特殊状况，例如动画SVG路径。

Paint flashing

你可能知道Chrome有DevTools。你可能不知道的是一个小小的捷径(Mac上的Shift+Cmd+P，PC上的Control+Shift+P)。内DevTools打开一个搜索栏命令菜单。

render 面板 估计会引发你的注意，输入render,找到Show Rendering，回车确认。能够看到一些有趣的选项，当涉及到在web上调试动画时，这些选项可能很是有用，例如如图的FPS meter。

Layer borders和paint flashing也是有趣的工具。Layer borders用于显示由浏览器呈现的层的边框，以便于识别任何转换或大小更改。paint flashing用于突出显示浏览器被迫从新绘制的网页区域。你们能够将他们打钩而后找个网页重信刷新下看下效果。

个案研究

当设计提出了要求弄出嘈杂的背景要求，也就是老电视没信号的那种花屏幕效果（一点一点雪花点）。众所周知，GIF有许多问题，其中性能固然是其中之一，因此我确定不能在整个页面背景中使用GIF。

在这种状况下，使用JavaScript绝对是一种选择，使用画布canvas也会有所帮助。然而，全部这一切彷佛有点过度，由于只是有一个背景。我决定选择只使用CSS的方法。

个人解决方案是把一个小的“噪音”png图像做为一个background-image，启用background-repeat把它扔到单色背景上。如何达到噪音效果呢？用“无限的CSS动画”效果呀！经过设置background-position在200毫秒的时间内转换为不一样的值。网页效果请点击 http://demo.zhangbing.name/de...

咱们经过transform或opacity替换background-position 进行使用，代码在个人我的demo网页上http://demo.zhangbing.name/de...， 上面也提到过css的transform和opacity属性能够避免绘画，打开刚才说的 render面板，找到 Paint flashing 选项，在两个不一样制做的网页上，进行点击切换，会发觉demoa1效果，也就是用了 background-position的那种方案，会进行从新绘画，并且消耗计算机性能。对好比下图