js基础

1.javaScript的数据类型有什么

基本数据类型：Undefined、Null、Boolean、Number、String

复杂数据类型：object，array，function

区别：基本数据类型把数据名和值直接存储在栈当中；复杂数据类型在栈中存储数据名和一个堆的地址，在堆中存储属性及值，访问时先从栈中获取地址，再到堆中拿出相应的值

2.检测数据类型有什么方法

typeof

typeof xxx得到的值有以下几种类型：undefined boolean number string object function、symbol ，比较简单，不再一一演示了。

这里需要注意的有三点：

typeof null结果是object ，实际这是typeof的一个bug，null是原始值，非引用类型

typeof [1, 2]结果是object，结果中没有array这一项，引用类型除了function其他的全部都是object

typeof Symbol() 用typeof获取symbol类型的值得到的是symbol，这是 ES6 新增的知识点

instanceof

用于实例和构造函数的对应。例如判断一个变量是否是数组，使用typeof无法判断，但可以使用[1, 2] instanceof Array来判断。因为，[1, 2]是数组，它的构造函数就是Array。

同理：

functionFoo(name) {

    this.name = name

 }

var foo =newFoo('bar’)

console.log(foo instanceof Foo) // true

3.介绍js有哪些内置对象？

Object 是 JavaScript 中所有对象的父对象 

数据封装类对象：Object、Array、Boolean、Number 和 String 

其他对象：Function、Arguments、Math、Date、RegEx、Error

4.如何区分数组和对象？

（1）从原型入手，Array.prototype.isPrototypeOf(obj);  利用isPrototypeOf()方法，判定Array是不是在obj的原型链中，如果是，则返回true,否则false。Array.prototype.isPrototype([]) //true 

（2）也可以从构造函数入手，利用对向的constructor属性 

（3）根据对象的class属性(类属性)，跨原型链调用toString()方法。Object.prototype.toString.call(Window); 

（4）Array.isArray()方法。

5.null，undefined 的区别？

null        表示一个对象被定义了，值为“空值”； 

undefined   表示不存在这个值。 

typeof undefined                      //"undefined" 

undefined :是一个表示"无"的原始值或者说表示"缺少值"，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回 undefined； 

例如变量被声明了，但没有赋值时，就等于undefined

typeof null        //"object" 

null : 是一个对象(空对象, 没有任何属性和方法)； 

例如作为函数的参数，表示该函数的参数不是对象；

注意：

在验证null时，一定要使用　=== ，因为 == 无法分别 null 和　undefined 

undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是： 

1）变量被声明了，但没有赋值时，就等于undefined。 

2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。 

3）对象没有赋值的属性，该属性的值为undefined。 

4）函数没有返回值时，默认返回undefined。

null表示"没有对象"，即该处不应该有值。

典型用法是： 

1） 作为函数的参数，表示该函数的参数不是对象。 

2） 作为对象原型链的终点。

6.声明变量和声明函数的提升有什么区别?

(1) 变量声明提升：变量申明在进入执行上下文就完成了。 

只要变量在代码中进行了声明，无论它在哪个位置上进行声明， js引擎都会将它的声明放在范围作用域的顶部； 

(2) 函数声明提升：执行代码之前会先读取函数声明，意味着可以把函数申明放在调用它的语句后面。 

只要函数在代码中进行了声明，无论它在哪个位置上进行声明， js引擎都会将它的声明放在范围作用域的顶部； 

(3) 变量or函数声明：函数声明会覆盖变量声明，但不会覆盖变量赋值。 

同一个名称标识a，即有变量声明var a，又有函数声明function a() {}，不管二者声明的顺序，函数声明会覆盖变量声明，也就是说，此时a的值是声明的函数function a() {}。注意：如果在变量声明的同时初始化a，或是之后对a进行赋值，此时a的值变量的值。

var a;

var c = 1;

a = 1;

function a() {

        return true;

}

console.log(a);

原型，原型链

1.JavaScript原型，原型链 ? 有什么特点？

原型

每个对象都会在其内部初始化一个属性，就是prototype(原型) 

使用hasOwnProperty() 可以判断这个属性是不是对象本身的属性

问题：Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？

hasOwnProperty 

javaScript中hasOwnProperty函数方法是返回一个布尔值，指出一个对象是否具有指定名称的属性。此方法无法检查该对象的原型链中是否具有该属性；该属性必须是对象本身的一个成员。

使用方法： 

object.hasOwnProperty(proName) 

其中参数object是必选项。一个对象的实例。 

proName是必选项。一个属性名称的字符串值。

如果 object 具有指定名称的属性，那么JavaScript中hasOwnProperty函数方法返回 true，反之则返回 false。

原型链

当我们在访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，找到Object.__proto__为止，找不到就返回unde也就是我们平时所说的原型链的概念。 

关系：instance.constructor.prototype = instance.__proto__ 

特点： 

JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本。当我们修改原型时，与之相关的对象也会继承这一改变。 

当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，就会查找他的Prototype对象是否有这个属性，如此递推下去，一直检索到 Object 内建对象。

所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（null除外） 

所有的引用类型（数组、对象、函数），都有一个__proto__属性，属性值是一个普通的对象 

所有的函数，都有一个prototype属性，属性值也是一个普通的对象 

所有的引用类型（数组、对象、函数），__proto__属性值指向它的构造函数的prototype属性值

原型链中的this

所有从原型或更高级原型中得到、执行的方法，其中的this在执行时，就指向了当前这个触发事件执行的对象。

闭包

闭包的形成与变量的作用域以及变量的生存周期有密切的关系

1.变量的作用域

在js中我们把作用域分为全局作用域和局部作用域，全局作用域就是window，在没有块级作用域概念的时候，每一个函数都是一个局部作用域。

其实变量的作用域，就说指变量的有效范围。我们最长说的就是在函数中声明的变量作用域。

当在函数中声明一个变量的时候，如果改变量没有用var关键字去定义那么该变量就是一个全局变量，但是这样做最容易造成命名冲突。

另一种情况就是使用var声明的变量，这时候的变量就是局部变量，只有在该函数内部可以访问，在函数外面是访问不到的

在javascript中，函数可以用来创造函数作用域。在函数中搜索变量的时候，如果该函数当中没有这个变量，那么这次搜索过程会随着代码执行环境创建的作用域链往外层逐层搜索，一直搜索到window对象为止，找不到就会抛出一个为定义的错误。而这种从内到外逐层查找的关系在js中我们称为作用域链

2.变量的生存周期

除了变量作用域之外，另外一个跟闭包有关的概念就是变量的生存周期，对于全局变量来说，全局变量的生存周期是永久的，除非我们主动销毁这个全局变量，而对于函数内部的使用var声明的变量来说，当退出函数是，这些变量就会随着函数的结束而销毁。

3.闭包的形成

Javascript允许使用内部函数，可以将函数定义和函数表达式放在另一个函数的函数体内。而且，内部函数可以访问它所在的外部函数声明的局部变量、参数以及声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。常见的闭包写法就是简单的函数套函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用域链，将函数内部的变量和方法传递到外部，延续变量的生命。使用闭包可以减少全局环境的污染，也可用延续变量的生命。

4.闭包的适用场景

闭包的适用场景非常广泛，首先从闭包的优点出发就是： 

减少全局环境的污染生成独立的运行环境

模块化就是利用这个特点对不同的模块都有自己独立的运行环境，不会和全局冲突，模块和模块之间通过抛出的接口进行依赖使用 

以及像我们常用的jquery类库（避免和全局冲突使用闭包实现自己独立的环境）

可以通过返回其他函数的方式突破作用域链

可以利用这个功能做一些值的缓存工作，例如常见的设计模式（单例模式），以及现在比较火的框架vue中的计算属性

其实当遇到以下场景的时候都可以使用闭包 

1) 维护函数内的变量安全,避免全局变量的污染。 

2) 维持一个变量不被回收。 

3) 封装模块

5.闭包的缺点

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大。所以在闭包不用之后，将不使用的局部变量删除，使其被回收。在IE中可能导致内存泄露，即无法回收驻留在内存中的元素，这时候需要手动释放。

6.内存泄露

内存泄漏指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。

出现原因：

1) 循环引用：含有DOM对象的循环引用将导致大部分当前主流浏览器内存泄露。循环 引用，简单来说假如a引用了b,b又引用了a,a和b就构成了循环引用。 

2) JS闭包：闭包，函数返回了内部函数还可以继续访问外部方法中定义的私有变量。 

3) Dom泄露，当原有的DOM被移除时，子结点引用没有被移除则无法回收。

7.JavaScript垃圾回收机制

Javascript中，如果一个对象不再被引用，那么这个对象就会被GC(garbage collection)回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。垃圾回收不是时时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行。

函数a被b引用，b又被a外的c引用，这就是为什么函数a执行后不会被回收的原因。

8.垃圾回收的两个方法：

标记清除法：

1) 垃圾回收机制给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包）。 

2) 操作1之后内存中仍存在标记的变量就是要删除的变量，垃圾回收机制将这些带有标记的变量回收。

引用计数法：

1) 垃圾回收机制给一个变量一个引用次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1。 

2) 当该变量的值变成了另外一个值，则这个值得引用次数减1。 

3) 当这个值的引用次数变为0的时候，说明没有变量在使用，垃圾回收机制会在运行的时候清理掉引用次数为0的值占用的空间。

JS运行机制

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序.浏览器的内核是多线程的，它们在内核制控下相互配合以保持同步，一个浏览器至少实现三个常驻线程：javascript引擎线程，GUI渲染线程，浏览器事件触发线程。这些异步线程都会产生不同的异步的事件.

1) javascript引擎是基于事件驱动单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行JS程序。

2) GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时,该线程就会执行。但需要注意 GUI渲染线程与JS引擎是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

3) 事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeOut、也可来自浏览器内核的其他线程如鼠标点击、AJAX异步请求等，但由于JS的单线程关系所有这些事件都得排队等待JS引擎处理。（当线程中没有执行任何同步代码的前提下才会执行异步代码）

当程序启动时, 一个进程被创建，同时也运行一个线程, 即为主线程，js的运行机制为单线程

程序中跑两个线程，一个负责程序本身的运行，作为主线程； 另一个负责主线程与其他线程的的通信，被称为“Event Loop 线程" 。每当遇到异步任务，交给 EventLoop 线程，然后自己往后运行，等到主线程运行完后，再去 EventLoop 线程拿结果。

1）所有任务都在主线程上执行，形成一个执行栈（execution context stack）。

2）主线程之外，还存在一个"任务队列"（task queue）。系统把异步任务放到"任务队列"之中，然后继续执行后续的任务。

3）一旦"执行栈"中的所有任务执行完毕，系统就会读取"任务队列"。如果这个时候，异步任务已经结束了等待状态，就会从"任务队列"进入执行栈，恢复执行。

4）主线程不断重复上面的第三步。

"回调函数"（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当异步任务从"任务队列"回到执行栈，回调函数就会执行。"任务队列"是一个先进先出的数据结构，排在前面的事件，优先返回主线程。主线程的读取过程基本上是自动的，只要执行栈一清空，"任务队列"上第一位的事件就自动返回主线程。

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop。

从主线程的角度看，一个异步过程包括下面两个要素：

发起函数(或叫注册函数)A

回调函数callbackFn

它们都是在主线程上调用的，其中注册函数用来发起异步过程，回调函数用来处理结果。

异步进程有:

类似onclick等，由浏览器内核的DOM binding模块处理，事件触发时，回调函数添加到任务队列中；

setTimeout等，由浏览器内核的Timer模块处理，时间到达时，回调函数添加到任务队列中；

Ajax，由浏览器内核的Network模块处理，网络请求返回后，添加到任务队列中。

例如setTimeout(fn, 1000)，其中的setTimeout就是异步过程的发起函数，fn是回调函数。用一句话概括：工作线程将消息放到消息队列，主线程通过事件循环过程去取消息。

消息队列：消息队列是一个先进先出的队列，它里面存放着各种消息。

事件循环：事件循环是指主线程重复从消息队列中取消息、执行的过程。

流程如下:

1) 主线程读取js代码, 形成相应的堆和执行栈, 执行同步任务

2) 当主线程遇到异步任务,，指定给异步进程处理, 同时继续执行同步任务

3) 当异步进程处理完毕后， 将相应的异步任务推入到任务队列首部

4) 主线程任务处理完毕后,，查询任务队列，则取出一个任务队列推入到主线程的执行栈

5) 重复执行第2、3、4步，这就称为事件循环

JS-Web-API 知识点与高频考题解析

BOM

BOM（浏览器对象模型）是浏览器本身的一些信息的设置和获取，例如获取浏览器的宽度、高度，设置让浏览器跳转到哪个地址。 

navigator： 获取浏览器特性（即俗称的UA）然后识别客户端 

location： 获取网址、协议、path、参数、hash 等 

history： 操作浏览器的历史纪录，（前进，后退等功能）

1.什么是window对象? 什么是document对象?

window:它是一个顶层对象,而不是另一个对象的属性，即浏览器的窗口。 

document:代表整个HTML 文档,可用来访问页面中的所有元素 

Window 对象表示当前浏览器的窗口，是JavaScript的顶级对象。我们创建的所有对象、函数、变量都是 Window 对象的成员。 

Window 对象的方法和属性是在全局范围内有效的。 

Document 对象是 HTML 文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点） 

Document 对象使我们可以通过脚本对 HTML 页面中的所有元素进行访问 

Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

2.事件是？IE与火狐的事件机制有什么区别？ 如何阻止冒泡？

1) 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。 

2) 事件处理机制：IE是事件冒泡、Firefox同时支持两种事件模型，也就是：捕获型事件和冒泡型事件； 

3) ev.stopPropagation();（旧ie的方法 ev.cancelBubble = true;）

3.解释一下事件代理

事件代理的原理其实就和作用域链的原理差不多，但是事件代理是利用事件的冒泡原理来实现的，事件代理就是通过给祖先元素添加事件，通过事件目标对象开始向上查找找到匹配的子节点为止，如果找不到则到绑定事件的那个祖先元素为止，找到了就触发事件，并且可以通过js中call和apply来改变触发事件函数中的this为当前绑定节点，也是通过一层一层逐层向上的方式进行匹配查找而触发对应事件，好处就是可以使后添加的dom元素也同样有之前存在元素的事件，jquery中可以使用on，delegate，live实现的，不过在jquery1.7版本以后吧live给废除了，原因就是live绑定事件的祖先元素是整个html页面的根节点，所以性能消耗比较大，在后边的版本中给删除了，使用on，delegate代替

优点：

使代码简洁 

减少浏览器的内存占用

缺点：

使用不当会造成事件在不应该触发时触发

function  bindEvent (elem, type, selector, fn) {

        // 这样处理，可接收两种调用方式 bindEvent(div1, 'click', 'a', function () {...}) 和bindEvent(div1, 'click', function () {...}) 这两种 

        if(fn ==null) {

             fn = selector

             selector =null

        }

        // 绑定事件 

        elem.addEventListener(type,function(e){

            var target

            if(selector) {

                // 有 selector 说明需要做事件代理

                 // 获取触发时间的元素，即 

                e.target target = e.target

                // 看是否符合 selector 这个条件 

                if(target.matches(selector)) {

                     fn.call(target, e)

                 }

             }else{

                // 无 selector ，说明不需要事件代理

                 fn(e)

             }

         })

     }

    // 使用代理，bindEvent 多一个 'a' 参数

     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)

     })

4.offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同 

clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条 

scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

5.focus/blur与focusin/focusout的区别与联系

focus/blur不冒泡，focusin/focusout冒泡 

focus/blur兼容性好，focusin/focusout在除FireFox外的浏览器下都保持良好兼容性，如需使用事件托管，可考虑在FireFox下使用事件捕获elem.addEventListener('focus', handler, true)

可获得焦点的元素：

window 

链接被点击或键盘操作 

表单空间被点击或键盘操作 

设置tabindex属性的元素被点击或键盘操作

6.mouseover/mouseout与mouseenter/mouseleave的区别与联系

mouseover/mouseout是标准事件，所有浏览器都支持；mouseenter/mouseleave是IE5.5引入的特有事件后来被DOM3标准采纳，现代标准浏览器也支持 

mouseover/mouseout是冒泡事件；mouseenter/mouseleave不冒泡。需要为多个元素监听鼠标移入/出事件时，推荐mouseover/mouseout托管，提高性能 

标准事件模型中event.target表示发生移入/出的元素,vent.relatedTarget对应移出/如元素；在老IE中event.srcElement表示发生移入/出的元素，event.toElement表示移出的目标元素，event.fromElement表示移入时的来源元素

7.介绍DOM0，DOM2，DOM3事件处理方式区别

DOM0级事件处理方式：

btn.onclick = func; 

btn.onclick = null;

DOM2级事件处理方式：

btn.addEventListener('click',func,false);

btn.removeEventListener('click',func,false);

btn.attachEvent("onclick",func);

btn.detachEvent("onclick",func);

DOM3级事件处理方式：

eventUtil.addListener(input, "textInput", func); 

eventUtil 是自定义对象，textInput 是DOM3级事件

8.事件的三个阶段

捕获、目标、冒泡

js的冒泡(Bubbling Event)和捕获(Capture Event)的区别

冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 

捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。 

DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

事件捕获

当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。

事件冒泡

当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

阻止冒泡

在W3c中，使用stopPropagation（）方法

在IE下设置cancelBubble = true；

在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了。

阻止捕获

阻止事件的默认行为，例如click 后的跳转

在W3c中，使用preventDefault（）方法；

在IE下设置window.event.returnValue = false;

9.介绍事件“捕获”和“冒泡”执行顺序和事件的执行次数？

按照W3C标准的事件：首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段 

事件执行次数（DOM2-addEventListener）：元素上绑定事件的个数 

注意1：前提是事件被确实触发 

注意2：事件绑定几次就算几个事件，即使类型和功能完全一样也不会“覆盖” 

事件执行顺序：判断的关键是否目标元素 

非目标元素：根据W3C的标准执行：捕获->目标元素->冒泡（不依据事件绑定顺序） 

目标元素：依据事件绑定顺序：先绑定的事件先执行（不依据捕获冒泡标准） 

最终顺序：父元素捕获->目标元素事件1->目标元素事件2->子元素捕获->子元素冒泡->父元素冒泡 

注意：子元素事件执行前提 事件确实“落”到子元素布局区域上，而不是简单的具有嵌套关系 

在一个DOM上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获？

该DOM上的事件如果被触发，会执行两次（执行次数等于绑定次数） 

如果该DOM是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获 

如果该DOM是处于事件流中的非目标元素，则先执行捕获，后执行冒泡

10.window.onload 和 document.DOMContentLoaded  (注：$(document).ready())  的区别？

一般情况下，DOMContentLoaded事件要在window.onload之前执行，当DOM树构建完成的时候就会执行DOMContentLoaded事件，而window.onload是在页面载入完成的时候，才执行，这其中包括图片等元素。大多数时候我们只是想在DOM树构建完成后，绑定事件到元素，我们并不需要图片元素，加上有时候加载外域图片的速度非常缓慢。

DOM

讲 DOM 先从 HTML 讲起，讲 HTML 先从 XML 讲起。XML 是一种可扩展的标记语言，所谓可扩展就是它可以描述任何结构化的数据，它是一棵树！

1.documen.write和 innerHTML的区别

document.write只能重绘整个页面 

innerHTML可以重绘页面的一部分

2.DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

1）创建新节点

createDocumentFragment()//创建一个DOM片段 createElement()//创建一个具体的元素 createTextNode()//创建一个文本节点

2）添加、移除、替换、插入

appendChild()removeChild()replaceChild()insertBefore()//在已有的子节点前插入一个新的子节点

3）查找

getElementsByTagName()//通过标签名称 getElementsByName()//通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的) getElementById()//通过元素Id，唯一性

3.attribute和property的区别是什么？

attribute是dom元素在文档中作为html标签拥有的属性； 

property就是dom元素在js中作为对象拥有的属性。 

所以： 

对于html的标准属性来说，attribute和property是同步的，是会自动更新的， 

但是对于自定义的属性来说，他们是不同步的，

4.src和href的区别

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。 

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。 

Src source,指向外部资源的位置,如果我们添加浏览器会暂停其他资源的下载和处理,直到该资源加载,编译,执行完毕(图片和框架也是如此),这也就是为什么js脚本要放在底部。 

src用于替换当前元素,href用于在当前文档和引入资源之间建立联系。