整理一下面试题，借鉴sf上面的。

一、移动端设置的meta标签详解；

 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

width 设置viewport宽度，为一个整数，货字符串“device-width”

device-width 设备的宽度

height 设置viewport高度，一般设置了宽度会自动解析出高度，可以不用设置

initial-scale 默认缩放比例（初始缩放比例），为一个数字，可以带小数

minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数

maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数

user-scaleable 是否允许手动缩放；

二、跨域的几种方式

首先我们要知道为什么会出现跨域问题。是因为浏览器的同源策略，同源策略/SOP（Same origin policy）是一种约定，由Netspace公司1995年引入浏览器，他是浏览器最核心也是最基本的安全功能，如果缺少同源策略，浏览器很容易受到XSS，CSRF等攻击。所谓同源是指“协议+域名+端口”三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

解决跨域问题：

1.通过jsonp跨域

原生的实现方法：

         <script>
            var script = document.createElement('script');
            script.type = 'text/javascript';
        
            // 传参并指定回调执行函数为onBack
            script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
            document.head.appendChild(script);
        
            // 回调执行函数
            function onBack(res) {
                alert(JSON.stringify(res));
            }
         </script>

服务端返回如下：

onBack({"status": true, "user": "admin"})

jquery的ajax方法：

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "onBack",    // 自定义回调函数名
    data: {}
});

vue.js方法：

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'onBack'
}).then((res) => {
    console.log(res); 
})

这里就举例这三种，具体详见点击打开链接。

三、渲染优化

1、禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）；

2、使用css3代码代替js动画，（尽可能避免重绘重排以及回流）；

3、对于一些小图标，可以使用base64位编码，以减少网络请求。但是不建议大图使用，比较消耗CPU；

小图标的优势在于：

    减少HTTP请求；

    避免文件跨域；

    修改及时生效；

4、页面头部的<style>会阻塞页面；（因为render进程中，js线程和渲染线程是互斥的）；

5、页面头部的<script>标签会阻塞页面；（因为render进程中，js线程和渲染线程是互斥的）；

6、页面中的空href和src会阻塞页面其他资源的加载（阻塞下载进程）；

7、网页Gzip，CDN托管，data缓存，图片服务器；

8、前端模板 js+数据，减少由于HTML标签导致的宽带浪费，前端用变量保存ajax请求结果，每次操作本地变量，不用请求，减少请求次数；

9、用innerHTML代替DOM操作，减少DOM操作次数，优化JavaScript性能；

10、当需要设置的样式很多时，设置calssname而不是直接操作style；

11、少用全局变量，缓存DOM节点查找的结果。减少IO读取操作；

12、图片预加载，将样式表放在头部，将脚本放在底部，加上时间戳；

13、避免在页面的整体布局中使用table，table要等其中的内容全部下载之后才会显示出来。显示比div+css布局慢；

14、禁止使用iframe（阻塞父文档onload事件）；

四、事件的各个阶段

1：捕获阶段 → 2：目标阶段 → 3：冒泡阶段 

document → target → document

true表示该元素在事件的捕获阶段（由外往内传递时）响应事件；

false表示该元素在事件的冒泡阶段（由内向外传递时）响应事件。

五、let var const 区别

let允许你声明一个作用域被限制在块级中的变量、语句或者表达式

let绑定不受变量提升的约束，这意味着let声明不会被提升到当前该变量处于从快开始到初始化的暂存死区

var声明变量的作用域限制在其声明位置的上下文中，而非声明变量总是全局的

由于变量声明总是任意代码执行前处理的，所以在代码中的任意位置声明变量总是等效于在代码开头声明

const 声明创建一个值的只读引用（既指针）

六、箭头函数

语法比函数表达式更短，并且不绑定自己的this、arguments、super或new.target。这些函数表达式最适合用于非方法函数，并且它们不能用作构造函数；更详细的箭头函数点击这里点击打开链接；

七、打乱数组的顺序

arr.sort(function(){return Math.random() - 0.5})

要想理解上面的代码，首先得会用sort ，sort可以传两个值a,b，如果第一个值减去第二个值大于零则是正序，反之是倒序，

那么，当return的值小于0，a会被排到b的前面。等于0，a 和 b的位置不变。大于0，b会排到a的前面。

八、可能用到的meta标签

我就直接copy过来了

    <!-- 设置缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <!-- 可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ） -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
    <meta name="format-detection"content="telephone=no, email=no" />

    其他meta标签
    <!-- 启用360浏览器的极速模式(webkit) -->
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    <meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">

九、如何消除transition闪屏问题

    .css {
        -webkit-transform-style: preserve-3d;
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
    }

过度动画（在没有启动硬件加速的情况下）会出现抖动现象，以上的解决方案只是改变视角来启动硬件加速的一种方式；

另外一种方式：

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

    启动硬件加速
    最常用的方式：translate3d、translateZ、transform

    opacity属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态）

    will-chang属性（这个比较偏僻），一般配合opacity与translate使用（而且经测试，除了上述可以引发硬件加速的属性外，
    其它属性并不会变成复合层），

    弊端： 硬件加速会导致 CPU性能占用量过大，电池电量消耗加大 ；因此 尽量避免泛滥使用硬件加速。

十、Android 4.x的bug

1.三星Galaxy s4自带浏览器不支持border-radius缩写；

2.同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分；

3.部分手机，a链接支持鼠标：visited事件，也就是说链接访问后会变为紫色；

4.android无法同时播放多音频audio；

5.OPPO 的border-radius会失效；

十一、js如何判断设备的来源

    function deviceType(){
        var ua = navigator.userAgent;
        var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    
        for(var i=0; i<len,len = agent.length; i++){
            if(ua.indexOf(agent[i])>0){         
                break;
            }
        }
    }
    deviceType();
    window.addEventListener('resize', function(){
        deviceType();
    })


    微信的 有些不太一样
    function isWeixin(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=='micromessenger'){
            return true;
        }else{
            return false;
        }
    }

十二、audio元素和video元素在ios和Android中无法自动播放

原因：因为各大浏览器都为了节省流量，做出了优化，在用户没有交互时，不予自动播放；

/音频，写法一
    <audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>

//音频，写法二
    <audio controls="controls"> 
        <source src="music/bg.ogg" type="audio/ogg"></source>
        <source src="music/bg.mp3" type="audio/mpeg"></source>
        优先播放音乐bg.ogg，不支持在播放bg.mp3
    </audio>

 //JS绑定自动播放（操作window时，播放音乐）
    $(window).one('touchstart', function(){
        music.play();
    })

 //微信下兼容处理
    document.addEventListener("WeixinJSBridgeReady", function () {
        music.play();
    }, false);
    

    //小结
    //1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常；
    //2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间；
    //3.注意不要遗漏微信的兼容处理需要引用微信JS；