👀 前端面试题开胃菜

可颂
465 阅读4分钟

入职新公司好几天了，本来想入职前两天就整理出来的，结果入职培训耽搁两天，接着就调试开发环境，其实还是怪自己太拖延。

找工作面试时难免会问到一些面试题，以下是对近段时间高频面试题的一些整理。

  • 未知宽高，元素如何水平垂直居中
  • 重绘和回流
  • 说说对盒模型的理解

未知宽高，元素如何水平垂直居中

🚩考察知识点：flex布局

position定位实现居中就不说了，用flex实现代码如下：

 .parent {
     display: flex;
     justify-content: center;
     align-items: center;
  }

🚩面试官还问了下flex:1,是哪些属性的缩写？

  • flex-grow 定义项目放大比例，默认为0。如果所有项目的flex-grow值为1，则他们将等分剩余空间。
.item{
    flex-grow:<number> /*default 0*/
 }

如果item2设置2，其余为1，效果如下： image.png

  • flex-shrink 定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比缩小。如果设置为0，其他设置为1，那空间不足时，前者不缩小。

.item{
    flex-shrink:<number>  /*default 1*/
 }

51edba0637714c4946187d7f6784ae9.png

  • flex-basis 定义了在分配多余空间之前，项目占据的主轴空间默认值为auto，即项目的本来大小,可以设置具体值，代表占据固定空间。
.item{
    flex-basis:<lenght>|auto  /*default auto*/
 }

重绘和回流

先了解下浏览器的渲染机制

  • 浏览器使用流式布局模型（Flow Based Layout）
  • 解析HTML生成DOM树
  • 解析css生成cssdom规则树
  • 将DOM树+CSSDOM规则树，生成渲染树 Render Tree
  • 根据渲染树遍历拿到每个节点开始布局，计算每个节点的未知大小信息
  • 将渲染树每个节点绘制到屏幕

重绘（Repaint）

当我们操作的节点上的元素并不导致元素位置发生变化时，浏览器会将新的样式赋值给这些节点，我们称这个过程为重绘。

color,blackground-color,visibility

回流 (Reflow)

页面渲染会根据Render Tree去遍历渲染，节点发生改变，浏览器重新渲染部分节点或者全部文档，我们称这个过程为回流

  • 页面首次渲染
  • 浏览器窗口大小发生改变
  • 元素尺寸或位置发生改变
  • 元素内容变化（文字数量或图片大小）
  • 元素字体大小变化
  • 添加或者删除可见的dom元素
  • 激活css伪类 （例如：hover）

避免重绘和回流

  • 避免使用table布局
  • 尽可能在dom树的最末端改变class
  • 避免设置多层内联样式
  • 蒋东华效果应用到position属性为absolute或fixed的元素上
  • 避免使用css表达式
  • 避免频繁操作样式，定义calssname，一次性更改calssname
  • 先为元素设置display：none，操作借宿后再把它显示出来。因为在属性为none的元素上进行dom操作不会引发回流和重绘。
  • 避免频繁读取引发回流/重绘的属性，如果要多次使用，就用一个变量缓存起来。
  • 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

说说对盒模型的理解

所有html元素都可以看做盒子，盒模型有两种，标准模型和IE模型（怪异盒子）

模型属性设置width
标准模型（默认）box-sizing: conent-box; content
IE模型box-sizing: border-box;content+padding+border

🚩 我以为这就完了，结果面试官接着问，对BFC有什么理解？⚡️⚡️⚡️

BFC

块级格式化上下文，独立的布局区域，BFC内部的元素与外部互不影响。

形成BFC的条件

  • float非none
  • position是absolute或fixed
  • overflow不是visible
  • display值为inline-block、table-cell、table-caption、flex、inline-flex

BFC特性

  • 属于同一个BFC的两个相邻容器的上下margin会重叠
  • 计算BFC高度时，浮动元素也参与计算
  • BFC区域不会与浮动容器发生重叠

BFC文章参考：www.cnblogs.com/qs-cnblogs/…

面试的时候才明白，很多细节的知识点自己记得很凌乱，所以，记笔记还是很有必要的。

以上笔记如有错误，欢迎指正!

avatar
文章
阅读
粉丝