web前端面试题及答案 JavaScript篇

1.null和undefined的区别？

1，null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。
2，null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象；当声明的变量还未被初始化时，变量的默认值为undefined。
3，undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

①变量被声明了，但没有赋值时，就等于undefined。
②调用函数时，应该提供的参数没有提供，该参数等于undefined。
③对象没有赋值的属性，该属性的值为undefined。
④函数没有返回值时，默认返回undefined。

4，null表示”没有对象”，即该处不应该有值。典型用法是：

①作为函数的参数，表示该函数的参数不是对象。
②作为对象原型链的终点。

2.new操作符具体干了什么呢?

1，创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。
2，属性和方法被加入到 this 引用的对象中。
3，新创建的对象由 this 所引用，并且最后隐式的返回 this 。

1.obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
2.obj = {};
3.__ proto__ = Base.prototype; 
Base.call (obj);

3.js延迟加载的方式有哪些？

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

4.如何解决跨域问题?

jsonp、 document.domain+iframe、window.name、window.postMessage、服务器上设置代理页面;
jsonp的原理是动态插入script标签;

5.documen.write和 innerHTML的区别?

1，document.write只能重绘整个页面;
2，innerHTML可以重绘页面的一部分；

6.call() 和 .apply() 的区别和作用？

动态改变某个类的某个方法的运行环境。
1，方法的定义
call方法:
语法：call(thisObj，Object)
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
apply方法：
语法：apply(thisObj，[argArray])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
2， 模拟call, apply的this替换
function Animal(name) {
this.name = name;
this.showName = function() {
alert(this.name);
};
};
function Cat(name) {
this.superClass = Animal;
this.superClass(name);
delete superClass;
}
var cat = new Cat(“Black Cat”);
cat.showName();

7.哪些操作会造成内存泄漏？

1，内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
2，垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
3，setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
4，闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。

8.你遇到过比较难的技术问题是？你是如何解决的？列举IE 与其他浏览器不一样的特性？什么叫优雅降级和渐进增强？

1，优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。
2，渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。

9.WEB应用从服务器主动推送Data到客户端有那些方式？

Javascript数据推送
1，Commet：基于HTTP长连接的服务器推送技术。
2，基于WebSocket的推送方案。
3，SSE（Server-Send Event）：服务器推送数据新方式。

10.对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

1， 前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
①实现界面交互；
②提升用户体验；
③有了Node.js，前端可以实现服务端的一些事情；
2，前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好；
3，参与项目，快速高质量完成实现效果图，精确到1px；
4，与团队成员，UI设计，产品经理的沟通；
5，做好的页面结构，页面重构和用户体验；
6，处理hack，兼容、写出优美的代码格式；
7，针对服务器的优化、拥抱最新前端技术。

11.你有哪些性能优化的方法？

1，减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
2，前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。
3， 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。
4，当需要设置的样式很多时设置className而不是直接操作style。
5，少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
6，避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
7，图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

12.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

分为4个步骤：
（1），当发送一个URL请求时，不管这个URL是Web页面的URL还是Web页面上每个资源的URL，浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询。这能使浏览器获得请求对应的IP地址。
（2）， 浏览器与远程Web服务器通过TCP三次握手协商来建立一个TCP/IP连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在
浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
（3），一旦TCP/IP连接建立，浏览器会通过该连接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP响应状态表示一个正确的响应。
（4），此时，Web服务器提供资源服务，客户端开始下载资源。
请求返回后，便进入了我们关注的前端模块；
简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而javascript又可以根据DOM API操作DOM；

13.javascript对象的几种创建方式？

1，工厂模式 ；
2，构造函数模式 ；
3，原型模式 ；
4，混合构造函数和原型模式 ；
5，动态原型模式 ；
6，寄生构造函数模式 ；
7，稳妥构造函数模式。

14.javascript继承的6种方法？

1，原型链继承 ；
2，借用构造函数继承；
3，组合继承(原型+借用构造) ；
4，原型式继承 ；
5，寄生式继承；
6，寄生组合式继承。

15.ajax过程？

1，创建XMLHttpRequest对象,也就是创建一个异步调用对象；
2，创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息；
3，设置响应HTTP请求状态变化的函数；
4，发送HTTP请求；
5，获取异步调用返回的数据；
6，使用JavaScript和DOM实现局部刷新；

16.异步加载和延迟加载？

1，异步加载的方案： 动态插入script标签；
2，通过ajax去获取js代码，然后通过eval执行；
3，script标签上添加defer或者async属性；
4，创建并插入iframe，让它异步执行js；
5，延迟加载：有些 js 代码并不是页面初始化的时候就立刻需要的，而稍后的某些情况才需要的。