标签：面试题 DOM 元素 visibility display 十道 回流 第五天 重绘
1.如果需要手写动画，最小间隔是多久，为什么？
多数显示器默认频率是60HZ,即1秒刷新60次，所以理论上最小间隔是1/60*1000ms=16.7ms。
2.列出你所知道可以改变页面布局的属性；
position 、float、display、margin、padding、top、bottom、left、right、width、height
3.伪类和伪元素的区别；
1）伪类表状态，伪元素是真的存在的元素；
2）伪类单冒号，伪元素双冒号。
4.CSS有个content属性，有什么作用和应用？
content属性是专门应用在before/after伪元素上，用来插入生成内容；
最常见的应用是利用伪类清除浮动。
5.什么是响应式设计，其原理是什么？如何兼容低版本的IE?
响应式网站设计是指一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本；
原理：通过媒体查询检测不同设备的屏幕尺寸并做处理。
页面头部必须有meta声明的viewport。
6.重绘和回流的区别；
1）回流：元素的大小或者位置发生改变（当页面布局发生改变的时候），触发了重新布局导致渲染树重新计算布局和渲染；
如添加或删除可见的DOM元素；
元素的位置发生变化；元素的尺寸发生变化；
内容发生变化（如文本变化或图片被另一个不同尺寸的图片所代替）；
页面一开始渲染的时候（无法避免）；
因为回流是根据视口大小来计算元素的位置和大小的，所以浏览器窗口尺寸变化也会引起回流
2）重绘：只改变自身样式，不会影响到其他元素
元素样式的改变(但宽高、大小、位置不变)，；
如visibility、color、background-color等；
注意：回流一定会触发重绘，而重绘不一定会回流
7.减少重绘和回流的方法；
1）当用js代码多次修改结构样式时，每一行js代码都会产生一次回流（特指修改样式结构），不如添加一个类 用类名去控制样式。（包括用css一条一条修改样式结构）
2）避免使用表格 修改一行表格的大小时 其他行、列的大小也会受影响
3）复杂动画效果,使用绝对定位让其脱离文档流
4）用transform:translate 代替 position left、right...
5）离线后修改 一开始先隐藏 给样式都修改完后 在显示出来
6）避免循环DOM元素 每次渲染一次DOM就会发生重绘重排一次
7）利用文档碎片添加元素 （DocumentFragment不是真实的DOM，不会每次触发渲染，可以理解为 可以将所有的DOM进行收集起来，最后直接插入到浏览器中）
8.display:none和visibility:hidden的区别；
1、display:none它不占据空间，对后面的元素布局没有任何影响，（回流＋重绘）
visibility:hidden会占据原本的空间，会影响后面元素的布局。（重绘）
2、如果给父元素设置display:none，给它的子元素设置display:block，结果子元素还是不能显示出来，如果给父元素设置visibility:hidden，给它的子元素设置visibility: visible;，结果子元素可以显示出来。
3、visibility: hidden不会影响计数器的计数，虽然让一个元素隐藏了，但是它仍然被算进去了。而display: none会被忽略。
4.CSS3的transition支持visibility属性，但是不支持display。
9.rgba()和opacity的透明效果有什么不同？
rgba()和opacity都能实现透明效果，最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或背景颜色（设置rgba透明元素的子元素不会继承透明效果！）
10.什么是外边距重叠？重叠的结果是什么；
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。（当两个垂直外边距相遇时，它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。）
注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
标签：面试题,DOM,元素,visibility,display,十道,回流,第五天,重绘 来源： https://blog.csdn.net/m0_60665016/article/details/122270632
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。