前端面试知识梳理(ES6, 2018向)

2018-01-21

最近思考了很多，关于生活，关于工作，做出了一些可能影响深远的计划和行动。
这段时间也梳理了一下一些知识点，前端部分，主要是偏向于ES6 的一些可能面试点，罗列了下来。

主要分为以下几个方面的问题：

ES6/js 语言相关

HTTP与网络请求

HTML5知识

CSS 知识

前端安全与优化

ES6语言相关

let const 相对于 var 有什么不一样

let是更完美的var，具有块级函数作用域,大多数情况不会发生变量提升。

let声明的变量具有块级作用域
let声明的变量不能通过window.变量名进行访问
形如for(let x..)的循环是每次迭代都为x创建新的绑定

const定义常量值，不能够重新赋值，如果值是一个对象，可以改变对象里边的属性值.
下面是var带来的不合理场景

var a = []
for (var i = 0; i < i; i++) {
    a[i] = function () {
        console.log(i)
    }
}
a[5]() // 10

在上述代码中，变量i是var声明的，在全局范围类都有效。所以每一次循环，新的i值都会覆盖旧值，导致最后输出都是10
而如果对循环使用let语句的情况，那么每次迭代都是为x创建新的绑定代码如下

var a = []
for (let i = 0; i < i; i++) {
    a[i] = function () {
        console.log(i)
    }
}
a[5]() // 5

当然除了这种方式让数组中的各个元素分别是不同的函数，我们还可以采用闭包和立即函数两种方法

new操作符具体干了什么呢?

创建了一个新对象
将新创建的空对象的隐式原型指向其构造函数的显示原型。
将this指向这个新对象
如果无返回值或者返回一个非对象值，则将新对象返回；如果返回值是一个新对象的话那么直接直接返回该对象

使用箭头函数有哪些注意点

当要求动态上下文的时候，就不能够使用箭头函数。也就是this的固定化

在使用=>定义函数的时候，this的指向是定义时所在的对象，而不是使用时所在的对象
不能够用作构造函数，这就是说，不能够使用new命令，否则就会抛出一个错误
不能够使用arguments对象
不能使用yield命令

Javascript垃圾回收方法

标记清除（mark and sweep）
这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”。

垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了

引用计数(reference counting)

引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。

说说你对Promise的理解

Promise 对象用来进行延迟(deferred) 和异步(asynchronous ) 计算

有四种状态：

pending: 初始状态, 非 fulfilled 或 rejected.
fulfilled: 成功的操作.
rejected: 失败的操作.
settled: Promise已被fulfilled或rejected，且不是pending

ES6 promise 构造函数

var promise = new Promise((resolve,reject) => {
    if (操作成功) {
        resolve(value)
    } else {
        reject(error)
    }
})
promise.then(function (value) {
    // success
},function (value) {
    // failure
})

class 的继承方法

在ES6中：使用Class关键字以及extend可以实现

class Animal {
    constructor () {
        this.type = 'animal'
    }
    says(say) {
        console.log(this.type + 'says' + say)
    }
}
 let animal = new Animal()
 animal.says('hello') // animal says hello

 class Cat extends Animal {
     constructor() {
         super()
         this.type = 'cat'
     }
 }
 let cat = new Cat()
 cat.says('hello') // cat says hello

ES5中有一下几种方式：

原型链继承
借用构造函数继承
组合继承(原型+借用构造)
原型式继承
寄生式继承
寄生组合式继承

说说JS的闭包

不说了，js基本知识

HTTP知识

HTTP状态码

100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。
500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

什么是Etag?

用来标记和判断客户端和服务器端内容时候有更新。
利用：

If-Match
If-None-Match
If-Modified-Since

等来实现

解决跨域有哪些方法

由于浏览器的同源策略（限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。
一个源指的是主机名、协议和端口号的组合），我们常常会遇到跨域问题，有哪些解决办法呢。

JSONP
利用script标签的异步加载特性实现。
优点：兼容性好，简单易用，支持浏览器与服务器双向通信。
缺点：只支持GET请求
CORS
和服务器沟通好，设置Access-Control-Allow-Origin 等相关表头，来实现跨域请求
window.postMessage / window.name
主要是利用ifream，实现夸窗口通信，一次来交换不同源的资源。
WebSocket

TCP传输的传输策略

为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK。

发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。
最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。
若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。

断开一个TCP连接则需要“四次握手”：

第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可以接受数据。
第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。
第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。
第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。

TCP和UDP的区别

TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来

UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！
UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。

HTML5相关知识

对H5中标签语义化的理解

标签语义化主要是能够让HTML具有一定的语义，让机器不仅仅知道页面的代码，而且能够读懂内容。
好处是：

便于SEO
易于理解和维护
有助于机器学习(扯远了)

CSS相关知识

###CSS3 box-sizing

设置CSS盒模型为标准模型或IE模型。标准模型的宽度只包括content，IE模型包括border和padding

box-sizing属性可以为三个值之一：

content-box，默认值，border和padding不计算入width之内
padding-box，padding计算入width内
border-box，border和padding计算入width之内

CSS选择符有哪些

id选择器（ # myid）
类选择器（.myclassname）
标签选择器（div, h1, p）
相邻选择器（h1 + p）
子选择器（ul > li）
后代选择器（li a）
通配符选择器（ * ）
属性选择器（a[rel = “external”]）
伪类选择器（a: hover, li:nth-child）1234567891011121314151617

选择器优先级

!important > id > class > tag
important 比内联优先级高,但内联比 id 要高
其次就是，越详细，优先级越高

前端安全与优化

优化前端做过哪些尝试

这里面可以说的太多了，仅仅点到为止。

性能优化
- 减少请求次数
- 使用浏览器 HTTP 级别缓存
- 打包压缩源文件
- 使用CDN 加速
- 使用DNS 预解析
- 使用懒加载，分页加载等
代码优化
- 使用语义化标签
- 减少iframe：iframe是SEO的大忌，iframe有好处也有弊端
- 避免重定向
- 布局代码写前面
- 删除空样式
- 不滥用浮动，字体，需要加载的网络字体根据网站需求再添加
- 选择器性能优化
- 避免使用表达式，避免用id写样式
- 压缩
- 减少重复代码
- 使用WebP
- 图片合并，CSS sprite技术

什么是SQL注入，如何防范

所谓SQL注入，就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。具体来说，它是利用现有应用程序，将（恶意的）SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。

防范：

永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双”-“进行转换等。
永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息

什么是XSS，如何防范

跨站脚本攻击，攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目.

防范：

检查和encodeing用户输入的内容
cookie 等内容做好加密，避免用户隐私泄露，设置HttpOnly
尽量使用POST提交表单

CSRF呢

CSRF（Cross-site request forgery）跨站请求伪造，也被称为“One Click Attack”或者Session Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。尽管听起来像跨站脚本（XSS），但它与XSS非常不同，XSS利用站点内的信任用户，而CSRF则通过伪装来自受信任用户的请求来利用受信任的网站

HTTP和HTTPS

HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。

默认HTTP的端口号为80，HTTPS的端口号为443。

为什么HTTPS安全

因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性。