web前端面试题整理
---恢复内容开始---
1.浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
2.一次完整的HTTP事务是怎样的一个过程？
基本流程：
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http请求
d. 服务器端响应http请求，浏览器得到html代码
e. 浏览器解析html代码，并请求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
HTTP协议常见状态码的含义,TCP三次握手;基本排序算法?.
1. 消息（1字头）
2 成功（2字头）
3 重定向（3字头)
4 请求错误（4字)
5 服务器错误（5、6字头）
三次握手（three times handshake；three-way handshake）
即对每次发送的数据量是怎样跟踪进行协商使数据段的发送和接收同步，根据所接收到的数据量而确定的数据确认数及数据发送、接收完毕后何时撤消联系，并建立虚连接。
3.Ajax是什么?如何创建一个Ajax？
ajax的全称：Asynchronous Javascript And XML。异步传输+js+xml。
简单的说通过xmlhttprequest对象来向服务器发异步请求,从服务器获 得数据,然后用js来操作dom而更新页面,这是其中最关键的一步就是从服务器请求数据.
所用到的技术?
1.使用css+xhtml来表示
2.使用dom模型来交互和动态显示
3.使用xhttprequest来和服务器进行异步通信
4.使用JavaScript来绑定和调用
优点:页面是不会发生整页刷新的，提高了用户体验。
缺点:对搜索引擎不友好;跨域问题限制;可能造成请求次数的增加;
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新
4.jsonp的工作原理?
它是一种数据的调用方式,出于安全考虑,脚本不能访问非本域的内容,但是静态资源是不受域策略限制的,可以加载任意域的脚本样式,图片等静态资源,jsonp就是利用这种原理来实现跨域获取数据的.
5.闭包是什么?用什么特性?对页面有什么影响?
闭包:指有权访问另一个函数作用域中变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量,利用闭包可以突破作用链域，将函数内部的变量和方法传递到外部。闭包的特性： 1.函数内再嵌套函数 2.内部函数可以引用外层的参数和变量 3.参数和变量不会被垃圾回收机制回收闭包的好处? 1.希望一个变量长期驻扎在内存当中 2.避免全局变量的污染 3.私有成员的存在6.JavaScript原型，原型链 ? 有什么特点？
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个prototype又会有自己的prototype，于是就这样一直找下去，也就是我们平时所说的原型链的概念。
关系：instance.constructor.prototype = instance.__proto__
特点：JavaScript对象是通过引用来传递的，我们创建的每个新对象实体中并没有一份属于自己的原型副本，当我们修改原型时，与之相关的对象也会继承这一改变。
当我们需要一个属性时，JavaScript引擎会先看当前对象中是否有这个属性，如果没有的话，就会查找它的prototype对象是否有这个属性，如此递推下去，一致检索到Object内建对象。
1 function Func(){}
2 Func.prototype.name = "Xiaosong";
3 Func.prototype.getInfo = function() {
4 return this.name;
5 }
6 var person = new Func();
7 console.log(person.getInfo());
8 //"Xiaosong"
9 console.log(Func.prototype);
10 //Func { name = "Xiaosong", getInfo = function() }
7.哪些操作会造成内存泄漏？
内存泄漏是指任何对象在您不再拥有或需要它之后任然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量，如果一个对象的引用数量为0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
8.前端优化、提高性能的方法有哪些？
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数优化javascript性能。
（4） 当需要设置的样式很多时设置className而不是直接操作style。
（5） 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
（6） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部 上时间戳。
（8） 避免在页面的主体布局中使用table，table要等其的内容完全下载之后才会显示出来，显示比div+css布局慢。
对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。
9.js模拟new操作符的实现
1 function objectFactory(){ 2 var obj = {}; 3 //取得该方法的第一个参数(并删除第一个参数)，该参数是构造函数 4 var Constructor = [].shift.apply(arguments); 5 //将新对象的内部属性__proto__指向构造函数的原型，这样新对象就可以访问原型中的属性和方法 6 obj.__proto__ = Constructor.prototype; 7 //取得构造函数的返回值 8 var ret = Constructor.apply(obj, arguments); 9 //如果返回值是一个对象就返回该对象，否则返回构造函数的一个实例对象 10 return typeof ret === "object" ? ret : obj; 11 }
10.什么是Set对象
Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
1、add方法向Set实例中添加一个新值
2、has方法检查Set实例中是否存在特定的值
3、size属性获得Set实例的长度
4、clear方法删除 Set 中的数据
5、使用Set对象来删除数组中重复的元素
const numbers = [1, 2, 3, 4, 5, 6, 6, 7, 8, 8, 5];
const uniqueNums = [...new Set(numbers)]; // [1,2,3,4,5,6,7,8]
//WeakSet，
与 Set 类似，也是不重复的值的集合。但是 WeakSet 的成员只能是对象，而不能是其他类型的值
11.Vue的双向数据绑定原理是什么？
采用数据劫持结合发布者-订阅者模式的方式，
通过 Object.definePorperty() 来劫持各个属性的setter，getter，
在数据变动时发布消息给订阅者，触发相应的监听回调。
//JS中数据类型的判断（ typeof，instanceof，constructor，Object.prototype.toString.call()
12.typeof 对于原始类型来说，除了 null 都可以显示正确的类型
instanceof 可以精准判断引用数据类型（Array，Function，Object），而基本数据类型不能被instanceof精准判断。
instanceof运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性
其意思就是判断对象是否是某一数据类型（如Array）的实例，请重点关注一下是判断一个对象是否是数据类型的实例。
在这里字面量值，2， true ，'str'不是实例，所以判断值为false。
.constructor 创建一个对象，更改它的原型，constructor就会变得不可靠了
eg:console.log(([]).constructor === Array); // true
Object.prototype.toString.call()
使用 Object 对象的原型方法 toString ，使用 call 进行狸猫换太子，借用Object的 toString 方法
