前端常见面试题

如何居中div，如何居中一个浮动元素？如何让绝对定位的div居中？

1、设置margin:0 auto;width:…
2、（一）确定容器的宽高，这里宽度是必须的，高度可以不设，设置外层的上外边距和左外边距分别是宽高的一半。
实现居中关键在于 margin设置与 position: relative.

	.div {
	    width:500px ;
	    height: 300px;
	    margin: -150px 0 0 -250px;
	    position: relative;
	    left: 50%;
	    top: 50%;
    }

c. position: absolute;
  top: 50%;
  left: 50%; 只能把div定位在以红色圈为起点的位置，加上margin:-100px 0px 0px -10

（二）使用一个居中显示的浮动元素包含此元素。

<div style=”margin: 0 auto ;”><div style=”float: left;”></div></div>

3、position + transform

如何解析JSON？

（一）eval()方法
解析JSON数据的最常用方法是使用javascript的eval()方法，代码如下：

function toJson(str){
 var json = eval('(' + str + ')');
 return json;
}

该方法存在性能和安全方面的问题，不建议使用。
（二）new Function方法

function toJson(str){
 var json = (new Function("return " + str))();
 return json;
}

（三）JSON.parse()方法
这种方法只支持IE8/Firefox3.5+/Chrome4/Safari4/Opera10 以上版本,这些浏览器都已经接近W3C标准，默认实现了toJSON方法。

function toJson(str){
 return JSON.parse(str);
}

js的typeof返回哪些数据类型？js的基础类型？

/*
* typeof 返回的6种数据类型有：
* “boolean”——布尔值
* “string”——字符串
* “number”——数值
* “object”——对象或者null;
* “function”——函数
* “undefined” ——未定义
* PS : 返回的值永远是字符串
* */

ES6的新特性

1. 箭头操作符
2. 类的支持
3. 增强的对象字面量（可以在对象字面量里面定义原型，定义方法可以不用function关键字，直接调用父类方法
4. 字符串模板
5. 解构
6. 参数默认值，不定参数，拓展参数
7. let与const 关键字
8. for of 值遍历
9. Promises
10. Math，Number，String，Object 的新API
11. iterator, generator
12. 模块
13. Map，Set 和 WeakMap，WeakSet
14. Proxies
15. Symbols

angular 的数据绑定采用什么机制？详述原理

脏检查机制。
双向数据绑定是 AngularJS 的核心机制之一。当 view 中有任何数据变化时，会更新到 model ，当 model 中数据有变化时，view 也会同步更新，显然，这需要一个监控。
原理就是，Angular 在 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch，用来检测它监视的model里是否有变化的东西。当浏览器接收到可以被angularcontext处理的事件时，$digest 循环就会触发，遍历所有的 $watch，最后更新 dom。

谈谈你对事件流的理解？

“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡

详解浏览器渲染页面过程

1.解析HTML文件，创建DOM树
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。

2.解析CSS
优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
特定级：id数100+类或伪类数10+tag名称*1

3.将CSS与DOM合并，构建渲染树（renderingtree）
DOM树与HTML一一对应，渲染树会忽略诸如head、display:none的元素

4.布局和绘制，重绘（repaint）和重排（reflow）
重排：若渲染树的一部分更新，且尺寸变化，就会发生重排；
重绘：部分节点需要更新，但不改变其他集合形状。如改变某个元素的颜色，就会发生重绘。

附：
1.重绘和重排何时会发生：
（1）增加或删除DOM节点；
（2）display:none（重排并重绘）；visibility:hidden（重排）；
（3）移动页面中的元素；
（4）增加或修改样式；
（5）用户改变窗口大小，滚动页面等。
2.如何减少重绘和重排以提升页面性能：
（1）不要一个个修改属性，应通过一个class来修改
错误写法：div.style.width=“50px”;div.style.top=“60px”;
正确写法：div.className+=" modify";
（2）clone节点，在副本中修改，然后直接替换当前的节点；
（3）若要频繁获取计算后的样式，请暂存起来；
（4）降低受影响的节点：在页面顶部插入节点将影响后续所有节点。而绝对定位的元素改变会影响较少的元素；
（5）批量添加DOM：多个DOM插入或修改，应组成一个长的字符串后一次性放入DOM。使用innerHTML永远比DOM操作快。（特别注意：innerHTML不会执行字符串中的嵌入脚本，因此不会产生XSS漏洞）。