js面试题（中）

JS延迟加载的方式有哪些？

JS的延迟加载有助与提高页面的加载速度。

defer和async、动态创建DOM方式（用得最多）、按需异步载入JS

defer：延迟脚本。立即下载，但延迟执行（延迟到整个页面都解析完毕后再运行），按照脚本出现的先后顺序执行。

async：异步脚本。下载完立即执行，但不保证按照脚本出现的先后顺序执行。

同步和异步的区别

同步的概念在操作系统中：不同进程协同完成某项工作而先后次序调整（通过阻塞、唤醒等方式），同步强调的是顺序性，谁先谁后。异步不存在顺序性。

同步：浏览器访问服务器，用户看到页面刷新，重新发请求，等请求完，页面刷新，新内容出现，用户看到新内容之后进行下一步操作。

异步：浏览器访问服务器请求，用户正常操作，浏览器在后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。

页面编码和被请求的资源编码如果不一致如何处理？

若请求的资源编码，如外引js文件编码与页面编码不同。可根据外引资源编码方式定义为 charset="utf-8"或"gbk"。

比如： http://www.yyy.com/a.html 中嵌入了一个 http://www.xxx.com/test.js

a.html 的编码是gbk或gb2312的。 而引入的js编码为utf-8的 ，那就需要在引入的时候

<script src=" http://www.xxx.com/test.js&amp ;quot; charset="utf-8"></script>

call,apply,bind

那些操作会造成内存泄漏

全局变量、闭包、DOM清空或删除时，事件未清除、子元素存在引用

flash和js通过什么类如何交互

Flash提供了ExternalInterface接口与JavaScript通信，ExternalInterface有两个方法，call和addCallback，call的作用是让Flash调用js里的方法，addCallback是用来注册flash函数让js调用。

Flash与Ajax各自的优缺点？

Flash：适合处理多媒体、矢量图形、访问机器。但对css、处理文本不足，不容易被搜索。

Ajax：对css、文本支持很好，但对多媒体、矢量图形、访问机器不足。

XML与JSON的区别

1) 数据体积方面。JSON相对于XML来讲，数据的体积小，传递的速度更快些。

2) 数据交互方面。JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。

3) 数据描述方面。JSON对数据的描述性比XML较差。

4) 传输速度方面。JSON的速度要远远快于XML。

Web Worker和Web Socket

web socket：在一个单独的持久连接上提供全双工、双向的通信。使用自定义的协议（ws://、wss://），同源策略对web socket不适用。

web worker：运行在后台的JavaScript，不影响页面的性能。

创建worker：var worker = new Worker(url);

向worker发送数据：worker.postMessage(data);

接收worker返回的数据：worker.onmessage

终止一个worker的执行：worker.terminate();

JS垃圾回收机制

1) 标记清除：

这个算法把“对象是否不再需要”简化定义为“对象是否可以获得”。

这个算法假定设置一个叫做根（root）的对象（在Javascript里，根是全局对象）。定期的，垃圾回收器将从根开始，找所有从根开始引用的对象，然后找这些对象引用的对象。从根开始，垃圾回收器将找到所有可以获得的对象和所有不能获得的对象。

2) 引用计数：

这是最简单的垃圾收集算法。此算法把“对象是否不再需要”简化定义为“对象有没有其他对象引用到它”。如果没有引用指向该对象（零引用），对象将被垃圾回收机制回收。

该算法有个限制：无法处理循环引用。两个对象被创建，并互相引用，形成了一个循环。它们被调用之后不会离开函数作用域，所以它们已经没有用了，可以被回收了。然而，引用计数算法考虑到它们互相都有至少一次引用，所以它们不会被回收。

前端面试查漏补缺--(二) 垃圾回收机制

web应用从服务器主动推送data到客户端的方式

JavaScript数据推送：commet（基于http长连接的服务器推送技术）。

基于web socket的推送：SSE（server-send Event）

如何删除一个cookie

1） 将cookie的失效时间设置为过去的时间（expires）

document.cookie = ‘user=’+ encodeURIComponent(‘name’) + ';
expires=’+ new Date(0);

2） 将系统时间设置为当前时间往前一点时间

var data = new Date();
date.setDate(date.getDate()-1);

Ajax

• 如何实现ajax请求

1.通过实例化一个XMLHttpRequest对象得到一个实例，调用实例的open方法为这次 ajax请求设定相应的http方法、相应的地址和以及是否异步，当然大多数情况下我们都是选异步， 以异步为例，之后调用send方法ajax请求，这个方法可以设定需要发送的报文主体，然后通过 监听readystatechange事件，通过这个实例的readyState属性来判断这个ajax请求的状态，其中分为0,1,2,3,4这四种 状态，当状态为4的时候也就是接收数据完成的时候，这时候可以通过实例的status属性判断这个请求是否成功

var xhr = new XMLHttpRequest();
xhr.open('get', 'aabb.php', true);
xhr.send(null);
xhr.onreadystatechange = function() {
  if(xhr.readyState==4) {
    if(xhr.status==200) {
      console.log(xhr.responseText);
    }
  }
}

• Ajax请求的页面历史记录状态问题？

  • 通过location.hash记录状态，让浏览器记录Ajax请求时页面状态的变化。
  • 通过HTML5的history.pushstate，来实现浏览器地址栏的无刷新改变

• Ajax的优势

  • 无刷新页面请求，使产品更快，更小更友好
  • 服务器端的任务转嫁到客户端处理
  • 减轻浏览器负担，节约带宽
  • 基于标准化对象，不需要安装特定的插件
  • 彻底将页面与数据分离

• Ajax局限性

  • AJAX 不支持浏览器 back 按钮。(无法使用回退按钮)
  • 安全问题 AJAX 暴露了与服务器交互的细节。
  • 对搜索引擎的支持比较弱。不会执行你的 JS 脚本，只会操作你的网页源代码；(不利于网页的SEO)
  • 跨域请求有一定限制。解决方式：jsonp；(不能发送跨域请求)

attribute与property的区别？

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

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

所以，对于html的标准属性来说，attribute和property是同步的，是会自动更新的。但对于自定义属性，他们不同步。

js事件

• js事件委托机制

1. 简要介绍事件代理，以及什么时候使用，事件代理发生在事件处理流程的哪个阶段，有什么好处？

事件代理就是说我们将事件添加到本来要添加事件的父节点，将事件委托给父节点来触发处理函数，这通常会在 这通常会使用在大量的同级元素需要添加同一类事件的时候，比如一个动态的非常多的列表，需要为每个列表项都添加 点击事件，这时可以使用事件代理，通过判断e.target.nodeName来判断发生的具体元素，从而判断是否是在 列表项中触发，这样的好处是可以减少事件绑定，同时动态的DOM结构仍然可以监听。事件代理发生在冒泡阶段。

参考：

浅析JavaScript的事件代理和委托

• 请描述一下 JavaScript 事件冒泡机制
• DOM事件模型是如何的,编写一个EventUtil工具类实现事件管理兼容

1.DOM事件包含捕获（capture）和冒泡（bubble）两个阶段：捕获阶段事件从window开始触发事件然后通过祖先节点一次传递到触发事件的DOM元素上；冒泡阶段事件从初始元素依次向祖先节点传递直到window

2.标准事件监听elem.addEventListener(type, handler, capture)/elem.removeEventListener(type, handler, capture)：handler接收保存事件信息的event对象作为参数，event.target为触发事件的对象，handler调用上下文this为绑定监听器的对象，event.preventDefault()取消事件默认行为，event.stopPropagation()/event.stopImmediatePropagation()取消事件传递

3.老版本IE事件监听elem.attachEvent('on'+type, handler)/elem.detachEvent('on'+type, handler)：handler不接收event作为参数，事件信息保存在window.event中，触发事件的对象为event.srcElement，handler执行上下文this为window使用闭包中调用handler.call(elem, event)可模仿标准模型，然后返回闭包，保证了监听器的移除。event.returnValue为false时取消事件默认行为，event.cancleBubble为true时取消时间传播

4.通常利用事件冒泡机制托管事件处理程序提高程序性能。

/**
 * 跨浏览器事件处理工具。只支持冒泡。不支持捕获
 * @author  (qiu_deqing@126.com)
 */

var EventUtil = {
    getEvent: function (event) {
        return event || window.event;
    },
    getTarget: function (event) {
        return event.target || event.srcElement;
    },
    // 返回注册成功的监听器，IE中需要使用返回值来移除监听器
    on: function (elem, type, handler) {
        if (elem.addEventListener) {
            elem.addEventListener(type, handler, false);
            return handler;
        } else if (elem.attachEvent) {
            var wrapper = function () {
              var event = window.event;
              event.target = event.srcElement;
              handler.call(elem, event);
            };
            elem.attachEvent('on' + type, wrapper);
            return wrapper;
        }
    },
    off: function (elem, type, handler) {
        if (elem.removeEventListener) {
            elem.removeEventListener(type, handler, false);
        } else if (elem.detachEvent) {
            elem.detachEvent('on' + type, handler);
        }
    },
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else if ('returnValue' in event) {
            event.returnValue = false;
        }
    },
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else if ('cancelBubble' in event) {
            event.cancelBubble = true;
        }
    },
    /**
     * keypress事件跨浏览器获取输入字符
     * 某些浏览器在一些特殊键上也触发keypress，此时返回null
     **/
     getChar: function (event) {
        if (event.which == null) {
            return String.fromCharCode(event.keyCode);  // IE
        }
        else if (event.which != 0 && event.charCode != 0) {
            return String.fromCharCode(event.which);    // the rest
        }
        else {
            return null;    // special key
        }
     }
};

正则表达式

• 注册账号要求以字母开头，可以包含字母、数字、下划线，请写出验证该账号的正则表达式

/^[a-zA-Z]w+$/