面试题
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虽然很简单，但是有如下缺点：
- 安全问题(请求代码中可能存在安全隐患)
- 要确定
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
getDefaultProps
作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。getInitialState
作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问> this.props。componentWillMount
在完成首次渲染之前调用，此时仍可以修改组件的state。render
1. 必选的方法，创建虚拟DOM，该方法具有特殊的规则：
2. 只能通过this.props和this.state访问数据
3. 可以返回null、false或任何React组件
4. 只能出现一个顶级组件（不能返回数组）
5. 不能改变组件的状态
6. 不能修改DOM的输出
componentDidMount
真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。
在服务端中，该方法不会被调用。
componentWillReceiveProps
组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。
componentWillReceiveProps: function(nextProps) {
if (nextProps.bool) {
this.setState({
bool: true
});
}
}
shouldComponentUpdate
组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。
在首次渲染期间或者调用了forceUpdate方法后，该方法不会被调用componentWillUpdate
接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。componentDidUpdate
完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。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.跟后台交互数据的问题
