面试题小集锦

闭包的理解

使用闭包主要是为了设计私有的方法和变量。 优点是可以避免全局变量的污染， 缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露

Cookie

第一：每个特定的域名下最多生成20个cookie

1. IE6或更低版本最多20个cookie

2. IE7和之后的版本最后可以有50个cookie。

3. Firefox最多50个cookie

4. chrome和Safari没有做硬性限制

第二：cookie的最大大约为4096字节，为了兼容性，一般不能超过4095字节

优点:极高的扩展性和可用性

1. 通过良好的编程，控制保存在cookie中的session对象的大小。

2. 通过加密和安全传输技术（SSL），减少cookie被破解的可能性。

3. 只在cookie中存放不敏感数据，即使被盗也不会有重大损失。

4. 控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

缺点:

1. Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2. 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3. 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

浏览器本地存储

sessionStorage

本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。 因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储

localStorage

用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的

web storage和cookie的区别

Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用 cookie需要前端开发者自己封装setCookie，getCookie

link 和@import 的区别是

1. link属于HTML标签，而@import是CSS提供的;

2. 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

3. import只在IE5以上才能识别，而link是HTML标签，无兼容问题;

4. link方式的样式的权重 高于@import的权重.

box-sizing属性

box-sizing属性主要用来控制元素的盒模型的解析模式。默认值是content-box

• content-box：让元素维持W3C的标准盒模型。元素的宽度/高度由border + padding + content的宽度/高度决定，设置width/height属性指的是content部分的宽/高

• border-box：让元素维持IE传统盒模型（IE6以下版本和IE6~7的怪异模式）。设置width/height属性指的是border + padding + content

BFC规范的理解

级格式化上下文，是CSS中的一个渲染机制，BFC就相当于一个盒子，内部的元素与外界的元素互不干扰。它不会影响外部的布局，外部的布局也不会影响到它.

创建BFC

• float的值不是none

• position 的值不是static或者relative

• display的值是inline-block,table-cell,flex,table-caption或者inline-flex

• overflow的值不是visible

BFC的特性

• 内部的BOX会在垂直方向上一个接一个的放置

• 于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关。

• 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此

• BFC的区域不会与float的元素区域重叠

• 计算BFC的高度时，浮动子元素也参与计算

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

BFC在布局中的应用

要阻止margin重叠，只要将俩个元素别放在一个BFC中即可

使得父元素包含子元素，常见的方式是为父元素设置overflow：hidden或者浮动父元素。根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题

与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式. 特点在于左右俩栏的宽度固定，中间栏可以根据浏览器宽度自适应

null和undefined的区别

undefined

undefined是一个表示"无"的原始值，转为数值时为NaN

• 变量被声明了，但没有赋值时，就等于undefined

• 调用函数时，应该提供的参数没有提供，该参数等于undefined

• 对象没有赋值的属性，该属性的值为undefined

• 函数没有返回值时，默认返回undefined

null

null是一个表示"无"的对象，转为数值时为0

• 作为函数的参数，表示该函数的参数不是对象

• 作为对象原型链的终点

documen.write和 innerHTML的区别

document.write只能重绘整个页面 innerHTML可以重绘页面的一部分

HTML5的离线存储

原理

HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

使用

• 在文档的 html 标签设置 manifest 属性，如 manifest="/offline.appcache"

• 在项目中新建 manifest 文件，manifest 文件的命名建议：xxx.appcache

• 在 web 服务器配置正确的 MIME-type，即 text/cache-manifest

css各种居中

水平居中

1. .parent{

2.    text-align: center;

3. }

4. .child{

5.    display: inline-block;

6. }

1. .child{

2.    display:table;

3.    margin: 0 auto;

4. }

1. .parent{

2.    position:relative;

3. }

4. .child{

5.    position:absolute;

6.    left:50%;

7.    transform: translateX(-50%);

8. }

垂直居中

• table-cell配合vertical-align

1. .parent{

2.    display: table-cell;

3.    vertical-align:middle;

4. }

absolute配合tranform

1. .parent{

2.    position:relative;

3. }

4. .child{

5.    position:absolute;

6.    top: 50%;

7.    transform: translateY(-50%);

8. }

水平+垂直居中

• inline-block配合text-align加上table-cell配合vertical-align

1. .parent{

2.    display: table-cell;

3.    vertical-align:middle;

4.    text-align:center;

5. }

6. .child{

7.    display: inline-block;

8. }

1. .parent{

2.    position: relative;

3. }

4. .child{

5.    position: absolute;

6.    left: 50%;

7.    top: 50%;

8.    transform: translate(-50%,-50%);

9. }

全能的flex

1. .parent{

2.    display: flex;

3.    justify-content: center;

4. }

1. .parent{

2.    display: flex;

3.    align-items: center;

4. }

1. .parent{

2.    display: flex;

3.    justify-content: center;

4.    align-items: center;

5. }

一、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。

1.使用flex

//html

<div class='box'><div class='left'></div> <div class='right'></div></div>

//css

.box {

    width: 400px;

    height: 100px;

    display: flex;

    flex-direction: row;

    align-items: center;

    border: 1px solid #c3c3c3;

}

.left {

    flex-basis：100px;

    -webkit-flex-basis: 100px;

    /* Safari 6.1+ */

    background-color: red;

    height: 100%;

}

.right {

    background-color: blue;

    flex-grow: 1;

}

2.浮动布局

<div id="left">Left sidebar</div>

<div id="content">Main Content</div>

<style type="text/css">

* {

    margin: 0;

    padding: 0;

}

#left {

    float: left;

    width: 220px;

    background-color: green;

}

#content {

    background-color: orange;

    margin-left: 220px;

    /*==等于左边栏宽度==*/

}

</style>

二、请写出一些前端性能优化的方式，越多越好

1.减少dom操作

2.部署前，图片压缩，代码压缩

3.优化js代码结构，减少冗余代码

4.减少http请求，合理设置 HTTP缓存

5.使用内容分发cdn加速

6.静态资源缓存

7.图片延迟加载

三、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

输入地址

1.浏览器查找域名的 IP 地址

2.这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…

3.浏览器向 web 服务器发送一个 HTTP 请求

4.服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）

5.浏览器跟踪重定向地址

6.服务器处理请求

7.服务器返回一个 HTTP 响应

8.浏览器显示 HTML

9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）

10.浏览器发送异步请求

四、请大概描述下页面访问cookie的限制条件

1. 跨域问题

2. 设置了HttpOnly

五、描述浏览器重绘和回流，哪些方法能够改善由于dom操作产生的回流

1.直接改变className，如果动态改变样式，则使用cssText

// 不好的写法

var left = 1;

var top = 1;

el.style.left = left + "px";

el.style.top = top + "px"; // 比较好的写法

el.className += " className1";

// 比较好的写法

el.style.cssText += ";

left: " + left + "px;

top: " + top + "px;";

2.让要操作的元素进行”离线处理”，处理完后一起更新

a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；

b) 使用display:none技术，只引发两次回流和重绘；

c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘

六、vue生命周期钩子

1.beforcreate

2.created

3.beformount

4.mounted

5.beforeUpdate

6.updated

7.actived

8.deatived

9.beforeDestroy

10.destroyed

七、js跨域请求的方式，能写几种是几种

1、通过jsonp跨域

2、通过修改document.domain来跨子域

3、使用window.name来进行跨域

4、使用HTML5中新引进的window.postMessage方法来跨域传送数据（ie 67 不支持）

5、CORS 需要服务器设置header ：Access-Control-Allow-Origin。

6、nginx反向代理 这个方法一般很少有人提及，但是他可以不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求

八、对前端工程化的理解

• 开发规范

• 模块化开发

• 组件化开发

• 组件仓库

• 性能优化

• 项目部署

• 开发流程

• 开发工具

九, js深度复制的方式

1.使用jq的$.extend(true, target, obj)

2.newobj = Object.create(sourceObj)，// 但是这个是有个问题就是 newobj的更改不会影响到 sourceobj但是 sourceobj的更改会影响到newObj

3.newobj = JSON.parse(JSON.stringify(sourceObj))

十、js设计模式

总体来说设计模式分为三大类：

• 创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。

• 结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。

• 行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模

十一、图片预览

<input type="file" name="file" onchange="showPreview(this)" />

<img id="portrait" src="" width="70" height="75">

function showPreview(source) {

  var file = source.files[0];

  if(window.FileReader) {

      var fr = new FileReader();

      fr.onloadend = function(e) {

        document.getElementById("portrait").src = e.target.result;

      };

      fr.readAsDataURL(file);

  }

}

十二、扁平化多维数组

1、老方法

var result = []

function unfold(arr){

     for(var i=0;i< arr.length;i++){

      if(typeof arr[i]=="object" && arr[i].length>1) {

       unfold(arr[i]);

     } else {        

       result.push(arr[i]);

     }

  }

}

var arr = [1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

unfold(arr)

2、使用tostring

var c=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

var b = c.toString().split(',')

3、使用es6的reduce函数

var arr=[1,3,4,5,[6,[0,1,5],9],[2,5,[1,5]],[5]];

const flatten = arr => arr.reduce((a, b) => a.concat(Array.isArray(b) ? flatten(b) : b), []);

var result = flatten(arr)

十三、iframe有那些缺点？

• iframe会阻塞主页面的Onload事件；

• 搜索引擎的检索程序无法解读这种页面，不利于SEO;

• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

• 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

十四。事件委托

参考地址

15.require与import的区别

第一、两者的加载方式不同，require是在运行时加载，而import是在编译时加载

第二、规范不同，require是CommonJS/AMD规范，import是ESMAScript6+规范

第三、require特点：社区方案，提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量，无法进行静态优化。

import特点：语言规格层面支持模块功能。支持编译时静态分析，便于JS引入宏和类型检验。动态绑定。