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

前端浏览器渲染:

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


三个阶段:

从输入网址到页面显示可以分为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属性,规避回流,坏处是可能引发内存占用过大,字体模糊等问题

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值