前端笔试面试题整理

HTML

1. XHTML和HTML有什么区别

   HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
   最主要的不同：

   • XHTML 元素必须被正确地嵌套。
   • XHTML 元素必须被关闭。
   • 标签名必须用小写字母。
   • XHTML 文档必须拥有根元素。

2. 前端页面有哪三层构成，分别是什么?作用是什么?

   • 结构层 Html
   • 表示层 CSS
   • 行为层 js;

3. 介绍一下你对浏览器内核的理解？

   主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

   • 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
   • JS引擎：解析和执行javascript来实现网页的动态效果。
     最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

4. 什么是语义化的HTML?

   • 直观的认识标签 对于搜索引擎的抓取有好处，用正确的标签做正确的事情。
   • html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析。
   • 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
   • 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
   • 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

5. HTML5 为什么只需要写 !DOCTYPE HTML？

   • HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
   • HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

6. Doctype作用？标准模式与兼容模式各有什么区别?

   • !DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
   • 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
     在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

7. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和HTML5？

   • HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。
     
     1. 绘画 canvas
     2. 用于媒介回放的 video 和 audio 元素
     3. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
     4. sessionStorage 的数据在浏览器关闭后自动删除
     5. 语意化更好的内容元素，比如 article、footer、header、nav、section
        表单控件，calendar、date、time、email、url、search
     6. 新的技术webworker, websockt, Geolocation
   • 移除的元素
     
     1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
     2. 对可用性产生负面影响的元素：frame，frameset，noframes；
   • 支持HTML5新标签：
     IE8/IE7/IE6支持通过document.createElement方法产生的标签，
     可以利用这一特性让这些浏览器支持HTML5新标签，
     浏览器支持新标签后，还需要添加标签默认的样式.
     当然也可以直接使用成熟的框架、比如html5shim;
     
   • 如何区分HTML5：
     DOCTYPE声明\新增的结构元素\功能元素

8. 请描述一下 cookies，sessionStorage 和 localStorage 的区别？

   • cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会。cookie数据大小不能超过4k。sessionStorage和localStorage 比cookie大得多，可以达到5M或更大。
   • sessionStorage和localStorage的存储空间更大；
     sessionStorage和localStorage有更多丰富易用的接口；
     sessionStorage和localStorage各自独立的存储空间；

9. 如何实现浏览器内多个标签页之间的通信?

   调用localstorge、cookies等本地存储方式

10. HTML5的离线储存怎么使用，工作原理能不能解释一下？

    • 在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
    • 原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
    • 如何使用：
      
      1. 页面头部像下面一样加入一个manifest的属性；
      2. 在cache.manifest文件的编写离线存储的资源；
      3. 在离线状态时，操作window.applicationCache进行需求实现。

11. 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？

    1. 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件。
       
       • 如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。
       • 如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
    2. 离线的情况下，浏览器就直接使用离线存储的资源。

12. iframe有那些缺点？

    • iframe会阻塞主页面的Onload事件；
    • 搜索引擎的检索程序无法解读这种页面，不利于SEO;
    • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
    • 使用iframe之前需要考虑这两个缺点。
      如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题。

13. 常见的浏览器内核有哪些？

    • Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
    • Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
    • Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
    • Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

14. Label的作用是什么？是怎么用的？

    • label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

    • <label for="Name">Number:</label>
      <input type="text" name="Name" id="Name"/>
      <label>Date:<input type="text" name="B"/></label>

15. HTML5的form如何关闭自动完成功能？

    给不想要提示的 form 或某个 input 设置为 autocomplete=off。

16. 如何实现浏览器内多个标签页之间的通信? (阿里)

    WebSocket、SharedWorker；
    也可以调用localstorge、cookies等本地存储方式；
    localstorge另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
    我们通过监听事件，控制它的值来进行页面信息通信；
    注意quirks:Safari 在无痕模式下设置localstorge值时会抛出 QuotaExceededError 的异常；

17. webSocket如何兼容低浏览器？(阿里)

    Adobe Flash Socket、ActiveX HTMLFile (IE)、基于multipart 编码发送XHR、基于长轮询的XHR

18. 页面可见性（Page Visibility API） 可以有哪些用途？

    通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;
    在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；

19. 如何在页面上实现一个圆形的可点击区域？

    1、map+area或者svg
    2、border-radius
    3、纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

20. 实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

    • <div style="height:1px;overflow:hidden;background:red"></div>

21. title与h1的区别、b与strong的区别、i与em的区别？

    • title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
    • strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：strong会重读，而B是展示强调内容。
    • i内容展示为斜体，em表示强调的文本；

CSS面试题

1. 简要说一下CSS的元素分类

   • 块级元素：div,p,h1,form,ul,li;
   • 行内元素 : span,a,label,input,img,strong,em;
   • 常见的空元素：br 、hr、img、input、link、meta
   • 鲜为人知的是：area、base、col、command、embed、keygen、 param、source、track、wbr

2. CSS隐藏元素的几种方法（至少说出三种）

   • Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
   • Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
   • Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
   • Position:不会影响布局，能让元素保持可以操作;
   • Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;

3. CSS清除浮动的几种方法（至少两种）

   • 使用带clear属性的空元素;使用CSS的overflow属性
   • 使用CSS的:after伪元素；使用邻接元素处理；

4. CSS居中（包括水平居中和垂直居中）

   内联元素居中方案

   • 水平居中设置：
     
     1. 行内元素
        设置 text-align:center；
     2. Flex布局
        设置display:flex;justify-content:center;(灵活运用,支持Chroime，Firefox，IE9+)
   • 垂直居中设置：
     
     1. 父元素高度确定的单行文本（内联元素）
        设置 height = line-height；
     2. 父元素高度确定的多行文本（内联元素）
        a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle；
        b:先设置 display:table-cell 再设置 vertical-align:middle；

   块级元素居中方案

   • 水平居中设置：
     
     1. 定宽块状元素
        设置 左右 margin 值为 auto；
     2. 不定宽块状元素
        a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，
        然后设置 margin 的值为 auto；
        b:给该元素设置 displa:inine 方法；
        c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；
   • 垂直居中设置：
     
     • 使用position:absolute（fixed）,设置left、top、margin-left、 - margin-top的属性;
     • 利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;
     • 利用display:table-cell属性使内容垂直居中;
     • 使用css3的新属性transform:translate(x,y)属性;
     • 使用:before元素;

5. 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

   1. 有两种: IE 盒子模型、W3C 盒子模型；
   2. 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)；
   3. 区 别: IE的content部分把 border 和 padding计算了进去;

6. CSS选择符有哪些？哪些属性可以继承？

   1. id选择器（ # myid）
   2. 类选择器（.myclassname）
   3. 标签选择器（div, h1, p）
   4. 相邻选择器（h1 + p）
   5. 子选择器（ul > li）
   6. 后代选择器（li a）
   7. 通配符选择器（ * ）
   8. 属性选择器（a[rel = “external”]）
   9. 伪类选择器（a:hover, li:nth-child）
      
      • 可继承的样式： font-size ,font-family color, UL LI DL DD DT;
      • 不可继承的样式：border ,padding, margin, width ,height ;

7. CSS优先级算法如何计算？

   • 优先级就近原则，同权重情况下样式定义最近者为准;
   • 载入样式以最后载入的定位为准;
   • 优先级为:
     !important > id > class > tag important 比 内联优先级高

8. CSS3新增伪类有那些？

   • 举例：
     p:first-of-type 选择属于其父元素的首个 p元素的每个 p元素。
     p:last-of-type 选择属于其父元素的最后 p 元素的每个 p 元素。
     p:only-of-type 选择属于其父元素唯一的 p 元素的每个 p 元素。
     p:only-child 选择属于其父元素的唯一子元素的每个 p 元素。
     p:nth-child(2) 选择属于其父元素的第二个子元素的每个 p 元素。
     :after 在元素之前添加内容,也可以用来做清除浮动。
     :before 在元素之后添加内容
     :enabled
     :disabled 控制表单控件的禁用状态。
     :checked 单选框或复选框被选中。

   • display有哪些值？说明他们的作用。
     block 块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
     none 缺省值。象行内元素类型一样显示。
     inline 行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
     inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
     list-item 象块类型元素一样显示，并添加样式列表标记。
     table 此元素会作为块级表格来显示。
     inherit 规定应该从父元素继承 display 属性的值。
     position的值relative和absolute定位原点是？
     absolute
     生成绝对定位的元素，相对于值不为 static的第一个父元素进行定位。
     fixed （老IE不支持）
     生成绝对定位的元素，相对于浏览器窗口进行定位。
     relative
     生成相对定位的元素，相对于其正常位置进行定位。
     static
     默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right z-index 声明）。
     inherit
     规定从父元素继承 position 属性的值。

9. 写出几种IE6 BUG的解决方法

   • 双边距BUG float引起的 使用display
   • 3像素问题 使用float引起的 使用dislpay:inline -3px
   • 超链接hover 点击后失效 使用正确的书写顺序 link visited hover active
   • Ie z-index问题 给父级添加position:relative
   • Png 透明 使用js代码 改
   • Min-height 最小高度 ！Important 解决’
   • select 在ie6下遮盖 使用iframe嵌套
   • 为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）

10. 对于SASS或是Less的了解程度？喜欢那个？

    • Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
    • LESS和Sass的主要不同就是他们的实现方式，LESSS是基于JavaScript，是在客户端处理的。Sass是基于Ruby的，然后是在服务器端处理的。

11. Bootstrap了解程度

    来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。特点，排版，插件的使用。

12. 页面导入样式时，使用link和@import有什么区别？

    • link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
      页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
    • import是CSS2.1 提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;

13. 介绍一下CSS的盒子模型？

    有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
    盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

14. CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

    id选择器（ # myid）类选择器（.myclassname）标签选择器（div, h1, p）相邻选择器（h1 + p）
    子选择器（ul > li）后代选择器（li a）通配符选择器（ * ）属性选择器（a[rel = “external”]）
    伪类选择器（a: hover, li: nth – child）可继承的样式： font-size font-family color, UL LI DL DD DT;不可继承的样式：border padding margin width height ;
    优先级就近原则，同权重情况下样式定义最近者为准;
    优先级为:
    !important > id > class > tag
    important 比 内联优先级高

15. CSS3有哪些新特性？

    新增各种CSS选择器（: not(.input)：所有class 不是“input”的节点），CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），多列布局（multi-column layout）
    对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
    transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜，动画，多背景 rgba

16. absolute的containing block(容器块)计算方式跟正常流有什么不同？

    • 无论属于哪种，都要先找到其祖先元素中最近的 position 值不为 static 的元素，然后再判断：
      
      1. 若此元素为 inline 元素，则 containing block 为能够包含这个元素生成的第一个和最后一个 inline box 的 padding box (除 margin, border 外的区域) 的最小矩形；
      2. 否则,则由这个祖先元素的 padding box 构成。
         如果都找不到，则为 initial containing block。
    • 补充：
      
      1. static(默认的)/relative：简单说就是它的父元素的内容框（即去掉padding的部分）
      2. absolute: 向上找最近的定位为absolute/relative的元素
      3. fixed: 它的containing block一律为根元素(html/body)，根元素也是initial containing block

17. CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？

    当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。

18. position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

19. 对BFC规范(块级格式化上下文：block formatting context)的理解？

    （W3C CSS 2.1 规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
    一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型。
    不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

20. 请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式

    • 浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
      正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
    • 其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
    • 其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动。

21. 浏览器是怎样解析CSS选择器的。

    从右到左。

22. 在网页中的应该使用奇数还是偶数的字体？为什么呢？

    偶数,ie6-13px-14px,google12px

23. 你对line-height是如何理解的？

    行高

24. 设置元素浮动后，该元素的display值是多少？

    自动变成display:block

25. 让页面里的字体变清晰，变细用CSS怎么做？

    -webkit-font-smoothing: antialiased.

26. font-style属性可以让它赋值为“oblique” oblique是什么意思？

    倾斜的字体样式

27. 如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）

    多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms ＝ 16.7ms

28. 有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

    外层box-sizing: border-box; 同时设置padding: 100px 0 0；
    内层100像素高的元素向上移动100像素，或使用absolute定位防止占据空间；
    另一个元素直接height: 100%

29. 什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）

    如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开。因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。同时这种方式不会将cookie传入Web Server，也减少了Web Server对cookie的处理分析环节，提高了webserver的http请求的解析速度。

30. 什么是CSS 预处理器 / 后处理器？

    • 预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，
      还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。
    • 后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的
      是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

JavaScript面试题

1. javascript的typeof返回哪些数据类型.

   object number function boolean underfind;

2. 例举3种强制类型转换和2种隐式类型转换?

   强制（parseInt,parseFloat,number）隐式（== – ===）；

3. 数组方法pop() push() unshift() shift()

   Push()尾部添加 pop()尾部删除
   Unshift()头部添加 shift()头部删除

4. ajax请求的时候get 和post方式的区别?

   一个在url后面 一个放在虚拟载体里面;有大小限制;安全问题;应用不同 一个是论坛等只需要请求的，一个是类似修改密码的;

5. call和apply的区别

   Object.call(this,obj1,obj2,obj3)
   Object.apply(this,arguments)

6. ajax请求时，如何解释json数据

   使用eval parse,鉴于安全性考虑 使用parse更靠谱;

7. 事件委托是什么

   让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

8. 闭包是什么，有什么特性，对页面有什么影响?

   闭包就是能够读取其他函数内部变量的函数。

9. 添加 删除 替换 插入到某个接点的方法

   obj.appendChidl()
   obj.innersetBefore
   obj.replaceChild
   obj.removeChild

10. 说一下什么是javascript的同源策略？

    一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

11. 编写一个b继承a的方法;

    function A(name){
    this.name = name;
    this.sayHello = function(){
    alert(this.name+” say Hello!”);
    };
    }
    function B(name,id){
    this.temp = A;
    this.temp(name); //相当于new A();
    delete this.temp;
    this.id = id;
    this.checkId = function(ID){
    alert(this.id==ID)
    };
    }

12. 如何阻止事件冒泡和默认事件

    function stopBubble(e)
    {
    if (e && e.stopPropagation)
    e.stopPropagation()
    else
    window.event.cancelBubble=true
    }
    return false

13. 下面程序执行后弹出什么样的结果?

    function fn() {
    this.a = 0;
    this.b = function() {
    alert(this.a)
    }
    }
    fn.prototype = {
    b: function() {
    this.a = 20;
    alert(this.a);
    },
    c: function() {
    this.a = 30;
    alert(this.a);
    }
    }
    var myfn = new fn();
    myfn.b();
    myfn.c();

14. 谈谈This对象的理解。

    this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。
    但是有一个总原则，那就是this指的是调用函数的那个对象。
    this一般情况下：是全局对象Global。 作为方法调用，那么this就是指这个对象

15. 下面程序的结果

    function fun(n,o) {
    console.log(o)
    return {
    fun:function(m){
    return fun(m,n);
    }
    };
    }
    var a = fun(0); a.fun(1); a.fun(2); a.fun(3);
    var b = fun(0).fun(1).fun(2).fun(3);
    var c = fun(0).fun(1); c.fun(2); c.fun(3);
    //答案：
    //a: undefined,0,0,0
    //b: undefined,0,1,2
    //c: undefined,0,1,1

16. 下面程序的输出结果

    var name = ‘World!’;
    (function () {
    if (typeof name === ‘undefined’) {
    var name = ‘Jack’;
    console.log(‘Goodbye ’ + name);
    } else {
    console.log(‘Hello ’ + name);
    }
    })();

17. 了解Node么？Node的使用场景都有哪些？

    高并发、聊天、实时消息推送

18. 介绍下你最常用的一款框架

    jquery,rn,angular等;

19. 对于前端自动化构建工具有了解吗？简单介绍一下

    Gulp,Grunt等；

20. 介绍一下你了解的后端语言以及掌握程度

其它

1. 对Node的优点和缺点提出了自己的看法？

   • 优点:
     因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
     因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。
     此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，
     因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
   • 缺点
     Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，
     而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

2. 你有哪些性能优化的方法？

   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。向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

3. http状态码有那些？分别代表是什么意思？

   100-199 用于指定客户端应相应的某些动作。
   200-299 用于表示请求成功。
   300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
   400-499 用于指出客户端的错误。400 1、语义有误，当前请求无法被服务器理解。401 当前请求需要用户验证 403 服务器已经理解请求，但是拒绝执行它。
   500-599 用于支持服务器错误。 503 – 服务不可用

4. 一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？（流程说的越详细越好）

   查找浏览器缓存
   DNS解析、查找该域名对应的IP地址、重定向（301）、发出第二个GET请求
   进行HTTP协议会话
   客户端发送报头(请求报头)
   文档开始下载
   文档树建立，根据标记请求所需指定MIME类型的文件
   文件显示
   浏览器这边做的工作大致分为以下几步：
   加载：根据请求的URL进行域名解析，向服务器发起请求，接收文件（HTML、JS、CSS、图象等）。
   解析：对加载到的资源（HTML、JS、CSS等）进行语法解析，建议相应的内部数据结构（比如HTML的DOM树，JS的（对象）属性表，CSS的样式规则等等）

5. 你常用的开发工具是什么，为什么？

   Sublime,Atom,Nodepad++;

6. 说说最近最流行的一些东西吧？常去哪些网站？

   Node.js、MVVM、React-native,Angular,Weex等
   CSDN,Segmentfault,博客园,掘金,Stackoverflow,伯乐在线等

7. 页面重构怎么操作？

   • 网站重构：在不改变外部行为的前提下，简化结构、添加可读性，而在网站前端保持一致的行为。
     也就是说是在不改变UI的情况下，对网站进行优化，在扩展的同时保持一致的UI。
   • 对于传统的网站来说重构通常是：
     表格(table)布局改为DIV+CSS
     使网站前端兼容于现代浏览器(针对于不合规范的CSS、如对IE6有效的)
     对于移动平台的优化
     针对于SEO进行优化
     深层次的网站重构应该考虑的方面
     减少代码间的耦合
     让代码保持弹性
     严格按规范编写代码
     设计可扩展的API
     代替旧有的框架、语言(如VB)
     增强用户体验
     通常来说对于速度的优化也包含在重构中
     压缩JS、CSS、image等前端资源(通常是由服务器来解决)
     程序的性能优化(如数据读写)
     采用CDN来加速资源加载
     对于JS DOM的优化
     HTTP服务器的文件缓存

8. 列举IE与其他浏览器不一样的特性？

   事件不同之处：

   • 触发事件的元素被认为是目标（target）。而在 IE 中，目标包含在 event 对象的 srcElement 属性；
   • 获取字符代码、如果按键代表一个字符（shift、ctrl、alt除外），IE 的 keyCode 会返回字符代码（Unicode），DOM 中按键的代码和字符是分离的，要获取字符代码，需要使用 charCode 属性；
   • 阻止某个事件的默认行为，IE 中阻止某个事件的默认行为，必须将 returnValue 属性设置为 false，Mozilla 中，需要调用 preventDefault() 方法；
   • 停止事件冒泡，IE 中阻止事件进一步冒泡，需要设置 cancelBubble 为 true，Mozzilla 中，需要调用 stopPropagation()；

9. 什么叫优雅降级和渐进增强？

   • 优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会针对旧版本的IE进行降级处理了,使之在旧式浏览器上以某种形式降级体验却不至于完全不能用。
     如：border-shadow
   • 渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新版本浏览器才支持的功能,向页面增加不影响基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
     如：默认使用flash上传，但如果浏览器支持 HTML5 的文件上传功能，则使用HTML5实现更好的体验；

10. 是否了解公钥加密和私钥加密。

    一般情况下是指私钥用于对数据进行签名，公钥用于对签名进行验证;
    HTTP网站在浏览器端用公钥加密敏感数据，然后在服务器端再用私钥解密。

11. WEB应用从服务器主动推送Data到客户端有那些方式？

    html5提供的Websocket
    不可见的iframe
    WebSocket通过Flash
    XHR长时间连接
    XHR Multipart Streaming
    script标签的长时间连接(可跨域)

12. 你有用过哪些前端性能优化的方法？

    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布局慢。
    9. 对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。
       向前端优化指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询），减少磁盘IO指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。