前端:html页面什么情况下要重新渲染

HTML的渲染原理:

  • 1、用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件;
  • 2、浏览器开始载入html代码,发现标签内有一个标签引用外部CSS文件;
  • 3、浏览器又发出CSS文件的请求,服务器返回这个CSS文件;
  • 4、浏览器继续载入html中部分的代码,并且CSS文件已经拿到手了,可以开始渲染页面了;
  • 5、浏览器在代码中发现一个标签引用了一张图片,向服务器发出请求。此时浏览器不会等到图片下载完,而是继续渲染后面的代码;
  • 6、服务器返回图片文件,由于图片占用了一定面积,影响了后面段落的排布

CSS的渲染原理:

  • 1、浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。
  • 2、在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。
  • 3、如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。
  • 4、并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。
  • 5、样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。
  • 6、JS、CSS中如有重定义,后定义函数将覆盖前定义函数。

什么情况下进行重绘或重排:

当一段同步的js代码执行完,执行栈为空的时候,开始执行事件队列中的代码,在执行事件队列中的每一个代码块之前,都会进行一次重绘或重排。
css表达式不会造成页面重新渲染

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值