必须背过的地方

1.js的作用域和作用域链

1.1 作用域:

是用来限制代码中变量函数和对象的可见性作用域是一块独立的区域用来隔离变量不同作用域下同名变量不会冲突

作用域分为: 全局作用域函数作用域
es6新增块级作用域通过let const 声明，所声明的变量在指定块的作用域外无法被访问

1.2 作用域链

作用域链就是函数逐级向上查找需要变量的过程
如果在当前的作用域没有找到需要的变量, 那么就会去逐级向上寻找,直到查找到全局作用域

2. 路由的理解

传统页面和单页面局限性如果十几个页面需要相互切换的时候性能太差前端路由就应运而生应用前端路由最广泛的两个前端框架分别是react vue 他们在框架中的具体用法有不同之处但是原理都是一致的是殊途同归

2.1 路由的两种模式

hash模式

标签描点就是浏览器地址上#后面的变化, 可以监听这个变化, 浏览器提供了原生监听事件hashchange 这个事件可以监听到:

浏览器的前进后退行为
点击a标签页面地址改变的行为
通过window.location方法, 改变浏览器地址行为

总之, 只要hash地址发生变化, 就会触发事件

history模式

history模式原理是利用H5新增的 history API, 允许直接更新浏览器而不是重新发起请求, history API的方法 replaceState pushState go back
兼容性不如hash

3.本地存储

3.1 本地存储的分类

localStorage、sessionStorage、Cookie (比较了解的) 还有 indexedDd, webSql

各自的相同之处和区别:

localStorage 和 sessionStorage 都有接近5M的存储空间且不参与服务器通信仅存在于客户端

Cookie 存储空间只有几Kb , 且每次发请求时都会携带在请求头里如果cookie过多 , 非常影响性能

localStorage 和 sessionStorage 不同之处在于 :
localStorage 只能手动清理 localStorage.clear()
sessionStorage 只要关闭浏览器就会被自动清理

4. 从URL出发

4.1 URL组成并解析URL

URL 主要由 协议、主机、端口、路径、查询参数、锚点6部分组成！

HTTP和HTTPS协议:
HTTP是超文本传输协议, 主要用于浏览器和服务器之间传递数据, 通信以文本的形式进行
HTTP 默认的端口是 80
HTTPS = HTTP + SSL / TLS
SSL 是安全层，TLS 是传输层安全
HTTPS 传输的不再是文本，是二进制，使得传输更高效，且加密处理更加安全。
HTTPS 默认端口是 443

输入URL地址后, 浏览器会解析出协议、主机、端口、路径等信息，并构造一个HTTP请求。
在浏览器发出请求之前浏览器会进行缓存

4.2 浏览器缓存机制

缓存就是加快浏览网页的速度, 第一次访问网页时,会把资源缓存到本地, 第二次访问时会直接从本地获取资源达到提高网站和应用性能的目的
缓存一共分为两种一是强制缓存二是协商缓存

强制缓存:

强制浏览器使用当前缓存 (没有发送请求的)
强制缓存设置过程:
- 客户端发起请求的时候携带 Cache-Control 请求头字段
- 服务端响应的时候，也需要携带 Cache-Contorl 的响应头字段
- 当下次再次请求的时候，判断自己是否符合强制缓存条件，如果符合，则直接读取缓存，如果不符合，则会走协商缓存
协商缓存:

协商缓存是强制缓存失效后, 浏览器携带缓存标识向服务器发起请求, 并决定是否缓存的过程
协商缓存过程:
- 客户端第一次向服务器发起请求, 服务器返回Etag(文件的唯一标识) 和 Last-modified(文件的最后一次修改时间)
- 客户端收集这两个字段
- 客户端第二次发送请求时携带缓存字段把Etag改名为 If-None-Match ,把Last-modified改名为 If-Modified-Since,通过请求头的方式传递给服务端
- 服务器先检查自己最新的Etag 是否等于服务器的If-None-Match
  - 若相等,再判断自己的 Last-modified和客户端的 If-Modified-Since是否相等
  - 若两个都相等则响应304状态码客户端就会读取缓存
  - 若有一个不相等, 则服务器返回最新的数据和最新的Etag 和 Last-modified

4.3 DNS解析

这部分内容了解甚浅作用是: 就是把输入的网站域名翻译成IP地址的系统

4.4 TCP连接

三次握手

TCP协议,就是在发送数据前, 通信双方必须建立一条连接, 三次握手就是在建立连接时,发送的3次数据包
三次握手的意义在于, 确保通信双方都能确定对方的接收和发送能力都正常

过程:

客户端发送Fin(释放连接)字段请求断开连接
服务器发送ack字段应答断开请求
服务端把数据全部处理完毕,发送Fin字段请求断开连接
客户端发送ack字段应答断开请求

四次挥手

TCP的连接的拆除需要发送四个包，因此称为四次挥手
TCP 是双向的，所以需要在两个方向分别关闭，每个方向的关闭又需要请求和确认，所以一共就4次。(在客户端请求断开时,服务端只能应答,并等到所有数据处理完毕,会再次发送断开请求)

过程:

客户端发送Fin(释放连接)字段请求断开连接
服务端发送ack字段应答断开请求
服务端等数据全部处理完毕,发送Fin字段请求断开连接
客户端发送ack字段应答断开请求

4.5 HTTP请求

HTTP请求由请求行、请求头、空行(表明请求头结束)、请求体组成

HTTP请求方法:
请求方法是请求行的一部分

GET (查)发送请求获取服务器的资源没有请求体
POST (增)发送请求向服务器提交数据有请求体
PUT (修)发送请求向服务器提交数据并替换旧数据有请求体
DELETE (删) 发送请求服务器删除指定数据没有请求体
...

4.6 HTTP响应

HTTP响应就是服务器返回的响应

响应报文由状态行、响应头、空行、响应体组成

响应状态码

三次数字组成, 第一个数字定义的状态码类型后两个数字进行细分

分类	描述
1**	信息响应服务器收到请求
2**	成功响应请求成功接收并处理
3**	重定向
4**	客户端响应请求包含语法错误或无法完成请求
5**	服务器响应服务器处理请求过程中发生了错误

4.7 浏览器渲染页面的过程

根据结构生成DOM树
根据样式生成CSSOM样式树
根据DOM树和CSSOM样式树生成渲染树
根据渲染树生成图层树
对每个图层进行绘制

回流和重绘

重绘

当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

回流

当渲染树中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流

注意: 回流必将引起重绘，而重绘不一定会引起回流。

引起回流：

页面首次渲染
浏览器窗口大小发生改变
元素尺寸或位置发生改变
元素内容变化（文字数量或图片大小等等）
元素字体大小变化
添加或者删除可见的DOM元素
激活CSS伪类（例如：:hover）
查询某些属性或调用某些方法

引起回流的属性和方法：

clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
scrollIntoView()、scrollIntoViewIffNeeded()
getComputedStyle()
getBoundingClientRect()
scrollTo()

4.8 总结: 从url输入到浏览器渲染的完整流程

DNS解析: 将url地址解析成主机地址
TCP连接: 三次握手
发起HTTP请求
得到响应
渲染页面
TCP连接: 四次挥手

git常用命令

git config  # 设置身份——Name和Email地址
git init    # 创建一个空的git仓库
git add .   # 存放到暂存区
git commit -m '***'  # 提交到本地仓库
git push    # 推送到远程仓库
git branch **  # 创建分支
git checkout **  # 切换分支
git pull  ** # 获取远程仓库最新内容
git merge  ** # 合并分支

前面面试必背