小滴课堂22年新版互联网大厂前端高频面试题（4）~持续更新中

---

前言

小滴课堂，旨在让编程不在难学，让技术与生活更加有趣。 随着互联网+的时代，在线教育技术越来越便捷，小滴课堂依托在线教育时间以及空间上的便利，为广大IT从业者提供了更为方便、快捷的学习交流途径、提供大量高质量的IT在线课程。更多教程请访问xdclass.net（添加VX：xdclass99）

一、讲述⼀下你对于模块化的理解，使用过那些模块化

回答

1、当下的JS模块化规范主要有：CommonJS 、AMC、ES6

2、ES6:：import、export

3、Commonjs：require 、module.exports、exports

4、amd：require、defifined

require和import的区别有什么

1、require是AMD规范的引⼊⽅式

2、import是ES6的⼀个语法标准

3、import是编译时调用，必须放在⽂件开头

4、require是值拷贝的过程，导出值改变不会影响导⼊值，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量

5、import是解构赋值过程，指向内存地址，导⼊值会随导出值而变化，但是目前所有的引擎都还没有实现import，我们使用bebel支持ES6，讲ES6转码为ES5再执⾏，import语法会被转码为require

二、讲述⼀下页面的重排和重绘

回答

（一）重排：

当dom元素发⽣变化并且设计到元素的布局时，比如改变元素的宽度、元素的位置，这时候浏览器会重新计算属性并重新构建渲染树，这个过程就是重排。

（二）重绘：

当dom元素属性发⽣变化，重排完成之后，将重新构建的渲染树渲染描绘到页面上，这就是重绘。

从图中我们可以看到⽣成完渲染树后，下⼀步就是绘制，这⾥可以看出重排必然会带来重绘，但是重绘不⼀定会带来重排。比如，当我们修改元素的颜⾊，背景这些都不会构成重排。

（三）引起重绘Repaint和重排（回流reflflow）的属性

1、引起重绘的元素

常⻅的重绘元素
color	border-style	visibility	background
text-decoration	background-image	background-position	background-repeat
outline-color	outline	outline-style	border-radius
outline-width	box-shadow	background-size

2、引起重排的元素

常⻅的重排元素
width	height	padding	margin
display	border-width	border	top
position	font-size	flfloat	text-align
overflflow-y	font-weight	overflflow	left
font-family	line-height	vertical-align	right
clear	white-space	bottom	min-height
offsetTop	offsetLeft	offsetWidth	offsetHeight
scrollTop	scrollLeft	scrollWidth	scrollHeight
clientTop	clientLeft	clientWidth	clientHeight

三、解释下浮动和它的工作原理

回答

在css规范中，浮动元素会脱离原本的⽂档，就是通常说的脱离⽂档流，这个时候浮动元素是不占据空间的。浮动元素碰到包含它的元素边框或者浮动元素的边框停留。

解决浮动：

1、使⽤clear：both

在浮动元素末尾添加⼀个空的标签，例如

<div style="clear:both"></div>

2、父元素设置overflflow：hidden

父元素设置overflflow：hidden，IE中还需在加上zoom：1,例如

<div style="overflow:hidden;*zoom:1;"></div>

3、使⽤after伪元素

.clearfix {
 *zoom:1;
}
.clearfix:after {
 content:" ";
 display:block;
 visibility:hidden;
 clear:both;
}

四、解析小程序setData的⼯作原理

回答

一、工作原理

小程序分为两个运⾏环境，webview渲染层和jscore逻辑层。两者之间的数据传输，需要通过两者提供的 evaluateJavascript 。用户传输的数据，需要将其转换成字符串形式传递，同时把转换后的数据内容拼接成⼀份JS脚本，再通过JS脚本的形式传递到两个环境。

通信模型图如下：

从上图可以看出当我们setData时，逻辑层会经过native处理后，然后发给渲染层将数据渲染。⽽渲染层可通过传递事件，经过微信客户端将事件交由逻辑层操作的。

常⻅的setData操作错误

1、频繁的去 setData

因为setData的调⽤涉及逻辑层与渲染层间的线程通信，setData有属于异步操作，过于频繁使用会导致队列阻塞，这个时候就会造成页面渲染不及时而导致卡顿。官⽅建议每秒调用setData的次数不要超过20次。

2、每次 setData都传递大量新数据

由于小程序运⾏逻辑线程与渲染线程之上，setData的调用会把数据从逻辑层传到渲染层，数据太大会增加通信时间。官方建议setData的数据在JSON.stringify后不超过256KB

3、后台态页面进行setData

页面进⼊后台，不应该进行setData，进⼊后台的页面的渲染用户是无法感受到的，而且会抢占前台页面的执行。

五、面试必考之原始数据类型及复杂数据类型

回答

简介：这是⼀道会贯穿前端初中高级的面试题，必考题

（一）原始数据类型也叫基础数据类型（分别有如下几种）

1、数字（Number）

2、字符串（String）

3、布尔值（Boolean）

4、undefifined

5、null

6、symbol（这个是ES6引⼊的新的原始数据类型，可回答可不回答，但是要知道有这个数据类型）

（二）复杂数据类型也叫对象类型或者引用数据类型（主要有如下⼏种）

1、对象（object）

2、数组（array）

3、函数（function）

（三）判断基础数据类型⼀般⽤typeof进行判断

注意的是考官⼀般会问typeof 校验undefifined和null的时候分别会输出什么（分别输出undefifined和object，这是js本身的⼀个

bug，⼀直如此）

（四）判断复杂数据类型⼀般只会考察如何判断是⼀个数组

1、只要记住这个⽅法即可，这也是企业常⽤及⾯试官需要的答案

Object.prototype.toString.call(arr) === '[object
Array]'

2、为true即为数组