web前端面试题（常问-概念篇）
1、http与https的的区别
- https协议需要到ca申请证书，一般免费证书较少，因而需要一定费用。
- http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。
http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。 - http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
2、前端世界的安全防护
- 跨站脚本攻击（XSS）
跨站脚本攻击其实说白了就是通过一些方式把JavaScript代码注入到用户的dom中并执行，从而实现一些盗取用户cookies获取监听用户输入的一些行为。
XSS攻击：转义和过滤用户提交的任何内容。 - CSRF（跨站点请求伪造）
用户登录了受信的网站，生成了对应的cookie，用户不退出登录受信网站的情况下，访问了钓鱼网站，钓鱼网站调用通过image或其他方式访问了受信网站的url，然后浏览器就会带上受信网站的cookie发出请求，模拟真实用户访问。CSRF攻击是攻击者利用用户身份操作用户账户的一种攻击方式
CSRF攻击：敏感接口添加token参数进行验证是最好的方法。 - 反射型XSS
点击劫持其实就是在一个页面中通过一些视觉的效果例如诱人的图片，或者一个透明的遮罩层盖在内容之上，引诱用户点击，触发对应的一些攻击行为。
防御点击劫持：X-Frame-Options HTTP响应头是用来给浏览器指示允许一个页面能否在、、中展现的标记。有三个可选的值。
3、 AMD、CMD、CommonJs、ES6
- AMD - 异步加载模块 （requirejs）
- CMD - 同步加载模块 ， 就进依赖，什么时候用什么时候引入（seajs）
- CommonJS规范- 是通过module.exports定义的，在前端浏览器里面并不支持module.exports,通过node.js后端使用的。Nodejs端是使用CommonJS规范的，前端浏览器一般使用AMD、CMD、ES6等定义模块化开发的
- ES6特性，模块化-export/import对模块进行导出导入的
4. js数据类型
字符串String、数字Number、布尔Boolean、数组Array、对象Object、Null、Undefined
5、javascript typeof返会的数据类型有哪些
object,string,undefined,number,function,boolean，对象，数组， null 都会返回object。
6、浏览器的同源策略和跨域
跨域是什么：实际上就是一个网站不能执行其他网站上的网址，是由浏览器同源策略造成的，是浏览器对js施加的安全限制所谓同源，实际上是指域名，协议，端口都相同。也就是说当，域名或者协议，或者端口不同的时候，就是跨域。
同源策略限制以下几种行为：
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 和 Js对象无法获得
- AJAX 请求不能发送
跨域的几种解决方法：
通过jsonp跨域，跨域资源共享（CORS），nginx代理跨域，nodejs中间件代理跨域，WebSocket协议跨域
7. js的垃圾回收机制
标记清除：这是js最常用的垃圾回收方法，当一个变量进入执行环境时，例如函数中声明一个变量，将其标记为进入环境，当变量离开环境时，（函数执行结束），标记为离开环境。
引用计数: 跟踪记录每个值被引用的次数，声明一个变量，并将引用 类型赋值给这个变量，则这个值的引用次数+1，当变量的值变成了另一个，则这个值的引用次数-1，当值的引用次数为0的时候，就回收。
8、闭包
是可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
经典闭包
function outer(){
var a = 1;
function inner(){
a++;
}
return inner
}
var inn = outer();
inn();
点击li返回index
<ul id="test">
<li>1li>
<li>2li>
<li>3li>
ul>
<script>
var oUL = document.getElementById("test");
var oLi = oUl.getElementByTagName("li");
for(var i=0;i<oLi.length;i++){
oLi[i].index = i;
oLi[i].onclick = (function(a){
return function(){
alert a;
}
})(i)
}
script>
9、JavaScript 本地对象、内置对象、宿主对象
1.本地对象(要NEW)
ECMA-262 把本地对象（native object）定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError、ActiveXObject(服务器方面)、Enumerator(集合遍历类)、RegExp（正则表达式）
由此可以看出，简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。
2.内置对象(不要NEW 直接引用——只有MATH GLOBAL)
类似于isNaN()、parseInt()和parseFloat()方法等，看起来都是函数，而实际上，它们都是Global对象的方法.内置对象也是本地对象。
3. 宿主对象
何为“宿主对象”？ ECMAScript中的“宿主”当然就是我们网页的运行环境，即“操作系统”和“浏览器”。所有非本地对象都是宿主对象（host object），即由 ECMAScript 实现的宿主环境提供的对象。
所有的BOM和DOM对象都是宿主对象。因为其对于不同的“宿主”环境所展示的内容不同。其实说白了就是，ECMAScript官方未定义的对象都属于宿主对象，因为其未定义的对象大多数是自己通过ECMAScript程序创建的对象。TML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）
10、js中的事件循环（event-loop）
javascript是单线程的语言，也就是说，同一个时间只能做一件事。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着但是，如果是网络请求就不合适。因为一个网络请求的资源什么时候返回是不可预知的，这种情况再排队等待就不明智了。所以就出现了同步和异步。
人们把javascript调控同步和异步任务的机制称为事件循环，即执行下面4点
1、所有同步任务都在主线程上执行，形成一个执行栈
2、主线程之外，还存在一个"消息队列"。只要异步操作执行完成，就到消息队列中排队
3、一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取消息队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行
4、主程不断重复上面的第三步
实际上因为异步任务之间并不相同，因此他们的执行优先级也有区别。不同的异步任务被分为两类：微任务（micro task）和宏任务（macro task）。
以下事件属于宏任务：
setInterval()
setTimeout()
以下事件属于微任务
new Promise()
new MutaionObserver()
在一个事件循环中，异步事件返回结果后会被放到一个任务队列中。然而，根据这个异步事件的类型，这个事件实际上会被对应的宏任务队列或者微任务队列中去。并且在当前执行栈为空的时候，主线程会 查看微任务队列是否有事件存在。如果不存在，那么再去宏任务队列中取出一个事件并把对应的回到加入当前执行栈；如果存在，则会依次执行队列中事件对应的回调，直到微任务队列为空，然后去宏任务队列中取出最前面的一个事件，把对应的回调加入当前执行栈…如此反复，进入循环。
我们只需记住当当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远在宏任务之前执行。
11、从输入URL到浏览器显示页面发生了什么
输入网址–>DNS解析 获取域名对应的ip地址–> 建立TCP链接(三次握手) --> 建立连接后浏览器向web服务器发送http请求–> 服务端处理返回数据–> 关闭TCP连接（四次挥手）–> 浏览器解析资源–>浏览器布局渲染
下一章详细复习js中的面向对象。