知识点小结

一、移动端是怎么做适配的？(回答要点：meta viewport、媒体查询、动态 rem 方案)
1.meta viewport
禁止用户设备缩放

1	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2.不同的设备采取不同的样式，实现该方法应采用媒体查询设置条件：
最大宽度不超过500px时采取的CSS样式

1	<link rel="stylesheet" href="./mobile.css" media="(max-width: 500px)">

或

<style>
@media(max-width：500px){
    .........
}

</style>

3.动态 rem 方案
（1）使用 JS 动态调整 REM,需要自己计算px到rem
i. 加上meta viewport标签
ii. 设置html 的 font-size(即1rem) 等于十分之一的页面宽度，

<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>

（2）使用sass 自动转换px为rem

@function px( $px ){
  @return $px/$designWidth**10 + rem;
}

$designWidth : 640; //设计稿宽度

二、什么是闭包，闭包的用途是什么？

1.如果一个函数使用了这个函数外的值那么（这个函数+这个变量）就是闭包

function foo(){
  var local = 1
  function bar(){
    local++
    return local
  }
  return bar
}
//local 变量和 bar 函数就组成了一个闭包（Closure）

2.一个是可以读取函数内部的变量

function f1() {
    var n = 999;
    function f2() {
        alert(n);
    }
    return f2;
}
var result = f1();
result(); // 999
//f2可以读取f1中的局部变量，那么只要把f2作为返回值，就可以在f1外部读取它的内部变量，

另一个是让这些变量的值始终保持在内存中。

function f1() {
        var n = 1;
        function f2() {
            alert(n++);
        }
        return f2;
    }
    var result = f1();
    result(); //1
    result(); //2
    result(); //3
    //原因就在于f1是f2的父函数，而f2被赋给了一个全局变量，这导致f2始终在内存中，而f2的存在依赖于f1，因此f1也始终在内存中，不会在调用结束后，被垃圾回收机制（garbage collection）回收。

三、call、apply、bind 的用法分别是什么？

var list={
    name:'wang',
    age:18,
    func:function(){
        console.log('名字'+this.name+'年龄'+this.age)
    }
}

var list1={
    name:'li',
    age:30,
}

var list2={
    name:'zhao',
    age:70,
}
var list3={
    name:'wu',
    age:2,
}
list.func()//名字wang年龄18
list.func.call(list1)//名字li年龄30
list.func.apply(list2)//名字zhao年龄70
list.func.bind(list3)()//名字wu年龄2

四、HTTP 状态码
200 OK
请求正常处理完毕

204 No Content
请求成功处理，没有实体的主体返回

206 Partial Content
GET范围请求已成功处理

301 Moved Permanently
永久重定向，资源已永久分配新URI

302 Found
临时重定向，资源已临时分配新URI

303 See Other
临时重定向，期望使用GET定向获取

400 Bad Request
请求报文语法错误或参数错误

401 Unauthorized
需要通过HTTP认证，或认证失败

403 Forbidden
请求资源被拒绝

404 Not Found
无法找到请求资源（服务器无理由拒绝）

500 Internal Server Error
服务器故障或Web应用故障

503 Service Unavailable
服务器超负载或停机维护

五、写出一个 HTTP post 请求的内容，包括四部分。
其中第四部分的内容是 username=ff&password=123
第二部分必须含有 Content-Type 字段
请求的路径为 /path

POST /path HTTP/1.1
Host: www.baidu.com
User-Agent: curl/7.59.0
Accept: /
Content-Type: application/x-www-form-urlencoded
Content-Length: 24

username=ff&password=123

六、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？

1.DNS解析
DNS解析的过程就是根据域名查找 IP 地址。
如果浏览器有缓存，直接使用浏览器缓存，否则使用本机缓存，再没有的话就是用host
如果本地没有，就向dns域名服务器查询（当然，中间可能还会经过路由，也有缓存等），查询到对应的IP
2.TCP连接
浏览器根据 IP 地址向服务器发起 TCP 连接，与浏览器建立 TCP 三次握手：
（1）客户端：hello，你是server么？
（2）服务端：hello，我是server，你是client么
（3）客户端：yes，我是client
建立连接成功后，接下来就正式传输数据
3.发送HTTP请求
HTTP请求报文是由三部分组成: 请求行, 请求报头和请求正文。
4.服务器处理请求并返回HTTP报文
HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。
5.浏览器解析渲染页面
浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件生成CSS规则树。
开始构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。
6.关闭TCP连接或继续保持连接
通过四次挥手关闭连接。
（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 对象）

1.indexOf（）

function unique(array) {
    let newArray = []
    for (let i = 0; i < array.length; i++) {
        if (newArray.indexOf(array[i]) == -1) {
            newArray.push(array[i])
        }
    }
    return newArray
}

2.Set对象

1
2
3

function unique(array) {
    return [...new Set(array)]
}