web小技巧（黑科技）

最近看到了两个有点意思的有关web性能的hack。记录下来感叹一下奇葩~

• 解析js

解析js占了页面加载时间的一大块，所以现在的js引擎会搞lazy parse，没调用的函数先不解析，这样省了不少页面加载时间，但第一次执行函数调用时解析js会稍微拖慢速度，某些js函数还会解析多遍。

如何省这个时间呢？用requestIdleCallback在浏览器空闲的时候顺便调js函数的length方法触发解析函数。

详情见https://www.youtube.com/watch?v=MlNGomWegCE

• FLIP

web上UI的动画效果想达到60FPS还是没那么容易的。一个展开元素的动画效果，如果在元素的长宽位置等css属性上加动画效果，每帧都会触发重新排版渲染。但有一个很好的属性css transform，这个属性的变化不会触发重排，只进行图层的合成，速度很快。

FLIP能只一次排版就把动画效果搞定。FLIP是指first, last, invert, play四个阶段，先把记录元素初始长宽位置(first)，再直接把元素变到最终位置(last)，记录下此时元素的长宽位置，这样只触发一次排版。然后用css transform把元素变回原来的位置(invert)，最后在transform属性上加动画效果(play)，这才是最终得到的动画效果。

详情见https://www.youtube.com/watch?v=thNyy5eYfbc

转载于:https://www.cnblogs.com/kilobtye/p/5708616.html