前端浏览器渲染及前端性能优化

前端浏览器渲染：

今天，花了一些时间去看了看关于浏览器渲染的东西，特写下这篇博客来记录

---

三个阶段：

从输入网址到页面显示可以分为3个阶段，分别为
http请求阶段，http响应阶段，浏览器渲染阶段

---

几个概念：

进程：多程序同时进行，一个程序 就是一个进程

线程：每一个程序同时做多个事情，每一件事情可以当做一个线程

栈内存：用来提供执行代码的环境，

---

请求和响应过程：

1，首先呢，我们先输入网址，浏览器就会向服务器端发送一个请求。这就到了request请求阶段，request请求阶段要进行:DNS解析，TCP协议，三次握手和四次挥手（这里我也不懂，反正不影响理解）

2，然后服务器端收到request请求后，会将页面的源代码返回给浏览器，可以在浏览器中的source查看，此处涉及http码，304缓存和HTTP请求报文。

---

浏览器渲染

1.当浏览器拿到页面源码之后，将会开启一片占内存用来执行代码，此时浏览器会先分出一个线程用来执行代码，从代码的第一句开始执行，近栈执行，执行完第一句，然后出栈，

2.当从上往下执行执行到link script等标签时，浏览器会向后端服务器请求CSS样式以及JS文件等。这个时候，浏览器就会再分出一个线程去执行当前的link或者script标签，主线程仍然继续向下执行，并且会分出一个任务队列用来存放这些任务，当主线程走到结束标签时，此时主线程任务完成，浏览器渲染出dom树，

3.此时浏览器会到任务队列中去查看各个任务，看哪个任务先回来，比如01.CSS已经请求回来，浏览器将会执行01.CSS，这一过程也叫做事件循环,当所有的CSS文件都执行完成后，浏览器J时会渲染出CSSOM

4.dom树和CSSOM全部生成完成后，浏览器会将两者结合生成render tree，并且通知cpu去开始绘制页面

5.此时CPU要经过两个过程，第一个过程要根据生成的渲染数，计算元素在设备视口内的确切位置和大小，这一过程也叫做回流。当执行完这一过程后，CPU继续开始确定每一个元素的样式，这一过程也叫做重绘

---

前端性能优化

1.减少http请求的次数和大小

刚刚我们所说过，在浏览器进行渲染时，遇到link和script标签会对Http进行一个请求，并将请求放到任务队列之中，那么任务队列中任务过多则会造成性能问题，所以要减少HTTP请求的次数和大小，解决方案就是将所有的CSS文件都放在一个文件中，并进行压缩

2.懒加载

3.减少回流次数

1.避免对dom元素进行操作，使用vue或react框架进行数据影响视图模式

2.进行读写分离操作，可有效减少回流次数

现代浏览器的渲染队列机制，当看到对样式进行一次操作时，浏览器会先不进行操作，会再看下一条语句是否仍然对样式进行操作。如果是，那么将继续再往下读，直到看到不是对样式进行操作的时候，浏览器会将以上所有的操作统一进行处理。

//只进行一次回流
a.style.width='100px'
a.style.height='200px'
console.log('123')

//进行两次回流
a.style.width='100px'
console.log('123')
a.style.height='200px'

3.样式集中处理

//进行两次回流
a.style.cssText='width:20px;height:20px'

也可以直接对类名进行修改

4.批量处理

//进行5次回流
var a=document.getElementByID('#UL#')//获取ul元素
for(i=0;i<5;i++)
{
var b=document.createElement('li')
b.innerHTML=i
a.appendchild(b)
}

优化方法这里以模板字符串为例，也可以使用文档碎片的方法

//进行1次回流
var a=document.getElementByID('#UL#')//获取ul元素
var c=``
for(i=0;i<5;i++)
{
var b=document.createElement('li')
b.innerHTML=i
var c+=b
}
a.appendchild(b)

5.缓存处理（实质还是读写分离，不再细说）

6.避免使用table布局

7.css3 硬件加速

对位置进行改变时，使用transform属性，规避回流，坏处是可能引发内存占用过大，字体模糊等问题