第一篇

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的回收机制？

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

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

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

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

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

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

1）定位

父元素设置为：position：relative；

子元素设置为：position:：absolute；

距上50%，距左50%，然后减去元素自身宽度的距离就可以实现。

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

2）flex布局

display: flex; //flex布局
justify-content: center;//使子项目水平居中
align-items: center;//使子项目垂直居中

3）table-cell（不推荐）

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

　

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

1）浮动方式（float + margin）

<div class="content">
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</div>　

.left {
       float: left;
        100px;
       height: 200px;  
}

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

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

2）定位布局（position + margin）

 缺点：如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度时，会发生层重叠的情况。

3）flex布局（flex：1）：这种布局，高度由内容决定。

4）table布局：这种布局，高度由内容决定。

5）Grid布局

6）圣杯布局（float、负边距、relative）

7）双飞翼布局

优点：

【1】主要内容先加载。

【2】兼容目前所有的主流浏览器，包括IE6在内。

【3】实现不同的布局方式，可以通过调整相关CSS属性即可实现。

圣杯布局与双飞翼布局比较：

【1】都是左右栏定宽，中间栏自适应的三栏布局，中间栏都放到文档流前面，保证先行渲染。

【2】解决方案基本相似：都是三栏全部设置左浮动float：left，然后分别解决中间栏内容被覆盖的问题。

【3】解决中间栏内容被覆盖问题时，圣杯布局设置父元素的padding，双飞翼布局在中间栏嵌套一个div，内容放到新的div中，并设置margin，实际上双飞翼布局就是圣杯布局的改进方案。

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

1）isPrototypeOf，判定Array是不是在obj的原型链中，如果是，则返回true，否则false;

2）obj instanceof Array;

3）Object.prototype.toString.call(obj);

4）Array.isArray(obj);  //不推荐   当Array.isArray()不可用时，可做如下兼容

 if (!Array.isArray) {
            Array.isArray = function (arg) {
                return Object.prototype.toString.call(arg) === '[object Array]';
            }
        }

　　

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

1）块元素（block element）

　　【1】address - 地址

　　【2】blockquote - 块引用

　　【3】center - 居中对齐块

　　【4】dir - 文本方向  dir="rtl"  文本从右到左 <bdo dir="rtl">该段落文字从右到左显示。</bdo>

　　【5】div - 常用块级元素，也是css layout的主要标签

　　【6】dl - 定义列表

　　【7】fieldset - form控制组

　　【8】form - 交互表单

　　【9】h1 - 大标题

　　【10】h2 - 副标题

　　【11】h3 - 3级标题

　　【12】h4 - 4级标题

　　【13】h5 - 5级标题

　　【14】h6 - 6级标题

　　【15】hr - 水平分割线

　　【16】menu - 菜单列表

　　【17】noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容）

　　【18】noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）

　　【19】ol - 排序表单

　　【20】p - 段落

　　【21】pre - 格式化文本

　　【22】table - 表格

　　【23】ul - 非排序列表

2）内联元素（inline element）

　　【1】a - 锚点

　　【2】abbr - 缩写 <abbr title="World Health Organization">WHO</abbr>

　　【3】acronym - 首字母缩写 <acronym title="as soon as possible">ASAP</acronym>

　　【4】b - 粗体（不推荐）

　　【5】bdo - <bdo dir="rtl">该段落文字从右到左显示。</bdo>

　　【6】big - 大字体

　　【7】br - 换行

　　【8】cite - 引用

　　【9】code - 计算机代码（在引用源码的时候需求）

　　【10】dfn - 定义字段

　　【11】em - 强调

　　【12】font - 字体设定

　　【13】i - 斜体

　　【14】img - 图片

　　【15】input - 输入框

　　【16】kbd - 定义键盘文本

　　【17】label - 表格标签

　　【18】q  - 短引用 ""号引用

　　【19】s - 删除中短线（不推荐）

　　【20】samp - 定义范例计算机代码

　　【21】select - 项目选择

　　【22】small - 小字体文本

　　【23】span - 常用内联容器，定义文本内区块

　　【24】strike - 中划线

　　【25】strong - 粗体强调

　　【26】sub - 下标

　　【27】sup - 上标

　　【28】textarea - 多行文本输入框

　　【29】tt - 电传文本

　　【30】u - 下划线

　　【31】var - 定义变量

3）可变元素

　　可变元素为根据上下文语境决定该元素为块元素或者内联元素。

　　【1】applet - java applet

　　【2】button - 按钮

　　【3】del - 删除文本

　　【4】iframe - inline frame

　　【5】ins - 插入的文本   <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

　　【6】map - 图片区块（map）

　　【7】object - object对象

　　【8】script - 客户端脚本

8.margin坍陷？

问题：当两个盒子在垂直方向上设置margin值时，会出现塌陷现象。

1.给父盒子添加border

2.给父盒子添加padding-top

3.给父盒子添加overflow:hidden

4.父盒子：position：fixed

5.父盒子：display:table

6.给子元素的前面添加一个伪元素

　　属性为：content: "";

　　display: table;

7：综合解决塌陷、重叠方案

.clearfix::before,
.clearfix::after {
　　content: "";
　　display: table;
　　clear: auto;
}

　　

9.说说BFC原理？

　　BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

　　因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不会影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。

　　同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。

　　避免marin重叠也是这样的一个道理。

10.写一下节点增删改？

　　1）document.createElement(标签名)

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

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

　　4）元素.cloneNode

　　5）父级.removeChild(已有子元素)

　　5）父级.replaceChild(新的元素节点，原有元素节点)

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

1）获取父节点

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

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

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

　

2）获取兄弟节点

// 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、冒泡、选择、二分法。

转自：http://www.itlike.com/article