一、移动web
- 要有条理性的回答:
- 原因…所以…最后
- 首先…其次…最后
1.1 请说下初始化CSS样式的意义
答:
1、浏览器差异:因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
2、提高编码质量:初始化CSS可以节约网页代码,节约网页下载时间;还会使得我们开发网页内容时更加方便简洁,不用考虑很多。如果不初始化,整个页面做完会很糟糕,重复的css样式很多。
常见写法:
①:最简单的初始化方法就是: * {padding: 0; margin: 0;}
。这样一个通用符在编写代码的时候是快,但这样写的话,他会把所有的标签都初始化一遍,这样就增加了网站运行的负载,会使网站加载过慢。
②:最好的做法是针对常用的标签进行初始化即可。
参考淘宝、腾讯等网站的css初始化:https://www.jb51.cc/css/1113842.html
1.2 谈谈你对HTML语义化的理解?
答:
根据页面的结构,选择合适的语义化标签,用正确的标签做正确的布局,同时有利于浏览器、搜索引擎的解析。
追问:为什么要语义化
1、HTML语义化让页面的内容结构化,结构更清晰,便于让浏览器、搜索引擎解析
2、即使在没有样式CSS情况下也以一种文档格式显示,并且是易于阅读的
3、搜索引擎也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO
4、使阅读源代码的人更容易将网站分块,便于阅读维护理解
追问:平时你写HTML代码还有那些注意事项?
1)尽可能少的使用无语义的标签div和span
2)在语义不明显时,既可以使用div或者p时,尽量用p,因为p在默认情况下有上下间距,对兼容特殊终端有利
3)不要使用纯样式标签,如:b、font、u等,改用CSS设置
4)需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用css指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i)
5)使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和单元格要区分开,表头用th,单元格用td
6)表单域要用fieldset标签抱起来,并用legend标签说明表单的用途
7)每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在label标签中设置for=someId来让说明文本和相对应的input关联起来
追问:你知道有哪些HTML5新增的语义标签?
article(定义文章)、aside(定义文章的侧边栏)、figure(一组媒体对象以及文字)、figurecaption(定义figure的标题)、footer(定义页脚)、header(定义页眉)、nav(定义导航栏)、section(定义文档中的区段)、time(定义日期和时间)、dialog(定义一个对话框)
1.3 请说下如何居中一个div?
答: 方法有很多,我大概记得以下5~6种吧。(回答可以直接说标题即可 如果非要说代码,也是说文字)
方法一: 利用定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法二:利用 margin:auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法三: 利用 display:table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.c hild {
width: 100px;
height: 100px;
border: 1px solid #999;
display: inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法四: 利用 display: flex;设置垂直水平都居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.c hild {
width: 100px;
height: 100px;
border: 1px solid #999;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法五: 计算父盒子与子盒子的空间距离(这跟方法一是一个道理) (不够好:自己算)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
}
.c hild {
width: 100px;
height: 100px;
border: 1px solid #999;
margin-top: 200px;
margin-left: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法六: 利用 transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
.c hild {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
1.4 请说下px/em/rem这三个单位有什么区别?
答:
①: px 是绝对单位,而 em 和 rem 是相对单位。
②: em相对于当前元素内文本的字体大小,找不到就找父亲的文字大小,而 rem是相对的** HTML 根元素**文字大小
③: px适合于固定文字大小, em经常用于比如段落首行缩进等, rem在后期移动端开发经常用于做适配。
1.5 你说下rem布局的原理和思路吧?
答:
1、rem 是css的相对单位,rem缩放是相对根元素字体大小.
2、rem 布局的本质是等比缩放,一般是基于宽度。
3、rem 会配合媒体查询(或js动态获取屏幕宽度)来一起使用,来实现屏幕的适配。
rem布局实现目的: 等比缩放
1、元素所有属性 只要px单位—>rem单位
2、rem单位非常神奇,背后 基准值会变。
3、基准值取决于根元素字号大小,屏幕变化导致根元素字号大小变;
4、实现原理:给window注册resize。当变化内部函数设置 根元素字号大小 = 为当前屏幕宽度 / 固定数值 通常为10
1.6 通过CSS如何写一个三角形?
答:
利用css边框属性就可以得到三角形。
边框是梯形的,如果盒子没有宽高,则会变成三角形,设置三个角透明色,其中一个角给颜色,就能得到三角形了
1.7 如何实现两侧固定中间自适应的布局?
答:
圣杯布局
最简单方法,可以通过flex布局来显示, 大盒子里面包含左中右三个小盒子,父盒子利用display:flex。两侧直接写固定宽度,中间盒子给flex:1 即可。
传统方案:父亲设置 box-sizing:border-box CSS3盒子模型,设置左右padding, 子元素三个:左右侧绝对定位宽度(正好是设置padding)高度同父亲 。 中间:设置100%宽 100%高
1.8 你知道BFC吗?
答:
①:BFC(Block Formatting Context),即块级格式化上下文,它是页面中的一块渲染区域,并且有一套属于自己的渲染规则,BFC目的是形成一个相对于外界完全独立的空间,让内部的子元素不会影响到外部的元素
②:触发BFC的条件
- 根元素,即HTML元素
- 浮动元素:float值为left、right
- overflow值不为 visible,为 auto、scroll、hidden
- display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
- position的值为absolute或fixed
③:BFC的主要使用场景:
- 防止margin重叠(塌陷)。 比如给父级添加overflow,就触发了BFC, 还有子元素浮动,不会触发外边距塌陷原因也是因为触发了BFC
- 清除内部浮动。 同样,清除浮动方法中有个overflow:hidden 方法
二、JS基础
2.1 说下typeof返回的数据类型
回答:
①:简单数据类型直接返回对应的英文,比如:number string boolean undefined 等,特殊情况,null 返回 object
②:复杂数据类型返回 object,函数返回的是 function fn(){…} typeof fn
2.2 请说下转换为false的情况有哪些?
**答:**七种
自动转换为false的有: 0 、 “”、 null、 false、 NaN、 undefined、还有不成立的表达式
2.3 两个等号和三个等号的区别是什么?
回答:
== 表示是相等,只比较内容,类型不同,会隐式转换为同类型,进行比较!
=== 表示是全等,不仅比较内容,也比较类型!如果类型不同,直接false
2.4 请说说你对作用域链的理解?
回答:
①:JavaScript中的作用域分为全局作用域、局部作用域,多个嵌套的作用域形成作用域链。
②:作用域链:内部寻找一个变量的查找规则,
- 规则:
- 当在某个作用域中查找变量时,如果当前作用域没有找到,则向上层作用域查找,上层没有声明,继续向上层查找,一直找到全局作用域。
- 找的过程中,找到则使用该变量,没有找到则报错。
2.5 简单数据类型与复杂数据类型在内存上存储有什么区别?
回答:
①:基本类型(简单类型)主要为以下6种:Number、String、Boolean、Undefined、null、symbol
- 基本数据类型的值存储在 栈中
②:引用类型(复杂类型) Object、Array、Function
- 引用类型的值存储于 堆中
三、webapi
3.1 请说下什么是重绘和重排(回流)?他们的区别是什么?
重排: 也叫做回流,当DOM元素影响了元素的几何属性(例如宽和高),浏览器需要重新计算元素的几何属性,同样其它元素的几何属性和位置也会因此受到影响。浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。这个过程称为“重排”。
重绘: 完成重排后,浏览器会重新绘制受影响的部分到屏幕上中,该过程称为“重绘”。
总结:
当我们改变DOM的大小,增加删除都会导致重排,当给DOM元素改变颜色的时候,会导致重绘,重排一定会重绘,重绘不会重排。重排会影响性能,所以我们尽快能的减少重排的操作(这句话是重点)
3.2 说说this的指向问题吧?
this是个关键字,它的指向和函数的调用方式有关, 初步的理解就是,this指向所在函数的调用者。
1、 以函数形式调用时, this 永远都是 window
2、 以方法的形式调用时, this 是调用方法的对象
let obj = {
fn:function(){
log(this)
}
}
obj.fn(); // this--->obj
3、 以构造函数的形式调用时, this 是新创建的那个对象
4、 使用 call 和 apply 调用时, this 是指定的那个对象
5、 箭头函数: 箭头函数的 this 按照普通变量对待。比如把他当做 x 变量即可,然后按照作用域链找就行了。
6、全局中的this是window
7、事件处理函数,如果是普通的function函数,则this指向事件源。
3.3 事件流分为哪两个阶段?
事件流是指事件传播的顺序,由事件捕获 => 目标事件 => 事件冒泡
所以事件流分为捕获和冒泡两个阶段。
3.4 事件委托的实现原理?如果获取当前触发的dom节点?
回答:
①:事件委托主要利用事件冒泡特性来实现的。
②:事件委托(事件委派)主要有2个使用场景:
- 如果有多个子元素,可以把事件注册给父元素,因为点击子元素,也会将事件冒泡到其父元素上,利用这个特点提高了性能。
- 给后来动态生成的元素绑定事件。因为动态生成的元素没有办法直接绑定事件,可以利用事件委托来绑定事件。
使用 e.target 获取当前触发事件的元素。
3.5 你能说说怎么理解事件循环机制的?
1、JavaScript 是一门单线程语言. 单线程可能会出现阻塞的情况,所js分了同步任务和异步任务。
2、同步和异步任务分别进入不同的执行环境,同步的进入主线程,即主执行栈,异步的进入 任务队列。
3、主线程内的任务执行完毕为空,会去 任务队列 读取对应的任务,推入主线程执行。 上述过程的不断重复就是我们说的 Event Loop (事件循环)。