乐趣区

js面试题(中)

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&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 事件委托机制
简要介绍事件代理,以及什么时候使用,事件代理发生在事件处理流程的哪个阶段,有什么好处?
事件代理就是说我们将事件添加到本来要添加事件的父节点,将事件委托给父节点来触发处理函数,这通常会在 这通常会使用在大量的同级元素需要添加同一类事件的时候,比如一个动态的非常多的列表,需要为每个列表项都添加 点击事件,这时可以使用事件代理,通过判断 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+$/

退出移动版