前端 知识笔记

知识架构：

 

SPA：

单页Web应用（single page web application，SPA）： SPA 是一种特殊的 Web 应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的。它将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加载相应的 HTML 、 JavaScript 、 CSS 。一旦页面加载完成， SPA 不会因为用户的操作而进行页面的重新加载或跳转，而是利用 JavaScript 动态的变换 HTML（采用的是 div 切换显示和隐藏），从而实现UI与用户的交互。在 SPA 应用中，应用加载之后就不会再有整页刷新。相反，展示逻辑预先加载，并有赖于内容Region（区域）中的视图切换来展示内容。

 

MVC和MVVM：

用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。

MVVM 实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。

MVVM比MVC精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。因为在MVVM中，View不知道Model的存在，Model和ViewModel也观察不到View，这种低耦合模式提高代码的可重用性

 

Localstorage、sessionstorage、cookie：

cookie和session都是用来跟踪浏览器用户身份的会话方式，cookie保存在浏览器端，session保存在服务器端。

存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)

存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制

安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie

WebStorage两个主要目标：（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制

localStorage的生命周期是永久的；sessionStorage是在同源的窗口中始终存在的数据。

https://www.cnblogs.com/pengc/p/8714475.html

 

一个完整的http请求过程：

1、域名解析：浏览器或客户端发起请求后，根据地址判断是否为本机地址，然后在本机设置的 host 中寻找，如果没找到则去 DNS 服务器查询域名对应 IP 地址。

2、建立 TCP 链接：根据 IP 地址寻址，然后访问指定端口；有客户端向服务器发送 TCP 连接请求，经过交换机->路由器；然后进行三次握手四次挥手保证连接可靠性

3、发送请求：客户端发送 http 请求；服务器接受请求并处理；客户端根据服务器端的 response 渲染界面或进行逻辑处理。

 

跨域：

出于浏览器的同源策略限制，其是一种约定，它是浏览器最核心也是基本的安全功能；同源策略会阻止一个域的 js 脚本和另外一个域的内容进行交互。

当一个请求 url 的协议、域名、端口三者之间任何一个与当前界面 url 不同即为跨域。

解决办法：

jsonp，简单适用，兼容性好。缺点只支持 get 请求，不支持 post 。

https://blog.csdn.net/qq_38128179/article/details/84956552

 

#、页面渲染大致过程

1. 解析html建立dom树
2. 解析css构建render树（将CSS代码解析成树形的数据结构，然后结合DOM合并成render树）
3. 布局render树（Layout/reflow），负责各元素尺寸、位置的计算
4. 绘制render树（paint），绘制页面像素信息
5. 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。
6. 渲染完毕后会触发load事件：DOMContentLoaded -> load

 

CORS？

 

 

 

 

 

https://zhuanlan.zhihu.com/p/84212558