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 函数的语法糖