web前端面试题

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-shdow，都是在CPU上计算的。在translate版本中，却让这个macbook在自己新的图层在GPU中得到提升。此时此元素macboox是在自己单独的一层上，任何2D transform，3D transform或者opacity的变化都可以完全的使用GPU，GPU可以保持非常快并且可以给我们提供非常快的帧速率。

3 怎么实现this对象的深拷贝

function deepCopy(p, c) {
    var c = c || {};
    for (var i in p) {
        if(! p.hasOwnProperty(i)){
            continue;
        }
        if (typeof p[i] === 'object') {
            c[i] = (p[i].constructor === Array) ? [] : {};
            deepCopy(p[i], c[i]);
        } else {
            c[i] = p[i];
        }
    }
    return c;
}

4 表单可以跨域吗

ajax跨域是因为浏览器需要保护用户的安全和隐私而给js设定的限制。如果你自己写个浏览器去掉这个限制那js就可以任意跨域访问了
form表单可以跨域一个是历史原因要保持兼容性，一个是form表单会刷新页面不会把结果返回给js，所以相对安全
用jsonp跨域其实也是利用了浏览器的历史兼容性，而最新的font资源就不允许直接跨域引用

5 promise、async有什么区别

Promise代码完全都是Promise的API（then、catch等等），操作本身的语义反而不容易看出来,
async / await函数的实现最简洁，最符合语义，几乎没有语义不相关的代码
async / await 函数就是 Generator 函数的语法糖