普通知识

null是一个表示“无”的对象，转为数值为0.
undefined是一个表示“无”的原始值，转数值为NaN。

var p=new F;
用new调用一个函数发生了这些事：
（1）新建一个对象instance=new Object();
（2）设置原型链instance.__proto__=F.prototype;
（3）让F中的this指向instance，执行F的函数体。
（4）判断F的返回值类型：如果是值类型，就丢弃它，还是返回instance。如果是引用类型，就返回这个引用类型的对象，替换掉instance。

性能优化的方法：
1. 减少http请求次数：CSS Sprites, JS、CSS 源码压缩、图片大小控制合适；网页 Gzip，CDN 托管，data 缓存 ，图片服务器
2. 前端模板 JS + 数据，减少由于HTML标签导致的带宽浪费，前端用变量保存 AJAX 请求结果，每次操作本地变量，不用请求，减少请求次数
3. 用 innerHTML 代替 DOM 操作，减少 DOM 操作次数，优化 javascript 性能
4. 当需要设置的样式很多时设置 className 而不是直接操作 style
5. 少用全局变量、缓存DOM节点查找的结果。减少 IO 读取操作
6. 避免使用 CSS Expression（css表达式)又称 Dynamic properties(动态属性)
7. 图片预加载，将样式表放在顶部，将脚本放在底部，加上时间戳

分为4个步骤：
1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
4. 此时，Web 服务器提供资源服务，客户端开始下载资源。
请求返回后，便进入了我们关注的前端模块
简单来说，浏览器会解析 HTML 生成 DOM Tree，其次会根据 CSS 生成 CSS Rule Tree，而 javascript 又可以根据 DOM API 操作 DOM

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制
GET方式需要使用 Request.QueryString 来取得变量的值
POST方式通过 Request.Form 来获取变量的值
也就是说 Get 是通过地址栏来传值，而 Post 是通过提交表单来传值。
在以下情况中，请使用 POST 请求：
1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

js对象的深度克隆代码实现
function clone(obj) {
    var buf;
    if (obj instanceof Array) {
        buf = [];
        for (let i = 0; i < obj.length; i++) {
            buf[i] = clone(obj[i]);
        }
        return buf;
    } else if (obj instanceof Object) {
        buf = {};
        for (var n in obj) {
            buf[n] = clone(obj[n]);
        }
        return buf;
    } else {
        return obj;
    }
}

js内存泄漏的几种情况
1、意外的全局变量
JavaScript 处理未定义变量的方式比较宽松：未定义的变量会在全局对象创建一个新变量。在浏览器中，全局对象是 window 。
例如：
haorooms ="这是一个全局的haorooms"
实际上生成了一个全局的haorooms，虽然一个简单的字符串，无伤大雅，也泄露不了多少内存，但是我们在编程中尽量少的避免全局变量！
另外一种全局变量可能由this创建。例如：
function foo() {
    this.variable = "potential accidental global";
}
// Foo 调用自己，this 指向了全局对象（window）
foo();
2、被遗忘的定时器或者回调
var obj = {
    fn: function() {
        setInterval(function() {
            console.log('hello');
        }, 1000);
    }
}

obj.fn();
obj = null;   //定时器遗忘了，无法关闭了。
3、没有清理的Dom元素引用
当原有的COM被移除时，子结点引用没有被移除则无法回收。
var select = document.querySelector;
var treeRef = select('#tree');
 
//在COM树中leafRef是treeFre的一个子结点
var leafRef = select('#leaf');  
var body = select('body');
 
body.removeChild(treeRef);
 
//#tree不能被回收入，因为treeRef还在
//解决方法:
treeRef = null;
 
//tree还不能被回收，因为叶子结果leafRef还在
leafRef = null;
 
//现在#tree可以被释放了。
4、闭包
在闭包中引入闭包外部的变量时，当闭包结束时此对象无法被垃圾回收（GC）。
var a = function() {
  var largeStr = new Array(1000000).join('x');
  return function() {
    return largeStr;
  }
}();
5、多个对象循环引用或者循环引用自己

伪数组：是一个对象，必须要有length属性，如果这个对象的length不为0，那么必须要有按照下标存储的数据，比如：var obj = { 99: 'abc', length: 100 }
伪数组转数组的方法。1、声明一个空数组，通过遍历把它们重新添加到数组中去。
2、var arr = Array.prototype.slice.call(ali).相当于修改了Array的slice方法，让this指向ali调用slice(0, this.length)返回一个数组

当调用setState时，react会将传递给setState的对象合并到组件的当前状态，react会构建一个新的react元素树，然后与上一个元素树相比较（diff），再更新UI
setState第二个参数是state导致的页面变化后完成后的回调，等价于componentDidUpdate。

React element是一些UI的对象表示，一个React Component是一个函数或一个类，它可以接受输入并返回一个React element。React的refs允许直接访问dom元素或组件实例。

箭头函数：
1、在使用=>定义的时候，this指向是定义时所在的对象，而不是使用时所在的对象。
2、不能够用作构造函数，不能使用new命令。
3、不能使用arguments对象。
4、不能使用yield命令。

在非严格模式下，setTimeout中所执行函数中的this永远指向window。

let声明的变量具有块级作用域。let声明的变量不能通过window变量名进行访问，形如for(let x ...)的循环是每次迭代都为x创建新的绑定。

子类的构造函数必须含有super函数，super表示的是调用父类的构造函数，但this指向的是cat。

Promise简单来说是一个容器，里面保存着某个未来才会结束的事件的结果。手写一个Promise。
var promise = new Promise((resolve, reject) => {
    if (操作成功) {
        resolve(value);
    } else {
        reject(value);
    }
})

promise.then(function (value) {
    //success
}, function (value) {
    //failure
})

变量的作用域无非就是两种：全局变量和局部变量，在函数内部声明时，要使用var命令，不然的话就是声明了一个全局变量。
只要函数内定义了一个局部变量，函数在解析的时候会将这个变量“提前声明”。
例如：var sope = "global";
        function fn() {
            console.log(scope); //undefined
            var scope = "local";
            console.log(scope); //local
        }
        fn();
js没有块级作用域，只有函数作用域，是相对于函数而言的，在函数内存在变量提升。
每个函数运行时都会产生一个执行环境，js为每一个执行环境关联了一个变量对象。环境中定义的所有变量和函数都保存在这个对象中。
这个对象有一个内部属性[[scope]],该内部属性指向了该函数的作用域链，而作用域链中存储了每个执行环境相关的变量对象。如下图
（见笔记）
    var sum=sum(3, 4)
    [[scope]]
        |
        |
        |
    作用域链
        1------------------------
        0----                     |
            |                      |
            |                     |
        sum的活动对象         全局对象（global）
        this:window             this:window    
        arguments:[3, 4]     document: object
        m: 3                 sum: function
        n: 4                 window: object
        sum: undefined         其他全局属性

以后要查找变量时，总会沿着这个作用域链的底端（序号0/栈顶）开始查找，一直到作用域的顶端。

typeof不能区分是数组还是对象，因为它们都返回一个Object。但是可以使用instanceof，原理是左操作数是否由右边派生出来。
[1, 2] instanceof Array。还可以使用isArray方法：Array.isArray([1, 2])

fetch()方法介绍：
fetch api返回的是一个promise对象，它的参数：url访问路径，method：请求方法，请求参数，请求头，带cookie。第一个then函数里面处理的是response的格式。response包括status状态码及描述，请求返回头，请求返回体。
fetch('http://www.baidu.com')
.then((res) => {
    return res.text()   //这是一个promise对象
})
.then((res) => {
    console.log(res);
});

无状态组件由于没有状态的影响所以就是纯静态展示的作用。它的基本组成结构就是属性(props)，加上一个渲染函数(render)。由于不涉及状态更新，这种组件的复用性也强。有状态组件包含状态，且有生命周期。

propType可以用来确保接收到的参数是有效的，当给prop传递了一个不正确的值时，js控制台会显示一条警告。仅在开发模式中检测。

css中脱离文档流的操作有如下：
1、float  2、position：absolute   3、position：fixed
position：relative相对定位不会脱离文档流，具有以下特点：1、不影响元素本身特性，2、不使元素脱离文档流，3、如果没有定位偏移量，对元素本身没有影响

隐藏元素：
1、opacity设置透明度   2、visibility：hidden   3、display：none   4、position：absolute; left: -999px

js数据类型：字符型，数字，布尔，数组，对象，NUll，undefined

react优化性能的几点：
1、要尽可能少的在render函数中做操作。
2、尽可能保持props(state)简单和精简。
3、组件方法尽量使用纯函数或者静态类方法。尤其在渲染大量组件应用中会有明显的区别。
4、复杂组件拆分成多个组件，并只传当前的组件需要的props。
5、shouldComponentUpdate()
6、添加key值，尽量少用setTimeout或不可控的refs、dom操作。

HTML与XHTML：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。

HTML的语义化
1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
2. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
3. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
4. 便于团队开发和维护，语义化使得网页更具可读性，是进一步开发网页的必要步骤，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

link和@import有什么区别
(1) link属于HTML标签，而@import是CSS提供的;
(2) 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
(3) import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

cookie、sessionStorge和localStorge区别
cookie是网站为了标记用户身份而存储在用户本地终端上的数据（通常经过加密）
cookie始终在同源的http请求中携带，即会在浏览器和服务器间来回传递。
sessionStorge和localStorge仅在本地保存。
cookie大小不能超过4k。sessionStroge和localStroge比cookie大得多，大到5M或更大。
localStorge：保存持久数据，不丢失
sessionStorge：关闭窗口后数据删除
cookie：失效之前一直有效，即使关闭窗口

选择器优先级：
!important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符 > 继承
权重算法：(0, 0, 0, 0)==》第一个0对应的是important个数，第二个0对应的是id选择器个数，第三个是类选择器个数，第四个是标签选择器

start--》getDefaultProps--》getInitialState--》componentWillMount--》render--》componentDidMount--》componentWillReceiveProps--》shouldComponentUpdate--》componentWillUpdate--》render--》componentDidUpdate--》componentWillMount--》END