ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

HTML&浏览器的一些

2022-01-21 12:03:54  阅读:129  来源: 互联网

标签:浏览器 渲染 元素 HTML 重排 一些 重绘


理解块级元素和行内元素
理解重排和重绘

核心:重排一定会导致重绘,重绘不一定会导致重排,需要频繁移动变换大小的div尽量脱离文档流,减少重排,提升性能

重排:当DOM的变化影响了元素的几何信息(元素的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫重排,也叫回流,简单来说就是重新生成布局,重新排列元素

下面情况会发生重排:

  • 页面初始渲染,这是开销最大的一次重排
  • 添加/删除可见的DOM元素
  • 改变元素位置、尺寸(边距/填充/边框/宽度/高度)、内容(文字数量/图片大小)、元素字体大小
  • 改变浏览器窗口尺寸,比如resize事件发生时

重排影响的范围:

  • 全局范围:从根节点HTML开始对整个渲染树进行重新布局
<body>
	<div class="hello">
		<h4>hello</h4>
		<p><strong>Name</strong></p>
	</div>
</body>
  • 局部范围:对渲染树的某部分或某一个渲染对象进行重新布局

标签:浏览器,渲染,元素,HTML,重排,一些,重绘
来源: https://blog.csdn.net/weixin_38779534/article/details/122617773

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有