js面试题（中）

jiezi

6 年前

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)
*/