一些面试题整理
做作业，整理了一些面试题及答案。感觉到自己有点急躁，虽然差不多每节课差不多都有写博客总结，但是时间赶得很急，心态还是需要调整一下。
- 写出一个符合 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" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我的页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./style.css" />
<link rel="stylesheet" href="./print.css" media="print">
<link rel="stylesheet" href="./mobile.css" media="screen and (max-500px)">
<script src="./gbk.js" charset="GBK"></script>
<script src="./main.js"></script>
</head>
<body>
<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" fill="yellow"/>
</svg>
</body>
</html>
- 移动端是怎么做适配的
- 设置理想视口
meta viewport
<meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- 媒体查询
如果设备满足媒体查询中的条件，设置生效。
比如：
<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max- 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max- 800px) {
.facet_sidebar {
display: none;
}
}
</style>
如果设备的分辨率在800px一下，则这些CSS文件生效。
- 动态rem方案(手机专用自适应方案)
使用 JS 动态调整 REM
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
var pageWidth = window.innerWidth
document.write('<style>html{font-size:'+ pageWidth/10 +'px;}</style>')
</script>
在 SCSS 里使用 PX2REM
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640; // 640 是设计稿的宽度，要根据设计稿的宽度填写。
.child{
px(320);
height: px(160);
margin: px(40) px(40);
border: 1px solid red;
float: left;
font-size: 1.2em;
}
- 实现圆角矩形和阴影
圆角矩形使用border-radius
阴影使用box-shadow
比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>我的页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="./style.css" />
<script src="./main.js"></script>
<style>
.xxx {
200px;
height:100px;
margin:100px auto;
background-color: #fff;
text-align:center;
line-height: 100px;
box-shadow: 0px 10px 35px -5px rgba(51,51,51,0.3);
border-radius: 20px;
}
</style>
</head>
<body>
<div class="xxx">Shadow</div>
</body>
</html>
-
什么是闭包，闭包的用途是什么
- 什么是闭包
「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。
比如：var a = 1 function printThis(){ console.log(a) }这个函数printThis()和这个变量a就是一个闭包。
- 闭包的用途
闭包可以用来「间接访问一个变量」。换句话说，「隐藏一个变量」。
其实，闭包是 JS 函数作用域的副产品，只要我们正确理解了函数作用域，在生产环境中，我们所写的代码已经符合闭包的定义。 -
call、apply、bind 的用法分别是什么
function x(a,b){
console.log(a+b)
console.log(this.a + this.b)
}
var obj = {a:2,b:3}
x.call(obj,3,4) // 7 5
x.apply(obj,[3,4]) // 7 5
var foo = x.bind(obj,3,4)
foo() // 7 5
call()、apply()、bind()都可以通过传入第一个参数改变this对象的指向。
call()的arguments传入具体参数，apply()的arguments传入包裹着参数的数组,bind()的arguments传入具体参数。
call()、apply()是立即调用，bind()的返回值是传给一个变量，可以稍后调用。
- 请说出至少 8 个 HTTP 状态码，并描述各状态码的意义
301 : 该状态码表示所请求的URI资源路径已经改变,新的URL会在响应的Location:头字段里找到.
302 : 该状态码表示所请求的URI资源路径临时改变,并且还可能继续改变.因此客户端在以后访问时还得继续使用该URI.新的URL会在响应的Location:头字段里找到.
304 : 告诉客户端,所请求的内容距离上次访问并没有变化. 客户端可以直接从浏览器缓存里获取该资源.
403 : 客户端没有权利访问所请求内容,服务器拒绝本次请求.
404 : 服务器找不到所请求的资源.
500 : 服务器遇到未知的无法解决的问题.
502 : 服务器作为网关且从上游服务器获取到了一个无效的HTTP响应.
505 : 服务器不支持客户端发送的HTTP请求中所使用的HTTP协议版本.
- 请写出一个 HTTP post 请求的内容，包括四部分
其中
第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path
POST /path HTTP/1.1
Host: localhost:8081
User-Agent: curl/7.54.0
Accept: */*
no1harm: xxx
Content-Length: 10
Content-Type: application/x-www-form-urlencoded
username=ff&password=123
- 请说出至少三种排序的思路
这三种排序的时间复杂度分别为
O(n*n)
O(n log2 n)
O(n + max)
1.O(n*n)
冒泡排序：比较相邻的元素，如果第一个比第二个大，就交换他们两个，对每一对相邻的元素做同样的工作，从开始第一对到结尾最后一对，这步会让后一位元素就是最大的数，对所有元素重复以上步骤，除了最后一个，直到没有任何一堆数字需要比较
2.O(n log2 n)
快速排序：以一个元素为基准，重新排序数列，比基准值小的元素放左边，大的放右边，然后在对左半边和右半边重复以上操作，直到只有一个数字为止
3.O(n + max)
基数排序：将所有待比较数值（正整数）统一为同样的数位长度，数位较短的数前面补零。然后，从最低位开始，依次进行一次排序。这样从最低位排序一直到最高位排序完成以后，数列就变成一个有序序列。
感觉这道题对于我来说还是有点头疼的，还是对算法不太熟悉，得加强。
- 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么
1.客户端(浏览器)进行DNS解析，把域名转换成IP地址
2.进行TCP连接（三次握手）
- 客户端：我要开始连接你了，可以吗
- 服务端：我准备好了，可以开始了
- 客户端：那我连接你咯
3.客户端(浏览器)先是通过TCP协议对服务器的指定端口(HTTP协议80/8080, HTTPS协议443)发起请求报文，请求报文包括请求方法、请求路径、HTTP协议、请求报头等。
4.服务器的端口接收到请求报文，开始分析处理报文，查询服务器内是否存在符合请求要求的路径以及文件，返回响应报文；如果不存在此路径或者文件，则返回响应报文，状态码404等消息；如果有，则发送响应报文，包括HTTP协议、状态码200、响应报头、响应内容等；
5.浏览器接收响应内容，并把他渲染到页面上，页面加载完成。
- 如何实现数组去重
ES5方法：
var array = [1,5,2,3,4,2,3,1,3,4]
function unique(array){
var n = []
for(var i = 0;i < array.length; i++){
if(n.indexOf(array[i]) == -1){
n.push(array[i]);
}
}
return n;
}
unique(array) //[1, 5, 2, 3, 4]
ES6方法：
var array = [1,5,2,3,4,2,3,1,3,4]
function unique(arr){
return [...new Set(arr)]
}
unique(array) //[1, 5, 2, 3, 4]
只能遍历一次：
var array = [1,5,2,3,4,2,3,1,3,4]
function unique(array) {
var res = array.filter(function(item, index, array){
return array.indexOf(item) === index;
})
return res;
}
unique(array) //[1, 5, 2, 3, 4]