Web大前端面试题-Day1

1. var的变量提升的底层原理是什么?

JS引擎的工作方式是:
1) 先解析代码，获取所有被声明的变量；
2)然后在运行。
也就是说分为预处理和执行两个阶段。
变量提升：
所有变量的声明语句都会被提升到代码头部。
但是变量提升只对var命令声明的变量有效，
如果一个变量不是用var命令声明的，
就不会发生变量提升。
js里的function也可看做变量，
也存在变量提升情况。

2. JS如何计算浏览器的渲染时间?

浏览器的渲染过程主要包括以下几步：
1) 解析HTML生成DOM树。
2) 解析CSS生成CSSOM规则树。
3) 将DOM树与CSSOM规则树合并在一起生成渲染树。
4) 遍历渲染树开始布局，
计算每个节点的位置大小信息。
5) 将渲染树每个节点绘制到屏幕。
优化考虑:
CSS 优先：
引入顺序上，CSS 资源先于 JavaScript 资源。
JS置后：
通常把JS代码放到页面底部，
且JavaScript 应尽量少影响 DOM 的构建。

3. JS的回收机制?

垃圾回收机制是为了以防内存泄漏，
(内存泄漏: 当已经不需要某块内存时这块内存还存在着),
垃圾回收机制就是间歇的不定期的
寻找到不再使用的变量，
并释放掉它们所指向的内存。

JS有两种变量: 
全局变量和在函数中产生的局部变量。
局部变量的生命周期在函数执行过后就结束了，
此时便可将它引用的内存释放（即垃圾回收），
但全局变量生命周期会持续到浏览器关闭页面。

JS执行环境中的垃圾回收器有两种方式：
标记清除（mark and sweep）
、引用计数(reference counting)。

标记清除:  
垃圾收集器给内存中的所有变量都加上标记，
然后去掉环境中的变量以及被环境中的变量引用的变量的标记。
在此之后再被加上的标记的变量即为需要回收的变量，
因为环境中的变量已经无法访问到这些变量。

引用计数(reference counting): 
这种方式常常会引起内存泄漏，
低版本的IE使用这种方式。
机制就是跟踪一个值的引用次数，
当声明一个变量
并将一个引用类型赋值给该变量时该值引用次数加1，
当这个变量指向其他一个时该值的引用次数便减一。
当该值引用次数为0时就会被回收。

4. 垂直水平居中的方式?

方式一:  定位
父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，
然后减去元素自身宽度的距离就可以实现 

width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;

方式二:  flex布局

display: flex;
//flex布局
justify-content: center; 
//使子项目水平居中
align-items: center; 
//使子项目垂直居中
方式三:  table-cell  (不推荐)

display: table-cell;
vertical-align: middle;
//使子元素垂直居中
text-align: center;
//使子元素水平居中

5. 实现一个三栏布局，中间版块自适应方法有哪些?

浮动和定位
浮动方式:
<div class="content">
   <div class="left">left</div>
   <div class="right">right</div>
   <div class="center">center</div></div>
   .left{    float: left;
    width: 100px;
    height: 200px;
}

.right{  
    float: right;
    padding: 0;
    width: 100px;
    height: 200px;
}

.center{    
    margin: 0 100px 0 200px;
}

方式二: 
将父容器的position设置为relative，
两个边栏的position设置成absolute。

6. 如何判断一个对象是否为数组?

撩课小编:
1) isPrototypeOf()方法，
判定Array是不是在obj的原型链中，
如果是，
则返回true,否则false;
2) obj  instanceof  Array;
3) Object.prototype.toString.call(obj)；
4) Array.isArray(obj); // 不推荐 

7. 行内元素和块级元素有哪些? img属于什么元素?

块元素(block element)

　　* address - 地址
　　* blockquote - 块引用
　　* center - 举中对齐块
　　* dir - 目录列表
　　* div - 常用块级容易，也是css layout的主要标签
　　* dl - 定义列表
　　* fieldset - form控制组
　　* form - 交互表单
　　* h1 - 大标题
　　* h2 - 副标题
　　* h3 - 3级标题
　　* h4 - 4级标题
　　* h5 - 5级标题
　　* h6 - 6级标题
　　* hr - 水平分隔线
　　* isindex - input prompt
　　* menu - 菜单列表
　　* noframes - frames可选内容，
    （对于不支持frame的浏览器显示此区块内容
　　* noscript - 可选脚本内容
    （对于不支持script的浏览器显示此内容）
　　* ol - 排序表单
　　* p - 段落
　　* pre - 格式化文本
　　* table - 表格
　　* ul - 非排序列表

内联元素(inline element)

　　* a - 锚点
　　* abbr - 缩写
　　* acronym - 首字
　　* b - 粗体(不推荐)
　　* bdo - bidi override
　　* big - 大字体
　　* br - 换行
　　* cite - 引用
　　* code - 计算机代码(在引用源码的时候需要)
　　* dfn - 定义字段
　　* em - 强调
　　* font - 字体设定(不推荐)
　　* i - 斜体
　　* img - 图片
　　* input - 输入框
　　* kbd - 定义键盘文本
　　* label - 表格标签
　　* q - 短引用
　　* s - 中划线(不推荐)
　　* samp - 定义范例计算机代码
　　* select - 项目选择
　　* small - 小字体文本
　　* span - 常用内联容器，定义文本内区块
　　* strike - 中划线
　　* strong - 粗体强调
　　* sub - 下标
　　* sup - 上标
　　* textarea - 多行文本输入框
　　* tt - 电传文本
　　* u - 下划线
　　* var - 定义变量

可变元素

　　可变元素为根据上下文语境
    决定该元素为块元素或者内联元素。
　　* applet - java applet
　　* button - 按钮
　　* del - 删除文本
　　* iframe - inline frame
　　* ins - 插入的文本
　　* map - 图片区块(map)
　　* object - object对象
　　* script - 客户端脚本

8. margin坍塌?

撩课小编: 当两个盒子在垂直方向上设置margin值时，会出现塌陷现象。

解决方案:

1. 给父盒子添加border

2.给父盒子添加padding-top

3.给父盒子添加overflow:hidden

4.父盒子:position:fixed

5.父盒子:display:table

6.给子元素的前面添加一个兄弟元素
 属性为:content:"";  overflow:hidden;


9. 说说BFC原理?

撩课小编:

BFC就是页面上的一个隔离的独立容器，

容器里面的子元素不会影响到外面的元素。
因为BFC内部的元素和外部的元素绝对不会互相影响，

因此，

当BFC外部存在浮动时，

它不会影响BFC内部Box的布局，

BFC会通过变窄，

而不与浮动有重叠。
同样的，当BFC内部有浮动时，

为了不影响外部元素的布局，

BFC计算高度时会包括浮动的高度。
避免margin重叠也是这样的一个道理。

10. 写一下节点增删改?

//  注意：动态创建元素不会直接显示在页面当中，
//  前面必须是document，不能是其他
（1）document.createElement(标签名);  

// 在指定父级子节点最后一个后面追加子元素
 (2）父级.appendChild(要追加的元素) ;   

// 在父级的指定子元素前面插入一个新元素
//(注意：先判断如果第二个参数的节点是否存在)
（3）父级.insertBefore(新的元素，指定的已有子元素);   

// 深克隆
//（负值标签、标签属性、标签里面内容 浅克隆
//（负值标签、标签属性不复制标签里面内容）
（4）元素.cloneNode(true) 或者元素.cloneNode(false) 

（5）父级.removeChild(已有子元素);
（6）父级.replaceChild(新的元素节点，原有元素节点);

11. 如何获取元素的父节点和兄弟节点，写一下?
获取父节点:

// 1. parentNode获取父节点
// 获取的是当前元素的直接父元素。
var p = document.getElementById("test").parentNode;

// 2. parentElement获取父节点
// parentElement和parentNode一样，
//只是parentElement是ie的标准。
var p1 = 
document.getElementById("test").parentElement;

// 3. offsetParent获取所有父节点
var p2 = 
document.getElementById("test").offsetParent;

获取兄弟节点:

// 1. 通过获取父亲节点再获取子节点来获取兄弟节点
var brother1 =
document.getElementById("test").parentNode.children[1];

// 2.获取上一个兄弟节点
//在获取前一个兄弟节点的时候
//可以使用previousSibling和previousElementSibling。
//他们的区别是previousSibling会匹配字符，
//包括换行和空格，而不是节点。
//previousElementSibling则直接匹配节点。
var brother2 = 
document.getElementById("test").previousElementSibling;
var brother3 =
document.getElementById("test").previousSibling;

// 3. 获取下一个兄弟节点
var brother4 = 
document.getElementById("test").nextElementSibling;
var brother5 = 
document.getElementById("test").nextSibling;

12. 给你一个乱序数组，你怎么排序?

sort, 冒泡, 选择, 二分法....