一.简述前端构建工具。fis3，Gulp，Grunt，Webpack
www.tuicool.com/articles/beU7736
答：
（1）类是任务管理工具（task runner）。通过声明和组合构建任务来进行整个网站的构建， 有自己的一套任务声明语法和任务实现接口。例如Grunt和Gulp，这两个都是插件式的架构。有大量的插件可用，缺点就在于做什么都只能用插件，没有就自己写一个。
（2）类是打包工具（package tool）。通过为每一类文件配置需要的处理方式，来实现整个站点的构建。如Webpack和FIS，这两个都是整个站点的整体构建解决方案。fis3的使用方法见blog.csdn.net/lululove19870526/article/details/49891253
（3）类是构建工具（build tool）。比如Make。
详细介绍：
Webpack：Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
webpack的优点如下:
1. webpack遵循commonJS的形式,但对AMD/CMD的支持也很全面,方便旧项目进行代码迁移。
2.能被模块化的不仅仅是JS,所有的静态资源,例如css,图片等都能模块化,即以require的方式引入。
3.开发便捷,能替代部分grunt/gulp的工作,比如打包、压缩混淆、图片转base64等。
Grunt：grunt是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：压缩文件，合并文件，简单语法检查。
Grunt的优点如下:
Grunt生态系统非常庞大，并且一直在增长。由于拥有数量庞大的插件可供选择，因此，你可以利用Grunt自动完成任何事，并且花费最少的代价。如果找不到你所需要的插件，那就自己动手创造一个Grunt插件，然后将其发布到npm上吧
Gulp：基于流的自动化构建工具。文件的压缩打包合并,是一个纯粹的工具,并不能将你的css等非js资源模块化,通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
构建快速
利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
插件高质
Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
易于学习
通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道
二.sass和less有什么区别?
答：
1.编译环境不一样
Sass的安装需要Ruby环境,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件,直接放到项目中。
2.变量符不一相,less是@,而scss是$,而且它们的作用域也不一样,less是块级作用域
3.输出设置,Less没有输出设置,sass供4种输出选项,nested,compact,compressed和expanded
nested:嵌套缩进的css代码(默认)
expanded:展开的多行css代码 compact:简洁格式的css代码 compressed:压缩后的css代码
4.sass支持条件语句,可以使用if{}else{},for{}循环等等,而less不行
5.引用外部css文件,sass引用外部文件必须以_开头,文件名如果以下划线_形状,sass会认为该文件是一个引用文件,不会将其编译为css文件。less引用外部文件和css中的@import没什么差异。
6.sass和less的工具库不同。sass有工具库Compass,简单说,sass和Compass的关系有点像Javascript和jQuery的关系,Compass是sass的工具库。在它的基础上,封装了一系列有用的模块和模板,补充强化了sass的功能。less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库,Bootstrap的样式文件部分源码就是采用less语法编写。
总结:不管是sass,还是less,都可以视为一种基于CSS之上的高级语言,其目的是使得CSS开发更灵活和更强大,sass的功能比less强大,基本可以说是一种真正的编程语言了,less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择less
三.sessionStorage和localstroage与cookie之间有什么关联和区别,cookie最大存放多少字节
答：
三者共同点:都是保存在浏览器端,且同源的。
1、cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存
2、存储大小限制也不同,cookie数据不能超过4k,sessionStorage和localStorage但比cookie大得多,可以达到5M
3、数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
4、作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面(即数据不共享);localStorage在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的(即数据共享)。
四.前端开发的优化问题
答：
（1） 减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2） 前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数
（3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
（4） 用setTimeout来避免页面失去响应
（5） 用hash-table来优化查找
（6） 当需要设置的样式很多时设置className而不是直接操作style
（7） 少用全局变量，缓存DOM节点查找的结果
（8） 缓存DOM节点查找的结果
（9） 避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)
（10） 图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
（11） 避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢
请说出三种减低页面加载时间的方法
1、压缩css、js文件
2、合并js、css文件，减少http请求
3、外部js、css文件放在最底下
4、减少dom操作，尽可能用变量替代不必要的dom操作
五.浏览器内核问题和兼容问题
关于浏览器内核
主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
JS引擎则：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
谈谈浏览器的内核，并且说一下什么是内核？
Trident (['traɪd(ə)nt])--IE，Gecko (['gekəʊ])--Firefox, Presto (['prestəʊ])--opera,webkit—谷歌和Safari
浏览器内核又可以分成两部分：渲染引擎和 JS 引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。JS 引擎则是解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果。
写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display
2.3像素问题 使用float引起的 使用dislpay:inline -3px
3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
4.Ie z-index问题 给父级添加position:relative
5.Png 透明 使用js代码 改
6.Min-height 最小高度 ！Important 解决’
7.select 在ie6下遮盖 使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
六.关于Ajax的面试题
ajax 兼容性 浏览器内核 请求之后的结果状态（状态码） 数据转换 json数据转换 对象 构造函数，原型链，闭包 缓存cooks。
1.什么是ajax：
异步javascript和XML,是指一种创建交互式网页应用的网页开发技术。通过后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
2.判断AJAX浏览器是否支持
例子解释：首先声明一个保存 XMLHttpRequest 对象的 xmlHttp 变量。
然后使用 XMLHttp=new XMLHttpRequest() 来创建此对象。这条语句针对 Firefox、Opera 以及 Safari 浏览器。假如失败，则尝试针对 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")，假如也不成功，则尝试针对 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")。
(3)请尽可能详尽的解释AJAX的工作原理和流程
答：第一步，创建ajax对象 var xxx = new XMLHttpRequest();
第二部，判断数据传输方式（GET / POST）
第三部，绑定请求地址，打开链接open。 即 open(method,url,async)；
第四步，发送send。即开始请求 send(string) string：仅用于 POST 请求
第五步，获取请求结果。
（4）xhr对象status ? readystate?readystate 0~4？说出几个http协议状态码? 200 201 302 304 400 404 500？
答：
1.
status是XMLHttpRequest对象的一个属性,表示响应的HTTP状态码。readyState是XMLHttpRequest对象的一个属性,用来标识当前XMLHttpRequest对象处于什么状态。
2.
0:未初始化状态:此时,已经创建了一个XMLHttpRequest对象
1: 准备发送状态:此时,已经调用了XMLHttpRequest对象的open方法,并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端
2:已经发送状态:此时,已经通过send方法把一个请求发送到服务器端,但是还没有收到一个响应
3:正在接收状态:此时,已经接收到HTTP响应头部信息,但是消息体部分还没有完全接收到
4:完成响应状态:此时,已经完成了HTTP响应的接收
3.
200:请求成功
201:请求成功并且服务器创建了新的资源
302:服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来响应以后的请求。
304:自从上次请求后,请求的网页未修改过。服务器返回此响应时,不会返回网页内容。
400:服务器不理解请求的语法
404:请求的资源(网页等)不存在
500: 内部服务器错误
（5）如何处理ajax请求之后后台传过来的数据
在上面我们能看见初步获取了 str，即获取到后台来的数据，有时候后台在数据发过来之前就进行过处理，我们 JS 获取到就是对象，这样就很简单省事了。但是有时候后台人员直接传过来的是字符串形式，这样就需要我们苦逼的前端去处理一下数据了。然后问题就来了我们该怎么去处理字符串，哪种处理方式更好；
目前js处理有两种：1、eval()。2、JSON.parse()；那么这两种有什么区别呢？
注意：eval()的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2个步骤，一次解析成js语句，一次执行）
（6）ajax缓存原理
ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
（7）ajax请求方式有几种
如果你指定了 dataType 选项，请确保服务器返回正确的 MIME 信息，(如 xml 返回"text/xml")。
实例：
保存数据到服务器，成功时显示信息。
$.ajax({
type:"post",
dataType:"html",
url:'/Resources/GetList.ashx',
data: dataurl,
success: function (data) {if(data !="") {
$("#pager").pager({ pagenumber: pagenumber, pagecount: data.split("$")[1], buttonClickCallback: PageClick });
$("#anhtml").html(data.split("$")[0]);
}
}
});
（8）ajax和jsonp
答：
相同点:都是请求一个url
不同点:ajax的核心是通过xmlHttpRequest获取内容
jsonp的核心则是动态添加