2018大厂高级前端面试题汇总-答案

[ly2011]

1. 移动端适配1px问题 构建1个伪元素，将它的长宽放大到2倍，边框宽度设置为1px,再以transform缩放到50%

.radius-border {
    position: relative;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
    .radius-border:before {
        content: "";
        pointer-events: none;
                /* 防止点击触发 */
        box-sizing: border-box;
        position: absolute;
        width: 200%;
        height: 200%;
        left: 0;
        top: 0;
        border-radius: 8px;
        border: 1px solid #999;
        -webkit-transform(scale(0.5));
        -webkit-transform-origin: 0 0;
        transform(scale(0.5));

        transform-origin: 0 0;
    }
}

2. 居中为什么要使用transform(为什么不使用marginLeft/Top)

top/left花了大量的时间去绘制每一帧。所有的css包括box-shadow都是在CPU上计算的。在translate版本中，却让这个 macbook 在自己新的图层在GPU中得到提升。此时此元素的macbook是在自己单独的一层上，任何2D transform, 3D transform或者opacity的变化都可以完全的使用GPU，GPU可以保持非常快并且可以给我们提供非常快的帧速率。

3. 怎样实现this对象的深拷贝

function deepCopy(obj) {
   const newObj = JSON.parse(JSON.stringify(obj))
   return newObj
}

4. 表单可以跨域吗？