10月5号

1什么是 DOM 和 BOM？

DOM指的是文档对象结构通过创建树来表示文档，描述了处理网页内容的方法和接口。用DOM API可以轻松地删除、添加和替换节点。

BOM 描述了与浏览器进行交互的方法和接口BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。

2 对ajax的理解

AJAX是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页知识点

创建AJAX请求的步骤：

创建一个 XMLHttpRequest 对象。
在这个对象上使用 open 方法创建一个 HTTP 请求，open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。
在发起请求前，可以为这个对象添加一些信息和监听函数。比如说可以通过 setRequestHeader 方法来为请求添加头信息。还可以为这个对象添加一个状态监听函数。一个 XMLHttpRequest 对象一共有 5 个状态，当它的状态变化时会触发onreadystatechange 事件，可以通过设置监听函数，来处理请求成功后的结果。当对象的 readyState 变为 4 的时候，代表服务器返回的数据接收完成，这个时候可以通过判断请求的状态，如果状态是 2xx 或者 304 的话则代表返回正常。这个时候就可以通过 response 中的数据来对页面进行更新了。
当对象的属性和监听函数设置完成后，最后调用 sent 方法来向服务器发起请求，可以传入参数作为发送的数据体。

3. ES6模块与CommonJS模块有什么异同？

ES6 Module和CommonJS模块的区别：

CommonJS是对模块的浅拷⻉，ES6 Module是对模块的引⽤，即ES6 Module只存只读，不能改变其值，也就是指针指向不能变，类似const；
import的接⼝是read-only（只读状态），不能修改其变量值。即不能修改其变量的指针指向，但可以改变变量内部指针指向，可以对commonJS对重新赋值（改变指针指向），但是对ES6 Module赋值会编译报错。

ES6 Module和CommonJS模块的共同点：

CommonJS和ES6 Module都可以对引⼊的对象进⾏赋值，即对对象内部属性的值进⾏改变。

4 常见的DOM操作有哪些

DOM 节点的获取

DOM 节点的获取的API及使用：

getElementById // 按照 id 查询 
getElementsByTagName // 按照标签名查询
getElementsByClassName // 按照类名查询 
querySelectorAll // 按照 css 选择器查询 
// 按照 id 查询 
var imooc = document.getElementById('imooc') // 查询到 id 为 imooc 的元素 
// 按照标签名查询 
var pList = document.getElementsByTagName('p') // 查询到标签为 p 的集合
console.log(divList.length) console.log(divList[0]) // 按照类名查询
var moocList = document.getElementsByClassName('mooc') // 查询到类名为 mooc 的集合
// 按照 css 选择器查询 
var pList = document.querySelectorAll('.mooc') // 查询到类名为 mooc 的集合

2）DOM 节点的创建

创建一个新节点，并把它添加到指定节点的后面。 已知的 HTML 结构如下：

<html>
  <head>
    <title>DEMO</title>
  </head>
  <body>
    <div id="container"> 
      <h1 id="title">我是标题</h1>
    </div>   
  </body>
</html>

要求添加一个有内容的 span 节点到 id 为 title 的节点后面，做法就是：

// 首先获取父节点 
var container = document.getElementById('container')
// 创建新节点 
var targetSpan = document.createElement('span') 
// 设置 span 节点的内容 
targetSpan.innerHTML = 'hello world'
// 把新创建的元素塞进父节点里去 
container.appendChild(targetSpan)

3）DOM 节点的删除

删除指定的 DOM 节点， 已知的 HTML 结构如下：

<html>
  <head>
    <title>DEMO</title>
  </head>
  <body>
    <div id="container"> 
      <h1 id="title">我是标题</h1>
    </div>   
  </body>
</html>

需要删除 id 为 title 的元素，做法是：

// 获取目标元素的父元素
var container = document.getElementById('container')
// 获取目标元素
var targetNode = document.getElementById('title')
// 删除目标元素
container.removeChild(targetNode)

或者通过子节点数组来完成删除

// 获取目标元素的父元素
var container = document.getElementById('container')
// 获取目标元素
var targetNode = container.childNodes[1]
// 删除目标元素
container.removeChild(targetNode)

4）修改 DOM 元素

修改 DOM 元素这个动作可以分很多维度，比如说移动 DOM 元素的位置，修改 DOM 元素的属性等。

将指定的两个 DOM 元素交换位置， 已知的 HTML 结构如下：

<html>
  <head>
    <title>DEMO</title>
  </head>
  <body>
    <div id="container"> 
      <h1 id="title">我是标题</h1>
      <p id="content">我是内容</p>
    </div>   
  </body>
</html>

现在需要调换 title 和 content 的位置，可以考虑 insertBefore 或者 appendChild：

// 获取父元素
var container = document.getElementById('container')   
// 获取两个需要被交换的元素
var title = document.getElementById('title')
var content = document.getElementById('content')
// 交换两个元素，把 content 置于 title 前面
container.insertBefore(content, title)

5 use strict是什么意思 ? 使用它区别是什么？

use strict 是一种 ECMAscript5 添加的（严格模式）运行模式，这种模式使得 Javascript 在更严格的条件下运行。设立严格模式的目的如下：

消除 Javascript 语法的不合理、不严谨之处，减少怪异行为;
消除代码运行的不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的 Javascript 做好铺垫。

区别：

禁止使用 with 语句。
禁止 this 关键字指向全局对象。
对象不能有重名的属性。

6 如何判断一个对象是否属于某个类？

第一种方式，使用 instanceof 运算符来判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。
第二种方式，通过对象的 constructor 属性来判断，对象的 constructor 属性指向该对象的构造函数，但是这种方式不是很安全，因为 constructor 属性可以被改写。
第三种方式，如果需要判断的是某个内置的引用类型的话，可以使用 Object.prototype.toString() 方法来打印对象的[[Class]] 属性来进行判断。

7 forEach和map方法有什么区别

这方法都是用来遍历数组的，两者区别如下：

forEach()方法会针对每一个元素执行提供的函数，对数据的操作会改变原数组，该方法没有返回值；
map()方法不会改变原数组的值，返回一个新数组，新数组中的值为原数组调用函数处理之后的值；

8 单行、多行文本溢出隐藏

单行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行

多行文本溢出

overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

注意：由于上面的三个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个-webkit- 来兼容一部分浏览器。

9 rem与em的区别

rem是根据根的font-size变化，而em是根据父级的font-size变化

rem：相对于根元素html的font-size，假如html为font-size：12px，那么，在其当中的div设置为font-size：2rem,就是当中的div为24px

em：相对于父元素计算，假如某个p元素为font-size:12px,在它内部有个span标签，设置font-size：2em,那么，这时候的span字体大小为：12*2=24px

10. for...in和for...of的区别

for…of 是ES6新增的遍历方式，允许遍历一个含有iterator接口的数据结构（数组、对象等）并且返回各项的值，和ES3中的for…in的区别如下

for…of 遍历获取的是对象的键值，for…in 获取的是对象的键名；
for… in 会遍历对象的整个原型链，性能非常差不推荐使用，而 for … of 只遍历当前对象不会遍历原型链；
对于数组的遍历，for…in 会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)，for…of 只返回数组的下标对应的属性值；

总结： for...in 循环主要是为了遍历对象而生，不适用于遍历数组；for...of 循环可以用来遍历数组、类数组对象，字符串、Set、Map 以及 Generator 对象。

11. 如何使用for...of遍历对象

for…of是作为ES6新增的遍历方式，允许遍历一个含有iterator接口的数据结构（数组、对象等）并且返回各项的值，普通的对象用for..of遍历是会报错的。

如果需要遍历的对象是类数组对象，用Array.from转成数组即可。

var obj = {
    0:'one',
    1:'two',
    length: 2
};
obj = Array.from(obj);
for(var k of obj){
    console.log(k)
}

如果不是类数组对象，就给对象添加一个[Symbol.iterator]属性，并指向一个迭代器即可。

//方法一：
var obj = {
    a:1,
    b:2,
    c:3
};

obj[Symbol.iterator] = function(){
	var keys = Object.keys(this);
	var count = 0;
	return {
		next(){
			if(count<keys.length){
				return {value: obj[keys[count++]],done:false};
			}else{
				return {value:undefined,done:true};
			}
		}
	}
};

for(var k of obj){
	console.log(k);
}


// 方法二
var obj = {
    a:1,
    b:2,
    c:3
};
obj[Symbol.iterator] = function*(){
    var keys = Object.keys(obj);
    for(var k of keys){
        yield [k,obj[k]]
    }
};

for(var [k,v] of obj){
    console.log(k,v);
}

12 常用DOM事件

鼠标事件
- 鼠标单击 click
- 鼠标双击 dblclick
- 鼠标移入/移出
  - mouseover/mouseout : 支持冒泡
  - mouseenter/mouseleave：不支持冒泡
- 鼠标移动 mousemove
- 鼠标按下 mousedown
- 鼠标松开 mouseup
键盘事件
- input : 键盘输入
- keydwon : 键盘按下
- focus: 成为焦点
- blur: 失去焦点
页面事件
- scroll ：页面滚动
- resize：页面大小变化

10月6号

1 absolute与fixed共同点与不同点

共同点：

改变行内元素的呈现方式，将display置为inline-block
使元素脱离普通文档流，不再占据文档物理空间
覆盖非定位文档元素

不同点：

abuselute与fixed的根元素不同，abuselute的根元素可以设置，fixed根元素是浏览器。
在有滚动条的页面中，absolute会跟着父元素进行移动，fixed固定在页面的具体位置。

2 全局作用域和函数作用域

（1）全局作用域

最外层函数和最外层函数外面定义的变量拥有全局作用域
所有未定义直接赋值的变量自动声明为全局作用域
所有window对象的属性拥有全局作用域
全局作用域有很大的弊端，过多的全局作用域变量会污染全局命名空间，容易引起命名冲突。

（2）函数作用域

函数作用域声明在函数内部的变零，一般只有固定的代码片段可以访问到
作用域是分层的，内层作用域可以访问外层作用域，反之不行

3 块级作用域

使用ES6中新增的let和const指令可以声明块级作用域，块级作用域可以在函数中创建也可以在一个代码块中的创建（由{ }包裹的代码片段）
let和const声明的变量不会有变量提升，也不可以重复声明
在循环中比较适合绑定块级作用域，这样就可以把声明的计数器变量限制在循环内部。

4 box-sizing 属性值有什么作用？

用来控制元素的盒子模型的解析模式，默认为content-box

context-box：W3C 的标准盒子模型，设置元素的 height/width 属性指的是 content 部分的高/宽
border-box：IE 传统盒子模型。设置元素的 height/width 属性指的是 border + padding + content部分的高/宽

5 absolute 绝对定位，是相对于谁的定位？

CSS position属性用于指定一个元素在文档中的定位方式。

absolute 的元素会被移出正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素进行定位，确定元素位置。绝对定位的元素可以设置外边距，且不会与其他边距合并。

6 行内元素和块级元素有什么区别？

行内元素：一个行内元素只占据它对应标签的边框所包含的空间。

块级元素：块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。

区别：

是否另起一行：认情况下，行内元素不会以新的一行开始，而块级元素会新起一行。
是否可设置宽高：块级元素可以设置 width, height属性，注意：块级元素即使设置了宽度，仍然是独占一行的。而行内元素设置 width, height 无效。
是否可设置内外边距：块级元素都可，行内元素的水平方向的 padding-left/right, margin-left/right 都产生边距效果，但是竖直方向的 padding-top/bottom, margin-top/bottom 都不会产生边距效果。（也就是水平方向有效，竖直方向无效）
是否包含对方：块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素

7. 常见的行内元素和块级元素有哪些？

1、常见的行内元素

<span>、<a>、<lable>、<strong>、<b>、<small>、<abbr>、<button>、<input>、<textarea>、<select>、<img>

2、常见的块级元素

<div>、<p>、<li>、<h1> ~ <h6>、<form>、<header>、<hr>、<ol>、<ul>、<article>、<aside>、<dd>、<dl>

8.CSS中的 "flex:1;" 是什么意思？

flex 是 flex-grow, flex-shrink 和 flex-basis的简写

9.页面导入样式时，使用link和@import有什么区别？

link属于HTML标签，而@import是css提供的；
页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；
link是XHTML标签，无兼容问题，而@import只在IE5以上才能识别；
link方式的样式的权重高于@import的权重。

10.前端项目为什么要初始化CSS样式？

因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有对浏览器的CSS初始化，会造成相同页面在不同浏览器的显示存在差异。

11 margin 和 padding 分别适合什么场景使用？

何时使用margin：

需要在border外侧添加空白
空白处不需要背景色
上下相连的两个盒子之间的空白，需要相互抵消时。

何时使用padding：

需要在border内侧添加空白
空白处需要背景颜色
上下相连的两个盒子的空白，希望为两者之和。

12 display:none 与 visibility:hidden 有什么区别？

表现上

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

性能上

使用 visibility:hidden 比 display:none 性能上要好，display:none 切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

10月7日

1. style 标签写在 body 前面或者后面有什么区别？

页面加载自上而下当然是先加载样式。

写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

2.transition 和 animation 的区别？

transition 是过度属性，强调过度，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
animation 是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

3说说你对盒子模型的理解？

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content、padding、border、margin
标准盒子模型：标准盒子模型，是浏览器默认的盒子模型

盒子总宽度 = width + padding + border + margin;
盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding 和 border 值

IE 怪异盒子模型

盒子总宽度 = width + margin;
盒子总高度 = height + margin;

也就是，width/height 包含了 padding 和 border 值

4. 脱离文档流有哪些方法？

float：使用 float 脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。
absolute：absolute 称为绝对定位，是相对于该元素的父类（及以上，如果直系父类元素不满足条件则继续向上查询）元素进行定位的，并且这个父类元素的position必须是非static定位的（static是默认定位方式）。
fixed: 固定定位，完全脱离文档流，相对于浏览器窗口进行定位。（相对于浏览器窗口就是相对于html）

5. Sass、Less 是什么？为什么要使用他们？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS

它们的优点？

结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

6.CSS3 新增伪类有哪些？

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中

7.CSS 动画和 JS 实现动画分别有哪些优缺点？

1. CSS动画

优点

浏览器可以对动画进行优化
代码相对简单,性能调优方向固定
对于帧速表现不好的低版本浏览器，CSS3可以做到自然降级，而JS则需要撰写额外代码

缺点

运行过程控制较弱,无法附加事件绑定回调函数
代码冗长，想用CSS实现稍微复杂一点动画,最后CSS代码都会变得非常笨重

2. JS 动画

优点

控制能力很强, 可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有js动画才能完成
CSS3有兼容性问题，而JS大多时候没有兼容性问题

缺点

代码的复杂度高于CSS动画
JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况

8 position有哪些属性值？

static 默认值元素出现在正常的文档流中，会占用页面空间。
relative 相对定位方式，相对于其原来的位置进行定位。会占用该元素在文档中初始的页面空间，即在使用top，bottom，left，right进行移动位置之后依旧不会改变其所占用空间的位置。可以使用z-index进行在z轴方向上的移动。
absolute: 绝对定位方式，脱离文档流，不会占用页面空间。以最近的不是static定位的父级元素作为参考进行定位，如果其所有的父级元素都是static定位，那么此元素最终则是以当前窗口作为参考进行定位。
fixed: 绝对定位方式，直接以浏览器窗口作为参考进行定位。其它特性同absolute定位。当父元素使用了transform的时候，会以父元素定位。
sticky: 粘性定位，可以简单理解为relative和fixed布局的混合。当粘性约束矩形在可视范围内为relative，反之，则为fixed粘性定位元素如果和它的父元素一样高，则垂直滚动的时候，粘性定位效果是不会出现的，它的定位效果完全受限于父级元素们。

9.分析比较 opacity:0、visibility:hidden、display:none 优势和使用场景

可以从以下三点进行分析

1. 结构

display: none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

2. 继承

display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显示。

3. 性能

display: none: 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
visibility: hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
opacity: 0:修改元素会造成重绘，性能消耗较少

10.说说对 CSS 预编语言的理解，主流的有哪些？

理解： 预处理语言扩充了css语言，增加了诸如变量、混合（mixin）、函数等功能，让 css 更易维护、方便。本质上，预处理是css的超集，包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 css 文件

有哪些： css预编译语言在前端里面有三大优秀的预编处理器，分别是：sass、less、stylus

11.CSS 单位中 px、em 和 rem 的区别？

px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值
rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素

面试题第五期