针对面经之解决问题（CVTE-20前端春招面经-凉经）
针对： CVTE-20前端春招面经-凉经
1、requestAnimationFrame 为什么不会掉帧----HTML5
背景：相当一部分的浏览器显示频率为16、7ms，但如果使用10ms的setTimeout就会丢弃第三帧。这是过渡绘制带来的问题，也是setTimeout定时器推荐最小使用16.7ms的原因。
解决：requestAnimationFrame就是为了这个而出现的。它所做的事情很简单，跟着浏览器的绘制走，如果浏览设备绘制间隔是16.7ms，那我就这个间隔绘制；如果浏览设备绘制间隔是10ms, 我就10ms绘制。这样就不会存在过度绘制的问题，动画不会掉帧，
当我们写window.requestAnimationFrame(回调函数)时，浏览器会在下次重绘前执行回调函数。我们可以用它来做连贯的逐帧动画。
参考链接： 关于 requestAnimationFrame 小结
js requestAnimationFrame
2、HTTP的请求报文结构
请求行：方法、url、http协议版本
方法有get、post、put、delete、head、options、patch、connect、trace
具体关于HTTP可看：
计网之HTTP&HTTPS篇（概念+面试常考题整理）
3、HTTP 和 TCP 之间的关系
定义与职责：HTTP的责任是去定义数据，在两台计算机相互传递信息时，HTTP规定了每段数据以什么形式表达才是能够被另外一台计算机理解。而TCP所要规定的是数据应该怎么传输才能稳定且高效的传递与计算机之间。
在HTTP的规范内，两台计算机的交互被视为request和response的传递。而在实际的TCP操作中，信息传递会比单纯的传递request和response要复杂。通过TCP建立的通讯往往需要计算机之间多次的交换信息才能完成一次request或response。
TCP是单纯建立连接，不涉及任何我们需要请求的实际数据，简单的传输。而http是用来收发数据，即实际应用上来的。
我自己一开始的答案：
- HTTP是应用层的协议、TCP是运输层的协议，http是依赖于TCP进行计算机之间的传输的。
- HTTP请求会封装在HTTP请求报文中，然后进入运输层，TCP通过给HTTP报文添加首部来进行封装再进行传输。
- TCP是单纯建立连接，不涉及任何我们需要请求的实际数据，简单的传输。而http是用来收发数据，即实际应用上来的。
- http建立连接时，需先经历TCP的三次握手，断开连接需TCP的四次挥手
4、TCP三次握手、四次挥手
我的答案：
三次握手：
定义：三次握手是用于建立HTTP连接前的准备。
- 过程:
- 客户端向服务器端发送TCP请求报文，ACK=0,seq=x，SYN=1
- 服务器端收到后返回确认报文，ACK=1，seq=x+1，ack=y,SYN=1
- 客户端收到后，还要返回确认报文：ACK=1 seq=x+1，ack=y+1
- 服务器端收到之后，连接确定
- 为什么要三次握手
因为如果只要两次握手就确定的话，如果一开始客户端有一个请求报文很长时间才到达，但此时已经有了超时重传，客户端和服务器端已经进行了连接，那么此时前面的请求报文到达，服务器端会给她开启连接。但如果是三次握手的话，就算是之前的请求报文到达，服务器端返回确认报文，客户端也不会再发送确认报文。这样连接就无法开启了。
- 过程:
四次挥手
定义：四次挥手是用于关闭连接的
过程：
- 客户端A发送释放连接报文FIN=1,seq=u
- 服务器端B收到请求报文，返回确认报文，seq=v，ack=u+1.但此时只是处于半关闭状态，A不能向B传输数据，但是B能向A传输数据。
- B将所有的数据传输完毕后，发送释放连接请求报文，FIN=1,seq=v,ack=u+1
- A收到后，返回确认报文，seq=u+1，ack=v+1
- A等待2MSL之后关闭连接。
- B收到后，关闭连接
为什么要四次挥手
因为TCP是全双工通信的，A可传B，B可传A，前两次挥手是关闭了A的功能，后两次是关闭了B的功能。
5、HTTP TCP 属于哪个层
HTTP应用层
TCP传输层
6、ES6的新特性
- 新增了块级作用域（let，const）
- 提供了定义类的语法糖（class）
- 新增了一种基本数据类型（Symbol）
- 新增了变量的解构赋值
- 函数参数允许设置默认值，引入了rest参数，新增了箭头函数。
- 数组新增了一些API，如isArray / from / of 方法；数组实例新增了 entries()，keys() 和 values() 等方法。
- 对象和数组新增了扩展运算符
- ES6新增了模块化（import / export）
- ES6新增了Set和Map数据结构。
- ES6原生提供Proxy构造函数，用来生成Proxy实例
- ES6新增了生成器（Generator）和遍历器（Iterator）
7、箭头函数和匿名函数的区别
参考链接： 匿名函数和箭头函数
普通的带名函数：
定义函数时function后会给函数命名如abs
匿名函数
function后没有给函数命名，而是把整个 函数直接赋值给abs
箭头函数
- 箭头函数提供了一种更加简洁的函数书写方式
= 参数=>函数体 - obj1中fn函数，由于JavaScript中函数对this绑定的错误处理，得不到预期的结果，this.birth指向window或undefined。*
但是obj2，fn函数是箭头函数，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj2。
区别：
箭头函数没有prototype(原型)，所以箭头函数本身没有this。
let a = () => {};
console.log(a.prototype); // undefined箭头函数内部的this是词法作用域，由上下文确定，this指向在定义的时候继承自外层第一个普通函数的this。函数体内的this对象，就是定义时所在的对象，与使用时所在的对象无关。
答案：和带名函数相比，匿名函数需要讲地址赋值给另一个变量let a，然后再用a来调用函数；和匿名函数比，箭头函数完全修复了this的指向，this总是指向词法作用域。
8、闭包的定义以及解决的问题，会存在哪些问题
我的答案：闭包的定义是可以读取别的函数内部变量的函数
会存在的问题：
1、内存泄漏
2、this指向问题
3、占用内存多
9、闭包是不回收引用的那个对象还是不回收外部整个作用域，你是怎么验证这一点的
我的答案：（不知道对不对，但应该不对）不回收引用的那个对象。
name会保存在内存中。
当一个函数outer返回另一个函数inner时，Chakra、V8和SpiderMonkey会对outer中声明，但inner中不使用的变量进行回收，其中V8直接将变量从LexicalEnvironment上解除绑定，而SpiderMonkey仅仅将变量的值设为undefined，并不解除绑定。
闭包是不回收整个引用的那个对象，函数执行完，生命周期结束，但是通过闭包引用的外层作用域内的变量依然存在，并将一直存在，知道执行闭包的作用域被销毁，这里的局部变量才会被小伙。所以建立在使用闭包后手动销毁。
10、跨域怎么解决
跨域解决方案
1、 通过jsonp跨域（常用方法啊）
-------插入script标签，向服务器请求json数据
2、 document.domain + iframe跨域
------用于主域相同，子域不同
3、 location.hash + iframe
------通过中间页传值
4、 window.name + iframe跨域
------用于完全不同源，在同一个窗口前一个网页设置属性，后一个网页可以读取
5、 postMessage跨域
------dom&localstorage，允许跨窗口通信
6、 跨域资源共享（CORS）
-------允许浏览器向跨源服务器发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域
-------WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
11、webpack 一般用来做什么，以及怎么去优化
参考链接： Webpack到底是做什么用的，什么时候应该使用它呢？
什么是WebPack，为什么要使用它？
- Webpack是一个前端构建工具，可以将所有资源（包括Javascript，图像，字体和CSS等）打包后置于依赖关系中，使你可以按照需求引用依赖来使用资源。
- 可以看做是一个模块打包机：分析对你的项目结构，找到js模块以及一些浏览器不能直接运行的拓展语言，并将其打包为合适的格式以供浏览器使用。
为什么要使用webpack
a:模块化，让我们可以把复杂的程序细化为小的文件;
b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
c:scss，less等CSS预处理器
什么时候用
如果正在用许多非代码的静态资源（比如CSS，图像，字体等）构建一个复杂的前端应用程序，那么Webpack会给你带来很大的好处。如果你的应用程序非常小，并且你没有什么的静态资源，并且你只需要一个JS文件就足够客户端需求，那么Webpack就没有必要使用。
webpack的好处
- 清晰简明的模块。一个稍微有点规模的应用往往有着一个复杂的资源关系网，在需要做优化的时候就会使一件非常的头疼的事情。webpack可以代替你做这个麻烦事，将复杂的多个文件打包成你希望的代码模块，引入会非常清晰，想对引入文件做点什么操作也会更容易。
- 代码拆分来做资源异步加载。webpack打包成一个模块之后也带来一个问题，如果加载模块过于庞大，加载的速度就没法保证，所以webpack也提供了拆分代码后异步加载的方式，即先加载某个主要模块，当用到某个需要资源异步加载的模块时在对其发送请求加载，这样做在大型项目中很常见。
- 消除对未引用资源的依赖。在复杂应用又多静态资源的情况下会减少很多无效的浪费，这会对应用的有很大提升。
- 可以控制资源的处理方式。通过loader或者插件，我们可以对不同类型的文件引入做我们希望的操作。比如对代码压缩，uglify，图片压缩，文件处理，css预处理等等。
- 稳定的生产部署。开发环境到生产环境的自定义配置到打包方式，通过同一套流程稳定的导出，这些都会给项目带来很大的效率提升，这对于一个大型项目来说，是至关重要的。
- 一系列开发辅助工具。Dev-Server，HMR，这些都不用再一点点去配置，即开即用，大大提升了开发效率。
WebPack和Grunt以及Gulp相比有什么特性
- 其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
- Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
- Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
webpack优化
参考链接： webpack打包优化解决方案
浅谈webpack优化
- loader提升
由于webpack自身只支持JavaScript，因此需要一系列的loader来处理那些非JavaScript模块，因此在我们用webpack建项目的时候一定会使用一系列的loader，例如：vue-loader、sass-loader、babel-loader等等
减小构建体积
webpack-bundle-analyzer
tree shaking去除多余代码
按需加载(import)
12、浏览器安全
XSS--跨站脚本攻击，存储型和反射型，用cookie里httponly防御
CSRF--跨站请求伪造，盗用了用户身份，防御用验证码、https头的refer，token
13、常用状态码
- 1xx临时响应
- 100 继续：要继续发起请求
- 101 切换协议
- 2xx成功
- 200 成功
- 201 已创建：请求成功并建立了新资源
- 202 已接收，未处理
- 203 非授权信息
- 204 无内容
- 205 重置内容
- 206 范围请求
- 3xx重定向
- 300多种选择
- 301永久移动
- 302临时移动
- 304未修改
- 4xx客户端错误
-400语法错误
-401未授权
-403禁止请求
-404找不到网页 - 5xx服务器端错误
- 500（服务器内部错误）：服务器运到错误，无法完成请求；
- 502（错误网关）：服务器作为网关或代理，从上游服务器收到无效响应；
- 503（服务不可用）：服务器目前无法使用；
- 504（网关超时）：服务器作为网关或代理，但是没有及时从上游服务器收到请求。
14、返回304状态码的流程，属于哪一种缓存机制
交互流程
客户端第一次请求服务端的某个地址时，服务端会在响应时携带 ETag 与 Last-Modified 响应头，客户端下次再发送同一地址的请求时，会携带 If-None-Match 与 If-Modified-Since 请求头，而 If-None-Match 就是 ETag 的值，If-Modified-Since 就是 Last-Modified 的值，这时服务端在接收请求后会获取请求头中的这两个值，然后进行比对，若资源没有更新，则响应 304 状态码，表示请求的资源没有更新，客户端可以从自己的缓存里获取，若资源已更新，则响应 200 状态码，同第一次请求一样，又会在响应时携带新的 ETag 与 Last-Modified 响应头，之后同上逻辑循环。
ETag和If-None-Match
ETag 是属于 HTTP 1.1 属性，它是由服务器生成返回给前端，说白了，ETag 一般为资源的哈希值，即 ETag 就是服务器生成的一个标记，用来标识资源是否有变化的，且 ETag 的优先级高于 Last-Modified。
Etag：资源在服务器的唯一标识（生成规则由服务器决定）。Apache中，ETag的值，默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后得到的。
If-None-Match：当缓存过期时，发现资源具有Etage声明，则在请求头带上If-None-Match（值就是Etag）。服务器收到请求后发现有头If-None-Match 则与被请求资源的相应校验串进行比对，决定返回200或304。
15、浏览器的缓存机制
浏览器缓存机制
流程:
1、浏览器第一次访问一个地址时，向服务器请求资源，把html，css，js等内容缓存下来。
2、下一次请求时，先对比cache-control的max-age，如果没过期，则直接使用强缓存
3、如果时间过期，则向服务器发送header带有If-None-Match和If-Modified-Since的请求；
4、服务器收到请求后，优先根据Etag的值判断被请求的文件有没有做修改，Etag值一致则没有修改，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回200；
5、如果服务器收到的请求没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回304；不一致则返回新的last-modified和文件并返回200；
-强缓存expires和cache-control
-协商缓存ETag和if-Not-Match
16、项目中怎么设置强制缓存
cache-control和expires
17、你觉得框架的性能会赶上原生嘛
框架的优点
1.组件化：其中以react的组件化最为彻底，甚至可以到函数级别的原子组件，高度的组件化可以使我们的工程易于维护，易于组合扩展；
2.天然分层：jQuery时代的代码大部分情况下是面条代码，耦合严重，现代框架不管是MVC、MVP还是MVVM模式都可以帮我们进行分层，代码解耦更易于读写；
3.生态：现代主流框架都自带生态，不管是数据流管理架构还是UI库都有成熟的解决方案；
4：开发效率：现在前端框架都默认自动更新DOM，而非我们手动操作，解放了开发者的手动DOM成本，提高开发效率，从根本上解决了UI与状体同步问题。
18、三年之内的前端规划，你会怎么去实现你的这个规划
学一下别的框架，和后端的语言。在工作之余。
19、页面加载慢，你会怎么去定位问题并解决
参考链接： 页面加载慢的排查方法
用chrome打开网页，按住option+command+i（windows是F12），打开开发者工具看network。
- 后端的原因
网页的第一个请求特别大 - 请求太多
css，js合并，设置精灵图标，使用字体图标，有些不重要的东西可以放到onload之后加载，网页发请求数当然是越少越好。 - 某个请求太大
这种情况一般是因为某一个资源太慢了，导致网页整体变慢。资源慢的原因，概率比较大的几个可能是：
a)资源在第三方站点上，他们很慢；
b)这个资源太大了；
c)这个资源使用的域名有问题。
4.网络问题
5.接收数据时间过长
6. js阻塞请求
20、CDN原理
参考链接： 一文看懂CDN加速原理
概念
- 由于用户访问源站业务有性能瓶颈，通过cdn技术把源站的内容缓存到多个节点。用户向源站域名发起请求时，请求会被调度至最接近用户的服务节点，直接由服务节点直接快速响应，有效降低用户访问延迟，提升可用性。
- CDN的全称是Content Delivery Network，即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构，将网站的内容发布到最接近用户的网络“边缘”，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。CDN有别于镜像，因为它比镜像更智能，或者可以做这样一个比喻：CDN=更智能的镜像+缓存+流量导流。因而，CDN可以明显提高Internet网络中信息流动的效率。从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均等问题，提高用户访问网站的响应速度。
工作流程
当用户访问已经加入CDN服务的网站时，
- 首先通过DNS重定向技术确定最接近用户的最佳CDN节点，同时将用户的请求指向该节点。
- 当用户的请求到达指定节点时，CDN的服务器（节点上的高速缓存）负责将用户请求的内容提供给用户。具体流程为:
- 用户在自己的浏览器中输入要访问的网站的域名，
- 浏览器向本地DNS请求对该域名的解析，本地DNS将请求发到网站的主DNS，
- 主DNS根据一系列的策略确定当时最适当的CDN节点，
- 并将解析的结果（IP地址）发给用户，用户向给定的CDN节点请求相应网站的内容。
CDN网络是在用户和服务器之间增加Cache层，主要是通过接管DNS实现，将用户的请求引导到Cache上获得源服务器的数据，从而降低网络的访问的速度。
21、你认为一个JS脚本多大才是合适的
能在1160字节一下会比较好，因为这个数字是能放入单个tcp-ip包中的字节数
