前端学习笔记

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

（简版）

1.输入URL

2.通过DNS解析ip

3.建立TCP连接

4.客户端发送Http请求

5.TCP传输报文

6.服务器处理请求并返回Http报文

（详版）
1.当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL ，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址

2.浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP / IP 连接。该握手包括一个同步报文，一个同步﹣应答报文和一个应答报文，这三个报文在浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文

3.一旦 TCP / IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为200的 HTTP 响应状态表示一个正确的响应

4.此时， Web 服务器提供资源服务，客户端开始下载资源。请求返回后，便进入了我们关注的前端模块简单来说，浏览器会解析HTML生成DOM Tree，其次会根据CSS生成CSS Rule Tree，而JavaScript又可以根据DOM API操作DOM

二、预编译习题

 

1.创建ao对象

2.找形参和变量的声明以及属性名，值为undefined

3.实参和形参相统一

4.找函数声明，会覆盖变量声明

三、盒模型

什么是盒模型？把所有的网页元素都看成一个盒子，它具有： content，padding，border，margin 四个属性，这就是盒子模型。

CSS中的盒模型有两种，W3C标准盒模型和IE怪异盒模型

标准模式下，一个块的宽度=width+padding(内边距)+border(边框)+margin(外边距)

W3C模型中：width指的就是content部分的宽，height指的就是content部分的高

 

IE盒子模型中：一个块的宽度=width+margin(外边距)，其中，width指的是content,padding和border

四、this的指向问题

1.通过一般函数内部调用时：严格模式this指向undefined，否则指向全局对象

2.通过new实例化时：this指向新实例化出来的对象

3.通过上下文对象调用时：this指向上下文对象

4.通过call/apply/bind调用时：this将绑定到指定的对象

5.在箭头函数中：this指向作用域链的父级环境

五、传统Session身份认证方案

1.浏览器发送带有用户名和密码的post请求

2.服务器验证通过将用户对象放入session中，session存在内存中

3.服务器将sessionid存入cookie中，并发给浏览器

4.浏览器发送带有sessionid cookie的请求

5.服务器根据sessionid从内存中获取用户信息，并判断sessionid是否正确和有效

6.服务器返回响应信息

弊端：对服务器要求，采用redis统一缓存

六、防抖函数

当持续触发事件，一定时间内没有再触发事件，事件处理函数才会执行一次

如果设定的事件到来之前，又一次触发了事件，就重新开始延时

七、手写call和apply

Function.prototype.myCall= function(context) {//从window的子类中定义
    if (typeof this != 'function'){
        throw new Error('error')
    }//判断this的指向是否为函数
    context = context || window//顶级窗口也可以调用

    //将this指向context中的this 
    context.fn = this
    //取其他参数
    var args = [...arguments].slice(1)

    //实现context中的this调用其内部参数
    var result = context.fn(...args)
    delete context.fn
    return result
}

Function.prototype.myApply= function(context) {//方法从Function的子类中定义
    if (typeof this != 'function'){
        throw new Error('error')
    }//判断this的指向是否为函数
    context = context || window//顶级窗口也可以调用
    //将this指向context中的this
    context.fn = this
    let result
    if (arguments[1]){如果伪数组中的第二个属性是数组
        result = context.fn(...arguments[1])
    }else{
        result = context.fn()
    }
    delete context.fn
    return result
}

八、如何创建BFC

BFC是块级格式上下文，只有块级盒子参与，与外部无关，有一套自己的约束规则
/*float: left;*/float的值不是none
/*position: absolute;*/position的值不是static或者relative
/*display: inline-block;*/inline-block、flex或者inline-flex
/*overflow: hidden;*///这种方式最好
使用BFC的好处
1.解决margin塌陷问题，让父盒子形成BFC
2.BFC可以阻止浮动元素覆盖

九、赋值，浅拷贝与深拷贝

        赋值不是浅拷贝
        浅拷贝要创建一个新的对象，要有拷贝值，如果碰到的是引用数据类型，那么拷贝前和拷贝后是互相影响的
        深拷贝 如果属性是引用数据类型 那么就会开辟一个新的空间
        在增删查改中会用到深拷贝

十、symbol数据类型的遍历

        Reflect.ownKeys(obj)，obj中包含有symbol类型对象，返回的是一个数组

十一、数组去重

//去重
//方法1：set
function unique(args) {
    return [...new Set(args)]}
//方法2：两次循环
//方法3：indexOf或include
//方法4：filter(function(currentValue,index,arr))
function fil(args) {
    args.filter(function(element,index){
        //indexOf()括号中的第二个参数0，表示将第一个参数item第一次出现时的索引值返回
        return args.indexOf(element,0)===index})}