【前端八股面试】干货！！！

标签：flex 八股 元素 visibility 面试 干货 对齐 CSS 页面

slice与splice

1. slice(开始索引（包含），结束索引（不包含）)，返回slice中的新数组。不修改原数组。

例如：const arr = [1, 2, 3, 4, 5]; const newArr = arr.slice(1, 4);，将返回新的数组 [2, 3, 4]。

1. splice(起始索引值（包含），结束索引值（包含），增加的元素)，可删可添加可替换数组中元素。splice 改变原数组  splice是返回更新后的数组长度

例如：const arr = [1, 2, 3, 4, 5]; arr.splice(1, 2, 'a', 'b', 'c');，将返回被删除的元素组成的新数组 [2, 3]，并修改原始数组为 [1, 'a', 'b', 'c', 4, 5]。

CSS有哪些方式可以隐藏页面元素

1. opacity:0 占据空间可交互
2. display:none 彻底隐藏元素，元素从文档流中消失，不占据空间不交互，不影响布局
3. visibility:hidden 占据空间不交互
4. overflow:hidden 隐藏元素溢出部分，占据空间不交互
5. z-index：-999 层级为最底层，被覆盖
6. transform:scale(0,0) 平面变换，元素缩为0，占据空间不交互

diaplay:none与visibility:hidden的区别：

1. 修改display造成文档重排，修改visibility造成本元素重绘
2. 读屏器不读取display:none的内容，读取visibility：hidden的内容
3. display:none让元素从渲染树上消失渲染不占空间，visibility:hidden相反，只是内容不可见
4. display:none非继承属性，子孙节点消失，修改子孙节点属性也无法显示；visibility:hidden继承属性，子孙节点设置visibility:visible可让子孙节点显示

em/px/rem/vh/vw的区别，pt/px

1. px: 绝对单位，页面按精确像素展示
2. %：相对于父元素的宽度比例
3. em: 相对单位，基准点为父节点字条大小，若定义了font-size按自身计算（浏览器默认16px），整个页面1em不是一个固定值
4. rem: 相对单位，相对于根节点html字体大小计算（html的font-size:20px的时候，那么此时的1rem=20px）
5. vh、vw：页面视口大小布局

vw: 屏幕宽度x%

vh: 屏幕高度x%

vmin: vw、vh中较小的

vmax: vw、vh中较大的

1. pt：pt是印刷单位，等于1/72英寸，通常用于打印样式。屏幕分辨率不固定，打印分辨率是固定的
2. px：px是相对于屏幕分辨率的单位，通常用于打印样式。

flex布局

flex布局是一种响应式盒子模型的布局方式，可以用来实现各种复杂的页面布局和响应式设计。

flex是一个缩写属性，包含：

1. flex-grow:1，默认0，有剩余空间也不放大；1表示会放大
2. flex-shrink:0默认1，空间不足元素缩小
3. flex-basis:默认auto，项目占据主轴空间的大小，定义在分配多余空间之前，用来设置元素宽，优先级高于width

flex-direction：指定子元素的排列方向，可以是 row（水平方向，默认值）、column（垂直方向）、row-reverse（水平方向，反向排列）或 column-reverse（垂直方向，反向排列）。

justify-content： flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）、space-around（每个项目两侧的间隔相等）。

align-items： flex-start（起点对齐）、flex-end（终点对齐）、center（居中对齐）、baseline（基线对齐）、stretch（拉伸对齐，占满整个交叉轴）。

flex-wrap：定义子元素是否换行，可以是 nowrap（不换行，默认值）、wrap（换行）、wrap-reverse（反向换行）。

CSS提高性能的方法有哪些？

1. 内联首屏关键CSS:

1. 内联CSS关键代码使浏览器下载完html后立即渲染（渲染时间提前）

1. 异步加载CSS：（CSS会阻塞渲染）

• 使用JS将link标签插入head标签最后；

设置 link标签， media属性为noexis t(不阻塞页面下进行下载)， 加载完后media值设为screen或 all后浏览器解析CSS;

rel属性将link元素 标记为alternate可选样式表，实现浏览器异步加载， 加载完后rel设回stylesheet;

1. 资源压缩：

利用webpack、gulp/grunt、rollup等模块化工具，压缩CSS代码，文件变小，降低浏览器加载时间

1. 合理使用选择器：

不要嵌套过多复杂选择器、id选择器不用再嵌套、通配符和属性选择器效率最低（勿用）

1. 减少使用昂贵的属性：

页面重绘时，box-shadow、border-radius、filter、透明度、:nth-child等会降低浏览器渲染性能

1. 不使用@import：

（CSS样式文件引入方式：link、@import）

• 影响浏览器并行下载，页面加载时增加额外延迟
• 多个@import导致下载顺序紊乱

1. 其他

减少重排重绘、避免对可继承属性重复编写、精灵图合成所有icon图片减少http请求、小的icon转为base64编码、CSS3动画或过渡尽量使用transform和opacity实现，不要使用left top

标签：flex,八股,元素,visibility,面试,干货,对齐,CSS,页面
From： https://blog.csdn.net/m0_64019511/article/details/141328405