前端面试题目和答案（前端面试题小合集）

忙族 2023-05-12 11:40:30 947

前端面试题目和答案（前端面试题小合集）// mocha 示例 describe('Test add' function() { it('1 2 = 3' function() { expect(add(1 2)).to.be.equal(3); }); }); // jasmin 示例 describe('Test add' function () { it('1 2 = 3' function () { expect(add(1 2)).toEqual(3); }); }); 介绍你知道的前端模板引擎？如何测试前端代码? 知道 Unit Test，BDD TDD 么? 怎么测试你的前端工程(mocha jasmin..)?如何判断当前脚本运行在浏览器还是node环境中？什么是 npm ？什么是 WebKit ？

前端面试题目和答案（前端面试题小合集）(1)

Front-end-frame-relative

通行的 Javascript 模块的规范有哪些？

CommonJS -- 主要用在服务器端 node.js

var math = require('./math'); math.add(2 3);

AMD(异步模块定义) -- require.js

require(['./math'] function (math) { math.add(2 3); });

CMD(通用模块定义) -- sea.js

var math = require('./math'); math.add(2 3);

ES6 模块

import {math} from './math'; math.add(2 3);

AMD 与 CMD 规范的区别？

规范化产出：
AMD 由 RequireJS 推广产出
CMD 由 SeaJS 推广产出
模块的依赖:
AMD 提前执行，推崇依赖前置
CMD 延迟执行，推崇依赖就近
API 功能:
AMD 的 API 默认多功能（分全局 require 和局部 require）
CMD 的 API 推崇职责单一纯粹（没有全局 require）
模块定义规则：
AMD 默认一开始就载入全部依赖模块

define(['./a' './b'] function(a b) { a.doSomething(); b.doSomething(); });

CMD 依赖模块在用到时才就近载入

define(function(require exports module) { var a = require('./a'); a.doSomething(); var b = require('./b'); b.doSomething(); })

requireJS的核心原理是什么？

每个模块所依赖模块都会比本模块预先加载

对 Node.js 的优点、缺点提出了自己的看法？ Node.js的特点和适用场景？

Node.js的特点：单线程，非阻塞I/O，事件驱动
Node.js的优点：擅长处理高并发；适合I/O密集型应用
Node.js的缺点：不适合CPU密集运算；不能充分利用多核CPU；可靠性低，某个环节出错会导致整个系统崩溃
Node.js的适用场景：
RESTful API
实时应用：在线聊天、图文直播
工具类应用：前端部署(npm gulp)
表单收集：问卷系统

如何判断当前脚本运行在浏览器还是node环境中？

判断 Global 对象是否为 window，如果不为 window，当前脚本没有运行在浏览器中

什么是 npm ？

npm 是 Node.js 的模块管理和发布工具

什么是 WebKit ？

WebKit 是一个开源的浏览器内核，由渲染引擎(WebCore)和JS解释引擎(JSCore)组成
通常所说的 WebKit 指的是 WebKit(WebCore)，主要工作是进行 HTML/CSS 渲染
WebKit 一直是 Safari 和 Chrome(之前) 使用的浏览器内核，后来 Chrome 改用Blink 内核

如何测试前端代码? 知道 Unit Test，BDD TDD 么? 怎么测试你的前端工程(mocha jasmin..)?

通过为前端代码编写单元测试(Unit Test)来测试前端代码
Unit Test：一段用于测试一个模块或接口是否能达到预期结果的代码
BDD：行为驱动开发 -- 业务需求描述产出产品代码的开发方法
TDD：测试驱动开发 -- 单元测试用例代码产出产品代码的开发方法
单元测试框架：

// mocha 示例 describe('Test add' function() { it('1 2 = 3' function() { expect(add(1 2)).to.be.equal(3); }); }); // jasmin 示例 describe('Test add' function () { it('1 2 = 3' function () { expect(add(1 2)).toEqual(3); }); });

介绍你知道的前端模板引擎？

artTemplate underscore handlebars

什么是 Modernizr？ Modernizr 工作原理？

Modernizr 是一个开源的 JavaScript 库，用于检测用户浏览器对 HTML5 与 CSS3 的支持情况

移动端最小触控区域是多大？

44 * 44 px

移动端的点击事件的延迟时间是多长，为什么会有延迟？如何解决这个延时？

移动端 click 有 300ms 延迟，浏览器为了区分“双击”（放大页面）还是“单击”而设计
解决方案：
禁用缩放(对safari无效)
使用指针事件(IE私有特性，且仅IE10 )
使用 Zepto 的 tap 事件(有点透BUG)
使用 FastClick 插件(体积大[压缩后8k])

什么是函数式编程？

函数式编程是一种"编程范式"，主要思想是把运算过程尽量写成一系列嵌套的函数调用
例如：var result = subtract(multiply(add(1 2) 3) 4);
函数式编程的特点：
函数核心化：函数可以作为变量的赋值、另一函数的参数、另一函数的返回值
只用“表达式”，不用“语句”：要求每一步都是单纯的运算，都必须有返回值
没有"副作用"：所有功能只为返回一个新的值，不修改外部变量
引用透明：运行不依赖于外部变量，只依赖于输入的参数
函数式编程的优点：
代码简洁，接近自然语言，易于理解
便于维护，利于测试、除错、组合
易于“并发编程“，不用担心一个线程的数据，被另一个线程修改
可“热升级”代码，在运行状态下直接升级代码，不需要重启，也不需要停机

什么是函数柯里化Currying)？

柯里化：
通常也称部分求值，含义是给函数分步传递参数，每次递参部分应用参数，并返回一个更具体的函数，继续接受剩余参数
期间会连续返回具体函数，直至返回最后结果。因此，函数柯里化是逐步传参，逐步缩小函数的适用范围，逐步求解的过程
柯里化的作用：延迟计算；参数复用；动态创建函数
柯里化的缺点：
函数柯里化会产生开销（函数嵌套，比普通函数占更多内存），但性能瓶颈首先来自其它原因（DOM 操作等）

什么是依赖注入？

当一个类的实例依赖另一个类的实例时，自己不创建该实例，由IOC容器创建并注入给自己，因此称为依赖注入。
依赖注入解决的就是如何有效组织代码依赖模块的问题

设计模式：什么是 singleton factory strategy decorator？

Singleton(单例) 一个类只有唯一实例，这个实例在整个程序中有一个全局的访问点
Factory (工厂) 解决实列化对象产生重复的问题
Strategy(策略) 将每一个算法封装起来，使它们还可以相互替换，让算法独立于使用
Observer(观察者) 多个观察者同时监听一个主体，当主体对象发生改变时，所有观察者都将得到通知
Prototype(原型) 一个完全初始化的实例，用于拷贝或者克隆
Adapter(适配器) 将不同类的接口进行匹配调整，尽管内部接口不兼容，不同的类还是可以协同工作
Proxy(代理模式) 一个充当过滤转发的对象用来代表一个真实的对象
Iterator(迭代器) 在不需要直到集合内部工作原理的情况下，顺序访问一个集合里面的元素
Chain of Responsibility(职责连) 处理请求组成的对象一条链，请求链中传递，直到有对象可以处理

什么是前端工程化？

前端工程化就是把一整套前端工作流程使用工具自动化完成
前端开发基本流程：
项目

HTTP

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 服务器端暂时无法处理请求（可能是过载或维护）。 ]

一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

注：这题胜在区分度高，知识点覆盖广，再不懂的人，也能答出几句，
而高手可以根据自己擅长的领域自由发挥，从URL规范、HTTP协议、DNS、CDN、数据库查询、
到浏览器流式解析、CSS规则构建、layout、paint、onload/domready、JS执行、JS API绑定等等；
详细版：
浏览器会开启一个线程来处理这个请求，对 URL 分析判断如果是 http 协议就按照 Web 方式来处理;
调用浏览器内核中的对应方法，比如 WebView 中的 loadUrl 方法;
通过DNS解析获取网址的IP地址，设置 UA 等信息发出第二个GET请求;
进行HTTP协议会话，客户端发送报头(请求报头);
进入到web服务器上的 Web Server，如 Apache、Tomcat、Node.JS 等服务器;
进入部署好的后端应用，如 PHP、Java、JavaScript、Python 等，找到对应的请求处理;
处理结束回馈报头，此处如果浏览器访问过，缓存上有对应资源，会与服务器最后修改时间对比，一致则返回304;
浏览器开始下载html文档(响应报头，状态码200)，同时使用缓存;
文档树建立，根据标记请求所需指定MIME类型的文件（比如css、js）同时设置了Cookie;
页面开始渲染DOM，JS根据DOM API操作DOM 执行事件绑定等，页面显示完成。
简洁版：
浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。

说说TCP传输的三次握手四次挥手策略

为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK
发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包

断开一个TCP连接则需要“四次握手”：

第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可以接受数据
第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号 1（与SYN相同，一个FIN占用一个序号）
第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了
第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号 1，至此，完成四次挥手

TCP和UDP的区别

TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来
UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！ UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境

HTTP和HTTPS

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS
默认HTTP的端口号为80，HTTPS的端口号为443

为什么HTTPS安全

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性

关于Http 2.0 你知道多少？

HTTP/2引入了“服务端推（server push）”的概念，它允许服务端在客户端需要数据之前就主动地将数据发送到客户端缓存中，从而提高性能。
HTTP/2提供更多的加密支持
HTTP/2使用多路技术，允许多个消息在一个连接上同时交差。
它增加了头压缩（header compression），因此即使非常小的请求，其请求和响应的header都只会占用很小比例的带宽

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

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

说说网络分层里七层模型是哪七层

应用层：应用层、表示层、会话层（从上往下）（HTTP、FTP、SMTP、DNS）
传输层（TCP和UDP）
网络层（IP）
物理和数据链路层（以太网）
每一层的作用如下：
物理层：通过媒介传输比特确定机械及电气规范（比特Bit）数据链路层：将比特组装成帧和点到点的传递（帧Frame）
网络层：负责数据包从源到宿的传递和网际互连（包PackeT）
传输层：提供端到端的可靠报文传递和错误恢复（段Segment）
会话层：建立、管理和终止会话（会话协议数据单元SPDU）
表示层：对数据进行翻译、加密和压缩（表示协议数据单元PPDU）
应用层：允许访问OSI环境的手段（应用协议数据单元APDU）

讲讲304缓存的原理

服务器首先产生ETag，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客户端）缓存
304是HTTP状态码，服务器用来标识这个文件没修改，不返回内容，浏览器在接收到个状态码后，会使用浏览器已缓存的文件
客户端请求一个页面（A）。服务器返回页面A，并在给A加上一个ETag。客户端展现该页面，并将页面连同ETag一起缓存。客户再次请求页面A，并将上次请求时服务器返回的ETag一起传递给服务器。服务器检查该ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304（未修改——Not Modified）和一个空的响应体

HTTP/2 与 HTTP/1.x 的关键区别

二进制协议代替文本协议，更加简洁高效
针对每个域只使用一个多路复用的连接
压缩头部信息减小开销
允许服务器主动推送应答到客户端的缓存中

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

01.浏览器查找域名对应的IP地址(DNS 查询：浏览器缓存->系统缓存->路由器缓存->ISP DNS 缓存->根域名服务器)
02.浏览器向 Web 服务器发送一个 HTTP 请求（TCP三次握手）
03.服务器 301 重定向（从 http://example.com 重定向到 http://www.example.com）
04.浏览器跟踪重定向地址，请求另一个带 www 的网址
05.服务器处理请求（通过路由读取资源）
06.服务器返回一个 HTTP 响应（报头中把 Content-type 设置为 'text/html'）
07.浏览器进 DOM 树构建
08.浏览器发送请求获取嵌在 HTML 中的资源（如图片、音频、视频、CSS、JS等）
09.浏览器显示完成页面
10.浏览器发送异步请求

Ajax

什么是 Ajax? 如何创建一个Ajax？
AJAX(Asynchronous Javascript And XML) = 异步 JavaScript XML 在后台与服务器进行异步数据交换，不用重载整个网页，实现局部刷新。
创建 ajax 步骤：
1.创建 XMLHttpRequest 对象
2.创建一个新的 HTTP 请求，并指定该 HTTP 请求的类型、验证信息
3.设置响应 HTTP 请求状态变化的回调函数
4.发送 HTTP 请求
5.获取异步调用返回的数据
6.使用 JavaScript 和 DOM 实现局部刷新

var xhr = new XMLHttpRequest(); xhr.open("POST" url true); xhr.setRequestHeader("Content-type" "application/x-www-form-urlencoded"); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) { fn.call(this xhr.responseText); } }; xhr.send(data); localStorage

浏览器本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

web storage和cookie的区别

Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用
除此之外，WebStorage拥有setItem getItem removeItem clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie
但是cookie也是不可以或缺的：cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在，而Web Storage仅仅是为了在本地“存储”数据而生
浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的userData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage
localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

cookie 和session 的区别：