美文网首页前端学习
面试复习题 13道

面试复习题 13道

作者: 本来无一物_f1f2 | 来源:发表于2019-01-14 20:34 被阅读0次

1. 请写出一个符合 W3C 规范的 HTML 文件

<!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">
    <title>「我的页面」</title>
    <link rel="stylesheet" rel="text/css" href="./style.css">
    <link rel="stylesheet" href="./mobile.css" media="screen and (max-width:500px;)">
    <link rel="stylesheet" href="./print.css" media="print">
    <script src="./main.js"></script>
    <script src="./gbk.js" charset="GBK"></script>
</head>
<body>
    <svg width:"200" height:"200" xmlns="http://www.w3.org/2000/svg" version="1.1" >
        <circle cx="100" cy="100" r="50"  fill="red" />
    </svg> 
        
    
</body>
</html>

2. 移动端是怎么做适配的?

  1. 设置理想可视化窗口
    <meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

  2. 媒体查询
    如果设备满足媒体查询条件就生效
    link中css媒体查询

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" >
样式表中的css媒体查询

<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>
  1. 动态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转化语法

@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;
}

3. 用过CSS3吗? 实现圆角矩形和阴影怎么做?

通过·border-radius·属性制作,例:
border-radius:6px
border-radius有四个属性

border-top-left-radius
border-top-right-radius
border-botton-righ-radius
border-botton-left-radius

通过border-shadow设置,例:
box-shadow: inset 2px 2px 2px 1px red;
会生成一个在边框内,水平、竖直偏移量均为 2px,模糊半径为 2px,同时阴影会扩大 1px 的红色阴影。

4.什么是闭包,闭包的用途是什么?

闭包

var a=1

function f4(){
    console.log(a)//2}

如果一个函数使用了他范围外的变量,那么(这个函数+这个变量) 就叫做闭包,
闭包的用途

  1. 模仿块级作用域
  2. 存储变量
  3. 封装私有变量

5. call、apply、bind 的用法分别是什么?

function x(a,b){
    console.log(a+b)
    console.log(this.a + this.b)
}
var obj = {a:1,b:2}
x.call(obj,3,4) // 7 3
x.apply(obj,[3,4])  // 7 3
var foo = x.bind(obj,3,4)
foo()   // 7 3

call()、apply()、bind()都可以通过传入第一个参数改变this对象的指向。 call()的arguments传入具体参数,apply()的arguments传入包裹着参数的数组,bind()的arguments传入具体参数。 call()、apply()是立即调用,bind()的返回值是传给一个变量,可以稍后调用。

6.常见的HTTP状态码

  • 200 OK
    请求正常处理完毕
  • 204 No Content
    请求成功处理,没有实体的主体返回
  • 206 Partial Content
    GET范围请求已成功处理
  • 301 Moved Permanently
    永久重定向,资源已永久分配新URI
  • 302 Found
    临时重定向,资源已临时分配新URI
  • 303 See Other
    临时重定向,期望使用GET定向获取
  • 304 Not Modified
    未修改
  • 307 Temporary Redirect
    临时重定向,POST不会变成GET
  • 400 Bad Request
    请求报文语法错误或参数错误
  • 401 Unauthorized
    未授权
  • 403 Forbidden
    禁止访问
  • 404 未发现指定网址
    无法找到请求资源(服务器无理由拒绝)
  • 500 Internal Server Error
    服务器发生错误
  • 503 Service Unavailable
    服务器超负载或停机维护

7.请写出一个 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

8.请说出至少三种排序的思路,这三种排序的时间复杂度分别为

  1. O(n*n)
  2. O(n log2 n)
  3. O(n + max)
  1. 冒泡排序
    比较相邻的数字第一个比第二个大就交换位置,对每队相邻的数组重复此操作,从第一队到最后一队,这一步让会让最后一个数字变成最大的,重复此操作,直到没有任何数字可以进行对比
  2. 快速排序
    以一个元素为基准,大的放右边,小的放左边,然后左右重复此操作,直到只有一个数字为止
  3. 基数排序
    将所有待比较的数值统一为同样数位长度,数位较短的数前面补零。然后,从最低位开始,依次进行一次排序。这样从最低位排序一直到最高位排序完成以后,数列就变成一个有序数列。

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

  • 客户端进行DNS解析,把域名转换为IP
  • 进行TCP连接(三次握手)客户端我要连接你了,你准备好了吗? 服务端:我准备好了,你可以连接了。客户端:那我开始连接你了
  • 浏览器通过TCP协议对指定端口发起请求报文,请求报文包括请求方法、请求路径、HTTP协议、请求报头等。
  • 服务端接受请求报文,开始分析处理,查询服务器内是否存在路径和文件,返回响应报文;如果不存在此路径,返回响应报文,状态码404等消息;如果有,则发送响应报文,包括HTTP协议、状态码200、响应报头、响应内容等;
  • 浏览器接收内容,并把它渲染到页面上,页面加载完成

10.著名面试题:如何实现数组去重?

假设有数组 array = [1,5,2,3,4,2,3,1,3,4]
你要写一个函数 unique,使得
unique(array) 的值为 [1,5,2,3,4]
也就是把重复的值都去掉,只保留不重复的值。

要求:

  1. 不要做多重循环,只能遍历一次
  2. 请给出两种方案,一种能在 ES 5 环境中运行,一种能在 ES 6 环境中运行
    ES5
var array = [1,5,2,3,4,2,3,1,3,4]
function unique(array){
    var n=[]
    for(vari= ;i<array.lenght;i++){
    if(n.indexOf(arry[i]) == -1){
    n.push(array[i])
}}return n;
}
unique(array)

ES6

var array = [1,5,2,3,4,2,3,1,3,4]

function unique(array){
     return [...new Set(array)];
}
console.log(unique(array))
//一遍
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
}
console.log(array)

11.请问JSONP为什么不支持POST请求

因为JSONP是通过动态创建script实现的
动态创建script只能用GET请求,没办法用POST请求

12. JS和JSON又什么区别

这是两门语言

13.请手写一个AJAX

myButton.addEventListener('click', (e)=>{
    let request = new XMLHttpRequest()
    request.open('GET','/xxx')//配置request
    request.send()
    request.onreadystatechange = ()=>{
        if(request.readyState === 4){
            if(request.status >= 200 && request.status<300){
                let string = request.responseText
                let object = window.JSON.parse(string)
            }
        }
    }
})

相关文章

网友评论

    本文标题:面试复习题 13道

    本文链接:https://www.haomeiwen.com/subject/bhzjdqtx.html