一些面试题整理

做作业，整理了一些面试题及答案。感觉到自己有点急躁，虽然差不多每节课差不多都有写博客总结，但是时间赶得很急，心态还是需要调整一下。

写出一个符合 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-width: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-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 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{
  width: 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 {
            width: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>

什么是闭包，闭包的用途是什么
- 什么是闭包
「函数」和「函数内部能访问到的变量」（也叫环境）的总和，就是一个闭包。
比如：
javascript 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]

[面试]作答整理一些面试题

一些面试题整理

猜你喜欢