前端常见面试题
2020-08-11 本文已影响0人
凉城十月
第 1 题
请写出一个符合 W3C 规范的 HTML 文件，要求：
- 页面标题为 我的页面
- 页面中引入了一个外部 CSS 文件，文件路径为 /style.css
- 页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效
- 页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效
- 页面中引入了一个外部 JS 文件，路径为 /main.js
- 页面中引入了一个外部 JS 文件，路径为 /gbk.js，文件编码为 GBK
- 页面中有一个 SVG 标签，SVG 里面有一个直径为 100 像素的圆圈，颜色随意
回答：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的页面</title>
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./print.css" media="print">
<link rel="stylesheet" href="./mobile.css" media="(max-width: 500px)">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<svg>
<circle cx="250" cy="75" r="50" stroke="red" fill="transparent" stroke-width="5"/>
</svg>
</body>
<script type="text/javascript" src="./main.js"></script>
<script type="text/javascript" src="./gbk.js" charset="gbk"></script>
</html>
第 2 题
2016年腾讯前端面试题：
移动端是怎么做适配的？
回答要点：
回答：
1.meta viewport
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2.媒体查询
更具查询结果选择不同的css样式
<style>
@media (max-width: 500px) {
......
}
</style>
3.动态 rem方案
rem是通过根元素的字体大小来设置元素的宽高的,以此来达在不同屏幕尺寸中等比例缩放达到完美的展现效果
1rem = 根元素字体大小
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth: 320px; 为设计稿的宽度
第 3 题
2017年腾讯前端实习面试题（二面）：
用过CSS3吗? 实现圆角矩形和阴影怎么做?
回答：
1.设置圆角
border-radius: 1em;
/* 等价于 */
border-top-left-radius: 1em ;
border-top-right-radius: 1em ;
border-bottom-right-radius: 1em ;
border-bottom-left-radius: 1em ;
2.设置阴影
box-shadow使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”分开。
对象选择器 {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
第 4 题
出处同上（一面二面都问了）：
什么是闭包，闭包的用途是什么？
回答：
1.什么是闭包
闭包就是函数内部访问函数作用域外的变量,这个变量和这个函数之间的这个环境就叫闭包
var a = 1
function fn(){
console.log(a)
}
这个就叫闭包,其实我们天天都在用
2.闭包的用途
闭包可以暂存数据,已经给变量开辟私密空间,避免外部污染 在一个函数作用域中声明一个变量,子函数(访问器)可以操作这个变量,通过return 这个子函数(访问器),
外面可以访问这一个变量,来达到此目的,外面变量通过得到return的函数,这样外面访问这个函数,这个函数访问父级函数的变量,这样变量就一直存在这个依赖关系无法销毁
function s(){
var i = 0;
return function(){
return ++i;
}
}
var a = s()
console.log(a())
console.log(a())
console.log(a())
console.log(a())
第 5 题
出处同上：
call、apply、bind 的用法分别是什么？
回答：
apply,call和bind都是来改变this的指向的,
第一个参数都是相同的this指向的那个对象
但是apply接受的第二个参数一定是数组
call和bind接受的参数是连续的参数
apply与call立即执行
bind只是先改变this的指向
下面代码代码对上面的详细说明
var s = {
a:1,
b:2,
add(name) {
console.log(this.a + this.b)
console.log(name)
}
}
var a = {
a:2,
b:2,
}
var b = {
a:4,
b:2,
}
var c = {
a:5,
b:6,
}
s.add.call(a,"我叫call")
s.add.apply(b,["我叫apply"])
//s.add.bind(c,"我叫bind")此时bind只是改变了this如果要执行需要加上()
s.add.bind(c,"我叫bind")()
//等价于s.add.bind(c)("我叫bind")
第 6 题
出处同上：
请说出至少 8 个 HTTP 状态码，并描述各状态码的意义。
例如：
状态码 200 表示响应成功。
回答：
1xx消息
这一类型的状态码，代表请求已被接受，需要继续处理。
100 Continue
服务器已经接收到请求头，并且客户端应继续发送请求主体（在需要发送身体的请求的情况下：例如，POST请求），或者如果请求已经完成，忽略这个响应。
101 Switching Protocols
服务器已经理解了客户端的请求，并将通过Upgrade消息头通知客户端采用不同的协议来完成这个请求。
102 Processing
WebDAV请求可能包含许多涉及文件操作的子请求，需要很长时间才能完成请求。该代码表示服务器已经收到并正在处理请求，但无响应可用。
2xx成功
这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。
200 OK
请求已成功，请求所希望的响应头或数据体将随此响应返回。
201 Created
请求已经被实现，而且有一个新的资源已经依据请求的需要而创建，且其URI已经随Location头信息返回。
202 Accepted
服务器已接受请求，但尚未处理。最终该请求可能会也可能不会被执行，并且可能在处理发生时被禁止。
203 Non-Authoritative Information（自HTTP / 1.1起）
服务器是一个转换代理服务器（transforming proxy，例如网络加速器），以200 OK状态码为起源，但回应了原始响应的修改版本。
204 No Content
服务器成功处理了请求，没有返回任何内容。
205 Reset Content
服务器成功处理了请求，但没有返回任何内容。与204响应不同，此响应要求请求者重置文档视图。
206 Partial Content
服务器已经成功处理了部分GET请求。类似于FlashGet或者迅雷这类的HTTP 下载工具都是使用此类响应实现断点续传或者将一个大文档分解为多个下载段同时下载。
3xx重定向
这类状态码代表需要客户端采取进一步的操作才能完成请求。
300 Multiple Choices
被请求的资源有一系列可供选择的回馈信息，每个都有自己特定的地址和浏览器驱动的商议信息
301 Moved Permanently
被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。
4xx客户端错误
这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理。
400 Bad Request
由于明显的客户端错误，服务器不能或不会处理该请求。
401 Unauthorized
即用户没有必要的凭据
403 Forbidden
服务器已经理解请求，但是拒绝执行它。
404 Not Found
请求失败，请求所希望得到的资源未被在服务器上发现
5xx服务器错误
表示服务器无法完成明显有效的请求。
500 Internal Server Error
通用错误消息，服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。没有给出具体错误信息。
501 Not Implemented
服务器不支持当前请求所需要的某个功能。当服务器无法识别请求的方法，并且无法支持其对任何资源的请求。
502 Bad Gateway
作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。
503 Service Unavailable
由于临时的服务器维护或者过载，服务器当前无法处理请求
505 HTTP Version Not Supported
服务器不支持，或者拒绝支持在请求中使用的HTTP版本。
507 Insufficient Storage
服务器无法存储完成请求所必须的内容。这个状况被认为是临时的。
508 Loop Detected
服务器在处理请求时陷入死循环。
510 Not Extended
获取资源所需要的策略并没有被满足。
511 Network Authentication Required
客户端需要进行身份验证才能获得网络访问权限，旨在限制用户群访问特定网络。
第 7 题
出处同上：
请写出一个 HTTP post 请求的内容，包括四部分。
其中
第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path
回答：
1 POST /path HTTP/1.1
2 Host: passport.baidu.com
2 User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.62 Safari/537.36
2Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
2 Content-Length: 24
2 Content-Type: application/x-www-form-urlencoded
3
4 username=ff&password=123
第 8 题
请说出至少三种排序的思路，这三种排序的时间复杂度分别为
O(n*n)
O(n log2 n)
O(n + max)
回答：
O(n*n)
冒泡排序
每次比较两个相邻的数字作比较,小数放前面,大数放后面,这样一轮下来小的数字就拍在了最前面,如此重复,知道所有的数字排完
O(n log2 n)
快速排序
找其中的一个数作为标杆,小于标杆的数字放在左边,大于标杆的数字放在右边,这一次排完之后再重复前面的操作,直到只有一个数字为止
O(n + max)
基数排序
所有正整数总从最低的以为开始,把相同最低位相同的排列在一起,然后在排十位,不够的补零,然后在依次在排下一位,这样排列下来,在挨个去取即可得到有序数列了
第 9 题
著名前端面试题：
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
回答：
1.DNS解析
DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时，例如www.baidu.com，其实不是百度网站真正意义上的地址。
互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，也就是上面提到的百度的网址。
所以互联网设计者需要在用户的方便性与可用性方面做一个权衡，这个权衡就是一个网址到IP地址的转换，这个过程就是DNS解析。它实际上充当了一个翻译的角色，实现了网址到IP地址的转换。
2.TCP连接
知道了服务器的 IP 地址，下面便开始与服务器建立连接了。
主机向服务器发送一个建立连接的请求（您好，我想认识您）；
服务器接到请求后发送同意连接的信号（好的，很高兴认识您）；
主机接到同意连接的信号后，再次向服务器发送了确认信号（我也很高兴认识您），自此，主机与服务器两者建立了连接。
3.发送HTTP请求
一个典型的 http request header 一般需要包括请求的方法，例如 GET 或者 POST 等，不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法，一般的浏览器只能发起 GET 或者 POST 请求。
客户端向服务器发起http请求的时候，会有一些请求信息，请求信息包含三个部分：
1. 请求方法URI协议/版本
2.请求头(Request Header)
3.请求正文：
4.服务器处理请求并返回HTTP报文
HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。
5.浏览器解析渲染页面
浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。
6.连接结束
1.主机向服务器发送一个断开连接的请求（不早了，我该走了）；
2.服务器接到请求后发送确认收到请求的信号（知道了）；
3.服务器向主机发送断开通知（我也该走了）；
4.主机接到断开通知后断开连接并反馈一个确认信号（嗯，好的），服务器收到确认信号后断开连接；
第 10 题
著名面试题：
如何实现数组去重？
假设有数组 array = [1,5,2,3,4,2,3,1,3,4]
你要写一个函数 unique，使得
unique(array) 的值为 [1,5,2,3,4]
也就是把重复的值都去掉，只保留不重复的值。
要求：
- 不要做多重循环，只能遍历一次
2.请给出两种方案，一种能在 ES 5 环境中运行，一种能在 ES 6 环境中运行（提示 ES 6 环境多了一个 Set 对象）
回答：
Array.prototype.unique3 = function() {
var res = [];
var json = {};
for(var i = 0; i < this.length; i++) {
if(!json[this[i]]) {
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}
var arr = [112, 112, 34, '你好', 112, 112, 34, '你好', 'str', 'str1'];
console.log(arr.unique3());
ES6
var arr = [112, 112, 34, '你好', 112, 112, 34, '你好', 'str', 'str1'];
var newArr = Array.from(new Set(arr))
