前端面试题-JS篇04

41、js 延迟加载的方式有哪些？

1.defer 和 async
2. 动态创建 DOM 方式（创建 script，插入到 DOM 中，加载完毕后 callBack）
3. 按需异步载入 js

42、documen.write 和 innerHTML 的区别？

document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分

43、哪些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。 垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用 数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
2. 闭包
3. 控制台日志
4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

44、解释 jsonp 的原理，以及为什么不是真正的 ajax

通过动态创建script标签，设置src属性，指向对方接口地址，并将请求和响应的全局函数传递给后端，对方将数据通过回调函数的方式传递回来，原理是利用了src天然跨域的特点
为什么不是真正的 ajax?
ajax的核心是 ： 通过XmlHttpRequest获取非本页内容，
jsonp的核心 ： 动态添加

45、window.location.search 返回的是什么？

答：查询(参数)部分。除了给动态语言赋值以外，我们同样可以给静态页面, 并使用 javascript 来获得相信应的参数值 返回值：?ver=1.0&id=timlq 也就是问号后面的！

46、window.location.hash 返回的是什么？

答：锚点 ， 返回值：#love ；

47、window.location.reload() 作用？

答：刷新当前页面。

48、javascript 中的垃圾回收机制？

答：在 Javascript 中，如果一个对象不再被引用，那么这个对象就会被 GC 回收。如果两个对象互相引用，而不再被第 3 者所引用，那么这两个互相引用的对象也会被回收。因为函数 a 被 b 引用，b 又被 a 外的 c 引用，这就是为什么 函数 a 执行后不会被回收的原因。

49、为什么不能定义 1px 左右的 div 容器？

IE6 下这个问题是因为默认的行高造成的，解决的方法也有很多，例如： overflow:hidden | zoom:0.08 | line-height:1px

50、如何在 HTML 中添加事件，几种方法？

1、标签之中直接添加 οnclick=“fun()”;
2、JS 添加 Eobj.onclick = method;
3、现代事件 IE9 以前： obj.attachEvent(‘onclick’, method)； 标准浏览器: obj.addEventListener(‘click’, method, false);

51、BOM 对象有哪些，列举 window 对象？

1、window 对象 ，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
2、document 对象，文档对象；
3、location 对象，浏览器当前 URL 信息；
4、navigator 对象，浏览器本身信息；
5、screen 对象，客户端屏幕信息；
6、history 对象，浏览器访问历史信息；

52、bind(), live(), delegate()的区别

bind： 绑定事件，对新添加的事件不起作用，方法用于将一个处理程序附加到每个匹配元素的事件上并返回 jQuery 对象。
live： 方法将一个事件处理程序附加到与当前选择器匹配的所有元素（包含现有的或将来添加的）的指定事件上并返回 jQuery 对象。
delegate： 方法基于一组特定的根元素将处理程序附加到匹配选择器的所有 元素（现有的或将来的）的一个或多个事件上

53、简述 link 和 import 的区别？

区别 1：link 是 XHTML 标签，除了加载 CSS 外，还可以定义 RSS 等其他事务；@import 属于 CSS 范畴，只能加载 CSS。
区别 2：link 引用 CSS 时，在页面载入时同时加载；@import 需要页面网页完全载入以后加载。
区别 3：link 是 XHTML 标签，无兼容问题；@import 是在 CSS2.1 提出的，低版本的浏览器不支持。
区别 4：link 支持使用 Javascript 控制 DOM 去改变样式；而@import 不支持。

54、window.onload 和 document.ready 的区别？

ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件）；
onload，指示页面bai包含图片等文件在内的所有元素都加载完成。

55、原生 JS 的 window.onload 与 Jquery 的$(document).ready(function(){}) 有什么不同？

window.onload()方法是必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是 DOM 结构绘制完毕后就执行，不必等到加载完毕。

56、你如何优化自己的代码？

代码重用
避免全局变量（命名空间，封闭空间，模块化 mvc…）
拆分函数避免函数过于臃肿：单一职责原则
适当的注释，尤其是一些复杂的业务逻辑或者是计算逻辑，都应该写出这个业务逻辑 的具体过程
内存管理，尤其是闭包中的变量释放

57、请简要描述 web 前端性能需要考虑哪方面，你的优化思路 是什么？

减少服务器请求
1、小图弄成大图，
2、合理的设置缓存 ，本地缓存()
3、资源合并、压缩
将外部的 js 文件置底

58、简述 readyonly 与 disabled 的区别

readyonly
1，只针对input(text/password)和textarea有效，
2，不可编辑，但是是可以复制。

disabled
1，对于所有的表单元素有效，
2，完全不可编辑，并且是不能复制的。

表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去

59、请尽可能详尽的解释 ajax 的工作原理

首先创建一个XMLHttpRequest对象，然后通过这个对象的open方法与服务器建立连接，再通过send方法将请求发送给后端，最后通过一个事件来监听后端响应的状态及数据，后端通过回调函数将数据返回给前端
XMLHttpRequest 是 ajax 的核心机制，它是在 IE5 中首先引入的，是一种支持异步请求的 技术。简单的说，也就是 javascript 可以及时向服务器提出请求和处理响应，而不阻塞用户。 达到无刷新的效果。

60、为什么扩展 javascript 内置对象不是好的做法？

因为扩展内置对象会影响整个程序中所使用到的该内置对象的原型属性