performance面板使用,以及解决动画卡顿

时间 2019-11-08

标签 performance 面板使用以及解决动画繁體版

原文原文链接

https://googlechrome.github.io/devtools-samples/jank// 官方案例css

http://www.javashuo.com/article/p-ogffqjfp-db.htmlhtml

http://www.javashuo.com/article/p-sypanrqx-bc.htmlgit

The Anatomy of a Frame https://aerotwist.com/blog/the-anatomy-of-a-frame/

http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html 浏览器渲染过程github

http://www.javashuo.com/article/p-ruzqwaaq-g.html CSS动画的性能分析和浏览器GPU加速web

https://blog.csdn.net/leer168/article/details/25917093 深刻浏览器理解CSS animations 和 transitions的性能问题chrome

http://www.javashuo.com/article/p-myybgvmu-nq.html 说说动画卡顿的解决方案api

实际案例浏览器

http://www.javashuo.com/article/p-hbizibnk-bz.htmlbash

http://www.javashuo.com/article/p-vegqapcg-g.htmldom

遵循的原则

1. 关于阻塞

css加载不会阻塞 DOM树的解析；CSS解析会阻塞；
css加载和解析会阻塞 js（因此内联样式不用加载性能较高，适用于第一屏）
js 会阻塞 DOM树的解析（由于js会改变DOM树内容）
css引入的字体文件加载也会阻塞 js , 页面渲染

2. 关于与页面渲染过程的对应

js执行时：这时应该只是构建了前面部分的dom树和CSSOM树，由于js须要经过dom api和CSSOM api操做前面部分的标签的内容和样式。
DOM树构建完成：DomContentLoaded事件
CSSOM构建完成、Render Tree构建完成：Recalculate Style
Layout：Layout事件
paint：Paint（图片层绘制）和 Composite Layers（图片层合并），除了transform 或 opacity属性以外，更改任何属性始终都会触发绘制Paint。
reflow重排：3 4 5步走一遍
repaint重绘：3 5步走一遍
更改一个既不要布局也不要绘制的属性：3步 + Composite Layers，此行为在678从新渲染步骤中开销最小，适合动画或滚动，具体好比transfrom opacity。

3. 关于chrom浏览器的一些行为

渲染队列：浏览器存在一个渲染队列，用于将屡次连续的重排和重绘操做变成一次。当你进行DOM的读操做时，若是队列不为空，chrome会清空队列，当即进行重排或重绘；若是为空，chrome不会作出多余的操做。
布局：布局或重排中浏览器须要计算元素要占据的空间大小及其在屏幕的位置，网页的布局模式意味着一个元素可能影响其余元素，例如 <body> 元素的宽度通常会影响其子元素的宽度以及树中各处的节点。
绘制与合成：绘制通常是在多个表面（一般称为层）上完成的，所以浏览器须要将它们按正确顺序绘制到屏幕上，以便正确渲染页面。
css选择器：对于复杂的css选择器，浏览器须要花更多时间来肯定元素的样式，所以以类为中心的css编写原则，老外比较推崇，好比:nth-last-child伪类能够用独立的类替代（否则它怎么叫伪类(￣▽￣)"）。

手动控制从新渲染

window.requestAnimationFrame() 方法能够将某些代码统一放到下一次从新渲染时执行。具体是将js代码放在下一帧开始时执行。若是使用setTimeout 或 setInterval 来执行动画之类的视觉变化，其回调可能在帧的某个时间点执行，可能在末尾，这会使咱们丢失帧，致使卡顿。

处理“布局抖动” 反复读写属性会致使布局抖动，致使长帧。

function doubleHeight(element) { var currentHeight = element.clientWidth; element.style.width = (currentHeight / 2) + 'px'; element.style.height = '80px'; } var elements = document.getElementsByTagName('tr'); for (var i = 0; i < elements.length; i++) { doubleHeight(elements[i]); }

将doubleHeight函数改为下面这样：

function doubleHeight(element) { var currentHeight = element.clientHeight; window.requestAnimationFrame(function () { element.style.height = (currentHeight * 2) + 'px'; }); }

2）页面滚动事件（scroll）

$(window).on('scroll', function() { window.requestAnimationFrame(scrollHandler); });

3）最适合用于动画

http://www.javashuo.com/article/p-vegqapcg-g.html