1.如何获取UA？ 通过JS获取浏览器UA（User Agent，用户代理）
<script> function whatBrowser() { //获取完整的浏览器名称 document.Browser.Name.value=navigator.appName; //获取浏览器的版本，一般不与实际的浏览器版本对应 document.Browser.Version.value=navigator.appVersion; //获取浏览器的名称。通常都是Mozilla，即使在非Mozilla的浏览器中也是如此 document.Browser.Code.value=navigator.appCodeName; //获取浏览器的用户代理字符串 document.Browser.Agent.value=navigator.userAgent; </script>使用navigator对象(Navigator 对象包含有关浏览器的信息) （1）Navigator.appCodeName,浏览器代码名的字符表示 （2）appName，浏览器的名称 （3）appVersion 返回brower平台和版本信息 （4）platform，返回运行浏览器的操作系统平台 （5）userAgent，返回客户机发送给服务器的useragent头部的值
PS：浏览器标识（UA）可以使得服务器能够识别客户使用的操作系统及版本、CPU 类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件，从而判断用户是使用电脑浏览还是手机浏览，让网页作出自动的适应。
2.渐进增强和优雅降级 渐进增强（progressive enhancement）： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级（graceful degradation）： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
3.简述一下src与href的区别 href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
4.CSS3有哪些新特性？ 在布局方面新增了flex布局， 在选择器方面新增了例如:first-of-type,nth-child等选择器， 在盒模型方面添加了box-sizing来改变盒模型， CSS3实现圆角（border-radius），阴影（box-shadow）， 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景 rgba 在CSS3中唯一引入的伪元素是::selection. 媒体查询，多栏布局 border-image
5.什么是Css Hack？ie6,7,8的hack分别是什么？ 针对不同的浏览器写不同的CSS code的过程，就是CSS hack。
#test{ width:300px; height:300px; /*firefox*/ background-color:red\9; /*all ie*/ /*ie8*/ +background-color:pink; /*ie7*/ _ /*ie6*/ } :root #test { background-color:purple\9; } /*ie9*/ @media all and (min-width:0px){ #test {} } /*opera*/ @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/6.Sass、LESS是什么？大家为什么要使用他们？ 他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。 例如Less是一种动态样式语言，将CSS赋予了动态语言的特性，如变量、继承、运算、函数。LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可以在服务端运行(借助 Node.js)。
为什么要使用它们：
结构清晰，便于扩展；可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动；可以轻松实现多重继承；完全兼容CSS代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。7.html常见兼容性问题？ （1）双边距BUG：块级元素float后设置横向的margin，ie6显示的margin比较大。 解决办法：_display:inline （2）像素问题：使用float引起的 解决办法：使用dislpay:inline -3px （3）超链接hover 点击后失效 解决办法：使用正确的书写顺序 link visited hover active （4）IE z-index问题 解决办法：给父级添加position:relative （5）min-height 最小高度 解决办法：！important （6）select 在ie6下遮盖 解决办法：使用iframe嵌套 （7）为什么没有办法定义1px左右的宽度容器 解决办法：IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px （8）IE5-8不支持opacity 解决办法：
.opacity { opacity: 0.4 filter: alpha(opacity=60); /* for IE5-7 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/ }（9）IE6不支持PNG透明背景 解决办法：IE6下使用gif图片,png24的图片在ie6浏览器上显示背景色，做成png8的
8.描述一个”reset”的CSS文件并如何使用它。知道normalize.css吗？ 因为浏览器的品种很多，每个浏览器的默认样式也是不同的，比如标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。 你可能会用Normalize来代替你的重置样式文件。它没有重置所有的样式风格，但仅提供了一套合理的默认样式值。既能让众多浏览器达到一致和合理，但又不扰乱其他的东西（如粗体的标题）。
9.一边宽度固定，另一边自适应？ 1）float 单一层浮动法 例如：左侧固定成100px; 则核心代码 左侧：width:100px;float:left; 右侧 width:auto;margin-left:100px; 2）定位 在固定元素上加入绝对定位，自适应元素设置成margin-left:固定元素的宽度 3）通过BFC规则实现
.left{float:left;width:200px;height:200px;} .right{width:100%;overflow:hidden;height:200px}10.数组和字符串中常用的方法 1）数组中常用的方法 Push()向数组的末尾增加一项 unshift()向数组开头增加一项 pop()删除数组的末尾项 shift()删除数组开头项 splice() 删除数组中的任意项 concat拼接 join() 把数组中的每一项 按照指定的分隔符拼接成字符串 reverse:倒序数组 返回值倒序数组 原有数组改变 sort:根据匿名函数进行冒泡排序 b-a倒序 a-b升序 兼容性不好： indexOf:返回获取项在数组中的索引 lastIndexOf:返回获取项在数组中出现的最后一次索引 forEach: 循环遍历数组 参数是一个匿名函数 默认返回为undefined map：循环遍历数组 参数是一个匿名函数 2）字符串中常用的方法 substring方法返回位于String对象中指定位置的子字符串。 substr方法返回一个从指定位置开始的指定长度的子字符串。 slice方法返回字符串的片段。 split将一个字符串分割为子字符串，然后将结果作为字符串数组返回。
11.原生JS的window.onload与Jquery 的 ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) ， (document).ready(function() {})， (document).ready(function())，(function() {})有什么不同？ 1)执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2)编写个数不同 window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个，$(document).ready()可以同时编写多个，并且都可以得到执行。 3)简化写法 window.onload没有简化写法$(document).ready(function(){})可以简写成$(function(){})。
12.px，em，rem的区别？ 1）px像素（Pixel），绝对单位。像素px是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI。 2）em是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。 3）rem是CSS3新增的一个相对单位（rootem，根em） ，使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
13.bootstrap框架中的栅格系统的本质是什么？以及bootstrap框架的优缺点？ bootstrap的栅格系统的本质是通过css3的媒体查询实现的。 优点: bootstrap框架便于快速布局，而且添加了更加灵活的栅格系统，增加了响应式 设计，来适配不同的设备。 缺点: 对ie678的兼容性可能不太好，而且bootstrap是依赖于jQuery，代码的体积大，会影响网页的加载速度，不适合移动端。
14.如何解决移动端的click事件的延迟响应？ 移动端click屏幕产生200-300 ms的延迟响应，往往会造成按钮点击延迟甚至是点击失效。 解决方案：
github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应。 2)zepto的touch模块，tap事件也是为了解决在click的延迟问题。15.怎样添加、移除、移动、复制、创建和查找节点？ 1）创建新节点
createDocumentFragment()//创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点2）添加、移除、替换、插入
appendChild() //添加 removeChild() //移除 replaceChild() //替换 insertBefore() //插入3）查找
getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id，唯一性16.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？ 伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
function log(){ var args = Array.prototype.slice.call(arguments); //为了使用unshift数组方法，将argument转化为真正的数组 args.unshift('(app)'); console.log.apply(console, args); };17.JavaScript中callee和caller的区别 1）callee 在函数的内部，有两个特殊的对象：arguments和this。其中arguments是一个类似数组的对象，包含着传入函数的所有参数。 虽然arguments的主要用途是保存函数参数，但这个对象有一个属性——callee，该属性是一个指针，指向拥有这个arguments对象的函数 所以callee的作用就是来指向当前对象 。 看一个阶层函数的例子就会明白他的用途了：
/* * 普通的递归阶层函数 */ function factorial(num){ if(num <= 1){ return 1; }else{ return num * factorial(num-1); } }上面的代码运行没有问题，但这个函数的执行与函数名factorial紧紧耦合在一起了，要是改变了函数名，里面的函数名也要随着改变，这样很不方便，所以我们用arguments.callee来消除这种耦合。
//使用callee属性的递归阶层函数 function factorial1(num){ if(num <= 1){ return 1; }else{ return num * arguments.callee(num-1); } }根据callee的定义，callee是arguments对象的一个属性，指向拥有arguments对象的函数，这个函数就是factorial1 (factorial1=arguments.callee)，他们指向的都是上面的递归函数。请记住函数的名字仅仅是一个包含指针的变量而已。
2）caller caller是函数对象的一个属性，该属性保存着调用当前函数的函数的引用（指向当前函数的直接父函数）。 返回一个对函数的引用，该函数调用了当前函数。
function a(){//父函数 b(); }; function b(){ console.info(b.caller); }; a(); //结果就是弹出函数a和内容可以看到函数b的属性caller调用当前函数b的函数引用a（就是指向当前函数b的父函数a）。
3）将callee和caller结合起来使用
function b(){ alert(b.caller); };从这个代码可以看出b函数中调用了b函数名，这样当函数名改变时就很不方便，我们需要替换里面的那个b 前面我们知道用什么方法可以指向当前对象,下面我们就来修改一下：
(function a(){ b(); })(); function b(){ alert(arguments.callee.caller);//用arguments.callee代替了b };18.前后端分离 简单的说，就是前端负责浏览器端（客户端）用户交互界面和逻辑等，显示数据；后端负责数据的处理和存储等，提供数据。
前后端代码分离的意义（页面渲染的意义） 1）彻底解放前端 前端不再需要向后台提供模板或是后台在前端html中嵌入后台代码，如：
<!--服务器端渲染 --> <select> <option value=''>--请选择所属业务--</option> {% for p in p_list %} <option value="{{ p }}">{{ p }}</option> {% endfor %} </select>这是前后端耦合的，可读性差。
<!--前端渲染 --> <template> <select id="rander"> <option value=''>--请选择所属业务--</option> <option v-for="list in lists" :value="list" v-text="list"></option> </select> </template> <script> export default { data: { return { lists: ['选项一', '选项二', '选项三', '选项四'] } }， ready: function () { this.$http({ url: '/demo/', method: 'POST', }) .then(function (response) { this.lists = response.data.lists // 获取服务器端数据并渲染 }) } } </script>上面是前端渲染的一段代码，前端通过AJAX调用后台接口，数据逻辑放在前端，由前端维护。 2）提高工作效率，分工更加明确 前后端分离的工作流程可以使前端只关注前端的事，后台只关心后台的活，两者开发可以同时进行，在后台还没有时间提供接口的时候，前端可以先将数据写死或者调用本地的json文件即可，页面的增加和路由的修改也不必再去麻烦后台，开发更加灵活。 3）局部性能提升 通过前端路由的配置，我们可以实现页面的按需加载，无需一开始加载首页便加载网站的所有的资源，服务器也不再需要解析前端页面，在页面交互及用户体验上有所提升。 4）降低维护成本 通过目前主流的前端MVC框架，我们可以非常快速的定位及发现问题的所在，客户端的问题不再需要后台人员参与及调试，代码重构及可维护性增强。
19.浏览器三种刷新方式所采取的缓存机制 对于大多数浏览器而言，有三种刷新方式： （1）F5 不允许浏览器直接使用本地缓存，因此Last-Modified能起作用，但Expires无效
（2）Ctrl+F5 强制刷新，因此缓存机制失效
（3）“转至”或地址栏里回车（输入URL按回车） 正常的访问，Last-Modified和Expires都有效。这种允许浏览器尽量少请求服务器，使用本地未过期的本地缓存。
20.css隐藏元素的5种方法 1）Opacity 该属性的意思是检索或设置对象的不透明度当他的透明度为0的时候,视觉上它是消失了,但是他依然占据着那个位置,并对网页的布局起作用。它也将响应用户交互。添加了该属性的元素,它的背景和元素内容也是会跟着变化的. 注意：该属性是兼容IE9以上的浏览器，IE8 以及更早的版本支持替代的 filter 属性，例如： filter:Alpha(opacity=50)。 2）Display 该属性才是真正意义上的隐藏元素,当元素的display属性为none时,该元素就会就会从视觉中消失,并且连盒模型也不生成，也不会在页面占据任何位置,不但如此,就连它的子元素也会一同从盒子模型中消失。给他和它的子元素添加的任何动画效果交互效果都会不起作用。jq中的show(),hide(),toggle()方法就是通过改变display的值来实现变化效果的。 3）Visibility 该属性类似opacity属性，该属性值为hidden的时候，元素将会隐藏，也会占据着自己的位置，并对网页的布局起作用，与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏。这个属性也能够实现动画效果，只要它的初始和结束状态不一样。这确保了 visibility 状态切换之间的过渡动画可以是时间平滑的
注意：
任何的版本的 Internet Explorer （包括 IE8）都不支持 “inherit” 和 “collapse” 属性值。如果一个元素的 visibility 被设置为 hidden，但是想要显示它的子元素，只要给想要显示的子元素添加visibility：visible;就可以了。尝试 hover 在隐藏元素上，不要 hover 在 p 标签里的数字上，你会发现你的鼠标光标没有变成手指头的样子。此时，你点击鼠标，你的 click 事件也不会被触发。而在 <div>标签里面的 <p>标签则依然可以捕获所有的鼠标事件。一旦你的鼠标移动到文字上，<div>本身变得可见并且事件注册也随之生效。4）Clip-path 该属性很少见，该属性是通过裁剪的方法实现隐藏的。被隐藏的内容依然占据着那个位置，它周围的元素的行为就如同它可见时一样。记住用户交互例如鼠标悬停或者点击在剪裁区域之外也不可能生效。此外，这个属性能够使用各种过渡动画来实现不同的效果。 注意：clip-path之所以没有很普及，是因为其浏览器兼容问题。在IE中是完全不支持的，所以，建议用的时候一定要加上内核前缀。 5）Position 该属性的意义就是把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控制方向（top,left,right,bottom），达到一定的值，离开当前可是页面。 注意：你得避免使用这个方法去隐藏任何可以获得焦点的元素，因为如果那么做，当用户让那个元素获得焦点时，会导致一个不可预料的焦点切换。这个方法在创建自定义复选框和单选按钮时经常被使用。
