转载 一次千万级流量的 618 电商 H5 活动页干货分享 ｜2021 年中总结

掘金大佬 luffyZh 一次千万级流量的 618 电商 H5 活动页干货分享 ｜2021 年中总结
大佬写的文章，自己记录下：
提供给面对C端的用户做活动H5页面来参考
超级干货！！！

var $_DESIGN_LAYOUT_WIDTH = 414
<meta name="viewport" content="width=$_DESIGN_LAYOUT_WIDTH ,user-scalable=no,viewport-fit=cover">

// 375 设计稿
<meta name="viewport" content="width=375, user-scalable=no, viewport-fit=cover">

// 414 设计稿
<meta name="viewport" content="width=414, user-scalable=no, viewport-fit=cover">

作者：luffyZh
链接：https://juejin.cn/post/6973922659125952548
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

包括动画卡顿等 作者都写得很详细

如果你在写移动端，又涉及到了动画效果的时候，开启硬件加速就对了～

// 1 - 采用 transform: translateZ(0)
body {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

// 2 - 采用 transform: translate3d(0, 0, 0)

body {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

// 3 - 在 Chrome 和 Safari 中，当使用 CSS 变化或动画时，我们可能会看到闪烁的效果

body {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}

作者：luffyZh
链接：https://juejin.cn/post/6973922659125952548
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。