前端面试题（上）

收集了一部分面试的时候或者笔试的时候常常出现的题目，分享给你们。

下列代码输出什么？

for(var i=0;i<5;i++){
  (function(i){
    setTimeout(function(){
      console.log(i); 
    },i*1000)
  })(i)}
 
 // 0,1,2,3,4

下列代码输出什么？

for(var i=0;i<5;i++){
    setTimeout(function(){   
      console.log(i);
    },i*1000)
}// 5,5,5,5,5

Cookie、sessionStorage、localStorage的区别

这三者都是储存浏览器数据的，cookie相对没有后二者的储存大
而第二个比较特殊，他只会储存浏览器运行时的数据，关闭后数据将会被清零

JSONP原理

JSONP是一种非正式传输协议，该协议的一个要点就是容许用户传递一个callback
参数给服务端，而后服务端返回数据时会将这个callback参数做为函数名来包裹住J
SON数据，这样客户端就能够随意定制本身的函数来自动处理返回数据了
简称解决跨域问题

简述css盒模型

包括内容（content）、外边距（margin）、内边距（padding）、边框（border）

说说get和post请求的区别

二者均可以用来获取数据，但数据安全方面post比较好
get他会暴露请求参数，post则是加密请求的参数

说说类的建立、继承和闭包。

在es6未发布前，咱们是经过构造函数的方法实现类的概念，而实现继承咱们则需
要本身去封装一个函数，而在es6出来后，js就支持了类，继承也有了自带的方法来实现。
闭包的做用是为了防止全局变量的污染

一个页面从输入 URL 到页面加载完的过程当中都发生了什么事情？越详细越好(考察知识广度)

在浏览器输入url地址后
进行TCP三次握手
浏览器会向web服务器发送一个http请求
服务器会处理请求并返回一个http请求
最后浏览器会将这个请求内容显示到界面上

js中的原型是什么？

在JavaScript中，原型也是一个对象，经过原型能够实现对象的属性继承，
JavaScript的对象中都包含了一个”[[Prototype]]”内部属性
这个属性所对应的就是该对象的原型。

JS 中的原型链是什么？

由于每一个对象和原型都有原型，对象的原型指向原型对象，
而父的原型又指向父的父，这种原型层层链接起来的就构成了原型链。

你知道什么是CSS reset么？

设置浏览器css重置，统一默认样式

在js里call()与apply()有什么相同和不一样？

共同点均可以继承熟悉和方法，不一样点是call第二个参数是个形参，而apply第二个参数是数组

常见的http状态码都有哪些？

200/500/304/404

下面代码的输出值是：

alert(1&&2) //2

css position 中有哪些值可使用？

fixed/relative/absolute

经常使用浏览器及内核，对于渲染引擎与js解释引擎的区分

IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：之前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)

什么是CSS Hack?

针对不一样的浏览器写不一样的CSS，解决浏览器兼容性

iframe有那些缺点？

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

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

3. iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载。

4. 使用iframe以前须要考虑这两个缺点。若是须要使用iframe
   最好是经过javascript动态给iframe添加src属性值，这样能够绕开以上两个问题。

说出前端link和import的区别

1. link通常在html头部定义，做为html标签，同时除了引入css以外，

   还能够说明好比说rel="icon"

2. import通常定义在css内部，也就是通常写在文件头部，而且专门拿来链css的。

在项目开发完成以后，根据雅虎性能优化规则，须要对html，JS，CSS，图片须要作出怎样的处理？是否能够借助构建工具实现自动化？

尽可能减小http请求，将图片压缩或者打包在一块儿，将js文件尽可能放置在body尾部。
而构建工具可使用webpack。

在严格模式(‘use strict’)下进行 JavaScript 开发有神马好处？

1. 消除Javascript语法的一些不合理、不严谨之处，减小一些怪异行为;

2. 消除代码运行的一些不安全之处，保证代码运行的安全；

3. 提升编译器效率，增长运行速度；

4. 为将来新版本的Javascript作好铺垫。

写出javascript运行结果：

for(var i=0; i<10; i++){} 
alert(i);  //10,为何？仔细观察！

px和em以及rem的区别

px和em以及rem都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。
em得值不是固定的，而且em会继承父级元素的字体大小。
而rem和em很相似，区别在于rem是继承html的字体大小。

简述同步和异步的区别

同步是阻塞模式，异步是非阻塞模式。同步就是指一个进程在执行某个请求的时候，若该请求须要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不须要一直等下去，而是继续执行下面的操做，无论其余进程的状态。当有消息返回时系统会通知进程进行处理，这样能够提升执行的效率。