前端面试题：当浏览器地址栏输入Url发生了什么？

前端角度：

首先浏览器查找当前URL是否存在缓存，并比较缓存是否过期，如果浏览器没有查找到缓存或者缓存已经过期，那么DNS将对url进行解析，解析成对应的ip地址，根据ip地址建立Tcp连接（三次握手）客户端向服务器发送http请求，一般请求为get 和 post （get post区别）服务器收到请求，最终返回给客户端响应体，响应成功状态码为200（常见的状态码），浏览器根据响应体内的html生成相应的dom 树，根据css生成style树，再组合生成redom树，浏览器渲染是最消耗性能的这个里有个知识点（重排&&重绘），先读取doctype是否是一个html5文档，然后解读html的link以及所有的herf属性的标签，都是并行的，发送了请求之后会接着向下执行script标签如果没有src属性并且内部有代码，这样会先将script内的代码读一遍才会向下执行，最后关闭TCP连接（四次挥手）。

回流重绘：

回流：页面中元素的尺寸，布局，隐藏等改变而需要重新构建页面，就会引起回流。

重绘：页面中元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

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

如何避免重绘或者重排？

集中改变样式

比如改变样式的时候，不去改变他们每个的样式，而是直接改变className 。

// 判断是否是黑色系样式
const theme = isDark ? 'dark' : 'light'

// 根据判断来设置不同的class
ele.setAttribute('className', theme)

使用DocumentFragment
将频繁的操作改为一次性操作，通过创建文档碎片，最后一次性加入文档碎片。

var fragment = document.createDocumentFragment();

for (let i = 0;i<10;i++){
  let node = document.createElement("p");
  node.innerHTML = i;
  fragment.appendChild(node);
}

document.body.appendChild(fragment)

get 与 post的区别?

Get是不安全的，因为在传输过程，数据被放在请求的URL中；Post提交的数据在HTTP包的请求包体中，对用户来说都是不可见的，相对安全。
Get传送的数据量较小，这主要是因为受URL长度限制；Post传送的数据量较大，一般被默认为不受限制。
Get限制Form表单的数据集的值必须为ASCII字符；而Post没限制
Get执行效率却比Post方法好。Get是form提交的默认方法。

post和get的选择？

私密性的信息请求使用post（如注册、登陆）。

查询信息使用get。