前端面试题汇总

WEB前端常见面试题汇总：（一）【一没有答案，后面的都有】.

CSS：

div居中方法（必问）

弹性盒模型用过吗，说一些使用细节（多次）

清除浮动的方法（多次）

undefined和null的区别

CSS怎么实现双边框

JS基础：

ES6的相关知识（必问）

ES6怎么改变this指向

promise原理以及怎么实现promise

数组循环方法用过哪些，他们有什么区别

Iterator 遍历器：http://es6.ruanyifeng.com/#docs/iterator

深浅拷贝听过吗？怎么实现：https://www.cnblogs.com/echolun/p/7889848.html

怎么判断对象一个对象是空的 （多次）： https://www.cnblogs.com/Smiled/p/7693844.html

生成器和async await的区别

说说你对箭头函数的理解（必问）

路由实现原理能解释一下吗？

具体详述一个轮播图的实现

ES6中class的实现原理

promise用过吗，解释一下

生成器怎么使用

纯函数是什么解释一下

async和await实现原理

import能放到if里面做判断吗？为什么，原理是啥

数组slice()用过吗，详细叙述一下使用方法

Vue：

Vue中data为什么是函数

Vue响应式原理（必问）

Vue中data中的数据是引用类型吗？

父子间传参的方式：（多次）https://www.cnblogs.com/suihang/p/11218012.html

React：

setState是异步的吗，为什么？（多次）

diff算法了解吗，谈一谈diff算法的实现（多次）

父子间传参的方式

setState后发生了什么

React生命周期钩子叙述一下流程（必问）

为什么AJAX请求在CompnentDidMount中发送

React中你用过哪些库来发送请求（axios，fetch等等）

Ant-Design组件（描述了一个页面，回答该使用哪些组件）

props和state的区别 （多次）

redux流程，具体描述一下

reducers是纯函数，那么在reducers能用alert和console吗？

父子组件的ComponentDidMount哪个先执行

怎么将redux和react组件连接起来，内部原理解释一下

其他：

http缓存了解吗？:https://yuchengkai.cn/docs/frontend/performance.html#%E7%BC%93%E5%AD%98

前端性能优化(必问)

Vue和React的区别（多次）

nodeJs用过吗，你都有什么了解

nodejs怎么连接连接数据库

你对数据库了解吗?

做查询的时候需要转义，怎么转义

WEB前端常见面试题汇总：（二）.

前端面试题的pdf版：

https://www.cnblogs.com/moqiutao/p/9872066.html

WEB前端常见面试题汇总：（三）

1，React和Vue的区别？
数据流： React是单项数据流(props从父组件到子组件单向，数据到视图单向)，Vue则是双向绑定(props在父子组件可以双向绑定，数据和视图双向绑定)
数据监听：React是在setState后比较数据引用的方式监听，Vue通过Es5的数据劫持方法defineProperty监听数据变化。
模板渲染：React是在js中通过原生的语法如if， map等方法动态渲染模板，Vue是通过指令来动态渲染模板。
2，为什么Vue数据频繁变化但dom只会更新一次？
考虑以下场景：

export default {
    data () {
        return {
            number: 0
        };
    },
    mounted () {
    var i = 0;
        for(var i = 0; i < 1000; i++) {
             this.number++;
        }
    }
}

当我们在一个同步任务中执行1000次number++操作，按照set -> 订阅器(dep) -> 订阅者(watcher) -> update的过程，dom应该会频繁更新，按理说这会很消耗性能，但实际上这个过程中dom只会更新一次。
这是因为vue的dom更新是一个异步操作，在数据更新后会首先被set钩子监听到，但是不会马上执行dom更新，而是在下一轮循环中执行更新。
具体实现是vue中实现了一个queue队列用于存放本次事件循环中的所有watcher更新，并且同一个watcher的更新只会被推入队列一次，并在本轮事件循环的微任务执行结束后执行此更新(UI Render阶段)，这就是dom只会更新一次的原因。

js中的异步任务会进入任务队列在下一轮的事件循环中执行，更多事件循环的内容请参考Javascript运行机制之Event Loop。
3，如何理解React Fiber?**
在React 16前，组件的更新是递归组件树的方式实现的，这个递归更新的过程是同步的，如果组件树过于庞大，实际更新过程会造成一些性能上的问题。

在React 16中发布了React Fiber，React Fiber是一种能将递归更新组件树的任务分片(time-slicing)执行的算法。它将组件树的更新拆分为多个子任务，在子任务的执行过程中，允许暂存当前进度然后执行其他优先级较高的任务，如在更新过程中用户产生了交互，那么会优先去处理用户交互，然后在回归更新任务继续执行。更多相关React Fiber

3，你要如何设计一个报警系统？
从以下角度出发设计

1、项目错误信息采集
组件生命周期运行错误
事件中的错误
2、代码埋点
在window.onerror、componentDidCatch、try catch等收集错误
在具体事件中埋点收集
3、上报时机
实时上传埋点数据，适用于对错误收集的实时性有一定要求项目
定时上传埋点数据。
考虑到服务器压力因素，合理使用以上两种上报方案，(答到服务器压力点)
4、上报数据
错误详细信息
用户的环境数据采集（方便测试还原）
5、错误信息存储
以时间命名的.log文件收集错误的详细信息
在数据库中存储错误的统计信息用于错误的可视化展示
服务器上的日志存储方案有兴趣可以自己了解，要是再讲一讲GFS和HDFS等分布式文件系统应该有加分。
6、错误的统计和报警
以图表的方式分类并按时间展示错误信息。
设定一个峰值为报警值并邮件通知管理员
关于峰值的设定需要考虑到应用使用的高峰段和低谷段，并且此峰值需要在各个场景下不断调优。
4，require和import的区别？
require是运行时调用，import是编译时调用(静态加载)
require是CommonJs规范，import是Es6的标准
require的一个模块就是一个文件，一个文件只能一个输出。import的一个文件可以有多个输出，并且在导入时可以选择部分导入。
import在编译时加载的特点使得其效率更高，也让静态分析和优化成为了可能。
webpack的tree shaking优化的基础就是import的静态导入。

5，require加载过程？
在node中使用require和exports时我们发现不管是在模块中还是在全局对象上，都不存在这两个方法，那么这两个方法是从何而来呢？

其实require方法本身是定义在Module中的，node在编译阶段将js文件包装在函数将其包装成模块：

(function (exports, require, module, __filename, __dirname) {
    file_content...
})

使用require加载模块的过程

根据require的参数计算绝对路径path
根据path查找是否有缓存var cache = Module._cache[path]，如果有缓存直接return
判断是否是内置模块如http，如果是直接return
生成模块实例，并缓存

     var module = new Module(path, parent);
      Module._cache[path] = module;
加载模块module.load(path);

7，你知道哪些前端安全问题，如何避免？
1、XSS攻击
反射型XSS
攻击步骤

攻击者构造出带有恶意代码的URL，诱导用户点击
服务端取出恶意代码并拼接在html中返回给浏览器
浏览器执行恶意代码，攻击者获取用户信息或冒充用户行为进行攻击
eg:

//恶意URL： http://xxx.com?key=

//服务端拼接

@{{params.key}}

//最终浏览器执行了此恶意代码获取到用户cookie

存储型XSS 攻击步骤

攻击者在商品评论页提交了恶意代码到目标数据库
用于访问该商品，服务端将商品评论从数据库取出并拼接在HTML中返回给浏览器
浏览器执行恶意代码，攻击者获取用户信息或冒充用户行为进行攻击
存储型XSS会将恶意代码保存在数据库中，会影响到所有使用的用户，相比于反射型XSS造成后果更严重。
DOM型XSS
DOM型XSS针对的主要是前端JS代码的漏洞
攻击步骤

攻击者提供带有恶意代码的URL，或者已经存在于数据库的恶意代码
浏览器从URL中获取恶意代码，或者从后端接口中获取到恶意代码
前端Javascript直接执行了这些恶意代码，造成DOM型XSS攻击
eg:

//恶意URL: http://xxx.com?key=document.cookie

//前端取出key字段并执行
evel(location.key)
防范存储和反射型XSS

前端渲染HTML，数据从接口中获取
在服务端拼接HTML时转义
防范DOM型XSS

小心innerHTML，outerHTML、eval等方法
小心setTimeout等能将字符串直接执行的方法
2、CSRF攻击
CSRF攻击实际上是利用了浏览器在向A域名发起请求前，会cookie列表中查询是否存在A域名的cookie。若是存在，则会将cookie添加至请求头中的机制。

这个机制不在乎请求具体是从哪个域名发出，它只是关心目标路由。
攻击步骤

用户访问正规网站WebA，浏览器保存下WebA为此用户设置的cookie
攻击者诱导用户点击不安全的网站WebB，此时从恶意网站WebB向WebA发送的请求中已经带上了用户的cookie
防范CSRF攻击

如果是Ajax跨域请求，在Access-Control-Allow-Origin中设置安全的域名，如WebA的域名。
如果是form表单请求，后端需要验证http的Referer字段，确保来源是安全的。
推荐使用token验证
3、自动化脚本攻击
羊毛党通常使用脚本攻击我们的线上活动，获得非法利润，他们通常使用刷API接口，自动刷单等方式获取利润。

通常来说，我们需要人机识别来防范脚本攻击，在web前端和服务端之间，添加一层风控系统，用于鉴别终端是否是机器。
image.png

但前端依然可以为羊毛党增加一些收入难度，想要薅羊毛先得过前端这一关(纸老虎)。

token校验，前端通过加密算法生成token，由风控系统校验token，攻击者必须破解js生成token的算法才能进行下一步。
代码压缩和混淆，这里根据实际情设置混淆级别，太高级别的混淆可能会影响JS本身的执行效率。高级混淆后的代码能防止攻击者断点调试
收集用户行为，记录用户进入页面中行为，加密后交给风控系统（风控系统通过大数据分析地理位置、ip地址、行为数据等进行人机识别分析）
tips：在前端的加密过程中，我们可以使用一些DOM、BOM，API，因为攻击者通过API攻击无法直接模拟出真实浏览器的环境，就算模拟也需要费一番功夫，加大攻击者破解算法难度。
HTTPS如何实现安全加密传输？
客户端发起请求，链接到服务器443端口
服务端的证书（自己制作或向三方机构申请），自己制作的证书需要客户端验证通过(用户点一下)。证书中包含了两个密钥，一个公钥一个私钥。
服务端将公钥返回到客户端，公钥中包含了证书颁发机构，证书过期时间等信息。
客户端收到公钥后，通过SSl/TSL层首先对公钥信息进行验证，如颁发机构过期时间等，如果发现异常，则会弹出一个警告框，提示证书存在问题。否则就生成一个随机值，然后使用公钥对此随机值进行加密，此加密信息只能通过服务端的私钥才能解密获取生成的随机值。
服务端获取到加密信息后使用私钥解密获得随机值，以后服务端和客户端的通讯都会使用此随机值进行加密，而这个时候，只有服务端和客户端才知道这个随机值(私钥)，服务端将要返回给客户端的数据通过随机值加密后返回。
客户端用之前生成的随机值解密服务段传过来的信息，于是获取了解密后的内容，整个过程第三方即使监听到了数据，也束手无策。
HTTP/2如果实现首部压缩？
HTTP/2通过维护静态字典和动态字典的方式来压缩首部

静态字典中包含了常见的头部名称或者头部名称和值的组合，如method：GET
动态字典中包含了每个请求特有的键值对，如自定义的头信息，针对每个TCP connection，都需要维护一份动态字典。
对于静态字典中匹配的头部名称或头部名称和值的组合，可以使用一个字符表示，如建立连接时：
method：GET 可以使用 1表示 （完全匹配）
cookeie: xxx 可以使用 2：xxx表示 （头部匹配）

同时将cookeie: xxx加入动态字典中，这样后续的整个cookie键值对都可以使用一个字符表示：
cookeie: xxx 可以使用 3表示 （加入到动态字典）

对于静态字典和动态字典中都不存在的内容，使用了哈夫曼（霍夫曼）编码来压缩体积。
更多相关内容请查看详情HTTP/2新特性

8，如何优化递归？
在Js代码执行时，会产生一个调用栈，执行某个函数时会将其压入栈，当它 return 后就会出栈。

而从某个函数调用另外一个函数时，就会为被调用的函数建立一个新的栈帧，并且进入这个栈帧，这个栈帧称为当前栈，而调用函数的栈帧称为调用栈。

function A(){
    return 1;
}
function B(){
    A();
}
function C(){
    B();
}

C();

Js执行栈中除了当前执行函数的栈帧，还保存着调用其函数的栈帧，在A释放前，执行栈中保存了A、B、C的栈帧，过长的调用栈帧在Js中会导致一个栈溢出的错误。
栈溢出的错误常常出现在递归中。

当递归层次较深影响到代码运行效率，甚至出错后我们应该如何优化呢？

function fibonacci (n) {
    if ( n <= 1 ) {
    return 1
    };

    return fibonacci(n - 1) + fibonacci(n - 2);
}
fibonacci(100) //卡死

1、尾递归优化
仔细观察上述调用过程C -> B -> A，行程此调用栈的主要原因是在A执行完成后会将执行权返回B，此时B才能释放，B释放完成后继续讲执行权返回C，最后C释放。

尾调用

尾调用（Tail Call）是函数式编程的一个重要概念，是指某个函数的最后一步是调用另一个函数。
尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，所以在C调用B后就会释放。
尾递归

函数调用自身，称为递归。如果尾调用自身，就称为尾递归。
将fibonacci函数使用尾递归优化

// 尾递归的优化往往是通过修改函数参数完成的

function fibonacci2 (n , ac1 = 1 , ac2 = 1) {
  if( n <= 1 ) {return ac2};

  return fibonacci2 (n - 1, ac2, ac1 + ac2);
}

9，面试官：尾调用是ES6的新功能吧，而且只有严格模式才能生效，因为在非严格模式下，可以通过function.caller追踪到调用栈，还有其他方法吗？
2、循环代替递归
使用蹦床函数将递归转为循环执行

```clike
function trampoline(fn) {
  while (fn && fn instanceof Function) {
    fn = fn();
  }
  return fn;
}

function fibonacci3 (n , ac1 = 1 , ac2 = 1) {
  if( n <= 1 ) {return ac2};
  return fibonacci3.bind(null, n - 1, ac2, ac1 + ac2);
}

trampoline(fibonacci3(100)) //573147844013817200000

10，面试官：嗯，这样确实可以避免栈溢出的错误问题，那你能尝试下不使用递归思想实现求斐波那契数列的和呢？
3、使用动态规划思想实现

function dp(n) {

    if(n <= 1){
    return 1
    }
    var a = 1;
    var b = 2;
    var temp = 0;

    for(let i = 2; i < n; i++){
    temp = a + b;
    a = b;
    b = temp;
    }

    return temp
}

WEB前端常见面试题汇总：（四）.

1.TCP（Transmission Control Protocol）
​ TCP传输控制协议，是一种面向连接的、可靠的、基于字节流的传输层通信协议。通讯双方建立一次tcp连接，需要经过三次步骤1、客户端发送syn包（syn=j）到服务器，并入SYN_SEND状态，等待服务器确认。2、服务器收入syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），既SYN+ACK包，此时服务器进入SYN_RECV状态。3、客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK（ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。（tcp在握手过程中并不携带数据，而是在三次握手完成之后才会进行数据传送）

SYN：synchronous 建立联机

ACK：acknowledgement 确认

SYN_SENT 请求连接

SYN_RECV 服务端被动打开后，接收到了客户端的SYN并且发送了ACK时的状态，再进一步接收到客户端的ACK就进入ESTABISHED状态。

UDP（User Datagram Protocol ）用户数据报协议

UDP是非面向连接协议，使用udp协议通讯并不需要建立连接，它只负责把数据尽可能发送出去，并不可靠，在接收端，UDP把每个消息断放入队列中，接收端程序从队列中读取数据。

TCP/IP是位于传输层上的一种协议，用于在网络中传输数据；

2.socket（嵌套字）
socket是一组实现TCP/UDP通信的接口API，既无论TCP还是UDP，通过对scoket的编程，都可以实现TCP/UCP通信。（TCP或UDP是一种计算机网络通信中在传输层的一种协议，可以简单的理解成是一种约定，只有履行合同才是实质性的行动，所以无论是TCP还是UDP要产生作用，都需要有实际性的行为去执行才能体现协议的作用。socket就是实现这种作用的方法）socket作为一个通信链的句柄，它包含了网络通信必备的5种信息。1、连接使用的协议。2、本地主机的IP地址。3、本地进程的协议端口。4、远地主机的IP地址。5、远地进程的协议端口。即可知道，socket包含了通信本方和对方的ip和端口以及连接使用的协议（TCP/UDP）。通信双方中的一方（客户端）通过socket对另一方（服务端）发起连接请求，服务端在网络上监听请求，当收到客户端发来的请求之后，根据socket里携带的信息，定位到客户端，就相应请求，把socket描述发给客户端，双方确认之后连接就建立了。

socket连接过程的三个步骤

1、服务器监听：服务器实时监控网络状态等待客户端发来的连接请求

2、客户端请求：客户端根据远程主机服务器的IP地址和协议端口向其发起连接请求

3、连接确认：服务端收到socket的连接请求之后，就响应请求，把服务端socket描述发给客户端，客户端收到后一但确认。则双方建立连接，进行数据交互。

socket连接一旦建立就保持连接状态，而HTTP连接则不一样，它基于tcp协议的短连接，也就是客户端发起请求，服务器响应请求之后，连接就会自动断开，不会一直保持。

3.URL（Uniform Resource Locator）统一资源定位符
URL是因特网上标准的资源地址

URL标准格式：协议类型：[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名？查询

URL的语法规则：scheme：//host/domain:port/path/filename (
1、scheme：定义因特网服务的类型，最常见的有http。
2、host：定义域主机（http默认主机是www）。
3、domain：定义因特网域名，比如www.baidu.com。
4、path：定义服务器上的路径。
5、filename：资源名)

scheme类型

1、http 超文本传输协议：以http：//开头的不同网页，不加密
2、https 安全超文本传输协议。安全网页，加密所有信息交换
3、ftp 文件传输协议 用于将文件下载或上传
4、file 本地文件

HTTP协议是应用层协议，基于TCP协议，用于包装数据，程序使用它进行通信，可以简单高效的处理通信中数据的传输和识别处理

4.HTTP请求发起和响应
在一个web程序开发中，一般都有前端和后端之分，前端负责向后端请求数据和展示页面，后端负责接收请求和做出响应发回给前端，他们之间的协作桥梁是API，而API其实就是一个URL，作为HTTP连接的一种具体载体。

用户输入URL到浏览器显现给用户页面经过了什么过程

用户输入URL，浏览器获取到URL
浏览器(应用层)进行DNS解析（直接输入IP地址既跳过该步骤）
根据解析出的IP地址+端口，浏览器（应用层）发起HTTP请求，请求中携带（请求头header（也可细分为请求行和请求头）、请求体body）
请求到达传输层，tcp协议为传输报文提供可靠的字节流传输服务，它通过三次握手等手段来保证传输过程中的安全可靠。通过对大块数据的分割成一个个报文段的方式提供给大量数据的便携传输。
到网络层， 网络层通过ARP寻址得到接收方的Mac地址，IP协议把在传输层被分割成一个个数据包传送接收方。
数据到达数据链路层，请求阶段完成
接收方在数据链路层收到数据包之后，层层传递到应用层，接收方应用程序就获得到请求报文。
接收方收到发送方的HTTP请求之后，进行请求文件资源（如HTML页面）的寻找并响应报文
发送方收到响应报文后，如果报文中的状态码表示请求成功，则接受返回的资源（如HTML文件），进行页面渲染。
（header：1、请求的方法（get、post、put…）2、协议（http、https、ftp、sftp…）3目标url（具体的请求路径已经文件名）4一些必要信息（缓存、cookie之类）。)

（body包含请求的内容）

5.页面渲染过程
https://img1.mukewang.com/5c2d835d00012d2514230720.jpg
内容解释

HTML parser：HTML解析器，其本质是将HTML文本解释成DOM tree。
CSS parser：CSS解析器，其本质是讲DOM中各元素对象加入样式信息
JavaScript引擎：专门处理JavaScript脚本的虚拟机，其本质是解析JS代码并且把逻辑（HTML和CSS的操作）应用到布局中，从而按程序要的要求呈现相应的结果
DOM tree:文档对象模型树，也就是浏览器通过HTMLparser解析HTML页面生成的HTML树状结构以及相应的接口。
render tree：渲染树，也就是浏览器引擎通过DOM Tree和CSS Rule Tree构建出来的一个树状结构，和dom tree不一样的是，它只有要最终呈现出来的内容，像或者带有display:none的节点是不存在render tree中的。
layout：也叫reflow 重排，渲染中的一种行为。当rendertree中任一节点的几何尺寸发生改变了，render tree都会重新布局。
repaint：重绘，渲染中的一种行为。render tree中任一元素样式属性（几何尺寸没改变）发生改变了，render tree都会重新画，比如字体颜色、背景等变化。
6.href与src
href (Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。（目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。）

src source（缩写），指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。

href与src的区别

1、请求资源类型不同：href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；

2、作用结果不同：href 用于在当前文档和引用资源之间确立联系；src 用于替换当前内容；

3、浏览器解析方式不同：当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

7.link和@import的区别
两者都是外部引用 CSS 的方式，但是存在一定的区别：

（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。

（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。

（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。

（4）link支持使用Javascript控制DOM改变样式；而@import不支持。

8.HTML
1.HTML5的新特性：

新的内容标签：

header
nav
content
footer
article
aside
更好的单元格体系:

音频、视频API:video audio
画布(Canvas) API
地理(Geolocation) API
网页存储(Web storage) API:localStorage,sessionStorage
拖拽释放(Drag and drop) API
2.Doctype作用？标准模式与兼容模式各有什么区别?

声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

3.行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

首先：CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，如div的display默认值为“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

（1）行内元素有：a b span img input select strong（强调的语气）
（2）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常见的空元素：

---

鲜为人知的是：
不同浏览器（版本）、HTML4（5）、CSS2等实际略有差异
4.介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎则：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

常见内核
Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
5、请描述一下 cookies，sessionStorage 和 localStorage 的区别？

cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源的http请求中携带（即使不需要），只会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
6.iframe有那些缺点？

iframe会阻塞主页面的Onload事件；
搜索引擎的检索程序无法解读这种页面，不利于SEO;
iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题
7.如何实现浏览器内多个标签页之间的通信?

WebSocket、SharedWorker；
也可以调用localstorge、cookies等本地存储方式；

localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；
注意quirks：Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常
8.HTML5的离线储存怎么使用，工作原理能不能解释一下？

在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。

如何使用：
1、页面头部像下面一样加入一个manifest的属性；
2、在cache.manifest文件的编写离线存储的资源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
3、在离线状态时，操作window.applicationCache进行需求实现。
9.CSS
1.CSS选择符有哪些？哪些属性可以继承？

• 1.id选择器（ # myid）
  2.类选择器（.myclassname）
  3.标签选择器（div, h1, p）
  4.相邻选择器（h1 + p）
  5.子选择器（ul > li）
  6.后代选择器（li a）
  7.通配符选择器（ * ）
  8.属性选择器（a[rel = “external”]）
  9.伪类选择器（a:hover, li:nth-child）

• 可继承的样式： font-size font-family color, UL LI DL DD DT;

• 不可继承的样式：border padding margin width height ;
  2.CSS优先级算法如何计算？

• 优先级就近原则，同权重情况下样式定义最近者为准;

• 载入样式以最后载入的定位为准;

优先级为:
同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
!important > id > class > tag
important 比 内联优先级高

3.CSS3新增伪类有那些？

举例：
p:first-of-type 选择属于其父元素的首个

元素的每个

元素。
p:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。
p:only-child 选择属于其父元素的唯一子元素的每个

元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。

:after          在元素之前添加内容,也可以用来做清除浮动。
:before         在元素之后添加内容
:enabled        
:disabled       控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

4.如何居中div？

1、水平居中：给div设置一个宽度，然后添加margin:0 auto属性

div{
width:200px;
margin:0 auto;
}

2、水平垂直居中一

确定容器的宽高 宽500 高 300 的层
设置层的外边距

div {
position: absolute; /* 相对定位或绝对定位均可 /
width:500px;
height:300px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; / 外边距为自身宽高的一半 /
background-color: pink; / 方便看效果 */

}

3、水平垂直居中二

未知容器的宽高，利用 transform 属性

div {
position: absolute; /* 相对定位或绝对定位均可 /
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; / 方便看效果 */

}

4、水平垂直居中三

利用 flex 布局
实际使用时应考虑兼容性

.container {
display: flex;
align-items: center; /* 垂直居中 /
justify-content: center; / 水平居中 */

}
.container div {
width: 100px;
height: 100px;
background-color: pink; /* 方便看效果 */
}

5.CSS3有哪些新特性？

新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
圆角 （border-radius:8px）
多列布局 （multi-column layout）
阴影和反射 （Shadow\Reflect）
文字特效 （text-shadow、）
文字渲染 （Text-decoration）
线性渐变 （gradient）
旋转 （transform）
缩放,定位,倾斜,动画,多背景
例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation:

6.请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？

一个用于页面布局的全新CSS3功能，Flexbox可以把列表放在同一个方向（从上到下排列，从左到右），并让列表能延伸到占用可用的空间。
较为复杂的布局还可以通过嵌套一个伸缩容器（flex container）来实现。
采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。
常规布局是基于块和内联流方向，而Flex布局是基于flex-flow流可以很方便的用来做局中，能对不同屏幕大小自适应。
在布局上有了比以前更加灵活的空间。

7.为什么要初始化CSS样式

• 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

• 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

最简单的初始化方法： * {padding: 0; margin: 0;} （强烈不建议）

淘宝的样式初始化代码：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

10.js
1.js的基本数据类型。

Undefined、Null、Boolean、Number、String、
ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 )

2.JavaScript原型，原型链 ? 有什么特点？

3.如何实现数组的随机排序？

方法一： `````javascript var arr = [1,2,3,4,5,6,7,8,9,10]; `` ``function randSort1(arr){ `` ``for(var i = 0,len = arr.length;i < len; i++ ){ `` ``var rand = parseInt(Math.random()*len); `` ``var temp = arr[rand]; `` ``arr[rand] = arr[i]; `` ``arr[i] = temp; `` ``} return arr;`` ``}`` ``console.log(randSort1(arr)); 方法二：`````javascript var arr = [1,2,3,4,5,6,7,8,9,10]; function randSort2(arr){ var mixedArray = []; while(arr.length > 0){ var randomIndex = parseInt(Math.random()*arr.length);`` ``mixedArray.push(arr[randomIndex]);`` ``arr.splice(randomIndex, 1);`` ``} return mixedArray;`` ``}`` ``console.log(randSort2(arr));`方法三：`````javascript var arr = [1,2,3,4,5,6,7,8,9,10];arr.sort(function(){ return Math.random() - 0.5;})console.log(arr);`

4.Javascript如何实现继承？

5.javascript创建对象的几种方式？

6.闭包

闭包是指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。

闭包的特性：
1.函数内再嵌套函数
2.内部函数可以引用外层的参数和变量
3.参数和变量不会被垃圾回收机制回收 // li节点的onclick事件都能正确的弹出当前被点击的li索引

    
 index = 0
    
 index = 1
    
 index = 2
    
 index = 3

7.Ajax 是什么? 如何创建一个Ajax？

ajax的全称：Asynchronous Javascript And XML。
异步传输+js+xml。
所谓异步，在这里简单地解释就是：向服务器发送请求的时候，我们不必等待结果，而是可以同时做其他的事情，等到有了结果它自己会根据设定进行后续操作，与此同时，页面是不会发生整页刷新的，提高了用户体验。

(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新