前端知识大汇总

简介

留下一点知识总结，希望能给学习者一点帮助，可以当成面试题看，但是最好是学进脑子里。

网络

1. 跨域问题
   浏览器的同源策略导致了跨域，用于隔离潜在恶意文件的重要安全机制
   （1）jsonp ，允许 script 加载第三方资源
   （2）在代理服务器或者后端服务设置请求字段标识，Access-Control-Allow-Origin，事实上就是放行特定的origin字段

2. jsonp
   由于浏览器script标签天生就可以跨域，所以我们可以通过动态设置该标签实现跨域效果，但是也只能拿到个回调函数，其中裹挟json数据

3. http协议
   http协议是基于tcp协议的一种请求响应协议，一个报文主要由请求行、请求头部、空行和请求数据组成，通过调试工具F12我们也可以看到到具体报文的结果。
   请求方法有多种，get，post是最常见的，其他的没记住。
   还有一些和这个协议有关的，比如状态码（1XX-5XX），缓存规则等。
   又由于是基于tcp协议的，请求难免经过三次握手与四次握手，还要遇到拥塞控制，快启动等操作。
   另外提一下，http1.1提供了持续性的链接，有效降低握手消耗，提起来，还有H5的一个websocket特性，它就是一种持续性的连接。

4. url到解析
   首先，url通过dns服务器变成了ip地址，接着，就是tcp连接了，三次握手。这里提一下，请求来的数据从A到B也经历了一个过程，主要是路由协议OSPF、RIP等协议不断查询下一跳，找到目标，还要通过NAT协议把把ip转成内网ip，这还没完，还要有个ARP协议查找MAC地址的过程。这数据菜成功从A回到了B。拿到数据后，浏览器解析数据，先构建DOM树，然后解析相关的CSS，再与DOM树结合，构成渲染树，然后通过内核渲染成我们看到的页面，js代码会在不同阶段执行，这个取决于编写者。

5. 浏览器渲染的细节
   呈上url解析，浏览器渲染还有个重绘和回流的过程。当几何布局，DOM树等变化后，会回流。当不影响布局的改变发生时，只会重绘。

6. Get和Post区别
   get 不安全，post相对安全，但是在抓包的情况下差不多
   get会留有缓存和历史记录，post不会
   post可以传更大的东西

7. http和https，后者多了ssl证书，更加安全
   https专有的握手（秘钥的传递与使用）

JS

1. js事件的了解
   由于频繁的IO操作以及浏览器各种特性，js被设计成单线程语言，所以js在事件上有特别的处理方式。主要是事件队列，js通过事件队列有序处理事件，其中由涉及到了事件循环，js会把不同事件分类，主要有同步事件和异步事件，异步事件又会划分为微任务和宏任务（有微则微，无微才宏）。因此，js常常有个概念叫做回调函数。

2. js闭包，事件冒泡，调用等
   js闭包就是函数内部引用到外部的数据，就会产生闭包，闭包的特点在于有自己的作用域，有自己特有的数据备份。就比如说vue吧，他那个data会用函数返回的方式生成自己的数据，本质上就是用到了闭包。

3. 冒泡，捕获，委托
   call，bind，apply，用于重定向this，bind返回的是一个函数

4. JS 垃圾回收机制
   简单提一下，主要有标记法和引用计数法，标记是给每个变量设置一个标识，当变量退环境时，浏览器会按时处理掉，引用是当某个空间没有任何引用时，会清空

5. 手写防抖和节流
   防抖：一定时间间隔内连续进行的事件都只算一次，有两种情况，要么触发第一次，要么触发最后的节流：一定时间内只算一次事件，可以依赖时间戳实现，或者定时器

6. 手写ajax

7. this指向调用者，或者说，逻辑上下文，当然，IE浏览器似乎比较特殊

前端优化

1. 减少http请求（雪碧图，缓存，CDN委托，压缩）
2. 缓存的分类：方式：强缓存和协商缓存，具体种类：cookie（短暂+前端+交互+小），session（
   短暂+后台），localstorage（本地+长期），sessionstorage（本地+短期）
3. 减少Dom操作，防止回流
4. 防抖节流，事件委托，减少js量，转为css代码
5. 设计模式的应用：观察者模式（一个实例变化，多个对象被通知），单例模式
6. 按需要加载代码

未完待续。。。