面试题

angular双向绑定原理

dirty check。简单来说就是给每个需要绑定的元素加个watcher，缓存下oldValue，然后定时遍历所有的watcher，比较newValue和oldValue，如果变化了做更新操作。

数据类型

null,undefined,boolean,string,number,object

基本类型：string, number, boolean

引用类型：object （array,function,）

注意：type of null 是object,null是空对象，null == undefined 为true,null === undefined 为false

js重载

https://www.cnblogs.com/yugege/p/5539020.html

内存泄漏问题

html与xhtml区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。

HTML 和 XHTML 的区别简单来说，XHTML 可以认为是 XML 版本的 HTML，为符合 XML 要求，XHTML 语法上要求更严谨些。

以下是 XHTML 相对 HTML 的几大区别：

  XHTML 要求正确嵌套

  XHTML 所有元素必须关闭

  XHTML 区分大小写

  XHTML 属性值要用双引号

  XHTML 用 id 属性代替 name 属性

  XHTML 特殊字符的处理

HTML 的语义化理解

1，去掉或者丢失样式的时候能够让页面呈现出清晰的结构

2，有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；

3，方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

4，便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

CSS 动画性能比较问题

CSS3的动画的优点：
　　1.在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化（比如专门新建一个图层用来跑动画）
　　2.代码相对简单
　　但其缺点也很明显：
　　1.在动画控制上不够灵活
　　2.兼容性不好
　　3.部分动画功能无法实现（如滚动动画，视差滚动等）
　　JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。但想想CSS动画的transform矩阵是C++级的计算，必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。
　　所以，对于一些复杂控制的动画，使用javascript会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS吧。

如何实现一个性能优化后的 slider
react 的 key 的作用以及实现原理，并设定一个具体情境进行分析

import React, { Component } from 'react';
// import styles from '../leftMenu.css';

export default class oItem extends Component {
  render() {
    const box = this.props.val.map((item) => {
      return (
        <li key={item}>
          <a href="/directory/game/LOL" title="英雄联盟" data-tid="1">{item}</a>
        </li>
      );
    });
    return <div>{box}</div>;
  }
}

react利用key来识别组件，它是一种身份标识标识，就像我们的身份证用来辨识一个人一样。每个key对应一个组件，相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建。

这样，有了key属性后，就可以与组件建立了一种对应关系，react根据key来决定是销毁重新创建组件还是更新组件。
- key相同，若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新。
- key值不同，则react先销毁该组件(有状态组件的componentWillUnmount会执行)，然后重新创建该组件（有状态组件的constructor和componentWillUnmount都会执行）
另外需要指明的是:key不是用来提升react的性能的，不过用好key对性能是有帮组的。
JS 的基本函数式使用，比如 reduce、curry
var sum = arr.reduce(function(p, c) {
console.log('p=' + p + '/c=' + c);
return p + c;
}, 10);
高阶函数（high-order function）, 高阶函数是指操作函数的函数，它接收一个或者多个函数作为参数，并返回一个新函数。此外，还依赖与闭包的特性，来保存中间过程中输入的参数。即：
- 函数可以作为参数传递
- 函数能够作为函数的返回值
- 闭包
- Array.prototype.push.apply（a,b）合并数组
curry https://www.cnblogs.com/zztt/p/4142891.html
实现深拷贝

   function deepClone(data){
       var type = getType(data);
       var obj;
       if(type === 'array'){
           obj = [];
       } else if(type === 'object'){
           obj = {};
       } else {
           //不再具有下一层次
           return data;
       }
       if(type === 'array'){
           for(var i = 0, len = data.length; i < len; i++){
               obj.push(deepClone(data[i]));
           }
       } else if(type === 'object'){
           for(var key in data){
               obj[key] = deepClone(data[key]);
           }
       }
       return obj;
   }

event-loop 和 macro-task、micro-task 的理解与应用举例 https://blog.csdn.net/sjn0503/article/details/76087631

前端安全
1xss
2https与http
http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。
https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份。

HTTPS缺省工作在TCP协议443端口，它的工作流程一般如以下方式：

1）完成TCP三次同步握手
2）客户端验证服务器数字证书，通过，进入步骤3
3） DH算法协商对称加密算法的密钥、hash算法的密钥
4） SSL安全加密隧道协商完成
5）网页以加密的方式传输，用协商的对称加密算法和密钥加密，保证数据机密性；用协商的hash算法进行数据完整性保护，保证数据不被篡改

XMLHttpRequest

一个XMLHttpRequest需要设置两个事件回调函数，一个用于获取数据成功时调用，另一个用于获取数据失败时调用，以及一个open()方法调用及一个send()方法调用。
```
function reqListener(){
    var data=JSON.parse(this.responseText);
    console.log(data);
}
function reqError(err){
    console.log("Fetch错误:"+err);
}
var oReq=new XMLHttpRequest();
oReq.onload=reqListener;
oReq.onerror=reqError;
oReq.open("get","/students.json",true);
oReq.send();
```
call,apply

apply,call是直接执行函数调用，bind是绑定，执行需要再次调用．apply和call的区别是apply接受数组作为参数，而call是接受逗号分隔的无限多个参数列表
```
function Person() {
    }
    Person.prototype.sayName = function(p1,p2) { 
       alert(p1+p2); 
    }

    var obj = {name: 'michaelqin'}; // 注意这是一个普通对象，它不是Person的实例
    
    Person.prototype.sayName.apply(obj, ['a', 'b', 'c']);//ab

    
    Person.prototype.sayName.call(obj, 'a', 'b', 'c');//ab

    
    var sn = Person.prototype.sayName.bind(obj);
    sn(['a']); // aundefined
    sn('a'); // aundefined
```

面试题

XMLHttpRequest