共计 5243 个字符，预计需要花费 14 分钟才能阅读完成。
JS 延迟加载的方式有哪些？
JS 的延迟加载有助与提高页面的加载速度。defer 和 async、动态创建 DOM 方式（用得最多）、按需异步载入 JSdefer：延迟脚本。立即下载，但延迟执行（延迟到整个页面都解析完毕后再运行），按照脚本出现的先后顺序执行。async：异步脚本。下载完立即执行，但不保证按照脚本出现的先后顺序执行。
同步和异步的区别
同步的概念在操作系统中：不同进程协同完成某项工作而先后次序调整（通过阻塞、唤醒等方式），同步强调的是顺序性，谁先谁后。异步不存在顺序性。同步：浏览器访问服务器，用户看到页面刷新，重新发请求，等请求完，页面刷新，新内容出现，用户看到新内容之后进行下一步操作。异步：浏览器访问服务器请求，用户正常操作，浏览器在后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容。
页面编码和被请求的资源编码如果不一致如何处理？
若请求的资源编码，如外引 js 文件编码与页面编码不同。可根据外引资源编码方式定义为 charset=”utf-8″ 或 ”gbk”。比如：http://www.yyy.com/a.html 中嵌入了一个 http://www.xxx.com/test.jsa.html 的编码是 gbk 或 gb2312 的。而引入的 js 编码为 utf- 8 的，那就需要在引入的时候 <script src=”http://www.xxx.com/test.js&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 事件委托机制
简要介绍事件代理，以及什么时候使用，事件代理发生在事件处理流程的哪个阶段，有什么好处？
事件代理就是说我们将事件添加到本来要添加事件的父节点，将事件委托给父节点来触发处理函数，这通常会在 这通常会使用在大量的同级元素需要添加同一类事件的时候，比如一个动态的非常多的列表，需要为每个列表项都添加 点击事件，这时可以使用事件代理，通过判断 e.target.nodeName 来判断发生的具体元素，从而判断是否是在 列表项中触发，这样的好处是可以减少事件绑定，同时动态的 DOM 结构仍然可以监听。事件代理发生在冒泡阶段。
参考：浅析 JavaScript 的事件代理和委托
请描述一下 JavaScript 事件冒泡机制
DOM 事件模型是如何的, 编写一个 EventUtil 工具类实现事件管理兼容
1.DOM 事件包含捕获（capture）和冒泡（bubble）两个阶段：捕获阶段事件从 window 开始触发事件然后通过祖先节点一次传递到触发事件的 DOM 元素上；冒泡阶段事件从初始元素依次向祖先节点传递直到 window2. 标准事件监听 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+$/
