浏览器绘制
Web浏览器将HTML、CSS和JavaScript转换成已完成的历程视觉化示意是相称庞杂的，涉及到很好的”把戏”。下面是一组简化的浏览器步骤：
- 浏览器建立DOM和CSSOM(CSS Object Model)。
- 浏览器建立显现树，个中考虑到来自CSSOM的DOM和款式(个中款式 display: none 是避开的)。
- 浏览器依据显现树盘算规划的若干外形及其元素。
- 浏览器逐一像素绘制，以建立我们在屏幕上看到的可视化示意。
在这里，我们重点对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的那种计划，会举行从新绘画，而且斲丧盘算机机能。对照方下图
