本篇文章将写出十道新人学前端必须懂的题目，十道题目不能涵盖初学前端的所有知识点，因此仅供各位看官自行查漏补缺。
另外，题目所附的答案仅为本人自己所答，若有错误和补充，欢迎指出和批评~
第 1 题
请写出一个符合 W3C 规范的 HTML 文件，要求
1.页面标题为「我的页面」
2.页面中引入了一个外部 CSS 文件，文件路径为 /style.css
3.页面中引入了另一个外部 CSS 文件，路径为 /print.css，该文件仅在打印时生效
4.页面中引入了另一个外部 CSS 文件，路径为 /mobile.css，该文件仅在设备宽度小于 500 像素时生效
5.页面中引入了一个外部 JS 文件，路径为 /main.js
6.页面中引入了一个外部 JS 文件，路径为 /gbk.js，文件编码为 GBK
7.页面中有一个 SVG 标签，SVG 里面有一个直径为 100 像素的圆圈，颜色随意
注意题目中的路径
第一题答案：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta charset="UTF-8"> <link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./print.css" media="print"> <link rel="stylesheet" href="./mobile.css" media="only (max-width: 500px)"> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./main.js"></script> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./gbk.js" charset="GBK"></script> <title>我的页面</title></head><body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg></body></html>
第二题
2016年腾讯前端面试题：
移动端是怎么做适配的？
回答要点：
meta viewport
媒体查询
动态 rem 方案
第二题答案：
1.meta viewport
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
2.媒体查询
<style>
@media (max-width:800px){ /* 满足上面条件时会应用此处样式 */
}</style>3.动态rem方案
利用动态rem来适配不同屏幕大小的移动端，来得页面整体缩放。
思路：rem —> html font-size=（通过JavaScript）page width
代码实现：
<script>
var pageWidth=window.innerWidth
document.write('<style>html{font-size:'+pageWidth+'px;}</style>') </script>通过加入以上代码，即可使得1rem=html font-size=1 page width
从而在布局的时候使用rem来布局即可适配不同的移动端。
第三题
2017年腾讯前端实习面试题（二面）：
用过CSS3吗? 实现圆角矩形和阴影怎么做?
第三题答案：
利用border-radius和box-shadow来实现，具体实现代码如下：
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.boxtest{ width:200px; text-align:center; border:2px solid red; border-radius:5px; box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
} </style></head><body><div class="boxtest">
圆角矩形和阴影测试</div></body></html>第四题
出处同上（一面二面都问了）：
什么是闭包，闭包的用途是什么？
第四题答案：
"函数"和“函数内部能访问到的变量”（也叫环境）的总和，就是一个闭包。
var hi='hi'!function sayHi(){ console.log(hi)
}.call()例如以上代码就是一个闭包，他由一个sayHi函数和函数范围外的变量hi组成的整体就叫闭包。
闭包的优点是可以从外部访问到函数内部的值，这种访问是间接的，因此他可以很好地隐藏这个变量，使他不能被轻易地更改。
例如：
function f1(){
var n=999 function f2(){
return n
} return f2
}var result=f1.call()
result.call(); // 999这里就是充分使用闭包函数f2的特性，使得能在外部间接访问到函数内的变量n，又能保证变量n不会在外部被改变，很好地隐藏了n。
第五题
出处同上：
call、apply、bind 的用法分别是什么？
第五题答案：
1.call
call的用处是用来调用一个函数，正常来说，JS（ES5）里面有四种函数调用形式：
func(p1, p2) obj.child.method(p1, p2)func.call(context, p1, p2) func.apply(context, [argsArray])
而只有第三种和第四种调用方式才是函数的正常调用形式，其余两种都为语法糖。
用call来调用函数传入的第一个参数为this，可以在函数中通过使用this来取到它的值。
而除了第一个参数，后面传入的参数会被放入一个名为arguments的伪数组当中，可以通过使用伪数组arguments来取到后面传入的参数值。
2.apply
apply和call的用法类似，也是一种调用函数的正常形式，他与call一样，传入的第一个参数在函数中也能通过使用this而被调用。
不同之处是，apply的第二个参数为一个数组字面量或者数组对象，数组里面是所要传入的参数的集合。
func.call(context,p1,p2)//等同于func.apply(context,[p1,p2])
这个数组对象也可以通过使用arguments来取到，与call类似。
3.bind
call() 和apply()都是立马就调用了对应的函数，而 bind() 不会， bind() 会生成一个新的函数，bind() 函数的参数跟 call() 一致，第一个参数也是绑定 this 的值，后面接受传递给函数的不定参数。 bind() 生成的新函数返回后，可以随时调用。bind()函数也可以只绑定this，详情见下面实例:
var m = {
"x" : 1};function foo(y) {
alert(this.x + y);
}var foo1 = foo.bind(m, 5);var foo2 = foo.bind(m)
foo1(10); //6foo2(10); //11这里值得再次强调和注意的是，与call()和apply()不同，bind()只是创建一个新的函数，并不会立即执行这个函数。bind()需要另外执行它。
第六题
出处同上：
请说出至少 8 个 HTTP 状态码，并描述各状态码的意义。
例如：
状态码 200 表示响应成功。
第六题答案：
学生的回答
1、状态码 200 表示请求已经成功，请求所希望的响应头或数据体将随此响应返回。
2、状态码 204 表示服务器成功处理了请求，没有返回任何内容。
3、状态码 301 表示被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。
4、状态码 302 表示要求客户端执行临时重定向，临时暂时性无法访问。
5、状态码 304 表示表示资源未被修改，和上次访问的内容一样，因为请求头指定的版本If-Modified-Since或If-None-Match。
6、状态码 403 表示服务器已经理解请求，但是拒绝执行它。
7、状态码 404 表示请求失败，请求所希望得到的资源未被在服务器上发现，但允许用户的后续请求。
8、状态码 500 表示通用错误消息，服务器遇到了一个未曾预料的状况，导致了它无法完成对请求的处理。
9、状态码 502 表示作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。
10、状态码 503 表示由于临时的服务器维护或者过载，服务器当前无法处理请求。这个状况是暂时的，并且将在一段时间以后恢复。
第七题
出处同上：
请写出一个 HTTP post 请求的内容，包括四部分。
其中
第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path
第七题答案：
POST /path HTTP/1.1 Host: baidu.com Accept: application/json Content-Type: application/x-www-form-urlencoded Content-Length: 24 username=ff&password=123
第八题
请说出至少三种排序的思路，这三种排序的时间复杂度分别为
1.O(n*n)
2.O(n log2 n)
3.O(n + max)
第八题答案：
1.冒泡排序，思路：假设有一个length长度为n的，数组成员不为空的数组，首先会对数组进行一次遍历，在遍历时把最大值通过相邻数组成员的两两比较和交换数值来选出，并把这个最大值移至数组末端，同理，接下来进行（n-1）次遍历，遍历成员的个数为（n-1），每次遍历都选出其中的最大值并移至遍历结束的末端，通过n次遍历，便可得到一个从小到大排列的数组，输出该数组即可，这种排序方法为冒泡排序，时间复杂度为O(n*n)。
2.快速排序，思路：快速排序使用的是二分法的思想，假设有一个length长度为n的，数组成员不为空的数组，快速排序会先选择第一个数组成员的值，假设他为x，然后往后遍历，把小于x值的数值和大于x值的数值分开两边，然后把这个x值插入在这分界线上，从此，x值排序后的位置就被确定了且不会被改变了，然后对改变位置之后的x值的上下两边的数组成员进行相同的操作，即把代码分区块地进行排序，直至最后得到一个从小到大排列的数组，即排序完成，输出该数组即可，这种排序方法称为快速排序，时间复杂度为O(n log2 n)。
3.计数排序，思路：假设有一个length长度为n的，数组成员不为空的数组，首先我们会另外设置一个hash数组，然后hash数组的成员的个数的值为待排序数组的成员里的最大值，遍历待排序的数组，然后把每个遍历到的值所对应hash数组里的成员的值加一，即如果遍历到的值为2，那么hash[2]=hash[2]+1，如果该hash数组的成员里面的值原本为undefined，则将其变成1，等到待排序数组遍历完毕之后，遍历hash数组，把数组成员中value不是undefined的key值按顺序输出，输出个数为value的值，例如hash[3]=2则输出2个3，输出的序列则为排序之后的序列，这种排序称为计数排序，时间复杂度为O(n + max)。
第九题
著名前端面试题：
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
这一题是在挖掘你的知识边界，所以你知道多少就要答多少。
可以先查阅一些资料再查，但是不要把自己不懂的东西放在答案里，面试官会追问的。
第九题答案（答案缺少本地有缓存的情况，之后补充）：
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了：
1.浏览器补全URL地址
在输入完URL之后，浏览器会自动检查该地址是否完整，例如是否有添加https协议，若发现不完整，会自动补全。
2.向DNS查询IP地址
每个域名都对应一个或多个提供相同服务服务器的 IP 地址，只有知道服务器 IP 地址才能建立连接，所以需要通过 DNS 把域名解析成一个 IP 地址。
3.得到IP地址后，建立连接，进行三次握手
即每次建立连接前，客户端和服务端都要先进行三次对话才开始正式传输内容，三次对话的内容大概是这样的：
（1）客户端：我要连接你了，可以吗？
（2）服务端：嗯，我准备好了，连接我吧。
（3）客户端：那我连接你咯。
4.向该IP地址发送请求
客户端会通过IP地址向服务端发送一个GET请求，服务端会在80端口接收到这个请求并作出响应。
5.服务器在80端口接收请求，传送相应内容至浏览器
6.浏览器解析内容，并继续搜索页面内是否有请求，有的话继续通过IP地址发送至服务器
7.接受完从服务器发送至浏览器的内容之后，浏览器渲染网页，把网页内容呈献给用户
8.客户端与服务端断开连接，进行四次挥手
即每次断开连接前，客户端和服务端都要先进行四次对话才正式断开连接，四次对话的内容大概是这样的：
（1）主机向服务器发送一个断开连接的请求。（不早了，我该走了）
（2）服务器接到请求后发送确认收到请求的信号。（知道了）
（3）服务器向主机发送断开通知（我也该走了）。
（4）主机接到断开通知后断开连接并反馈一个确认信号（嗯，好的），服务器收到确认信号后断开连接。
第十题
著名面试题：
如何实现数组去重？
假设有数组 array = [1,5,2,3,4,2,3,1,3,4]
你要写一个函数 unique，使得
unique(array) 的值为 [1,5,2,3,4]
也就是把重复的值都去掉，只保留不重复的值。
要求：
不要做多重循环，只能遍历一次
请给出两种方案，一种能在 ES 5 环境中运行，一种能在 ES 6 环境中运行（提示 ES 6 环境多了一个 Set 对象）
第十题答案：
第一种：
array = [1,5,2,3,4,2,3,1,3,4]function unique(array){
let n = [] for(let i = 0;i < array.length; i++){ if(n.indexOf(array[i]) == -1) {
n.push(array[i])
}
} return n
}
console.log(unique(array))第二种：
var array = [1,5,2,3,4,2,3,1,3,4]function unique(arr){ return Array.from(new Set(arr))
}console.log(unique(array))本教程版权归饥人谷_宣泽彬和饥人谷所有，转载须说明来源
作者：宣泽彬
链接：https://www.jianshu.com/p/8522728fb424
共同学习，写下你的评论
评论加载中...
作者其他优质文章
