前端面试问题总结-白红宇

前端面试问题总结

阅读量：7019 次

发布时间：2019-06-28

本文共 8871 字，大约阅读时间需要 29 分钟。

1、web前端优化

1、对AJAX请求使用GET方法：XMLHttpRequest POST要两步，而GET只需要一步。PS在IE上GET能处理的最大URL长度是2K。

2、使用CDN（Content Delivery Network）内容发布网络

当页面中有很多资源的时候,可以从不同的服务中去读取,同时可以提高并行下载速度

3、添加Expires或Cache-Control信息头

如果资源设置了Expires头为将来的某个时间,下次访问时候浏览器发现资源还没有过期,会直接从缓存中读取,不会再次产生http请求

这种情况下浏览器仅会向Server发送一个Header,如果资源没有更新,会返回一个http 304的response,如果资源跟新,则重新下载资源

4、减少HTTP请求

1) 合并文件，比如把多个 CSS 文件合成一个；

2) CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位；参见：CSS Sprites: Image Slicing’s Kiss of Death

3) 图像地图

4) 内联图象使用 data: URL scheme 在实际的页面嵌入图像数据.***延时加载

其实就是通过将多个图片融合到一副图里面，然后通过CSS的一些技术布局到网页上。

这个是由于浏览器对同一个host有并行下载的限制,http请求越多,总体下载速度越慢

5、将CSS和JS文件放在底部，因为HTML加载不受制于脚本加载。

将CSS和JS放在外部文件中。

精简JS和CSS文件

2、事件冒泡

DOM事件流：事件捕获阶段、处于目标阶段、事件冒泡阶段

事件捕获：DOCUMENT->HTML>BODY>DIV

处于目标：DIV

事件冒泡：DIV->BODY->HTML>DOCUMENT

3、模块化编程

模块化程序设计:其基本思想是将一个大的程序按功能分解成为一些功能单一、结构清晰、接口简单、容易理解的功能模块。

4、JS闭包

闭包就是能够读取其他函数内部变量的函数。

由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

使用闭包的注意点

1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

匿名函数/匿名闭包的作用

1 相当划出一块私有作用域,【避免数据污染.】

2 执行完就销毁,【避免内存长驻.】

闭包的深入理解

闭包是很多语言都具备的特性,在js中,闭包主要涉及到js的几个其他的特性:作用域链,垃圾(内存)回收机制,函数嵌套,等等.

深入理解：

了解了作用域链,我们再来看看js的内存回收机制,一般来说,一个函数在执行开始的时候,会给其中定义的变量划分内存空间保存,以备后面的语句所用,等到函数执行完毕返回了,这些变量就被认为是无用的了.对应的内存空间也就被回收了.下次再执行此函数的时候,所有的变量又回到最初的状态,重新赋值使用.但是如果这个函数内部又嵌套了另一个函数,而这个函数是有可能在外部被调用到的.并且这个内部函数又使用了外部函数的某些变量的话.这种内存回收机制就会出现问题.如果在外部函数返回后,又直接调用了内部函数,那么内部函数就无法读取到他所需要的外部函数中变量的值了.所以js解释器在遇到函数定义的时候,会自动把函数和他可能使用的变量(包括本地变量和父级和祖先级函数的变量(自由变量))一起保存起来.也就是构建一个闭包,这些变量将不会被内存回收器所回收,只有当内部的函数不可能被调用以后(例如被删除了,或者没有了指针),才会销毁这个闭包,而没有任何一个闭包引用的变量才会被下一次内存回收启动时所回收.

5、浏览器本地存储

（答了localStorage、cookie、user data 这三个）

跨浏览器的本地存储多种方式，例如：

1、localStorage:只支持IE8+、FireFox、Chrome、Opera等，不支持IE8以下的浏览器。

2、浏览器Cookie：支持的数据存储量相对较少，每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉，有些浏览器甚至不支持；同时，Cookie存在安全性问题，如果cookie被人拦截了，就可以取得所有的session信息。

使用Cookie进行会话跟踪

优点

没有经过用户允许的信息将不会被传到服务器。只有当用户允许支持Cookie，信息才有可能被传递给服务器

缺点

以纯文本形式存储到机器里面，这使得别人也可以打开这个文件来进行阅读受限于客户端浏览器

3、可以在页面上嵌一个隐藏的Flash，然后使用Flash的Flash SharedObject，它基本上不会有兼容性问题，只有要额外的引入Flash和JS，但这样会增加页面负担。

4、User Data：是微软为IE专门在系统中开辟的一块存储空间(这个支持所有IE浏览器)，只支持Windows+IE的组合（单个文件的大小限制是128KB，一个域名下总共可以保存1024KB的文件，文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB。）

6、语义化标签

1）tite与h1的区别：1、TITLE语义化，结构清晰 2、SEO里TITLE比H1的权重高

2）b与strong的区别：1、STRONG语义化标签 2、B是一种直接加粗的效果，而STRONG带有强调的语义

3）i与em的区别：

1、<em>用来局部强调，<strong>则是全局强调。EM和I是斜体

2、语义化<em>表示内容的着重点（stress emphasis），<strong>表示内容的重要性（strong importance）

emphasis

3、SEO权重

7、TCP/IP参考模型

OSI参考模型：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层

TCP/IP参考模型：数据链路层、网络层、传输层、应用层

8、三次握手

1、源主机给目标主机发送一段带有SYN（同步标志位）置1的TCP数据段

2、目标主机返回带有SYN和ACK（确认标志位）置1的确认数据段

3、源主机返回一个带有递增的发送和确认序号的数据段

9、JS为什么没有重载

ECMA中没有真正的重载，他不存在函数签名的特性，可检查传入函数中参数的类型和数量来模仿

函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定。

10、HTTP请求

首先，浏览器找到该网址所指向的IP，然后与其建立TCP连接，接着向服务器提出Get请求，当服务器接收到我们的请求后，向我们传送应答信息,然后断开连接。

[补充]以上文章中主要是描述HTTP请求的大致流程，至于HTTP之前所建立的一系列连接，只用了"浏览器找到该网址所指向的IP，然后与其建立TCP连接"这句话或类似的话来带过。根据朋友们的回复显得这个说法不是很恰当。所以我在这里再补充些东西。

1、获取IP。浏览器地址栏中输入"http://www.xxx.edu.cn/"并提交之后，首先【它会在DNS本地缓存表中查找，如果有则直接告诉IP地址。如果没有则要求网关DNS进行查找，如此下去，当找到对应的ip后，则返回给浏览器】。

2、建立TCP连接。当获取到IP之后，就开始与所请求的服务器建立TCP连接

3、连接建立后，就向服务器发出http请求。如果是HTTP1.0的版本则，每一次请求结束后，就释放TCP连接。

11、AJAX有时候会造成DOM事件失效，你如何解决？

原因：事件的绑定是在dom树加载完毕的情况下就触发的。你使用ajax的时候肯定dom已

经解析完毕。然后你再绑定的可能就失效。

解决方案：

事件代理/事件委托

利用事件冒泡，将事件绑定在DOM的父节点或祖先节点

可以获得事件对象，通过event.target来识别

12、STRUTS2的运行原理：STRUCTS2 过滤器拦截所以ACTION请求

一个请求在Struts2框架中的处理大概分为以下几个步骤

1 客户端初始化一个指向Servlet容器（例如Tomcat）的请求

2 这个请求经过一系列的过滤器（Filter）（这些过滤器中有一个叫做ActionContextCleanUp的可选过滤器，这个过滤器对于Struts2和其他框架的集成很有帮助，例如：SiteMesh Plugin）

3 接着FilterDispatcher被调用，FilterDispatcher询问ActionMapper来决定这个请是否需要调用某个Action

4 如果ActionMapper决定需要调用某个Action，FilterDispatcher把请求的处理交给ActionProxy

5 ActionProxy通过Configuration Manager询问框架的配置文件，找到需要调用的Action类

6 ActionProxy创建一个ActionInvocation的实例。

7 ActionInvocation实例使用命名模式来调用，在调用Action的过程前后，涉及到相关拦截器（Intercepter）的调用。

8 一旦Action执行完毕，ActionInvocation负责根据struts.xml中的配置找到对应的返回结果。返回结果通常是（但不总是，也可能是另外的一个Action链）一个需要被表示的JSP或者FreeMarker的模版。在表示的过程中可以使用Struts2 框架中继承的标签。在这个过程中需要涉及到ActionMapper

在上述过程中所有的对象（Action，Results，Interceptors，等）都是通过ObjectFactory来创建的。

struts运行机制：

1）客户端在浏览器中输入一个url地址。?2）这个url请求通过http协议发送给tomcat。?

3）tomcat根据url找到对应项目里面的web.xml文件。?4）在web.xml里面会发现有struts2的配置。?5）然后会找到struts2对应的struts.xml配置文件。?6）根据url解析struts.xml配置文件就会找到对应的class。?

7）调用完class返回一个字String，根据struts.xml返回到对应的jsp。

13、TOMCAT运行机制

TOMCAT就是一个SOCKET连接器，发送一个HTTP请求本机端口8080，当CONTEXT获得请求时，查询映射表，找到被请求的SERVELET，并执行以获得请求回应。

14、HTTP

HTTP协议的主要特点可概括如下：

1.支持客户/服务器模式。

2.简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有

GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单

，使得HTTP服务器的程序规模小，因而通信速度很快。

3.灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记

。

4.无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，

并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。

5.无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少

状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送

的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。

http请求由三部分组成，分别是：请求行、消息报头、请求正文

状态代码：

状态代码有三位数字组成，第一个数字定义了响应的类别，且有五种可能取值：

1xx：指示信息--表示请求已接收，继续处理

2xx：成功--表示请求已被成功接收、理解、接受

3xx：重定向--要完成请求必须进行更进一步的操作

4xx：客户端错误--请求有语法错误或请求无法实现

5xx：服务器端错误--服务器未能实现合法的请求

常见状态代码、状态描述、说明：

200 OK //客户端请求成功

400 Bad Request //客户端请求有语法错误，不能被服务器所理解

401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一

起使用

403 Forbidden //服务器收到请求，但是拒绝提供服务

404 Not Found //请求资源不存在，eg：输入了错误的URL

500 Internal Server Error //服务器发生不可预期的错误

503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢

复正常

eg：HTTP/1.1 200 OK （CRLF）

15、CDN

CDN：为更好地理解CDN，让我们看一下CDN的工作流程。当用户访问已经加入CDN服务的网站时，首先通过DNS重定向技术确定最接近用户的最佳CDN节点，同时将用户的请求指向该节点。当用户的请求到达指定节点时，CDN的服务器（节点上的高速缓存）负责将用户请求的内容提供给用户。

CDN加速 - CDN加速原理

CDN加速将网站的内容缓存在网络边缘（离用户接入网络最近的地方），然后在用户访问网站内容的时候，通过调度系统将用户的请求路由或者引导到离用户接入网络最近或者访问效果最佳的缓存服务器上，有该缓存服务器为用户提供内容服务；相对于直接访问源站，这种方式缩短了用户和内容之间的网络距离，从而达到加速的效果。

技术关键词：整体负载均衡（GSLB）、缓存技术（Cache）及镜像技术（Mirror）

16、AJAX

AJAX请求时status返回状态明细表 readyState的五种状态

0 －（未初始化）还没有调用send()方法

1 －（载入）已调用send()方法，正在发送请求

2 －（载入完成）send()方法执行完成，已经接收到全部响应内容

3 －（交互）正在解析响应内容

4 －（完成）响应内容解析完成，可以在客户端调用了

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

XMLHttpRequest.open(method,URL,flag,name,password)

(3)设置响应HTTP请求状态变化的函数.

xmlHttpRequest.onreadystatechange = httpStateChange;

(4)发送HTTP请求.

XMLHttpRequest.send(null)

(5)获取异步调用返回的数据.

17、Servlet

什么是Servlet？

Servlet是运行在服务器端，由Web服务器进行加载，用来响应客户端请求的Java代码模块。

Servlet是一种独立于平台和协议的服务器端Java应用程序，可以生成动态的Web页面。

Servlet的生命周期包括加载、实例化、处理客户端请求和移除，该生命周期由javax.servlet.Servlet接口的init、service、destroy方法来实现。

18、POJO

POJO对象就是普通JAVA对象，是一些拥有GET和SET方法的对象。而JAVABEAN是可复用的组件，一般由容器直接创建。

19、SSH

轻量级框架SSH：

STRUCT2：1、MVC设计模式的实现

2、接收用户请求，调用业务逻辑代码，转发到正确页面

3、控制器

SPRING:

1、依赖注入容器 / AOP实现

2、声明式事务

3、简化Java EE应用

4、黏合剂，将大家组装到一起

hibernate:

1、ORM，简化数据库操作

2、DAO层

20、CSS层叠样式表

层叠指的是样式的优先级，当产生冲突时以优先级高的为准。

1. 开发者样式>读者样式>浏览器样式（除非使用!important标记）

2. id选择符>（伪）类选择符>元素选择符

3. 权重相同时取后面定义的样式

以下是一段经典的html，三个类名分别为模块、标题和正文。

</div>

大部分html页面都可以由这种结构嵌套或者累加而成。

21、DOM分级

W3C DOM 标准被分为 3 个不同的部分：

核心 DOM - 针对任何结构化文档的标准模型

XML DOM - 针对 XML 文档的标准模型

HTML DOM - 针对 HTML 文档的标准模型

DOM的分级

根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。

1级DOM

1级DOM在1998年10月份成为W3C的提议，由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。

2级DOM

DOMDOM

鉴于1级DOM仅以映射文档结构为目标，DOM 2级面向更为宽广。通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM 1的核心进行了扩展，从而可支持XML命名空间。

2级DOM引进了几个新DOM模块来处理新的接口类型：

DOM视图：描述跟踪一个文档的各种视图（使用CSS样式设计文档前后）的接口；

DOM事件：描述事件接口；

DOM样式：描述处理基于CSS样式的接口；

DOM遍历与范围：描述遍历和操作文档树的接口；

3级DOM

3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包扩XML Infoset、 XPath、和XML Base。

"0级"DOM

当阅读与DOM有关的材料时，可能会遇到参考0级DOM的情况。需要注意的是并没有标准被称为0级DOM，它仅是DOM历史上一个参考点（0级DOM被认为是在Internet Explorer 4.0 与Netscape Navigator4.0支持的最早的DHTML）。

22、JS包含哪三个部分？

ECMAScript，描述了该组成言的语法和基本对象。

文档对象模型（DOM），描述处理网页内容的方法和接口。