前端面试题3

目录：
9.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
10.浏览器本地存储?
11.线程与进程的区别?
12.请说出三种减少页面加载时间的方法。
【两道思考题】
5.在链接中应该使用诸如“Click here” 一类的笼统词汇吗？
6.链接是否应该在新窗口打开？

13.null和undefined的区别？
14 .new操作符具体干了什么呢?
15 .哪些操作会造成内存泄漏？
16.对Node的优点和缺点提出了自己的看法？
【两道思考题】
7.时至今日前端canvas还是否有深入学习的必要？
8.你如何对网站的文件和资源进行优化?

17.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
18.HTTP状态码
19.请解释一下 JavaScript 的同源策略。
20 .GET和POST的区别，何时使用POST？
思考题
9.ajax请求的时候get 和post方式的区别是什么？
10. Web前端密码加密是否有意义？(既然前端代码都是直接可以看到的，那加密是否还有意义？)

9.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

10.浏览器本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

请描述一下cookies，sessionStorage和localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小： cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有效时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

HTML5 Web Storage使用实例参考：http://www.cnblogs.com/erdeni/p/WebStorage.html

11.线程与进程的区别

• 进程是操作系统进行资源分配和调度的基本单位。
• 线程是CPU调度和分派的基本单位。
• 线程是进程的一部分
• 一个进程可以包含多个线程，一个进程最少包含一个线程。
• 多个线程可以并发执行。

线程的划分尺度小于进程，使得多线程程序的并发性高。另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

12.请说出三种减少页面加载时间的方法。

1.优化图片
2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3.优化CSS（压缩合并css，如margin-top,margin-left…)
4.网址后加斜杠（如http://www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）
5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
6.减少http请求（合并文件，合并图片）。

前端思考题

5.在链接中应该使用诸如“Click here” 一类的笼统词汇吗？

为了提高站点的易用性，可访问性和 SEO 性能，应该始终使用描述性链接。很有趣听到有人说 “Click here” 比描述性链接可以获得更多点击率，不知道那些点击进来的人是不是看两眼就离开了。

6. 链接是否应该在新窗口打开？

总体来讲，应该避免使用新窗口打开链接，但在某些场合，如打开购物车中的帮助链接，打开一个非 html 文件（如 PDF 文件），应该使用新窗口。为了提高易用性，最好在需要打开新窗口的地方，用一个小图标提示一下。

13.null和undefined的区别？

null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。当声明的变量还未被初始化时，变量的默认值为undefined。

null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。

undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。典型用法是：

（1）变量被声明了，但没有赋值时，就等于undefined。

（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。

（3）对象没有赋值的属性，该属性的值为undefined。

（4）函数没有返回值时，默认返回undefined。

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

（1） 作为函数的参数，表示该函数的参数不是对象。

（2）作为对象原型链的终点。

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

1、创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

2、属性和方法被加入到 this 引用的对象中。

3、新创建的对象由 this 所引用，并且最后隐式的返回 this 。

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

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

16.对Node的优点和缺点提出了自己的看法？

*（优点）因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。

此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

*（缺点）Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

前端思考题

7.时至今日前端canvas还是否有深入学习的必要？

现在手机和PC的性能越来越好，而且adobe animation、bodymovin和lottie等工具也渐渐进入大众的视野，似乎一般情况下的需求都可以由设计完成。徒手写酷炫的canvas的技能似乎越来越边缘化了，人写与软件生产最大区别是什么？是性能问题吗？按照目前硬件发展速度，性能还会是一个问题吗？canvas本身学习成本高，开发思维和一般意义前端不同，诚然尖端的游戏引擎、渲染、数据可视化、webgl方面肯定是需要人才的，但是低端的可替代性，其陡峭的学习曲线，是否可以说明其生态的恶化？低端的人没有实践场景我觉得是很难走到高端的。

8.你如何对网站的文件和资源进行优化?

有效的解决方案包括：

文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用

17.一个页面从输入 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服务器提供资源服务，客户端开始下载资源。

18.HTTP状态码

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息

200 OK 正常返回信息

201 Created 请求成功并且服务器创建了新的资源

202 Accepted 服务器已接受请求，但尚未处理

301 Moved Permanently 请求的网页已永久移动到新位置。

302 Found 临时性重定向。

303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。

304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。

401 Unauthorized 请求未授权。

403 Forbidden 禁止访问。

404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。

503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。

19.请解释一下 JavaScript 的同源策略。

概念:同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议。指一段脚本只能读取来自同一来源的窗口和文档的属性。

20 .GET和POST的区别，何时使用POST？

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符

POST：一般用于修改服务器上的资源，对所发送的信息没有限制。

GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。

然而，在以下情况中，请使用 POST 请求：

无法使用缓存文件（更新服务器上的文件或数据库）

向服务器发送大量数据（POST 没有数据量限制）

发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠。

前端思考题

9.ajax请求的时候get 和post方式的区别是什么？

区别在：

一个在url后面，一个放在虚拟载体里面

有大小限制

安全问题

应用不同：一个是论坛等只需要请求的，一个是类似修改密码的。

10. Web前端密码加密是否有意义？(既然前端代码都是直接可以看到的，那加密是否还有意义？)

我总结一下，首先大家都知道走 HTTPS 才是目前唯一负责的方式。但在 HTTP 环境下，无论如何都可能会被劫持流量，不管前端做不做加密都会被轻易成功登录。这个时候保护密码明文是否有意义？有人站队前端加密无意义，考虑的是这个加密对本站的安全性没有任何提升；但如果你是从保护用户的角度出发，用户多站点共享密码是现状，你在没法改变这一点的情况下，如果能够保护密码明文，至少降低了一点该用户其他网站（即使是 HTTPS 的网站）被一锅端的风险。这怎么能说完全没有意义？有人说 HTTP 流量可以直接注入脚本，直接拿到用户输入的密码，这没错。但是注入脚本就是代价，只要能够提高一点点门槛就不能说没有意义，很多时候是这些收益和成本之间的权衡。