锁屏面试题百日百刷-CSS篇(一)

你了解的浏览器的重绘和回流导致的性能问题

重绘（Repaint）和回流（Reflow）
重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大。
重绘是当节点需要更改外观而不会影响布局的，比如改变 color就叫称为重绘
回流是布局或者几何属性需要改变就称为回流。
回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流。
所以以下几个动作可能会导致性能问题：
改变 window 大小
改变字体
添加或删除样式
文字改变
定位或者浮动
盒模型
很多人不知道的是，重绘和回流其实和 Event loop 有关。
当 Event loop 执行完 Microtasks 后，会判断 document 是否需要更新。因为浏览器是 60Hz 的刷新率，每 16ms 才会更新一次。
然后判断是否有 resize或者 scroll，有的话会去触发事件，所以 resize和 scroll事件也是至少 16ms 才会触发一次，并且自带节流功能。
判断是否触发了 media query
更新动画并且发送事件
判断是否有全屏操作事件
执行 requestAnimationFrame回调
执行 IntersectionObserver回调，该方法用于判断元素是否可见，可以用于懒加载上，但是兼容性不好
更新界面
以上就是一帧中可能会做的事情。如果在一帧中有空闲时间，就会去执行 requestIdleCallback回调。

分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

结构：
display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击
继承：
display: none：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
性能：
displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
opacity: 0 ： 修改元素会造成重绘，性能消耗较少
联系：它们都能让元素不可见

css sprite 是什么,有什么优缺点

概念：将多个小图片拼接到一个图片中。通过 background-position 和元素尺寸调节需要显示的背景图案。
优点：
减少 HTTP 请求数，极大地提高页面加载速度
增加图片信息重复度，提高压缩比，减少图片大小
更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现
缺点：
图片合并麻烦
维护麻烦，修改一个图片可能需要重新布局整个图片，样式

link与@import的区别

• link是 HTML 方式， @import是 CSS 方式
• link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
• link可以通过rel="alternate stylesheet"指定候选样式
• 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
• @import必须在样式规则之前，可以在 css 文件中引用其他文件
• 总体来说：link 优于@import

容器包含若干浮动元素时如何清理浮动

容器元素闭合标签前添加额外元素并设置clear: both
父元素触发块级格式化上下文(见块级可视化上下文部分)
设置容器元素伪元素进行清理推荐的清理浮动方法
/*** 在标准浏览器下使用*
1 content内容为空格用于修复opera下文档中出现*
contenteditable属性时在清理浮动元素上下的空白*
2 使用display使用table而不是block：可以防止容器和*
子元素top-margin折叠,这样能使清理效果与BFC，IE6/7*
zoom: 1;一致**/

.clearfix:before,.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */}
.clearfix:after {
    clear: both;}

/*** IE 6/7下使用* 通过触发hasLayout实现包含浮动**/

.clearfix {
    *zoom: 1;}

PNG,GIF,JPG 的区别及如何选

GIF:
8 位像素，256 色
无损压缩
支持简单动画
支持 boolean 透明
适合简单动画
JPEG：
颜色限于 256
有损压缩
可控制压缩质量
不支持透明
适合照片
PNG：
有 PNG8 和 truecolor PNG
PNG8 类似 GIF 颜色上限为 256，文件小，支持 alpha 透明度，无动画
适合图标、背景、按钮

锁屏面试题百日百刷，每个工作日坚持更新面试题。锁屏面试题app、小程序现已上线，官网地址：https://www.demosoftware.cc/#/introductionPage。已收录了每日更新的面试题的所有内容，还包含特色的解锁屏幕复习面试题、每日编程题目邮件推送等功能。让你在面试中先人一步，吊打面试官!
也可以扫描下方二维码使用小程序，查看更多面试题，欢迎关注！