HTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS。
默认HTTP的端口号为80，HTTPS的端口号为443。
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。
有几种方式可以实现存储功能，分别有什么优缺点？
从浏览器地址栏输入url到显示页面的步骤
1. 浏览器根据DNS服务器获取域名的IP地址
4. 浏览器得到返回内容
DOCTYPE: 告诉浏览器当前文档包含的是哪个DTD
DOMContentLoaded是DOM渲染完即可执行
动画实现的速度的选择，动画速度越快，回流次数越多，也可以选择使用 requestAnimationFrame
CSS 选择符从右往左匹配查找，避免节点层级过多
将频繁重绘或者回流的节点设置为图层，图层能够阻止该节点的渲染行为影响别的节点。比如对于 video 标签来说，浏览器会自动将该节点变为图层;以下常用属性可以生成新图层:
DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP。
图片:
CSS:
css放在head里 (先加载css 然后渲染 否则渲染两次)
不使用css表达式
正确使用选择器 (应从右向左匹配 , 避免层级过多 , 扁平化)
css和js应从外部引入
JS:
JS放在body最下面 (不会阻塞渲染过程 性能优化问题； 再执行JS script能拿到所有标签)
减少DOM操作 , 对DOM查询进行缓存
多个操作尽量合并在一起执行
尽早在dom渲染完执行
删除不需要的脚本
节流:
隔一段时间发送请求:如在用户输入时,用户输入过快会导致一直发送请求,这时候我们可以使用节流函数,使隔一小段时间发送请求.
有一个按钮点击会触发网络请求，但是我们并不希望每次点击都发起网络请求，而是当用户点击按钮一段时间后没有再次点击的情况才去发起网络请求，对于这种情况我们就可以使用防抖。
预渲染:
懒加载:
懒加载就是将不关键的资源延后加载。
对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src 属性，这样图片就会去下载资源，实现了图片懒加载。
懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等等。
application/json
text/xml
multipart/form-data
application/x-www-form-urlencoded
简单快速 (每个资源都是固定的URI)
灵活 (通过一个HTTP协议可以完成不同数据类型的传输)
无连接 (连接一次断掉 , 不会一直连接) ,
无状态 (客服端和服务端是两种身份，一次连接后就断开，下次再连接，服务端无法区分两次是否由同一客户端发起的请求)
由请求报文和响应报文组成
1. 请求报文：请求行、请求头、空行、请求体
2. 响应报文：状态行，响应头、空行、响应体
请求头：就是一些key\value值 , 告诉服务端我要什么内容 , 和要注意什么 类型
空行：遇到空行就能知道 下面不是请求头的部分了
请求体：数据
状态行: HTTP协议、状态码 (HTTP1.1 / 200 ok)
其它都是大同小异的
GET---------获取资源
POST-------传输资源
PUT---------更新资源
DELETE------删除资源
HEAD--------获取报文首部
0 - 未初始化 , 还没有调用send方法
1 - 载入 , 已调用send方法,正在发送请求
2 - 载入完成 , send()方法执行完成 , 已接收到全部响应内容
3 - 交互 , 正在解析响应内容
4 - 完成 , 响应内容解析完成 , 可以在客户端调用
1xx 指示信息-表示请求一接收，继续处理
2xx 表示成功处理请求 200表示请求正确处理 206表示范围请求
3xx 重定向 304表示使用缓存
4xx 客户端请求错误 请求有语法错误或请求无法实现（400语法错误，401请求未经授权，403请求页面被禁止，404请求资源不存在）
5xx 服务器端错误 服务器未能实现合法请求（500服务器错误，503服务器过载或宕机）
非Keep-ailve模式时，每个请求/应答客户端和服务器都要新建一个连接，完成后就断开
当Keep-ailve模式（又称持久连接、连接重用）时，客户端到服务器端的连接持续有效，避免后续请求时，重新建立连接
同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议
限制：不是一个源的不能操作
如果协议、域名或者端口有一个不同就是跨域，Ajax 请求会失败。 (防止CSRF利用用户登录状态发起攻击)
JSONP (只能get请求) 原理是利用script标签没有跨域限制，通过src指向一个ajax的URL，最后跟一个回调函数callback
CORS 关键是后端 , 服务端设置(Access-Control-Allow-Origin)
postmessage (用于获取嵌入页面中的第三方页面数据)
基本概念:跨域脚本攻击
XSS 简单点来说，就是攻击者将可以执行的代码注入到网页中。
防范:转义输入输出的内容，对于引号、尖括号、斜杠进行转义
CSRF , 通常称为跨站请求伪造
原理:
在B网站引诱用户访问A网站（用户之前已经登陆过A网站，浏览器cookie缓存了身份验证信息），然后调用A网站的接口攻击A网站
举个例子，假设网站中有一个通过 GET 请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口
防御措施：
（1）token验证：登陆成功后服务器下发token令牌存到用户本地，再次访问时要主动发送token，浏览器只能主动发cookie，做不到主动发token
（2）referer验证：判断页面来源是否自己站点的页面，不是不执行请求
csrf需要用户登陆，利用网站自己的接口漏洞进行攻击
xss通过注入脚本执行自己的代码
不清除浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）
宽高已知
宽高未知:
flex:
浮动:
绝对定位:
flex:
表格:
网格布局:
标准模型width不计算padding和border IE模型width计算padding和border。 box-sizing : content-box(标准模型-默认)/border-box(IE模型)
js中如何获取盒模型宽高?
块级格式化上下文
内置函数: Object, Array , Function , Boolean , Number , String , Date , RegExp , Error , Json .
作用: 作为构造器函数
null表示空对象指针
undefined表示未赋值的变量
在使用==会发生类型转换.导致相等
箭头函数比普通函数更加简洁
箭头函数没有this
箭头函数不存在arguments对象
箭头函数不能当作构造函数
箭头函数不能用作Generator函数 (不能使用yield命令)
DOM本质: 浏览器拿到html代码后，DOM把html代码结构化成浏览器可识别以及js可识别的模型 . (html代码就是一个字符串，但是浏览器已经把字符串结构化成树形结构了。)
数据结构: 树形
API:
区别: Attribute是对html标签属性进行获取修改, property是js对象属性的获取修改
是内置的js对象,也是一种数据格式
有两个方法:
json数据体积小 , 传递快 , 与JavaScript交互更加方便 , 容易解析 .
但是数据描述性差 , 不如XML
同一时间只能干一件事
有同步任务和异步任务
seTimeout是异步任务 , 执行到异步任务要挂起
同步任务执行完再执行异步任务
同步会阻塞代码运行,异步不会
alert同步,seTimeout异步
在发生等待的情况下 , 程序仍然需要执行其他操作 , 不能阻塞程序运行
let，const声明不会挂载在window上，不能重复声明 , 不存在变量提升 , 在块级作用域有效 , const一旦声明时必须赋值 , 且不能修改 .
在函数A内嵌套函数B并返回 , 函数B可以访问到函数A的变量 , 函数B我们称之为闭包.
意义: 闭包是为了让我们间接的访问函数内部的变量.
优点: 封装性强，使得变量始终保持在内存中。
缺点: 内存的消耗导致的性能问题
使用场景: 函数作为返回值 , 函数作为参数传递
typeof 只能判断原始类型,null除外 (js存在的bug,在最初版本为性能考虑,使用000开头表示对象,null表示全0,所以会错误的判断null为对象)
instance原理: 沿着__proto__一层一层向上找,看是否能找到对应的prototype
原型: 每个函数都有一个prototype属性,这个属性指向的就是原型对象. 每一个对象都有一个__proto__指向它构造函数的原型对象.
原型链:
当调用一个对象的属性时 , 如果自身对象未找到 , 会去对象的__proto__属性(隐式原型对象)里去找 , (这里的隐式原型对象指向的就是它构造函数的prototype(显示原型对象))
特点:
原型对象上的方法是被不同实例共有的 . 当我们修改原型时，与之相关的对象也会继承这一改变。
实现一个new操作符:
更推荐使用字面量的方式创建对象（无论性能上还是可读性）。因为你使用 new Object() 的方式创建对象需要通过作用域链一层层找到 Object，但是你使用字面量的方式就没这个问题。
构造函数实现继承:
缺点: 无法继承父类原型对象上的属性
原型链继承:
缺点 : 原型链上的原型对象是共用的 , 实例改变其值 , 其他实例也会发生改变
组合继承:(寄生组合继承)
ES6 (Class类继承):
构造方式:
解决了重复实例化的问题 ，又解决了对象识别的问题
工厂模式:
优点: 解决重复实例化
缺点: 无法识别到底是哪个对象的实例
构造方式与工厂模式的区别:
1. 构造方式不会显示创建对象，只要将属性赋值给this，不需要return对象
2. 工厂 在方法内部创建object对象，最后返回object对象，属性和方法都是赋给object对象
原型模式:
好处：让所有实例化的对象都拥有它包含的属性及方法。
原型模式的第二种方式 : json数据定义
混合模式(构造+原型):
对象类型存储的是地址(指针),而原始类型存储的是值
函数参数是对象指针的副本,当参数重新分配对象时,参数的指针会发生变化.两个变量的值也会不相同.
捕获和冒泡
DOM0
缺点: 后定义的事件会被覆盖之前定义的事件
DOM2
事件流:
捕获 > 目标元素 > 冒泡
事件代理:
把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能
如果一个节点中的子节点是动态生成的，那么子节点需要注册事件的话应该注册在父节点上
优势:
class 实现继承的核心在于使用 extends 表明继承自哪个父类，并且在子类构造函数中必须调用 super
缺点:不利于维护阅读,嵌套函数过多会很难处理错误
使用 : 在函数内返回一个promise对象,通过then执行下一步 特点: promise有三种状态,一旦执行不可更改
promise链: promise每次then调用后返回一个全新的promise,这样就可以形成链式调用
优点: 解决回调函数不停的嵌套,造成代码难以维护.
缺点: 无法取消promise, 错误需要回调函数捕获
但是:
简易版深拷贝:
一个函数如果加上 async ，那么该函数就会返回一个 Promise
存储函数调用的栈结构，遵循先进后出的原则
EventLoop:
当遇到异步代码的时候，会被挂起在Task队列中，一旦执行栈为空，就会从Task中拿出需要执行的代码执行，所以本质上讲JS中的异步还是同步行为。
异步任务执行顺序:
当执行栈执行完毕后，会首先执行微任务队列，当微任务队列执行完毕再从宏任务中读取并执行，当再次遇到微任务时，放入微任务队列。
MVP:
jquery使MVP模型
view:视图 Model:数据 Presenter:控制器
View发出一个事件交给Presenter，控制器调取model或者直接操作View，Presenter是核心 ，大部分的工作都在Presenter层 (面向DOM开发)
MVVM:
vue使用的MVVM模型
大部分工作是在操作M层，DOM操作显著减少，使用MVVM是面向数据进行编程 (面向数据开发)
数据驱动页面(data->view)，页面变了也能将js中保存的变量做相应的改变(view->data)，这个过程是自动的。
view = data 是input事件，只不过框架执行了我们看不到。
观察者模式
beforeCreate: Vue实例创建前 (获取不到props和data数据)
created: Vue实例创建后 (可以获取数据 , 但组件还未被加载)
beforeMount: 模版数据挂载前 (开始创建VDOM)
mounted: 模版数据挂载后 (将VDOM渲染为真实的DOM并且渲染数据 , 挂载组件)
beforeUpdate: 数据更新前
updated: 数据更新后 ((keep-alive组件激活前后)
beforeDestroy: Vue实例销毁前 (适合移除事件 , 定时器)
destroyed: Vue实例销毁后
activated: keep-alive组件激活时
deactivated: keep-alive组件停用时
errorCaptured: 捕获子 , 孙组件发生错误时触发 (2.5+版本增加)
stop修饰符
v-if为假时不会渲染 , v-show始终都会被渲染 , 通过display-none和display-block切换 .
computed 是计算属性，依赖其他属性来计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。
watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。
methods 每次都会进行计算
父组件通过属性的形式传递数据给子组件，子组件通过props来接收数据 , 通过 emit 发送事件传递数据给父组件
子组件不能直接修改 props， 而是必须通过发送事件的方式告知父组件修改数据 (单向数据流)
（2）组件上的ref获取的组件上的引用
props特性：
1、在子组件中有props来接收父组件传来的数据
2、可以在子组件中使用传来的数据，但是父组件设置的属性不会在最外层的元素上显示
非props特性：
1、无法接收父组件传来的数据（因为子组件中没有相应的props来接收父组件传来的数据）；
2、父组件设置的属性会在其最外层的元素上显示
使用js:
如果达不到期望 , 那可能是我自身技术水平还不行 , 我会更加努力学习的.