面试题

2018-04-18  本文已影响5人  樱速

面试题

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的输出
  1. componentDidMount
    真实的DOM被渲染出来后调用,在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。
    在服务端中,该方法不会被调用。
  1. componentWillReceiveProps
    组件接收到新的props时调用,并将其作为参数nextProps使用,此时可以更改组件props及state。
    componentWillReceiveProps: function(nextProps) {
        if (nextProps.bool) {
            this.setState({
                bool: true
            });
        }
    }
  1. shouldComponentUpdate
    组件是否应当渲染新的props或state,返回false表示跳过后续的生命周期方法,通常不需要使用以避免出现bug。在出现应用的瓶颈时,可通过该方法进行适当的优化。
    在首次渲染期间或者调用了forceUpdate方法后,该方法不会被调用
  2. componentWillUpdate
    接收到新的props或者state后,进行渲染之前调用,此时不允许更新props或state。
  3. componentDidUpdate
    完成渲染新的props或者state后调用,此时可以访问到新的DOM元素。
  4. componentWillUnmount
    组件被移除之前被调用,可以用于做一些清理工作,在componentDidMount方法中添加的所有任务都需要在该方法中撤销,比如创建的定时器或添加的事件监听器。

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

letconst声明方式
数据解构赋值
promise解决异步问题
classclass的继承等用法
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.跟后台交互数据的问题

上一篇下一篇

猜你喜欢

热点阅读