js 解释执行

    js解释引擎:词法分析->语法分析->语法树

    词法分析是将字符流(char stream ) 转换为记号流(token stream)

    语法分析成AST(语法树)

    js解析：预编译期(预处理、预解析、预编译)与执行期

    预编译预解析，当Javascript引擎解析脚本时，它会在预编译期对所有声明的变量和函数进行处理；并且是先预声明变量，再预定义函数

变量和函数提升

    先提升变量，再提升函数

history

    window.history 属性指向History对象，它标识当前浏览器历史 浏览器历史记录是一个栈数据结构(先进后出)

    History.back() 后退、History.forward()前进、History.go() 跳转

    History.pushState() 向栈里推入数据、History.replaceState()向栈里替换数据

Location 对象 window.location和document.location属性，可以拿到这个对象

Location。href:整个URL

Location.protocol:当前URL的协议，包括冒号(:)

Location.host:主机。如果端口不是协议默认的80和433，则不会包括冒号(:)和端口

Location.hostname:主机名，不包括端口。

Location.port:端口号。

Location.pathname:URL的路径部分，从根路径/开始。

Location.search:查询字符串部分，从问号？开始。

Location.hash:片段字符串部分，从#开始。

Location.username:域名前面的用户名。

Location.password:域名前面的密码。

Location.origin:URL的协议、主机名和端口。

常用阻止默认行为的两种方式：

    常见默认行为：

            a标签自动跳转

            input表单自动提交

    e.preventDefault()

    return false

事件触发

    事件对象：事件触发时候自动创建的，封装了事件发生的元素和属性信息    

    window.event // ie

    e.target // 触发元素对象  ie:e.srcElement

事件捕获

    addEventListener 第三个参数为true，事件处于捕获阶段，默认false

    ie没有捕获阶段

事件冒泡

     e.stopPropagation()阻止冒泡

    IE:e.cancelBubble=true 阻止冒泡

    利用冒泡（事件委托）

三种事件绑定的异同

    广义的javascript: ECMAScript+DOM+BOM ,DOM0 DOM1 DOM2

    狭义的javascript：ECMAScript, ES6 ES5 ES3

    htlml事件

        通过行内onClick 添加的事件

    dome0级事件（事件绑定）

        通过js代码给元素onclick属性赋值

            DOM.onclick=function(){

            alert('DOM0级事件')            

}

    demo2级事件(事件监听)

         DOM.addEventListener('click',function,bool) // function 事件触发的回调函数 bool:事件处于冒泡阶段还是捕获阶段

        移除：removeEventListener

        优点：可以绑定多个事件，常规的事件绑定只执行最后绑定的事件

        js不支持事件重载，绑定事件相当于一个变量存储的是函数的地址，如果再绑定一个事件，相当于变量指向另一个函数的地址；事件监听相当于订阅发布者，改变了数据，触发了事件，订阅这个事件的函数被执行。

        总结：事件绑定相当于绑定到DOM的属性，重复绑定会覆盖。而事件监听相当于添加属性到DOM对象，多次监听，就会多次添加属性到DOM对象，所以都会触发，不会覆盖。

深入理解DOM数加载过程

    1.在浏览器中输入url，交给DNS域名解析，找到IP，向服务器发起请求；(里面还有缓存，http协议，TCP...)

    2. 服务器返回数据，浏览器接收文件(html,css,js,img...)，二进制文件

            html:二进制转换为html

             构建DOM树：HTML解析器

                            Token->Node->DOM

                            Token词法解析，根是"document"对象

                             Node:HTMLDivElement

                             DOM:DOM和标签基本是一一对应的关系div

                解析过程中：

                            1.遇到link的外部css，遇到css的代码会进行css加载，并行解析

                            2.遇到script标签的时候，会先去执行js的内容，直至脚本完成执行，然后继续构建DOM；

                             底部引入Javascript代码的原因。或者说可以在头部引用，但是前提是加上async、defer,或window.onload:

                                解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载

                                如果script标签设置了该属性，则浏览器会异步下载该文件并且不会影响后续DOM的渲染；

                                如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script；

                                 defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行；脚本会被延迟到整个页面都解析完毕后再运行

                    构建css树：css解析器

                                        每个css文件解析为样式表对象scctyleSheet,每个对象都包含cssRule,cssRule包含选择器和声明对象，以及其他与css语法对应的对象。

                                        Token解析:css的词法及语法文法

                                         Node->CSSOM

                    构建render树：渲染树=DOM树+css树

                    布局layout与绘制paint:计算对象之间的大小，距离确定每个节点在屏幕上的确切坐标；映射浏览器屏幕绘制；使用UI后端层绘制每个节点

        reflow(回流)：当元素属性发生改变且影响布局时(宽度、高度、内外边距等)，产生回流，相当于刷新页面

        repaint(重绘)：当元素属性发生改变且不影响布局时(背景颜色，透明度，字体样式等)，产生重绘，相当于不刷新页面，动态更新内容。

开发过程中的编码和解码

    escape和unescape、encodeURL和decodeURI、encodeURIComponent和decodeURIComponent

    escape(url)  // 除了ASCII(a-z,0-9),其他的进行编码(对除了英文字符和数字其他的字符全部编码)  js全局函数

    unescape(url)  // 除了ASCII，其他的进行解码

    encodeURI(url) // 只对中文进行编码   最常用

    decodeURI(url) // 只对中文进行解码  ios移动端会被转码，需要解码

    encodeURIComponent     //该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

    decodeURIComponent    //    解码

实际应用问题

存储或者获取月份时需要注意的是0-11

    实际使用中，获取到的月份返回的数值需要加1才是实际的月份 

    js设计得时候 借鉴java1.1 now.getMonth()：0-11 

    工作中需要分析，时间是从服务端获取，还是客户端获取

sort是如何排序的

    arr.sort() 默认是升序排序

                将排序的元素转为字符串，找对应的字符串Unicode码表

如何解决sort排序的问题

不能对数字进行排序，解决方案

        1.定义一个比较强函数

                  sort(callback)

                    function(x,y){return x-y} 小于0 升序 大于0 降序

栈和队列

    栈是一种后进先出的数据结构，也就是说最新添加的项最早被移出；LIFO（后进先出）

    队列数据结构是先进先出（FIFO）队列在列表的末端添加项，从列表的前端移除项

栈和堆：数据的存储形式

栈和队列：数据的结构

push，pop,unshift,shift

栈：

    结尾出入栈：入栈：push()   出栈: pop() 效率高

    开头出入栈： 入栈：unshift()   出栈: shift()    效率低

队列：

    push进shift出

    unshift进pop出

装箱：把基本数据类型转化为对应的引用数据类型的操作；

如何实现：

    var num = 123 // number

    var objNum = new Number(123) // object

拆箱：将引用类型对象转换为对应的值类型对象；

如何实现：

    调用object.valueOf()方法实现

    objNum.valueOf() //123 

内部如何实现：

    toPrimitive(input,type) //input:传入值，type:值类型

      // input 判断是不是原始类型的值：如果是，直接返回，

        如果不是调用 input.valueOf() 是原始类型，直接返回，

        还不是:调用input.toString 直接返回字符串   

        或者报错

     valueOf() 是原始类型的值，直接返回，没有，就返回对象本身

    toString() input字符串转换；对象:[object,type] type:对象类型 

js常用内置对象

    三种包装对象：String,Number,Boolean

        内部做的事情： 1. new 一个对应的对象

                                2. 调用内部方法返回一个新的返回值

                                  3. 清空new出来的新对象

    其他常用的标准内置对象：Array,Date,Function,Object...

        了解里面内置的一些方法

for 循环性能优化

    1.用变量缓存DOM元素

    2.算法层面上的优化