变量类型和计算
值类型&&引用类型
1.值类型
var a = 100var b = aa = 200console.log(b)//100
2.引用类型（对象 数组 函数）
无限制扩展属性
var a = {age:20}var b = ab.age = 21console.log(a.age)//21 typeof运算符
typeof undefined //undefinedtypeof 'abc'//stringtypeof 123//numbertypeof true//boolean//划重点typeof {}//objecttypeof null//objecttypeof console.log//function 强制类型转换
逻辑运算符
console.log(''||'abc')//'abc'console.log(!window.abc)//true//判断一个变量会被当做true还是falsevar a = 100console.log(!!a)//true JS中的内置函数
Object
ArrayBooleanNumberStringFunctionDateRegExpError原型和原型链
1.构造函数
//示例function Foo(name,age){ this.name = name; this.age = age; this.class = 'class-1' //return this}var f = new Foo('zwt',21);//可以创建多个对象 2.构造函数--扩展
1.var a = {} 其实是 var a = new Object()的语法糖2.var a = [] 其实是var a = new Array()的语法糖3.function Foo(){...}其实是 var Foo = new Function(...)4.使用instanceof判断一个函数是否是一个变量的构造函数 原型规则和示例
1.所有的引用类型（数组 对象 函数）都具有对象特性，既可自由扩展属性（除nul外）2.所有的引用类型（数组 对象 函数）都有一个_proto_（隐式原型）属性，属性值是一个普通的对象3.所有的函数，都有一个prototype（显示原型）属性，属性值也是一个普通的对象4.所有引用类型（数组 对象 函数），_protp_属性都指向它的构造函数的‘prototype5.当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去找它的_proto_(即它的构造函数的prototype)中寻找。
var obj = {}; obj.a = 20; alert(obj.__proto__ === Object.prototype)//true f.toString()//要去f._proto_._proto_中查找
创建对象的几种方法：
1.字面量var o1 = {name:’o1’};Var o11 = new Object({name:’o11})2.通过构造函数Var m = function(){this.name=‘o2’}Var o2 = new m()3.Object.createVar P = {name:’o3’}Var o3=Object.create(P) 原型、构造函数、实例、原型链
instanceof的原理：
New运算符
1.一个新对象被创建 它继承自foo.prototype2.构造函数foo被执行。执行的时候，相应的传参会被传入，同时上下文（this）会被指定为这个新的实例。new foo等同于new foo（） ，只能用在不传递任何参数的情况3.如果构造函数返回了一个‘对象’，那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象，那么new出来的结果为步骤1创建的对象
原型链例子
闭包知识点
执行上下文
This：要在执行的时候才能确认值，定义的时候无法确认

DOM事件
DOM事件级别
Dom0 element.onclick = function(){}Dom2 element.addEventListener(‘click’,function(){},false)冒泡/捕获Dom3 element.addEventListener(‘keyup’,function(){},false) Dom事件模型（冒泡 捕获）
Dom事件流
浏览器为页面做交互的过程 事件流—捕获—>目标阶段（目标元素）—>冒泡
描述dom事件捕获的具体流程（window—>document—>html(document.documentElement)—>body—>…—>目标元素）Event对象的常见应用：Event.preventDefault()：阻止默认事件(如阻止a标签默认跳转的行为)Event.stopPropagation()：阻止冒泡行为（让子元素与父元素的响应分离）Event.stopImmendiateProoagation()：一个元素上绑定多个事件，按优先级可取消后面响应事件的执行Event.currentTarget：事件委托 当前被点击的元素 当前被绑定的事件Event.target:自定义事件
var eve = new Event(‘custome’)ev.addEventListener(‘custome’,function(){ console.log(‘custome’)});ev.dispatchEvent(eve);//触发 HTTP协议类
HTTP协议的主要特点
简单快速（每个资源uri，固定；只要输入uri就能找到指定的资源） 灵活（在http协议中，头部分有数据类型，通过一个http协议，就可以完成不同数据类型的协议） 无连接（连接一次就会断开） 无状态（客户端、服务端分开；http建立连接；无法记录状态 不能区分两次连接）
HTTP报文的组成部分
请求报文（请求行[http方法、协议、版本 页面介质] 请求头[key vaule—>告诉服务端需要的内容] 空行[告诉服务端，下一个是请求体 不再是请求头] 请求体） 响应报文（状态行 响应头 空行 响应体）
HTTP方法
Get获取资源 post传输资源 put更新资源 delete删除资源 head获取报文
POST和GET的区别
Get在浏览器回退时是无害的，而post会再次提交请求
Get产生的url地址可以被收藏 而post不可以Get请求会被浏览器主动缓存 而post不会，除非手动设置Get请求只能进行rul编码，而post支持多种编码方式Get请求在url中传送的参数是有长度限制的，而post没有限制Get请求参数会被完整保留在浏览器历史记录中，而post中的参数不会被保留对参数的数据类型，get只接受ascll字符，而post没有限制Get比post更不安全 因为参数直接暴露在url上，所有不能用来传递敏感信息get参数通过url传递，post放在request body中HTTP状态码
1xx：指示信息-表示请求已接收，继续处理
2xx：成功-表示请求已经被成功接收3xx：重定向-要完成请求必须进行更进一步的操作4xx：客户端错误-请求有语法错误或请求无法实现5xx：服务器错误-服务器未能实现合法的请求200 0K：客户端请求成功
206：客户端发送了一个带有range头的get请求，服务器完成了它（比如video播放视频）301：所有请求的页面已经转移至新的url 永久性重定向302：所有请求的页面已经临时转移至新的url304：客户端有缓冲的文档并发出了一个条件性的请求，服务器告诉客户没原来缓冲的文档还可以继续使用400：客户端请求有语法错误，不能被服务器所理解
401：请求未经授权，这个状态代码必须和www-authenticate报头域一起使用403：对被请求页面的访问被禁止404：请求资源不存在500：服务器发生不可预期的错误 原来缓冲的文档还可以继续使用503：请求未完成，服务器临时过载或当机，一段时间可能恢复正常持久连接
http协议采用‘请求-应答’模式，当使用普通模式，即非keep-alive（持久连接）模式时，每个请求、应答客户和服务器都要新建一个连接，完成之后立刻断开连接（http协议为无连接的协议）
当使用keep-alive模式（持久连接 连接重用）时，keep-alive功能使客户端到服务器端的连接持续有效，当出现对服务器的后续请求时，keep-alive功能避免了建立或者重新建立连接管线化
在使用持久连接的情况下，某个连接上消息的传递类似于：(连接无中断)请求1->响应1->请求2->响应2->请求3->响应3
某个连接上的消息变成了类似这样：（管线化）请求1->请求2->请求3->响应1->响应2->响应3管线化机制通过持久连接完成，仅HTTP/1.1支持此技术
只有get和head请求可以进行管线化，而post则有所限制除此创建连接时不应启动管线机制，因为对方（服务器）不一定支持http/1.1版本的协议管线化不会影响响应到来的顺序，如上面的例子所示，响应返回的顺序并未改变http/1.1要求服务器端支持管线化，但并不要求服务器端也对响应进行管线化处理，只是要求对管线化的请求不失败即可由于上面提到的服务器端的问题，开启管线化很可能并不会带来大幅度的性能提升，而且很多服务器端和代理程序对管线化的支持并不好，因此现代浏览器如chrome和firefox默认并未开启管线化支持事件
Ie低版本使用attachEvent绑定事件 和w3c标准不一样
获得 body 元素的节点名称：
document.body.nodeName;通用的绑定事件函数
//selector存放选择器（使用代理时用） function bindEvent(elem,type,selector,fn) { if(fn == null){ fn = selector; selector = null; } /* * element.matches(String selector); * 在SELECTORS API Level 2规范中，为DOM节点添加了一个方法， * 主要是用来判断当前DOM节点不否能完全匹配对应的CSS选择器规则； * 如果匹配成功，返回true，反之则返回false。 * */ elem.addEventListener(type,function (e) { var target; if(selector){ target = e.target; if(target.matches(selector)){ fn.call(target,e) } }else{ fn(e) } }) } //使用代理 var div1 = document.getElementById('div1'); bindEvent(div1,'click','a',function (e) { console.log(this.innerHTML); }) //不使用代理 [代码简洁 减少浏览器的内存占用] var a = document.getElementById('a1'); bindEvent(div1,'click',function (e) { console.log(a.innerHTML); }) XMLHttpRequest
//IE兼容性问题：低版本使用ActiveXObject /* * 0：未初始化 还没调用send（）方法 * 1：载入 已调用send（）方法，正在发送请求 * 2：载入完成 send（）方法执行完成，已经接受到全部响应内容 * 3：交互 正在解析响应内容 * 4：响应内容解析完成，可以在客户端调用了 * */ /* * status * 2xx：表示成功处理 * 3xx：需要重定向 浏览器直接跳转 * 4xx：客户端请求错误 如404 * 5xx：服务端错误 * */ var xhr = new XMLHttpRequest() xhr.open("GET","api",false); xhr.onreadystatechange = function () { if(xhr.readyState == 4){ if(xhr.status == 200){ alert(xhr.responseText) } } } xhr.send(null) jsonp
/*跨域 浏览器有同源策略，不允许ajax访问其他域的接口 协议、域名、端口、有一个不同就算跨域 三个可以跨域的标签：
页面加载
从输入url到得到html的详细过程： 加载资源的形式 输入url（或跳转页面）加载html/加载html中的静态资源 加载一个资源的过程 浏览器根据dns服务器得到域名的ip地址 向这个ip的机器发送htto请求 服务器收到、处理并返回http请求 浏览器得到返回内容浏览器渲染页面的过程 根据html结构生成dom tree 根据css生成cssom（css代码结构化处理） 将dom和cssom整合形成renderTree 根据renderTree开始渲染和展示 遇到
性能优化
* 加载页面和静态资源 静态资源的压缩合并 静态资源缓存 使用cdn 使用ssr后端渲染，让数据直接输出到html中* 页面渲染 css放前面，js放后面 懒加载（图片懒加载，下拉加载更多） 减少dom查询，对dom查询做缓存 减少dom操作，多个操作尽量合并在一起执行 事件节流 DOMConetenLoaded
事件节流
var textarea = document.getElementById('text'); var timeoutId textarea.addEventListener('keyup',function () { if(timeoutId){ clearTimeout(timeoutId) } timeoutId = setTimeout(function () { //触发change事件 },100) })