2022前端笔试面试题

以下为笔试题部分：

1.CSS盒子模型的构成是__,__,__,__.

2.二叉树的中序遍历顺序是badce,后续遍历顺序是bdeca，问前序遍历的顺序。

3.flex布局的父级元素中有哪些常用属性。

4.box-sizing:____;表示怪异盒模型（IE盒模型）

5.js中的原始数据类型有哪些？

6.一道关于辨析var和let和const的选择题：

7. slice和splice区别：

8.css选择器优先级

9.原型链最终指向NULL。

10.浏览器触发回流时，一定会触发重绘；但重绘不一定触发回流。

11. visibility:hidden 和 display:none区别

12. 哪些是html中的行内元素：dl p link span select

13. 哪些是Html中语义化标签： footer strong section aside.

14.箭头函数和普通函数的区别。

15.清除浮动的几种方式

16.盒子模型为什么会发生外边距塌陷

以下为字节跳动二面部分：

1. HTTP1.0和HTTP1.1的区别

2.什么是七层网络模型，具体有哪些层

3.讲讲DNS域名解析流程

4.域名服务器层级结构，根域名服务器有几个，顶级域名服务器的域名有哪些

7. 题目一道：将扁平数据机构转json树

8.小程序和Html5的区别

9.从输入Url到访问到页面的具体流程

以下为笔试题部分：

1.CSS盒子模型的构成是,,,.

答：margin border padding content

2.二叉树的中序遍历顺序是badce,后续遍历顺序是bdeca，问前序遍历的顺序。

答：abcde

知识点：二叉树前序遍历顺序：当前->左节点->右节点；中序遍历顺序：左节点->当前->右节点；

后序遍历顺序：左节点->右节点->当前；

3.flex布局的父级元素中有哪些常用属性。

答：

flex-direction: 设置主轴的方向

justify-content: 设置主轴上的子元素对齐方式

flex-wrap: 设置子元素是否换行

align-content: 设置侧轴上的子元素的排列方式(多行)

align-items: 设置侧轴上的子元素排列方式 (单行)

flex-flow: 复合属性, 相当于同时设置了 flex-direction 和 flex-wrap

4.box-sizing:____;表示怪异盒模型（IE盒模型）

答：border-box。

知识点：

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；在标准模式下（W3C标准），一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

当设置为box-sizing:border-box时，将采用怪异模式解析计算；在怪异模式下（ IE标准），一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

5.js中的原始数据类型有哪些？

答：Undefined，Null，Boolean，Number、String。

知识点：

js中的数据类型分为：

原始数据类型（基础数据类型）： Undefined，Null，Boolean，Number、String

和引用数据类型：对象、数组、函数。

其中，原始数据类型存储在栈中，引用存储在堆中；

原始数据类型按值传递数据，数据是不可变的(immutable)，只有对象是可变的(mutable). 有时我们会尝试“改变”字符串的内容，但在JS中，任何看似对string值的"修改"操作，实际都是创建新的string值。任何方法都无法改变一个基本类型的值。而引用类型是按照引用传递数据的。

6.一道关于辨析var和let和const的选择题：

A let和const有块级作用域，var没有。

B var存在变量提升，其他没有。

C var是全局变量，其他不是。

D let和const存在暂存死区，var没有。

答：A对，B对，C var不一定定义全局变量，D对

知识点：

1.块级作用域：一对{}，变量在离开定义的块级代码后立即被回收。

2.var声明的变量可以重复声明,没有块的概念,可以跨块访问,不能跨函数访问,当出现相同的变量名时,后者会覆盖前者。let,const有块级作用域,并且不可重复声明

3. let和const 定义的变量,只能在块作用域中访问,不能跨函数访问，不允许重复声明

4.let 和 var 的不同是，在变量声明之前就访问变量的话，会直接提示 ReferenceError，而不像 var 那样使用默认值 undefined
5. var有变量提升，let和const声明的变量没有变量提升

7. slice和splice区别：

slice不会更改原数组，splice会。

8.css选择器优先级

!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符* > 继承 > 浏览器默认属性

9.原型链最终指向NULL。

对。

10.浏览器触发回流时，一定会触发重绘；但重绘不一定触发回流。

对。

知识点:

什么是重绘和回流以及如何避免回流_windy-boy的博客-CSDN博客_重绘回流

1.重绘: 当页面中元素样式的改变并不影响它在文档流中的位置时，也就是说布局没有发生改变时(比如只是改变元素的颜色)。
2.回流：当渲染树(Render Tree)中的部分（或全部）元素的尺寸、结构、显示隐藏等发生改变时，浏览器重新渲染的过程称为回流。简而言之，任何会改变元素几何信息（元素的位置和尺寸大小）的操作，都会触发回流。回流是影响浏览器性能的关键因素。
比如：
（1）添加或者删除可见的 DOM 元素(不可见元素不会触发回流)；
（2）元素尺寸或位置发生改变
（3）元素内容变化，比如文字数量或图片大小
（4）浏览器窗口大小发生改变
（5）CSS伪类的激活（例如：:hover，从而改变了元素的布局的）

11. visibility:hidden 和 display:none区别

1.display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；

2.visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

12. 哪些是html中的行内元素：dl p link span select

select和span是行内，dl p是块级，link是void元素。

13. 哪些是Html中语义化标签： footer strong section aside.

以上都是。

14.箭头函数和普通函数的区别。

1.形式上：

普通函数： function(){}

箭头函数：（）=>{}

2. 当箭头函数的参数只有一个时，不需要为参数加（）；函数只有一个表达式时，不需要加{}；箭头函数会自动返回箭头后面的处理结果（可以去掉return）。

eg.

function(item){
    return item+=1;
}
相当于
item=>item+=1;

3.箭头函数是匿名的。

4.箭头函数没有构造函数,不能用new，不会自动生成__proto__属性

5.箭头函数没有arguments。

15.清除浮动的几种方式

1.额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）（不推荐）

2.父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

3.clearfix:after

clearfix{
    *zoom:1;
}
.clearfix:after{
    content:'clear';
    display:block;
    height:0;
    clear:both;
    overflow:hidden;
    visibility:hidden;
}