一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第28天，点击查看活动详情。

前言

最近看到一些js的知识点，自己总结下，方便后续查阅。

可以通过下面的方式开启


transform: translateZ(0); 

// 或者

transform: translate3d(0, 0, 0);

这个是通过变换的3d效果来开启。

开启了硬件加速后，浏览器会使用GPU来加速，让动画看起来更加流畅。

如果开启后遇到动画有闪烁，可以使用下css来兼容

 backface-visibility: hidden;
 perspective: 800;

backface-visibility是指元素使用3d效果时，背面是否可见。hidden为不可见。

perspective是指元素使用3d效果时，有一定的距离才会有透视效果。设置800，透视效果还可以。none为默认值，没有透视效果。

使用vue的开发者都知道，vue有keep-alive标签，这个是可以缓存vue组件的，如果你想要切换组件后，之前的组件还保留着数据等等，那么就可以使用keep-alive标签。

它有3个属性，include和exclude，max。

include支持字符串或者数组，正则，传入组件的name值，匹配的就会被缓存。
exclude支持字符串或者数组，正则，传入组件的name值，匹配的就会不被缓存。
max传入数字，最大缓存组件的个数，如果超过就不缓存了。

include和exclude一个是缓存，一个是不被缓存。

如果我对二者提供了同样的组件name值，那会怎么样？哪个优先级更高？

我们可以去源码那里看看

截取部分代码：

这个条件是判断是否符合缓存的条件，如果不符合，则直接返回虚拟dom，不缓存。

可以看到它先对include判断

如果有include，但是组件没有名字，或者名字不匹配，就不会缓存，直接返回vnode。

如果有include，且有名字匹配上，则继续看exclude属性。如果有名字，且exclude匹配上，则返回vnode，不缓存。

所以如果include和exclude有同样的组件name，它就不会缓存了，exclude优先级更高。

如果你使用了keep-alive,切换组件时对应的生命周期需要使用activated和deactivated，因为mounted只会执行一次，而beforeDestroy不会执行。

可以在click事件中添加e.preventDefault()阻止默认事件。这样就阻止a链接的默认行为。

给内联元素的定位设置absolute,它的display会变成block。然后是脱离文档流，形成bfc。float也是一样。

js的一些知识点总结