前端内容记录

计算机基础

OSI七层功能及协议

内核

渲染引擎 ——浏览器 —— JS引擎
Trident —— IE —— Chakra 、
Gecko —— FireFox ——-SpiderMonkey、
Blink —— Chrome ——V8、
Webkit —— Safari —— JavaScriptCore。

DOM

DOM就是文档对象模型(Document Object Model)，用于展示文档视图结构的一种模型。（节点树）
理解：描述文档中节点元素关系。
节点类型：元素节点（head title a span），属性节点（href src class），内容节点（元素内文字、图片等）。
节点操作：

document.getElementById('car');
document.getElementsByClassName('box');
document.getElementsByTagName('li');
document.querySelector('#foo'); //匹配第一个
document.querySelectorAll('.bar'); //匹配所有
document.getElementById('car').getAttribute('title'); //获取属性
document.getElementById('car').setAttribute('title', 'nice day!'); //设置属性 两个参数（属性名，值）
document.getElementsByTagName("body")[0].childNodes; //获取body下所有子元素
document.getElementById('child').parentNode; //根据id获取父元素结点，不能用getElementsByClassName
document.getElementById('box').firstElementChild; //获取第一个子元素
document.getElementById('box').firstChild;
document.getElementById('box').lastElementChild; //获取最后一个子元素
document.getElementById('box').lastChild;

内容动态插入及创建

createElement
createTextNode
appendChild
parentElement.insertBefore(newElement, targetElement); //前插，没有后插insertafter

浏览器渲染过程

1. 网址(域名) -> DNS ->服务器IP地址
2. 浏览器向服务器发起http请求，TCP三次握手)
3. 服务器发送数据(代码，文件)给浏览器
4. 浏览器解析代码，三大步骤：（DOM构造，布局，绘制页面）
   1. DOM构造 将收到的html代码html解析器解析构建为DOM树 css代码通过css解析器构建出样式表
   2. 布局 元素嵌套并摆放，未可视化
   3. 绘制页面 页面渲染显示

HTTP发展

0.9：只有一种请求：GET。
1.0：三种请求：GET 、POST、HEAD。
1.1：八种请求：GET、POST、HEAD、PUT、OPTIONS、DELETE、TREACE、CONNECT 。
缓存机制 资源部分请求206 。
持久连接：在请求首部字段中设置Connection:keep-alive。
2.0：基于SPDY协议，多路复用 首部压缩 请求优先级 服务器推送

GET与POST

• GET - 从指定的资源请求数据。
• POST - 向指定的资源提交要被处理的数据。

GET和POST是什么？HTTP协议中的两种发送请求的方法。
HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP连接。

GET

• GET请求的数据会被缓存。（获取html页面/图片/css/js等资源）
• GET 请求只应当用于取回数据。
• GET 请求有长度限制。
• GET 请求不应在处理敏感数据时使用。
• GET 请求保留在浏览器历史记录中。
• GET把参数包含在URL中。

POST

• POST 请求不会被缓存。
• POST 请求不会保留在浏览器历史记录中。
• POST 不能被收藏为书签。
• POST 请求对数据长度没有要求。
• POST通过request body传递参数。
• 回退重新提交。

GET和POST还有一个重大区别。

• GET产生一个TCP数据包；POST产生两个TCP数据包。
• 对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）。
• 而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

HTTP与HTTPS

HTTP

无状态，无连接，基于请求和响应，明文传输不安全，80端口

HTTPS

加密，身份验证(CA证书)，保护数据完整性，443端口
HTTPS = HTTP + SSL/TSL=HTTP + 加密（非对称加密，对称加密，HASH算法） + CA证书 + 完整性保护
优点 加密传输，身份确认
缺点 握手阶段耗时较长 缓存效率不如http SSL证书花钱 SSL绑定IP

TCP连接建立与断开

三次握手
SYN -> SYN + ACK -> ACK （她向你招手 -> 你向她招手并点头 -> 她向你点头）
四次挥手
FIN->ACK->FIN->ACK

TCP和UDP

TCP

• 面向连接，可靠数据传输
• 仅支持单播
• 面向字节流
• 可靠传输
• 拥塞控制
• 传输速度慢，全双工

UDP

• 面向无连接
• 单播，多播，广播（一对多，多对多，多对一）
• 面向报文（）
• 不可靠，用于实时应用（IP电话，视频电话，直播等）
• 头部开销小，传输报文效率高

跨域

服务器设置Access-Control-Allow-Origin

CSRF

CSRF跨站点请求伪造(Cross—Site Request Forgery)，dJango中通过CSRF token防止。

XSS

跨站脚本攻击 Cross Site Scripting，是一种代码注入攻击。
防范：

• 在cookie中设置httpOnly=true，cookie只能通过服务器修改，脚本无法获取该cookie。
• 验证码，防止脚本冒充用户提交危险操作。
• 在服务端或者html的header设置内容安全策略CSP（Content-Security-Policy）。细节详见

双向数据绑定

Vue
v-model本质上是v-bind和v-on的结合体
JS 则使用 ES5 提供的 Object.defineProperty() 方法，监控对数据的操作，从而可以自动触发数据同步。

在这里插入代码片

浏览器存储

看这

cookie、localStorage、sessionStorage之间的区别
他们都是保存在浏览器端的存储方式，他们之间的区别：

• cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
• 存储大小限制不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
• 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
• 作用域不同，sessionStorage不在不同的浏览器页面中共享，即使是同一个页面；localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
• Web Storage支持事件通知机制，可以将数据更新的通知发送给监听者。
• Web Storage 的 api接口使用更方便，cookie的原生接口不友好，需要自己封装。

防抖与节流

防抖与节流

回流与重绘

Event Loop

Event Loop是一个程序结构，用于等待和发送消息和事件。
首先，JavaScript是单线程语言，所有操作都在一个线程上完成。
为了充分利用单线程，在线程空闲时，Event Loop线程接受I/O操作请求，即异步模式。

闭包

---

restful风格

Restful有以下几个特点：

使用URL描述资源。
使用HTTP方法描述行为，使用HTTP状态码来表示不同的结果。
使用JSON交互数据。
Restful只是一种风格，不是强制标准。

---