面试题

面试题

1.优化问题

使用requireJS、seaJS按需加载
CSS方面可以使用less、sass对CSS进行预处理
尽量减少或者不使用闭包，避免内存泄漏
尽量少的操作DOM，防止反复控制DOM影响性能

2.跨域问题

CORS
CORS背后的思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败。

// IE中对CORS的实现是xdr
var xdr = new XDomainRequest();
xdr.onload = function(){
    console.log(xdr.responseText);
}
xdr.open('get', 'http://www.baidu.com');
......
xdr.send(null);


// 其它浏览器中的实现就在xhr中
var xhr =  new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status ){
            console.log(xhr.responseText);
        }
    }
}
xhr.open('get', 'http://www.baidu.com');
......
xhr.send(null);

// 实现跨浏览器的CORS
function createCORS(method, url){
    var xhr = new XMLHttpRequest();
    if('withCredentials' in xhr){
        xhr.open(method, url, true);
    }else if(typeof XDomainRequest != 'undefined'){
        var xhr = new XDomainRequest();
        xhr.open(method, url);
    }else{
        xhr = null;
    }
    return xhr;
}
var request = createCORS('get', 'http://www.baidu.com');
if(request){
    request.onload = function(){
        ......
    };
    request.send();
}

JSONP
JSONP包含两部分：回调函数和数据。
回调函数是当响应到来时要放在当前页面被调用的函数。
数据就是传入回调函数中的json数据，也就是回调函数的参数了。

function handleResponse(response){
    console.log('The responsed data is: '+response.data);
}
var script = document.createElement('script');
script.src = 'http://www.baidu.com/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);
/*handleResonse({"data": "zhe"})*/
//原理如下：
//当我们通过script标签请求时
//后台就会根据相应的参数(json,handleResponse)
//来生成相应的json数据(handleResponse({"data": "zhe"}))
//最后这个返回的json数据(代码)就会被放在当前js文件中被执行
//至此跨域通信完成

jsonp虽然很简单，但是有如下缺点：

1. 安全问题(请求代码中可能存在安全隐患)
2. 要确定jsonp请求是否失败并不容易

3.redux原理

4.冒泡排序

var array = [5, 4, 3, 2, 1];
var temp = 0;
for (var i = 0; i < array.length; i++){
    for (var j = 0; j < array.length - i; j++){
        if (array[j] > array[j + 1]){
            temp = array[j + 1];
            array[j + 1] = array[j];
            array[j] = temp;
        }
    }
}
console.log(array);

5.css盒子模型

content(内容)、padding(内填充)、border(边框)、margin(外边距)

6.一个盒子垂直水平居中的几种方法

/*第一种*/
div{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    margin:auto;
}
/*第二种*/
div{
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-元素高度一半;
    margin-left:-元素宽度一半;
}
/*第三种（使用flex布局实现）*/
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

7.你项目中你都负责哪块,遇到过什么难点怎么解决的

8.框架的生命周期
https://segmentfault.com/img/bVEs9x?w=847&h=572

REACT

1. getDefaultProps
   作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。
2. getInitialState
   作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问> this.props。
3. componentWillMount
   在完成首次渲染之前调用，此时仍可以修改组件的state。
4. render

1. 必选的方法，创建虚拟DOM，该方法具有特殊的规则：
2. 只能通过this.props和this.state访问数据
3. 可以返回null、false或任何React组件
4. 只能出现一个顶级组件（不能返回数组）
5. 不能改变组件的状态
6. 不能修改DOM的输出

5. componentDidMount
   真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。
   在服务端中，该方法不会被调用。

6. componentWillReceiveProps
   组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。

    componentWillReceiveProps: function(nextProps) {
        if (nextProps.bool) {
            this.setState({
                bool: true
            });
        }
    }

7. shouldComponentUpdate
   组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。
   在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用
8. componentWillUpdate
   接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。
9. componentDidUpdate
   完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。
10. componentWillUnmount
    组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。

9.es6中都熟悉什么用过什么

let、const声明方式
数据解构赋值
promise解决异步问题
class、class的继承等用法
export module模块化

10.移动端rem布局怎么适配html的font-size

function fn() {
            var html = document.querySelector("html");
            var wid = html.getBoundingClientRect().width;
            html.style.fontSize = wid / 37.5 + "px"; 
            //得出来的结果不能小于12 ，68.3（因为Chrome最小支持12px）
        }

11.跟后台交互数据的问题