前端面试宝典第三版

Front-End

前端开发工程师面试宝典！（本文部分有转载，不定期更新！）

前言（README.md）

本仓库是我整理的前端常见面试题，大部分由我整理，其中个别部分参考网上其他资料，感谢！   
本资料仅供大家学习参考使用！欢迎大家Star和提交issues。

NO.1 README
NO.2 简历经验分享
NO.3 angular常见问题
NO.4 前端面试宝典第一版
NO.5 前端笔记版本第二版
NO.6 前端笔记版本第三版
NO.7 前端笔记版本第四版
NO.8 vue常见问题

欢迎大家一起交流提高

HTML

HTML5 ，以及与html的差别

1. 语义化标签
2. 支持视频和音频
3. Doctype类型－简单，它能在每一个浏览器中正常工作即使是名声狼藉的IE6。
4. 离线存储－ localStorage和sessionStorage
5. 互动效果
a. canvas
b. 更多API支持更好的用户体验－拖拽、地图、利用Native
6. 丰富的表单控件如 calendar、date、time、email、url、search
7. 移动端－摆脱对平台依赖

doctype(文档类型) 的作用是什么

   现代浏览器包括不同的呈现模式，目的是既支持遵循标准的网页，也支持为老式浏览器而设计的网页。其中， Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks （包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。另外，注意Mozilla/Netscape 6新增了一种 Almost Standards （近似标准）模式，用于支持为标准的某个老版本而设计的网页。
     
   doctype声明指出阅读程序应该用什么规则集来解释文档中的标记。在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序，“规则”则是W3C所发布的一个文档类型定义（DTD）中包含的规则。

localStorage和sessionStorage

   localStorage有效期为永久，sessionStorage有效期为顶层窗口关闭前同源文档可以读取并修改localStorage数据，sessionStorage只允许同一个窗口下的文档访问，如通过iframe引入的同源文档。
     
  Storage对象通常被当做普通javascript对象使用：通过设置属性来存取字符串值，也可以通过setItem(key, value)设置，getItem(key)读取，removeItem(key)删除，clear()删除所有数据，length表示已存储的数据项数目，key(index)返回对应索引的key

应用程序存储和离线web应用

HTML5新增应用程序缓存，允许web应用将应用程序自身保存到用户浏览器中，用户离线状态也能访问。 1.为html元素设置manifest属性:，其中后缀名只是一个约定，真正识别方式是通过text/cache-manifest作为MIME类型。所以需要配置服务器保证设置正确 2.manifest文件首行为CACHE MANIFEST，其余就是要缓存的URL列表，每个一行，相对路径都相对于manifest文件的url。注释以#开头 3.url分为三种类型：CACHE:为默认类型。NETWORK：表示资源从不缓存。 FALLBACK:每行包含两个url，第二个URL是指需要加载和存储在缓存中的资源，第一个URL是一个前缀。任何匹配该前缀的URL都不会缓存，如果从网络中载入这样的URL失败的话，就会用第二个URL指定的缓存资源来替代。以下是一个文件例子：

简述一下你对HTML语义化的理解

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

CSS

盒子模型
标准盒子模型：盒子模型范围包括了marginorderpaddingcontent.但content(width)不包括其他部分。

 IE的盒子模型的content(width)包括了border和padding
 
 目前css3中属性box-sizing可以解决IE7以上的问题。
 
  重新定义盒子大小，解决盒模型在不同的浏览器中表现不一致的问题。
 
 box-sizing: content-box | border-box;
 content-box :  定义的width和height就直接是内容的宽度
 border-box: 内容的宽度是 width -边框的宽度－padding

CSS定位
- 定位机制
```
  CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
  普通流：元素的位置由它在HTML中的位置决定的。
  块级框：从上到下，一个接一个，垂直距离由框的垂直空白边决定的
  行内框：水平布置。可使用水平填充，边框可调节水平间距。
```
- position属性
  - 相对定位的盒子仍在标准流中，相对于它原本的位置，通过偏移（left、right）指定的距离，到达新的位置。它对父块没有任何影响。
  - 使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。

元素选择器，优先级及匹配原理
css匹配原理
从最右边的选择符开始向左进行匹配规则。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的元素，或者因为不匹配而退出。所以在使用less的时候要防止层叠过多。

 css权重
     通配选择符的权值 0,0,0,0
     标签的权值为 0,0,0,1
     类的权值为 0,0,1,0
     属性选择的权值为 0,0,1,1(0,0,1,0) 
     伪类选择的权值为 0,0,1,0
     伪对象选择的权值为 0,0,0,1
     ID的权值为 0,1,0,0
     important的权值为最高 1,0,0,0
     
 使用的规则也很简单，就是 选择器的权值加到一起，大的优先；如果权值相同，后定义的优先 
 
 从上面我们可以得出两个关键的因素：
     1.权值的大小跟选择器的类型和数量有关
     2.样式的优先级跟样式的定义顺序有关
 
 总结：比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数 ，至于各级别的优先级，大家应该已经很清楚了，就是：
 
 !important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符 通配符 > 继承
 
 ID选择器的效率是最高，而伪类选择器的效率则是最低

Css水平居中

基础布局对以后的开发很有作用。

 1. 自动空白边居中
     缺点：IE5/6不支持，需要hack，并需要对两个元素添加样式
     
     <body> <div id="wrapper"> </div></body>
     
     body{
         text-align: center; /*text-align:center让IE中的元素居中*/
         min- 760px; 
     }
     .wrapper{
         margin: 0 auto;
          720px;
         text-align: left;       /* 防止继承父类 */
     }
 
 2. 使用定位和负值空白边
     
     .wrapper{
         position: relative;
          720px;
         left: 50%;
         margin-left: -360px;
         //对应的垂直居中也好处理了
         top: 50%;
     }
     
 3. 神奇的弹性盒子 flex
 
     IE10+，Android2.1+ ,IOS safire3.2(添加-webkit-)兼容，所以目前移动端可以大量使用。
 
     body{
         display: flex;
         justify-content: center;  //水平居中
         //垂直居中
         align-items: center;   //当然需要设置容器的高度值
     }

BFC

 BFC(box , formatting context)，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个 BFC 中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的 margin 会发生折叠。它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。
 
 BFC布局规则
 
 1.内部的Box会在垂直方向，一个接一个地放置。
 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
 3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
 4.BFC的区域不会与float box重叠。(所以有左边宽度自适应)
 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
 6.计算BFC的高度时，浮动元素也参与计算
 
     <b>哪些元素会触发BFC</b>
     根元素
     float属性不为none
     position为absolute或fixed
     display为    inline-block, table-cell, table-caption, flex, inline-flex
     overflow不为visible
 
     <b>IE如何解决？Layout </b> 
         position:absolute;
         float: left|right;
         display: inline-block;
          value;
         height: value;
         zoom:value(非normal);  //通常zoom:1;


 具有以上优点，BFC实际中的作用
     
     自适应布局、清除浮动、防止margin重叠。

布局问题
响应式布局原理
检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度。
因为大屏幕的移动设备越来越普及。而自适应布局已经无法胜任各种浏览需求。响应式设计的目的是尽可能以最好的布局显示您的数据，以实现用户友好的 Web 页面。
现在CSS3有了个更为实用的 media query。而移动终端的浏览器（都是基于webkit内核的浏览器）基本已经完全支持了css3.他可以为你获取各种终端的数据。
栅栏系统（响应式）
响应式图片
浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片，如屏幕分辨率320*480，那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高，也就是高清屏，那么我们就得输出2倍分辨率的图形(宽:640px)；以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过 http://screensiz.es/phone查询。
解决方案：响应式图形的草案：新定义标签。
2）静态、自适应、流式、响应式四种网页布局有什么区别

自适应布局（Adaptive Layout）
自适应布局（Adaptive）的特点是分别为不同的屏幕分辨率定义布局。布局切换时页面元素发生改变，但在每个布局中，页面元素不随窗口大小的调整发生变化。
流式布局（Liquid Layout）
流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
响应式布局（Responsive Layout）
分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
把响应式布局看作是流式布局和自适应布局设计理念的融合

CSS3新特性

 选择器，文本、多列布局、渐变效果、css盒子、边框、背景、动画、转换

CSSHack
1.什么是CSS hack
由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

 2.方式
     1).一般是针对IE浏览器处理
             只在IE下生效
             <!--[if IE]>
             这段文字只在IE浏览器显示
             <![endif]-->
             
             只在IE6下生效
             <!--[if IE 6]>
             这段文字只在IE6浏览器显示
             <![endif]-->
             
             只在IE6以上版本生效
             <!--[if gte IE 6]>
             这段文字只在IE6以上(包括)版本IE浏览器显示
             <![endif]-->
             
             只在IE8上不生效
             <!--[if ! IE 8]>
             这段文字在非IE8浏览器显示
             <![endif]-->
             
             非IE浏览器生效
             <!--[if !IE]>
             这段文字只在非IE浏览器显示
             <![endif]-->

2).类内属性前缀法

hack	写法
*	*color
+	+color
-	-color
_	_color
#	#color
	color:red
9	color:red9
!important	color:blue !important;color:green;

link与@import的区别

1. link是HTML方式， @import是CSS方式
2. link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC
3. link可以通过rel="alternate stylesheet"指定候选样式
4. 浏览器对link支持早于@import，可以使用@import对老浏览器隐藏样式
5. @import必须在样式规则之前，可以在css文件中引用其他文件
总体来说：link优于@import
display 属性
主要把以下值区别开
```
display: inline | block | inline-block | inherit ;
```
1.inline
a) 元素显示方式："文本方式"，1个挨着1个，不独自占有1行；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。
b) 内嵌的元素也必须是内联元素：如,不能在里面嵌入
等块级元素
```
   c) 常用的标签有：<a>、<input>、<label>、<img>
```
2.block
```
   a) 元素显示方式：每个元素独自占有1行，相当于前后都带有换行符；
   b) 内嵌的元素可以是内联或块级元素；
   c) 常用的元素有：<h1>~<h6>、<div>、<hr>等等；
```
3.inline-block(IE8+)
对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格

display: none;与visibility: hidden;的区别
共性：都能隐藏元素
特性：

     1. display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
     2. display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility: hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式
     3. 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
     4. 读屏器不会读取display: none;元素内容；会读取visibility: hidden;元素内容

CSS reset

浏览器样式重置。HTML标签在浏览器中都有默认的样式，例如p标签有上下边距，strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别，例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。开发时浏览器的默认样式可能会给我们带来多浏览器兼容性问题，影响开发效率。现在很流行的解决方法是一开始就将浏览器的默认样式全部覆盖掉，这就是CSS reset。

YUI为我们提供了一个很好的CSS reset，可以直接下载使用，这段代码很成熟，推荐大家使用。YUI的CSS reset主要做了下面几点：
•   白色背景，黑色字体
•   margin和padding设为0
•   去掉table的边框
•   去掉列表样式（ol，ul，dl）
•   所有文字字号设为100%
•   font-style和font-weight设为normal
•   更好（但不完全）的表格字体继承
•   减小sup和sub对line-height的影响

瀑布流

实现方式：
1. 传统多列浮动
    *  各列固定宽度，并且左浮动；
    *  一列中的数据块为一组，列中的每个数据块依次排列即可；
    *  更多数据加载时，需要分别插入到不同的列上；
    优点:
        布局简单，应该说没啥特别的难点；
        不用明确知道数据块高度，当数据块中有图片时，就不需要指定图片高度。
    缺点:
        列数固定，扩展不易，当浏览器窗口大小变化时，只能固定的x列，如果要添加一列，很难调整数据块的排列；
        滚动加载更多数据时，还要指定插入到第几列中，还是不方便。

2. CSS3 定义,多列布局

        #container {
                -webkit-column-count: 5；
                /*-webkit-column-gap: 10px；
                -webkit-column-rule: 5px solid #333；
                -webkit-column- 210px；*/
        
                -moz-column-count: 5；
                /*-moz-column-gap: 20px；
                -moz-column-rule: 5px solid #333；
                -moz-column- 210px；*/
        
                column-count: 5；
                /*column-gap: 10px；
                column-rule: 5px solid #333；
                column- 210px；*/
            }

    column-count 为列数； column-gap 为每列间隔距离； column-rule 为间隔边线大小； column-width 为每列宽度； 当只设置 column-width 时，浏览器窗口小于一列宽度时，列中内容自动隐藏； 当只设置 column-count 时，平均计算每列宽度，列内内容超出则隐藏； 都设了 column-count 和column-width，浏览器会根据 count 计算宽度和 width 比较，取大的那个值作为每列宽度，然后当窗口缩小时，width 的值为每列最小宽度。

优点:
    直接 CSS 定义，最方便了；
    扩展方便，直接往容器里添加内容即可。
缺点:
    只有高级浏览器中才能使用；
    还有一个缺点，他的数据块排列是从上到下排列到一定高度后，再把剩余元素依次添加到下一列，这个本质上就不一样了；
    鉴于这两个主要缺点，注定了该方法只能局限于高端浏览器，而且，更适合于文字多栏排列。

3.绝对定位（最优方案）
    方便添加数据内容，窗口变化，列数/数据块会自动调整
    缺点:
        需要实现知道数据块高度，如果其中包含图片，需要知道图片高度；
        JS 动态计算数据块位置，当窗口缩放频繁，可能会狂耗性能。

什么是FOUC?如何避免

Flash Of Unstyled Content：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。同时加载css文件会阻塞文件下载，在FF下，添加<script> </script>(中间有空格)

解决方法：把样式表放到文档的head

渐进增强和优雅降级

渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

JavaScript

数据类型

 基础数据类型：null、undefined、boolean、string、number
 引用数据类型：Object 、Array 、Date、RegExp 、Function、自定义对象

undefined与null

 JavaScript 有两个表示‘空’的值，其中比较有用的是 undefined。
 
 undefined 的值
 
 undefined 是一个值为 undefined 的类型。
 
 这个语言也定义了一个全局变量，它的值是 undefined，这个变量也被称为 undefined。 但是这个变量不是一个常量，也不是一个关键字。这意味着它的值可以轻易被覆盖。
 
 ES5 提示: 在 ECMAScript 5 的严格模式下，undefined 不再是 可写的了。 但是它的名称仍然可以被隐藏，比如定义一个函数名为 undefined。
 下面的情况会返回 undefined 值：
 
 1.访问未修改的全局变量 undefined。
 2.由于没有定义 return 表达式的函数隐式返回。
 3.return 表达式没有显式的返回任何内容。
 4.访问不存在的属性。
 5.函数参数没有被显式的传递值。
 6.任何被设置为 undefined 值的变量。
 7.处理 undefined 值的改变
 
 由于全局变量 undefined 只是保存了 undefined 类型实际值的副本， 因此对它赋新值不会改变类型 undefined 的值。
 
 然而，为了方便其它变量和 undefined 做比较，我们需要事先获取类型 undefined 的值。
 
 为了避免可能对 undefined 值的改变，一个常用的技巧是使用一个传递到匿名包装器的额外参数。 在调用时，这个参数不会获取任何值。
 
 var undefined = 123;
 (function(something, foo, undefined) {
     // 局部作用域里的 undefined 变量重新获得了 `undefined` 值
 
 })('Hello World', 42);
 另外一种达到相同目的方法是在函数内使用变量声明。
 
 var undefined = 123;
 (function(something, foo) {
     var undefined;
     ...
 
 })('Hello World', 42);
 这里唯一的区别是，在压缩后并且函数内没有其它需要使用 var 声明变量的情况下，这个版本的代码会多出 4 个字节的代码。
 
 null 的用处
 
 JavaScript 中的 undefined 的使用场景类似于其它语言中的 null，实际上 JavaScript 中的 null 是另外一种数据类型。
 
 它在 JavaScript 内部有一些使用场景（比如声明原型链的终结 Foo.prototype = null），但是大多数情况下都可以使用 undefined 来代替。

继承

js继承方式

 1、原型链继承
 2、借用构造函数继承
 3、组合继承(原型+借用构造)
 4、原型式继承
 5、寄生式继承
 6、寄生组合式继承

闭包

 闭包是在某个作用域内定义的函数，它可以访问这个作用域内的所有变量。闭包作用域链通常包括三个部分：
 
 * 函数本身作用域。
 * 闭包定义时的作用域。
 * 全局作用域。
 
 闭包常见用途：
 
 * 创建特权方法用于访问控制
 * 事件处理程序及回调
 * 模块化代码，减少全局污染
 
 缺点：
     1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
     2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对像（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

模块化

 使用模块化的原因？恼人的命名冲突,烦琐的文件依赖
 通过匿名函数的形式来模仿模块化
 
 (function(){
     //块级作用域
 })( );
 
 对象形式
  var module1 = new Objec({
     name : 'xhay',
     m1 : function(){
         ...
     },
     m2 : function(){
         ...
     }
     return{
         m1:m1,
         m2:m2
     }
 });


 可扩展的写法
 var module1 = (function(mod){
     mod.m3 = function(){
         ...
     }
     return mod；
 })(window.module1||{});

CMD 与AMD & CommonJs
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
类似的还有 CommonJS Modules/2.0 规范，是 BravoJS 在推广过程中对模块定义的规范化产出。还有不少⋯⋯
这些规范的目的都是为了 JavaScript 的模块化开发，特别是在浏览器端的。
目前这些规范的实现都能达成浏览器端模块化开发的目的。

   commonJs是应用在NodeJs，是一种同步的模块机制.
     大致写法：
         var firstModule = require("firstModule");
         //your code...
         module.export = anotherModule 
    npm成为主流的JavaScript组件发布平台，也越来越多会依赖。

区别：

 1. 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
 
 2. CMD 推崇依赖就近，AMD 推崇依赖前置。看代码：
 
     // CMD
     define(function(require, exports, module) {
         var a = require('./a')
         a.doSomething()
         // 此处略去 100 行
         var b = require('./b') // 依赖可以就近书写
         b.doSomething()
         // ... 
     })
     
         // AMD 默认推荐的是
     define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
         a.doSomething()
         // 此处略去 100 行
         b.doSomething()
         ...
     }) 
 
 虽然 AMD 也支持 CMD 的写法，同时还支持将 require 作为依赖项传递，但 RequireJS 的作者默认是最喜欢上面的写法，也是官方文档里默认的模块定义写法。


 3. AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。

原型链

 在 javaScript 中，每个对象都有一个指向它的原型（prototype）对象的内部链接。这个原型对象又有自己的原型，直到某个对象的原型为 null 为止（也就是不再有原型指向），组成这条链的最后一环。这种一级一级的链结构就称为原型链（prototype chain）。

作用域与作用域链

简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。
```
 全局作用域
 （1）最外层函数和在最外层函数外面定义的变量拥有全局作用域。
 （2）所有末定义直接赋值的变量自动声明为拥有全局作用域
 （3）所有window对象的属性拥有全局作用域
 局部作用域
```
局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部。也为函数作用域。
```
 作用域链
```
函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链。
每个执行环境都有一个与之关联的变量对象，而每个函数都有自己的执行环境。
事件模型与实现机制

在传递到目标元素后，如果它有子元素并不会停还是会往下传。

事件模型：原生事件模型、标准事件模型、IE事件模型
1.基础事件处理
a).HTML标签的事件
b).javascript事件处理
element.onmouseover = function(){}
2.高级事件
事件传播：事件冒泡，事件捕获
标准事件：既能冒泡传播也能捕获传播
addEventListener("click",f,false/true);
//可以注册多个事件处理函数
```
   IE事件模型
       只支持事件冒泡传播
       attachEvent("onclick",f);
       同时IE的Event对象是window的全局对象，只有事件发生时可以访问。
```
事件冒泡是否想起了冒泡算法，即由最具体的元素（文档嵌套最深节点）接收，然后逐步上传至document。
事件捕获会由最先接收到事件的元素然后传向最里边（我们可以将元素想象成一个盒子装一个盒子，而不是一个积木堆积）

DOM事件流

DOM2级事件规定事件包括三个阶段：
① 事件捕获阶段
② 处于目标阶段
③ 事件冒泡阶段
停止冒泡，阻止事件的默认行为

不冒泡的事件：load, change, submit, focus, blur
跨域

同源策略

      所谓同源是指，域名，协议，端口相同。限制了一个源(origin)中加载文本或脚本与来自其它源(origin)中资源的交互方式。
      当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
      当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，
      即检查是否同源，只有和百度同源的脚本才会被执行。

JSONP

原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

        function handleResponse(response){
            alert("You’ re at IP address " + response.ip + ", which is in " +
             response.city + ", " + response.region_name);
        }
        
        var script = document.createElement("script");
        script.src = "http://freegeoip.net/json/?callback=handleResponse";
        document.body.insertBefore(script, document.body.firstChild);


        优点是兼容性好，简单易用，支持浏览器与服务器双向通信。
        缺点是只支持GET请求,JSONP 是从其他域中加载代码执行，安全不能保证。
    
*Window.name+iframe*

    原理：在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。
    跨域数据即由iframe的window.name从外域传递到本地域类似src属性，则绕过了跨域。

    限制：window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右，取决于浏览器， IE和firefox下可以大至32M左右
         
    优点：安全（可以销毁iframe，不被其他域frame js访问），比FIM更快

    总结：iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。巧妙地绕过了浏览器的跨域访问限制，但同时它又是安全操作。


    使用方式：
       a.com/app.html：应用页面。
       a.com/proxy.html：代理文件，一般是一个没有任何内容的html文件，需要和应用页面在同一域下。
       b.com/data.html：应用页面需要获取数据的页面，可称为数据页面。


*通过修改document.domain来跨子域*


*动态创建script*


    原理：浏览器并不禁止在页面中引用其他域的JS文件，并可以自由执行引入的JS文件中的function。可以方便地通过创建script节点的方法来实现完全跨域的通信。
        
    注意：ie只能通过script的readystatechange属性，其它浏览器是script的load事件。以下是部分判断script加载完毕的方法。

    js.onload = js.onreadystatechange = function() {        
        if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {                
            // callback在此处执行                 
            js.onload = js.onreadystatechange = null;       
        }   
    };
    
    扩展： a.使用了Ajax，如何解决跨域问题
    1. 通过修改document.domain和隐藏的IFrame来实现跨域请求。这种方案可能是最简单的一种跨域请求的方案，但是它同样是一种限制最大的方 案。首先，它只能实现在同一个顶级域名下的跨域请求；另外，当在一个页面中还包含有其它的IFrame时，可能还会产生安全性异常，拒绝访问。

    2.通过请求当前域 的代理，由服务器 代理去访问另一个域的资源。XMLHttpRequest通过请求本域内的一个服务器资源 ，将要访问的目标资源提供给服务器，交由服务器 去代理访问目标资源。这种方案，可以实现完全的跨域访问，但是开发，请求过程的消费会比较大。
    
    3.jQuery的ajax有jsonp这样的属性可以用来解决跨域的问题。
    
    4. 一个专门用来解决跨域问题的jQuery插件-jquery-jsonp。

内存泄漏

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。 setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。 闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

（1）、内存溢出：当你运行一个程序的时候，程序所需要的内存系统无法满足（系统的内存空间不够），造成内存溢出。
在IE下的JS编程中，以下的编程方式都会造成即使关闭IE也无法释放内存的问题给DOM对象添加的属性是一个对象的引用。
范例 1：
    var MyObject = {};
    document.getElementById('myDiv').myProp = MyObject;

解决方法：
    在window.onunload事件中写上: 
        document.getElementById('myDiv').myProp = null;

DOM对象与JS对象相互引用。

范例 2：
    function Encapsulator(element) {
        this.elementReference = element;
            element.myProp = this;
        }
        new Encapsulator(document.getElementById('myDiv'));
    }
解决方法：
    在onunload事件中写上: document.getElementById('myDiv').myProp = null;
给DOM对象用attachEvent绑定事件。

范例 3：
    function doClick() {}
    element.attachEvent("onclick", doClick);
解决方法：
    在onunload事件中写上: element.detachEvent('onclick', doClick);

范例4: 从外到内执行appendChild。这时即使调用removeChild也无法释放。范例：
    var parentDiv = document.createElement("div");
    var childDiv = document.createElement("div");
    document.body.appendChild(parentDiv);
    parentDiv.appendChild(childDiv);
解决方法：从内到外执行appendChild:
    var parentDiv = document.createElement("div");
    var childDiv = document.createElement("div");
    parentDiv.appendChild(childDiv);
    document.body.appendChild(parentDiv);

范例5：反复重写同一个属性会造成内存大量占用(但关闭IE后内存会被释放)。

for(i = 0; i < 5000; i++) {
    hostElement.text = "zchubyoyo";
}
这种方式相当于定义了5000个属性！

（2）.内存泄漏：当运行程序的时候，系统会按照所需分配给内存，当程序运行之后，这些内存空间没有办法被收回，就是造成了内存的泄漏。

常见的内存溢出--循环引用
function fun(){
   var element = document.getElementById(“id”);
   element.onclick = function(){
       alert(element.id);
    }
}
这个是我们在js中经常写的一个方法，它将导致内存的泄漏，你想到了吗？
解决方案：
function fun(){
    var element = document.getElementById(“id”);
    var id = element.id;
    element.onclick = function(){
            alert(id);
    }
    element = null;
}

Ajax

1.干掉了Back和History功能，浏览器后退机制的破坏
    解决方式：Gmail (通过创建或使用一个隐藏的IFRAME来重现页面上的变更),它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态
    缺点：开发成本是非常高的

2.安全问题 
    ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击

    优点
    1.页面无刷新，在页面内与服务器通信，给用户的体验非常好
    2.使用异步方式与服务器通信，不需要打断用户的操作
    3.前端和后端负载平衡。减轻服务器的负担，可以最大程度的减少冗余请求，和响应对服务器造成的负担。

    Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。

Ajax其核心有JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest（get与post方式）对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据

XMLHttpRequest是ajax的核心机制

ajax所包含的技术 
大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。 
1.使用CSS和XHTML来表示。 
2. 使用DOM模型来交互和动态显示。 
3.使用XMLHttpRequest来和服务器进行异步通信。 
4.使用javascript来绑定和调用。

NodeJs

适用场景：高并发、聊天、实时消息推送
优点：因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。此外，与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

缺点：Node是一个相对新的开源项目，所以不太稳定，它总是一直在变，而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子。

jQuery

jquery缺点
安全问题：由于JavaScript在客户端运行，可能被用于黑客目的。
冲突问题：有多个插件容易引起冲突。尤其是这些插件依赖相同事件或selector时最为明显。
插件兼容性。在最新版jQuery版本下，现有插件可能无法正常使用。
不能向后兼容。每一个新版本不能兼容早期的版本。这可能会影响到开发者已经编写好的代码或插件。
优点：
1.强大的选择器
许开发者使用从CSS1到CSS3几乎所有的选择器或自定义的选择器
2.DOM操作的封装
JQuery封装了大量常用的DOM操作，使开发者在编写DOM操作相关程序的时候能够得心应手
3.不污染顶级变量
JQuery只建立一个名为JQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权，绝对不会污染其他的对象。
4.链式操作方式
JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作，可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。
HTML DOM 操作

（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
querySelector(".class"); //返回文档中匹配指定的CSS选择器的第一元素
querySelectorAll(); //返回文档中匹配的CSS选择器的所有元素节点列表
（4）复制
importNode(node,deep)//如果为 true，还要递归复制node的所有子孙节点。

ajax过程

(1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象.

(2)创建一个新的`HTTP`请求,并指定该`HTTP`请求的方法、`URL`及验证信息.

(3)设置响应`HTTP`请求状态变化的函数.

(4)发送`HTTP`请求.

(5)获取异步调用返回的数据.

(6)使用JavaScript和DOM实现局部刷新.






var xmlHttp = new XMLHttpRequest();

xmlHttp.open('GET','demo.php','true');

xmlHttp.send()

xmlHttp.onreadystatechange = function(){

    if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

    }

}

MVC和MVVM的理解

MVC代表： backboneJs
    Controller/Presenter负责逻辑的处理，Model提供数据，View负 责显示。在MVC中View会从直接Model中读取数据。
    组成部分：
        View 传送指令到 Controller
        Controller 完成业务逻辑后，要求 Model 改变状态
        Model 将新的数据发送到 View，用户得到反馈
MVVM : AngularJs,Avalon
    是真正将页面与数据逻辑分离的模式，在开发方式上，它是真正将前台代码开发者（JS+HTML）与后台代码开发者分离的模式。
    组成部分Model、View、ViewModel：
        View：UI界面
        ViewModel：它是View的抽象，负责View与Model之间信息转换，将View的Command传送到Model；
        Model：数据访问层

ES6了解

语言语法 – 语法解析规则、关键字、语句、声明、运算符等。
类型 – 布尔型、数字、字符串、对象等。
原型和继承
内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。

浏览器访问页面发生了什么－详述

第一步，解析域名，找到主机IP

 （1）浏览器会缓存DNS一段时间，一般2-30分钟不等。如果有缓存，直接返回IP，否则下一步。
 
 （2）缓存中无法找到IP，浏览器会进行一个系统调用，查询hosts文件。如果找到，直接返回IP，否则下一步。（在计算机本地目录etc下有一个hosts文件，hosts文件中保存有域名与IP的对应解析，通常也可以修改hosts科学上网或破解软件。）
 
 （3）进行了（1）（2）本地查询无果，只能借助于网络。路由器一般都会有自己的DNS缓存，ISP服务商DNS缓存，这时一般都能够得到相应的IP。如果还是无果，只能借助于DNS递归解析了。
 
 （4）这时，ISP的DNS服务器就会开始从根域名服务器开始递归搜索，从.com顶级域名服务器，到baidu的域名服务器。
 
   到这里，浏览器就获得了IP。在DNS解析过程中，常常会解析出不同的IP。比如，电信的是一个IP，网通的是另一个IP。这是采取了智能DNS的结果，降低运营商间访问延时，在多个运营商设置主机房，就近访问主机。电信用户返回电信主机IP，网通用户返回网通主机IP。当然，劫持DNS，也可以屏蔽掉一部分网点的访问，某防火长城也加入了这一特性。
 
 第二部，浏览器与网站建立TCP连接
 
   浏览器利用IP直接与网站主机通信。浏览器发出TCP（SYN标志位为1）连接请求，主机返回TCP（SYN，ACK标志位均为1）应答报文，浏览器收到应答报文发现ACK标志位为1，表示连接请求确认。浏览器返回TCP（）确认报文，主机收到确认报文，三次握手，TCP链接建立完成。
 
 第三部分，浏览器发起GET请求
 
   浏览器向主机发起一个HTTP-GET方法报文请求。请求中包含访问的URL，也就是http://www.baidu.com/ ，还有User-Agent用户浏览器操作系统信息，编码等。值得一提的是Accep-Encoding和Cookies项。Accept-Encoding一般采用gzip，压缩之后传输html文件。Cookies如果是首次访问，会提示服务器建立用户缓存信息，如果不是，可以利用Cookies对应键值，找到相应缓存，缓存里面存放着用户名，密码和一些用户设置项。
 
 第四部分，显示页面或返回其他
 
   返回状态码200 OK，表示服务器可以相应请求，返回报文，由于在报头中Content-type为“text/html”，浏览器以HTML形式呈现，而不是下载文件。
 
   但是，对于大型网站存在多个主机站点，往往不会直接返回请求页面，而是重定向。返回的状态码就不是200 OK，而是301,302以3开头的重定向码，浏览器在获取了重定向响应后，在响应报文中Location项找到重定向地址，浏览器重新第一步访问即可。
 
   补充一点的就是，重定向是为了负载均衡或者导入流量，提高SEO排名。利用一个前端服务器接受请求，然后负载到不同的主机上，可以大大提高站点的业务并发处理能力；重定向也可将多个域名的访问，集中到一个站点；由于baidu.com，www.baidu.com会被搜索引擎认为是两个网站，照成每个的链接数都会减少从而降低排名，永久重定向会将两个地址关联起来，搜索引擎会认为是同一个网站，从而提高排名。

DNS解析过程详解

 1、在浏览器中输入www.example.com域名，操作系统会先检查自己本地的hosts文件是否有这个网址映射关系，如果有，就先调用这个IP地址映射，完成域名解析。 
 
 2、如果hosts里没有这个域名的映射，则查找本地DNS解析器缓存，是否有这个网址映射关系，如果有，直接返回，完成域名解析。 
 
 3、如果hosts与本地DNS解析器缓存都没有相应的网址映射关系，首先会找TCP/ip参数中设置的首选DNS服务器，在此我们叫它本地DNS服务器，此服务器收到查询时，如果要查询的域名，包含在本地配置区域资源中，则返回解析结果给客户机，完成域名解析，此解析具有权威性。 
 
 4、如果要查询的域名，不由本地DNS服务器区域解析，但该服务器已缓存了此网址映射关系，则调用这个IP地址映射，完成域名解析，此解析不具有权威性。
 
 5、如果本地DNS服务器本地区域文件与缓存解析都失效，则根据本地DNS服务器的设置（是否设置转发器）进行查询，如果未用转发模式，本地DNS就把请求发至13组根DNS，根DNS服务器收到请求后会判断这个域名(.com)是谁来授权管理，并会返回一个负责该顶级域名服务器的一个IP。本地DNS服务器收到IP信息后，将会联系负责.com域的这台服务器。这台负责.com域的服务器收到请求后，如果自己无法解析，它就会找一个管理.com域的下一级DNS服务器地址(example.com)给本地DNS服务器。当本地DNS服务器收到这个地址后，就会找example.com域服务器，重复上面的动作，进行查询，直至找到www.example.com主机。 
 
 6、如果用的是转发模式，此DNS服务器就会把请求转发至上一级DNS服务器，由上一级服务器进行解析，上一级服务器如果不能解析，或找根DNS或把转请求转至上上级，以此循环。不管是本地DNS服务器用是是转发，还是根提示，最后都是把结果返回给本地DNS服务器，由此DNS服务器再返回给客户机。

cookie及其操作

目前还是很多登陆的方式还是通过cookie的方式来处理的。

     cookie是web浏览器存储的少量数据，最早设计为服务器端使用，作为HTTP协议的扩展实现。cookie数据会自动在浏览器和服务器之间传输。
     通过读写cookie检测是否支持
     cookie属性有名，值，max-age，path, domain，secure；
     cookie默认有效期为浏览器会话，一旦用户关闭浏览器，数据就丢失，通过设置max-age=seconds属性告诉浏览器cookie有效期
     cookie作用域通过文档源和文档路径来确定，通过path和domain进行配置，web页面同目录或子目录文档都可访问
    通过cookie保存数据的方法为：为document.cookie设置一个符合目标的字符串如下
     读取document.cookie获得'; '分隔的字符串，key=value,解析得到结果。


     document.cookie = 'name=qiu; max-age=9999; path=/; domain=domain; secure';

     document.cookie = 'name=aaa; path=/; domain=domain; secure';
     // 要改变cookie的值，需要使用相同的名字、路径和域，新的值
     // 来设置cookie，同样的方法可以用来改变有效期
 
     // 设置max-age为0可以删除指定cookie
 
     //读取cookie，访问document.cookie返回键值对组成的字符串，
     //不同键值对之间用'; '分隔。通过解析获得需要的值

HTTP请求头了解

HTTP请求信息由3部分组成：
请求方法URI协议/版本
请求头(Request Header)
请求正文

date：请求时间
expires:过期时间

referer:关联连接
Referer可以记录访问的来源，统计访问量，可以用来防盗链。
利用Referer防止图片盗链
但是referer可以被修改
1.服务器端修改Referer，通过webClient，直接设置访问可以达到修改目的。
2.可以使用Fiddler修改Referer。
```
 If- Modified-Since：与客户端缓存相关，如果有，服务器返回304
```

TCP 三次握手与四次挥手

  三次握手：
 第一次握手：客户端发送syn包(syn=x)到服务器，并进入SYN_SEND状态，等待服务器确认；
 
 第二次握手：服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（syn=y），即SYN+ACK包，此时服务器进入SYN_RECV状态；
 
 第三次握手：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=y+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。
 
 握手过程中传送的包里不包含数据，三次握手完毕后，客户端与服务器才正式开始传送数据。理想状态下，TCP连接一旦建立，在通信双方中的任何一方主动关闭连接之前，TCP 连接都将被一直保持下去。
 
 四次握手
 
 与建立连接的“三次握手”类似，断开一个TCP连接则需要“四次握手”。
 
 第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不 会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可 以接受数据。
 
 第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。
 第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。
 第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。

CDN

   CDN的全称是Content Delivery Network，即内容分发网络。
   构建目的：是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。
     
   CDN（内容《对象》，分发《方法》，网络《载体》）
   内容：主要是静态资源，页面，图片，脚本等。
   分发：（主动）去源站抓取数据和提供用户上传的接口，（被动）缓存设备和软件 
   网络：基础（电信），专营（卫通）
   作用：本地cache加速，镜像服务，远程加速，宽带优化，集群抗攻击

 Cdn的技术原理

负载均衡分布，网络传送上利用缓存技术，就近获取资源。
减少网络中冗余数据的重复传输，使之最小化，将广域传输转为本地或就近访问。互联网上传递的内容，大部分为重复的Web/FTP数据。（Cache服务器具有缓存，优化数据链路性能，大部分为网页对象：（web Page object,html 等页面文件，图片文件。但要通过简单的认证））

   多台Cache加速服务器且分布在不同地域，需要通过有效地机制管理Cache网络，引导用户就近访问，全局负载均衡流量。复制到网络“边缘”，缩小“请求点”与”交互点“。

 内容发布网络(CDN)是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理４个要件。
 内容服务基于缓存服务器（代理缓存）,离用户只有“一跳”。而（城域网，域内网络快主要是Internet的内容高速缓存到本地，cache放在各POP点上）

 工作原理：CDN中间添加了Cache层，然后通过接管DNS来引导数据获得源服务器的数据。

常用的技术手段：高速缓存、镜像服务器。适用于(静态和准动态数据同步)

 全局负载均衡DNS通过一组预先定义好的策略，将当时最接近用户的节点地址提供给用户，使用户能够得到快速的服务。

 负载均衡设备负责每个节点中各个Cache的负载均衡，保证节点的工作效率；同时，负载均衡设备还负责收集节点与周围环境的信息，保持与全局负载DNS的通信，实现整个系统的负载均衡。

 　  高速缓存服务器（Cache）负责存储客户网站的大量信息，就像一个靠近用户的网站服务器一样响应本地用户的访问请求。

    简单地说，内容分发网络是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要求，而内容管理和全局的网络流量管理是CDN的核心所在。通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务。
 分发服务系统：最基本的工作单元就是Cache设备，cache（边缘cache）负责直接响应最终用户的访问请求，把缓存在本地的内容快速地提供给用户。同时cache还负责与源站点进行内容同步，把更新的内容以及本地没有的内容从源站点获取并保存在本地。Cache设备的数量、规模、总服务能力是衡量一个CDN系统服务能力的最基本的指标
 负载均衡系统：主要功能是负责对所有发起服务请求的用户进行访问调度，确定提供给用户的最终实际访问地址。两级调度体系分为全局负载均衡（GSLB）和本地负载均衡（SLB）。GSLB主要根据用户就近性原则，通过对每个服务节点进行“最优”判断，确定向用户提供服务的cache的物理位置。SLB主要负责节点内部的设备负载均衡。
 使用CDN的好处，优点

1. 不用担心自己网站访客，在任何时间，任何地点，任何网络运营商，都能快速打开网站。
2. 各种服务器虚拟主机带宽等采购成本，包括后期运维成本都会大大减少。
3. 给网站直接带来的好处就是：流量，咨询量，客户量，成单量，都会得到大幅度提升。

HTTPS

 HTTPS（全称：Hypertext Transfer Protocol over Secure Socket Layer），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容请看SSL。
 SSL的工作原理
     握手协议（Handshake protocol）
     记录协议（Record protocol）
     警报协议（Alert protocol）

HTT82.0

相比HTTP1.1优点集中在：
异步连接多路复用
HEAD 压缩
压缩HTTP头；
服务器推送流（即Server Push技术）；
优先级请求
请求/响应管线化；
网络七层模型

物理层：通过媒介传输比特,确定机械及电气规范（比特Bit）
数据链路层：将比特组装成帧和点到点的传递（帧Frame）
网络层：负责数据包从源到宿的传递和网际互连（包PackeT）
传输层：提供端到端的可靠报文传递和错误恢复（段Segment）
会话层：建立、管理和终止会话（会话协议数据单元SPDU）
表示层：对数据进行翻译、加密和压缩（表示协议数据单元PPDU）
应用层：允许访问OSI环境的手段（应用协议数据单元APDU）

域名收敛

  因为DNS使用UDP不稳定，随时可能丢在保证了域名收敛之后，同样域名下的资源请求将可以完全复用第一次的DNS建连和SSL握手，
    
  第一个就是减少 DNS 的请求，第二个就是缩短 DNS 解析路径。
    
  第一个就是做域名收敛的主要原因，相比于 PC 是对于域名的并发限制，无线上来说对并发的要求会弱很多（一般尽量是第一屏，后面使用懒加载）。
    
  第二个就是缩短解析路径，这里所说的缩短解析路径其实就说各级的缓存：本机的缓存，LocalDNS 的缓存，不过他们或多或少也不靠谱，尤其是运营商的 LocalDNS 给你劫持一下，篡改一下都是常有的事情，于是这个情况下，就有了 HttpDNS。
    
  HttpDNS 是为了解决移动端 DNS 解析请求而生的，顺便解决 DNS 劫持，合并请求和缓存结果进而提高解析质量。
    
  而在我们访问网络中 DNS解析过程（域名 --> 运营商（localDNS）—-> 权威DNS）

Web浏览器安全

XSS

 xss(cross site script)跨站脚本攻击通过属性”src”加载来执行代码在获取网站或者网站服务器的部分或者全部权限后，在网页文件中插入一段恶意代码，来实现攻击。
 
 1.DOM—based XSS

 该漏洞是基于文档对象模型Document Objeet Model,DOM)触发的。
 
 <div id="print"></div>
 
 //javascript
 var text = document.getElementById("print");
 print.innerHTML = text.value;
 
 解决方式：
 
 * 编码方式
 
     //将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐，google支持)
     (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
 
     //返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
     var output = temp.innerHTML;






 * 解码方式
 
     //将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
     temp.innerHTML = text;
 
     //返回这个元素的innerText(ie支持)或者textContent(火狐，google支持)，即得到经过HTML解码的字符串了。
     var output = temp.innerText || temp.textContent;


 2.存储型xss
 
 即通常我们在录入数据时通过闭合标签的方式把数据存储到数据库中，再次显示的时候触发。
 
 解决方式：转义标签

 如：
     <  转义为  &lt； 
     >  转义为  &gt；

3.反射型xss

仍然来自于直接的用户输入，是在通过url控制了页面的输出（处理：转义字符）根据浏览器去bypass各种过滤，易用性稍微差一些。但最后在页面中显示出来，并需要用户自己去点击链接才能触发XSS的是反射型XSS。
http://www.jpl.nasa.gov/about_JPL /maps.cfm?departure=lax%22 %3Cimg%20src=k.png%20onerror=alert(%22XSSed%20by%20sH%22)%20/%3E

总结：反射型xss和dom-xss都需要在url加入js代码才能够触发。

CSRF[cross site request fork]
```
 跨站请求伪造,攻击者盗用了你的身份，以你的名义发送恶意请求。
```
如何防御
一般网站有三种防御CSRF攻击的方案。
（1）验证token值。
在每个HTTP请求里附加一部分信息是一个防御CSRF攻击的很好的方法，因为这样可以判断请求是否已经授权。这个“验证token”应该不能轻易的被未登录的用户猜测出来。如果请求里面没有这个验证token或者token不能匹配的话，服务器应该拒绝这个请求。
（2）验证HTTP头的Referer。
大多数情况下，当浏览器发起一个HTTP请求，其中的Referer标识了请求是从哪里发起的。如果HTTP头里包含有Referer的时候，我们可以区分请求是同域下还是跨站发起的，因为Referer离标明了发起请求的URL。网站也可以通过判断有问题的请求是否是同域下发起的来防御CSRF攻击。
缺点：通常Referer会包含有一些敏感信息，可能会侵犯用户的隐私
（3）用XMLHttpRequest附加在header里。以上三种方法都在广泛使用，但是他们的效果都不是那么的令人满意。
在使用这种方法来防御CSRF攻击的时候，网站必须在所有的请求里使用XMLHttpRequest并附加一个自定义头（比如X-Requested-By），并且拒绝所有没有自定义头的的请求。例如，为了防御登陆CSRF的攻击，网站必须通过XMLHttpRequest的方式发送用户的身份验证信息到服务器。在我们的实验里，在服务器接收到的请求里面，大约有99.90–99.99%的请求是含有X-Requested-By头的，这表明这一方法适用于绝大多数的用户。

推荐：Origin字段
修改浏览器在发送POST请求的时候加上一个Origin字段，这个Origin字段主要是用来标识出最初请求是从哪里发起的。如果浏览器不能确定源在哪里，那么在发送的请求里面Origin字段的值就为空。
隐私上：方式比Referer更人性化，因为它尊重了用户的隐私
sql注入

sql注入是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串，欺骗服务器执行恶意的SQL命令。在某些表单中，用户输入的内容直接用来构造（或者影响）动态SQL命令，或作为存储过程的输入参数，这类表单特别容易受到SQL注入式攻击。

需要注意点：

1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。

2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
```
     3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
 
     4.不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。
```

前端工程化

前端构建工具目的就是为了开始开发。让前端开发真正达到工程化。先明确几个概念。

包管理工具（package manager）：npm、bower、jspm、cnpm 等等
模块加载器（module loader）: requirejs、modjs、seajs 等等，模块加载器又主要遵循AMD、CMD、Commonjs三种规范
打包工具（bundler）：r.js、browserify、webpack
版本仓库： gitlab,coding,github
构建工具：gulp(基于stream的构建工具)、grunt

gulp
```
  gulp.js 是一种基于流的，代码优于配置的新一代构建工具。gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务。是基于 Node.js 构建的,利用 Node.js 流的威力,你可以快速构建项目

gulp有很多插件－而这些插件就赋予了gulp众多的功能
```
编译Sass (gulp-ruby-sass)
Autoprefixer (gulp-autoprefixer)
缩小化(minify)CSS (gulp-minify-css)
JSHint (gulp-jshint)
拼接 (gulp-concat)
丑化(Uglify) (gulp-uglify)
图片压缩 (gulp-imagemin)
即时重整(LiveReload) (gulp-livereload)
清理档案 (gulp-clean)
图片快取，只有更改过得图片会进行压缩 (gulp-cache)
更动通知 (gulp-notify)

优点：
易于使用: 通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
构建快速:利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
插件高质:Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

webpack + tree-shaking

 Webpack 是德国开发者 Tobias Koppers 开发的模块加载器,在 Webpack 当中, 所有的资源都被当作是模块, js, css, 图片等等..因此, Webpack 当中 js 可以引用 css, css 中可以嵌入图片 dataUrl
 
 module: {
     loaders: [
       { test: /.coffee$/, loader: 'coffee-loader' },
       { test: /.js$/, loader: 'jsx-loader?harmony' } // loaders can take parameters as a querystring
     ]
 },
 
 我理解就是：你在开发的过程中，需要通过AMD、CMD的方式引入其他文件，这时就需要webpack把它们组装起来，里面可以引入图片或者css文件。这样的好处自然就非常明显了，减少请求。
 
 特点：
     a) 模块来源广泛，支持包括npm/bower等等的各种主流模块安装／依赖解决方案
     b) 模块规范支持全面，amd/cmd/commonjs/shimming等完全支持
     c) 浏览器端足迹小，移动端友好，却对热加载乃至热替换有很好的支持
     d) 插件机制完善，实现本身实现同样模块化，容易扩展，支持es6，react等
     e) 需要手写配置
 
 优点：
     a) 支持主流模块格式（AMD、CommonJs、globals）
     b) 能快速检测有错的模块
     c) 能操作css
     d) 有综合性强的缓存机制（如果你的项目涉及到CDN）
     e) 支持热部署（App 代码请求 HMR 运行时应用更新）
     f) 几乎能加载所有的东西（文档有加载的list）
 
 tree-shaking
     tree-shaking是RollUP中的一种技术，tree-shaking是下一代前端打包工具(PS:这一代斗没有用好，前端发展太快了)
     通过 tree-shaking 打包的结果只包括  /*实际用到的 exports*/。Three-shaking 的关键在于依赖 ES6 模块的静态结构。“静态结构”意味着在编译时他们是可分解的，而不用执行它们的任何代码，简单理解是ES6导出的部分如果在其它模块没有调用，rollup在输出时会直接把这部分作为死码删除。

github与Git

   Git是一个分布式的版本控制系统,版本控制工具。
   github是一个用git做版本控制的项目托管平台，用来存放仓库(repo)。
   作为前端，开源的世界很美好。

npm 官方网站

 NPM的全称是Node Package Manager ，是一个NodeJS包管理和分发工具。 我们在安装很多项目中，有使用npm install就是依赖了很多放在npm上的包。类似java中的jar包。
 
 NPM是基于couchdb的一个数据库，详细记录了每个包的信息，包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是：将开发者从繁琐的包管理工作（版本、依赖等）中解放出来，更加专注于功能的开发。
 
 基本信息：
 
     package.json：包描述信息，里面的dependencies参数就是 npm install 时需要安装的包。应用依赖模块会安装到当前模块的node_modules目录下。
     
     package版本：常见版本声明形式。

数据结构

作为学过java的童鞋，还是不要把数据结构忘了，记得某某人说过 “程序＝数据结构＋算法”，所以把他们放得这么靠后。特别像一些大公司特别注重这方面，前端和后端类似刀刃和刀背的关系！比如美团特别重视。
在复习的过程中，看得比较多的还是c语言和java版本的。

操作系统

堆和栈的区别

栈中存放的数据类型有：局部变量、操作数、动态连接、返回地址
堆同时也是被所有线程所共享。存放对象实例，几乎所有的对象实例以及数组都要在这里分配内存。被GC（Garbage Colletor）管理。可以自动回收
1、内存分配方面：
堆：一般由程序员分配释放，并指明大小。若程序员不释放，程序结束时可能由OS回收。和数据结构不同，分配方式是类似于链表。可能用到的关键字如下：new、malloc、delete、free等等。
栈：由编译器(Compiler)自动分配释放，存放函数的参数值，局部变量的值等。
2.系统响应
堆：操作系统有一个记录空闲内存地址的链表，当系统收到程序的申请时，会遍历该链表，寻找第一个空间大于所申请空间的堆结点，然后将该结点从空闲结点链表中删除，并将该结点的空间分配给程序
栈：只要栈的剩余空间大于所申请空间，系统将为程序提供内存，否则将报异常提示栈溢出。

3.大小限制
堆：是向高地址扩展的数据结构，由于链表，所以是不连续的内存区域。堆的大小受限于计算机系统中有效的虚拟内存。
栈：在Windows下, 栈是向低地址扩展的数据结构，是一块连续的内存的区域。WINDOWS下，栈的大小是固定的（是一个编译时就确定的常数），如果申请的空间超过栈的剩余空间时，将提示overflow。

4.效率方面
堆：是由new分配的内存，一般速度比较慢，而且容易产生内存碎片
栈：由系统自动分配，速度较快。但程序员是无法控制的。

5.存取效率
堆：char *s1 = "Hellow Word"；是在编译时就确定的；
栈：char s1[] = "Hellow Word"；是在运行时赋值的；用数组比用指针速度要快一些，因为指针在底层汇编中需要用edx寄存器中转一下，而数组在栈上直接读取。什么是死锁？其条件是什么？怎样避免死锁？

死锁的概念：在两个或多个并发进程中，如果每个进程持有某种资源而又都等待别的进程释放它或它们现在保持着的资源，在未改变这种状态之前都不能向前推进，称这一组进程产生了死锁。通俗地讲，就是两个或多个进程被无限期地阻塞、相互等待的一种状态。
死锁产生的原因主要是：？系统资源不足；？进程推进顺序非法。
产生死锁的必要条件：
（1）互斥（mutualexclusion），一个资源每次只能被一个进程使用；
（2）不可抢占（nopreemption），进程已获得的资源，在未使用完之前，不能强行剥夺；
（3）占有并等待（hold andwait），一个进程因请求资源而阻塞时，对已获得的资源保持不放；
（4）环形等待（circularwait），若干进程之间形成一种首尾相接的循环等待资源关系。
这四个条件是死锁的必要条件，只要系统发生死锁，这些条件必然成立，而只要上述条件之一不满足，就不会发生死锁。
死锁的解除与预防：理解了死锁的原因，尤其是产生死锁的四个必要条件，就可以最大可能地避免、预防和解除死锁。所以，在系统设计、进程调度等方面注意如何不让这四个必要条件成立，如何确定资源的合理分配算法，避免进程永久占据系统资源。此外，也要防止进程在处于等待状态的情况下占用资源。因此，对资源的分配要给予合理的规划。
死锁的处理策略：鸵鸟策略、预防策略、避免策略、检测与恢复策略。

你能描述一下当你制作一个网页的工作流程吗？

内容分析：分清展现在网络中内容的层次和逻辑关系
结构设计：写出合理的html结构代码
布局设计：使用html+css进行布局
样式设计：首先要使用reset.css
交互设计：鼠标特效。行为设计：js代码，ajax页面行为和从服务器获取数据。最后测试兼容性。优化性能
为什么利用多个域名来提供网站资源会更有效？
- 浏览器同一时间可以从一个域名下载多少资源？
- 三个最主流的原因:
  1. CDN缓存更方便
  2. 突破浏览器并发限制
  3. Cookieless, 节省带宽，尤其是上行带宽一般比下行要慢。。。
    还有另外两个非常规原因:
  4. 对于UGC的内容和主站隔离，防止不必要的安全问题( 上传js窃取主站cookie之类的) 。
    正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。
  5. 数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事. ^_ 这个可能被用的不多。
    PS: 关于Cookie的问题，带宽是次要的，安全隔离才是主要的。
- 关于多域名，也不是越多越好，虽然服务器端可以做泛解释，浏览器做dns解释也是耗时间的，而且太多域名，如果要走 https的话，还有要多买证书和部署的问题，^_。
衡量网页性能的指标
- DNS解析时间
- TCP链接时间
- HTTP重定向时间
- 首字节加载时间
- HTML内容时间
- 整个页面对象加载时间
- 具体说明
  - DNS解析时间
    - DNS查找的时间就是将域名翻译成具体IP的时间，大多人数认为，无论DNS是否工作，都不是件简单的事情。
    - 在这个过程中，你可能会遇到许多微妙的问题，比如响应时间太长、超时、无效的缓存等。这些情况下，一个查询便可通过，但它需要花费更多的时间。
    - 通常，如果DNS的查找时间过长，那么意味着你或托管服务商的DNS服务有问题。记住，如果网站与其DNS服务之间距离太远，那么解析时间也会稍微增加，这在一些国际网站上会体现出来，而有效的缓存则会降低时间。
  - TCP链接时间
    - 当URL被解析成一个IP地址后，TCP链接时间表示客户端链接到服务端所花费的时间。监控链接时间有助于开发者发现一些影响响应时间的问题，比如网络延时、路由问题、服务器宽带问题等。
    - 例如，如果宽带服务器不足以处理工作负载，那么客户端要先与服务器端意识到这个问题，当客户端向服务器端发送请求时，可能会被拒绝或者时间超时、响应时间延迟等问题。
  - HTTP重定向时间
    - HTTP重定向时间主要是指TCP链接完成时间，它意味着发送初始通知到重定向网站并且浏览器最终定向到目标网站所花费的时间。如果没有重定向，那么重定向时间就为0。它包括了DNS解析时间、TCP链接等等。
    - HTTP重定向可用于缩短URL、当网页链接移动时，可用于防止链接损坏，或允许多个域名链接到一个网站上。
  - 首字节加载时间
    - 当开发人员思考如何优化网站时，往往会选择优化内容——文件组合、多媒体优化、缓存和压缩文件，但也有需要对服务器进行优化。其中一个最佳指标就是首字节的加载时间，首字节加载时间表示从链接创建到首字节成功转换所花费的时间。这个时间也包括了服务器执行各种协议和计算的时间。
    - 通常服务器端遇到与首字节相关的问题包括内存泄露、程序派生的进程太多——没有完全关闭——低效SQL查询，并且调用外部资源，例如谷歌和Facebook。
  - HTML内容时间
    - HTML内容时间主要包括加载Web页面布局、CSS、JavaScript，这个时间与HTML页面的大小有着直接的关系。HTML内容加载时间通常会作为衡量宽带的一个指标，但也不完全是。
  - 整个页面对象加载时间
    - 一旦整个HTML内容被整个接收，浏览器会解析所有的页面对象，并且直到所有对象加载完毕。这些对象包括图片、JavaScript、CSS、Flas对象、RSS回馈、JavaScript文件等。
    - 衡量全页加载时间对监控第三方内容非常有用，特别是广告，但它并不会告诉你有哪些用户看了这个广告。例如，它不会告诉你第三方内容放在哪加载速度会快些。但站在用户角度来看，这些并不算问题。
如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？
- 建议这个项目使用像 EditorConfig (http://editorconfig.org/) 之类的规范
- 为了保持一致性，接受项目原有的风格
- 直接使用 VIM 的 retab 命令
你都使用哪些工具来测试代码的性能？
- Profiler, JSPerf, Dromaeo
什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
- 如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。
- 原因大致为：
  *　1，使用import方法导入样式表。
  - 2，将样式表放在页面底部
  - 3，有几个样式表，放在html结构的不同位置。
- 其实原理很清楚：
  - 当样式表晚于结构性html加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象。
- 解决方法：
  - 使用LINK标签将样式表放在文档HEAD中。
请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程
- 1）把URL分割成几个部分：协议、网络地址、资源路径。其中网络地址指示该连接网络上哪一台计算机，可以是域名或者IP地址，可以包括端口号；协议是从该计算机获取资源的方式，常见的是HTTP、FTP，不同协议有不同的通讯内容格式；资源路径指示从服务器上获取哪一项资源。
  例如：http://www.guokr.com/question/554991/
  协议部分：http
  网络地址：www.guokr.com
  资源路径：/question/554991/
- 2）如果地址不是一个IP地址，通过DNS（域名系统）将该地址解析成IP地址。IP地址对应着网络上一台计算机，DNS服务器本身也有IP，你的网络设置包含DNS服务器的IP。
  例如：www.guokr.com 不是一个IP，向DNS询问请求www.guokr.com 对应的IP，获得IP： 111.13.57.142。这个过程里，你的电脑直接询问的DNS服务器可能没有www.guokr.com 对应的IP，就会向它的上级服务器询问，上级服务器同样可能没有，就依此一层层向上找，最高可达根节点，找到或者全部找不到为止。
- 3）如果地址不包含端口号，根据协议的默认端口号确定一个。端口号之于计算机就像窗口号之于银行，一家银行有多个窗口，每个窗口都有个号码，不同窗口可以负责不同的服务。端口只是一个逻辑概念，和计算机硬件没有关系。
  例如：www.guokr.com 不包含端口号，http协议默认端口号是80。如果你输入的url是http://www.guokr.com:8080/ ，那表示不使用默认的端口号，而使用指定的端口号8080。
- 4）向2和3确定的IP和端口号发起网络连接。
  例如：向111.13.57.142的80端口发起连接
- 5）根据http协议要求，组织一个请求的数据包，里面包含大量请求信息，包括请求的资源路径、你的身份
  例如：用自然语言来表达这个数据包，大概就是：请求 /question/554991/ ，我的身份是xxxxxxx。
- 6）服务器响应请求，将数据返回给浏览器。数据可能是根据HTML协议组织的网页，里面包含页面的布局、文字。数据也可能是图片、脚本程序等。现在你可以用浏览器的“查看源代码”功能，感受一下服务器返回的是什么东东。如果资源路径指示的资源不存在，服务器就会返回著名的404错误。
- 7）如果（6）返回的是一个页面，根据页面里一些外链的URL，例如图片的地址，按照（1）－（6）再次获取。
- 8）开始根据资源的类型，将资源组织成屏幕上显示的图像，这个过程叫渲染，网页渲染是浏览器最复杂、最核心的功能。
- 9）将渲染好的页面图像显示出来，并开始响应用户的操作。
  以上只是最基本的步骤，实际不可能就这么简单，一些可选的步骤例如网页缓存、连接池、加载策略、加密解密、代理中转等等都没有提及。即使基本步骤本身也有很复杂的子步骤，TCP/IP、DNS、HTTP、HTML：每一个都可以展开成庞大的课题，而浏览器的基础——操作系统、编译器、硬件等更是一个比一个复杂。不是计算机专业的同学看了上面的解释完全不明白是很正常的，可能会问为什么要搞得那么复杂，但我保证这每一个步骤都经过深思熟虑和时间的考验。你输入URL即可浏览互联网，而计算机系统在背后做了无数你看不到的工作，计算机各个子领域无数工程师为此付出你难以想象的努力。

文档为什么要分类型？

如果文档不分类型，各浏览器就会形成多种写法，假如IE用<title>标签作为标题、火狐浏览器用<caption>标签作为标题，而另一种浏览器可能采用<mytitle>，这对于开发者和用户来说简直是灾难。W3C（万维网联盟World Wide Web Consortium）制作了对所有方面都平衡的分歧解决方案，并且各浏览器没有异议，于是用<!doctype>（注意：作为一个特殊的标签，它是不需要闭合的）标签来引入W3C的dtd文件，以达到规范页面的效果。这为浏览器的文档标准的统一以及开发人员和用户带了了便利。而html5不是基于SGML实现的，因此html不需要引入DTD，所以html5可以简单的声明一下<!doctype html>。

如果网页内容需要支持多语言，你会怎么做？

采用统一编码UTF-8模式
在设计和开发多语言网站时，有哪些问题你必须要考虑？
*
1、应用字符集的选择
2、语言书写习惯&导航结构
3、数据库驱动型网站
1、应用字符集的选择
一个定位于不同语言国家的企业网站势必需要提供多种语言版本的产品和销售信息来满足其世界各地使用不同语言的客户和合作伙伴，其中包括法语、德语、意大利语、葡萄牙语、西班牙语、阿拉伯语等等。但有一个问题却极易被网站设计者们所忽略。这就是网站的字符集设置问题。
一般我们使用的是简体中文(GB2312)字符集，而对多语言网站来说，中文字符集却可能会使你辛辛苦苦的努力功亏一篑。原因很简单：就是这个毫不起眼的小小字符集在作怪。
计算机应用领域中存在着几十种互不相同的字符集，而不同语言客户在浏览不同语言网页时，往往会因为相互间所使用字符集无法兼容而出现乱码情况。我们在浏览国外一些网站时，往往也会出现为了能正常地看到网站上的信息而不得不在各种字符集之间来回切换的情况。
试想一下：如果一个网站提供了中、英、法、德等多种语言版本的内容，内容全之又全，设计美仑美奂。我们在中文编码环境下浏览这些非中文版本的页面觉得非常完美，现在一个法国客户对你的产品发生了兴趣，当他进到法语版面一看，乱码多多，甚至可能整个版面都一塌里糊涂。你的网站再下大工夫又有什么意义呢?
所以对提供了多语言版本的网站来说，Unicode字符集应该是最理想的选择。它是一种双字节编码机制的字符集，不管是东方文字还是西方文字，在Unicode中一律用两个字节来表示，因而至少可以定义65536个不同的字符，几乎可以涵盖世界上目前所有通用的语言的每一种字符。所以在设计和开发多语言网站时，一定要注意先把非中文页面的字符集定义为“utf-8”格式，即：
√:
×:
这一步非常重要，原因在于若等页面做好之后再更改字符集设置，可说是一件非常非常吃力不讨好的工作，有时候甚至可能需要从头再来，重新输入网站的文字内容。
- 2、语言书写习惯&导航结构
  有些国家的语言书写习惯是从右到左，例如许多中东地区所使用的阿拉伯语，波斯语和希伯来语等等。如果你的市场目标是这些语言的国家，那么在网站设计中就需要考虑这些特殊的语言书写习惯。而且如果你在网站导航结构设计中使用的是一个竖直导航栏，这时候就应该把它放在右边，而不是象我们习惯的那样放在左边了。
- 3、数据库驱动型网站
  对一个数据库驱动型的网站，尤其是当客户可以留言并向数据库添加信息时，则应当考虑如何从技术上实现对不同语言数据信息的收集和检索。

`data-`属性的作用是什么？

data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取。ppk提到过使用rel属性，lightbox库推广了rel属性，HTML5提供了data-做替代，这样可以更好地使用自定义的属性。
sessionStorage与页面 js 数据对象的区别
- 页面中一般的 js 对象或数据的生存期是仅在当前页面有效，因此刷新页面或转到另一页面这样的重新加载页面的情况，数据就不存在了。
- 而sessionStorage 只要同源的同窗口（或tab）中，刷新页面或进入同源的不同页面，数据始终存在。也就是说只要这个浏览器窗口没有关闭，加载新页面或重新加载，数据仍然存在
Web Storage带来的好处：
- 减少网络流量：一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要地来回传递。
- 快速显示数据：性能好，从本地读数据比通过网络从服务器获得数据快得多，本地数据可以即时获得。再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示。
- 临时存储：很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。
浏览器本地存储与服务器端存储之间的区别
- 其实数据既可以在浏览器本地存储，也可以在服务器端存储。
- 浏览器端可以保存一些数据，需要的时候直接从本地获取，sessionStorage、localStorage和cookie都由浏览器存储在本地的数据。
- 服务器端也可以保存所有用户的所有数据，但需要的时候浏览器要向服务器请求数据。
  - 1.服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。
  - 2.服务器端也可以保存用户的临时会话数据。服务器端的session机制，如jsp的 session 对象，数据保存在服务器上。实现上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。
- 服务器端保存所有的用户的数据，所以服务器端的开销较大，而浏览器端保存则把不同用户需要的数据分布保存在用户各自的浏览器中。
- 浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。
- 服务器存储数据安全一些，浏览器只适合存储一般数据。

常见兼容性问题？

* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。
 
* IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。 
   
  浮动ie产生的双倍距离 #box{ float:left; 10px; margin:0 0 0 100px;} 

 这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

  渐进识别的方式，从总体中逐渐排除局部。 
  
  首先，巧妙的使用“9”这一标记，将IE游览器从所有情况中分离出来。 
  接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
 
  css
      .bb{
       background-color:#f1ee18;/*所有识别*/
      .background-color:#00deff9; /*IE6、7、8识别*/
      +background-color:#a200ff;/*IE6、7识别*/
      _background-color:#1e0bd1;/*IE6识别*/ 
      } 

*  IE下,可以使用获取常规属性的方法来获取自定义属性,
   也可以使用getAttribute()获取自定义属性;
   Firefox下,只能使用getAttribute()获取自定义属性. 
   解决方法:统一通过getAttribute()获取自定义属性.
  
* IE下,even对象有x,y属性,但是没有pageX,pageY属性; 
  Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.
  
* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 
  可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

iframe有那些缺点？

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

*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

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

cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会
sessionStorage和localStorage的存储空间更大；
sessionStorage和localStorage有更多丰富易用的接口；
sessionStorage和localStorage各自独立的存储空间；

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

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

解释下浮动和它的工作原理。
- 浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。link
列举不同的清除浮动的技巧，并指出它们各自适用的使用场景。
- 1.使用空标签清除浮动。
  - 这种方法是在所有浮动标签后面添加一个空标签定义css clear:both. 弊端就是增加了无意义标签。
- 2.使用overflow。
  - 给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
- 3.使用after伪对象清除浮动。
  - 该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。
你最喜欢的图片替换方法是什么，你如何选择使用。

    <h2> <span 图片丢这里></span>Hello World </h2>

* 把span背景设成文字内容，这样又可以保证seo，也有图片的效果在上面。
*  一般都是：alt，title，onerror

讨论CSS hacks，条件引用或者其他。
- 在这个浏览器百花争鸣的时代，作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心，主要体现在javascript和css上面。javascript我这次就不谈了，先说说css。
- 为了适应不同浏览器不同的版本（版本主要就ie来说），ie这朵奇葩现在我们要兼容6-9，它的10也快出来了。。。在ie下我们可以写条件注释来区分ie和其他浏览器，以及ie的版本，这些请大家自行google。这篇文章主要讨论的是css hack。
在书写高效 CSS 时会有哪些问题需要考虑？
- 1. 样式是：从右向左的解析一个选择器
- 1. ID最快，Universal最慢有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
- 1. 不要tag-qualify （永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）
- 1. 后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }）
- 1. 想清楚你为什么这样写
- 1. CSS3的效率问题（CSS3选择器（比如 :nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）
- 1. 我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性

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

*   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 ;
  
*   优先级就近原则，同权重情况下样式定义最近者为准;

*   载入样式以最后载入的定位为准;

优先级为:

!important > id > class > tag

   important 比 内联优先级高

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> 元素。
:enabled  :disabled 控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

如何居中div？如何居中一个浮动元素？
- 给div设置一个宽度，然后添加margin:0 auto属性
```
 div{
     200px;
     margin:0 auto;
  }  
```

* 居中一个浮动元素

确定容器的宽高宽500 高 300 的层
设置层的外边距

.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}

列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

1.   
block 象块类型元素一样显示。
none 缺省值。象行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。

2. 
*absolute 
      生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 
  
*fixed （老IE不支持）
      生成绝对定位的元素，相对于浏览器窗口进行定位。 
  
*relative 
      生成相对定位的元素，相对于其正常位置进行定位。 
  
* static  默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。
  
* inherit 规定从父元素继承 position 属性的值。

CSS3有哪些新特性？

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器  多背景 rgba

javascript的__proto__（注意前后都是两条下划线）和prototype都可以访问对象的原型对象，那么他们之间有什么不同吗？
__proto__是只能用对象. 来访问，而prototype则只能是类. 来访问

/**
    * 利用原型模式实现简单继承
    */
   function per(){
       this.getName = function(str){
           alert(str);
       }
   }
   per.prototype.getAge = function(age){
       alert(age);
   }
   var a = {};
   a.__proto__ = per.prototype;
   //a.getAge(2);
  // a.getName("a");
   /**
    * 简单方式实现继承
    */
   var b = {};
   b.__proto__ = new per();
   b.__proto__.constructor = b;
   b.getAge("1");
   b.getName("a");
 
   /**
    * 串联继承
    */
   function A(){
       this.getA = "a";
   }
   function B(){
       this.getB = "b";
   }
   function K(){}
   B.prototype = new A();
   B.prototype.constructor = B;
 
   K.prototype = new B();
   K.prototype.constructor = K;
 
   var test = new K();
   alert(test.getA);
   alert(test.getB);

解释下事件代理。

JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。
当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。
事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。

 function getEventTarget(e) {
 e = e || window.event;
 return e.target || e.srcElement;
 }

* 事件代理，比如，我要点一个table中的td时编辑，那么我们会在td上绑定事件呢还是table上，如果在td上绑定，会产生非常多的事件，对内存来说是个不小的考验，所以我们选择在table中绑定。因为js中有些事件是冒泡的，比如onclick。

解释下 JavaScript 中 this 是如何工作的。
- this永远指向函数运行时所在的对象，
- 而不是函数被创建时所在的对象。匿名函数和不处于任何对象中的函数指向window。
- call,apply,with指的this是谁就是谁。
- 普通的函数调用，函数调用被谁调用，this指的就是谁。
解释下原型继承的原理。
- 当查找一个对象的属性时，JavaScript 会向上遍历原型链，直到找到给定名称的属性为止。(大多数JavaScript的实现用 proto 属性来表示一个对象的原型链。)
- 注：proto 是一个不应在你代码中出现的非正规的用法，这里仅仅用它来解释JavaScript原型继承的工作原理。
AMD vs. CommonJS？
- AMD是依赖提前加载,CMD是依赖延时加载
什么是哈希表？
- 哈希表（Hash table，也叫散列表），是根据关键码值(Key value)而直接进行访问的数据结构。也就是说，它通过把关键码值映射到表中一个位置来访问记录，以加快查找的速度。这个映射函数叫做散列函数，存放记录的数组叫做散列表。说白了哈希表的原理其实就是通过空间换取时间的做法。。
- 哈希表的做法其实很简单，就是把Key通过一个固定的算法函数既所谓的哈希函数转换成一个整型数字，然后就将该数字对数组长度进行取余，取余结果就当作数组的下标，将value存储在以该数字为下标的数组空间里。
- 而当使用哈希表进行查询的时候，就是再次使用哈希函数将key转换为对应的数组下标，并定位到该空间获取value，如此一来，就可以充分利用到数组的定位性能进行数据定位。。
描述以下变量的区别：null，undefined 或 undeclared？
- 该如何检测它们？
  - undefined :js语言类型，有申明，没有初始化。
  - undeclared：js语法错误，没有申明直接使用，js无法找到对应的上下文。
  - null：是空值。
  - 用typeof判断undefined，==，！=null判断Null..
什么是闭包，如何使用它，为什么要使用它？
- 闭包就是能够读取其他函数内部变量的函数。
- 闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
- 函数数再定义一个函数，用于返回里面的值，
- 你喜欢的使用闭包的模式是什么？
  - 两种模式用在不同场合。参见jQuery源码，立即调用模式，把$的jQuery源码放在了全局作用域下。返回函数类型的，制作一个随时可以使用的函数。
  - 闭包与设计模式
    - 单例模式，例如要做一个荫罩层，这个时候我们需要一个全局变量来判断页面是否已经存在这样一个东西，如果就用一个var a 定义，那么就会污染全局命名空间。最好的作法，就是把这样一个变旦放在一个函数里面，然后通过函数内的函数去判断调用写它的逻辑。
闭包会带来什么问题？怎么避免？
- 使用闭包的注意点
  1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
  2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。
你能解释一下 JavaScript 中的继承是如何工作的吗？
- 原型继承
- 创建了一个实例。这个实例是一个具有__proto__属性的空对象，并且__proto__指向F.prototype
- 初始化实例。将arguments 和 this赋予函数F。
- 返回这个实例。
在什么时候你会使用 document.write()？
- 大多数生成的广告代码依旧使用 document.write()，虽然这种用法会让人很不爽。
请尽可能详尽的解释 AJAX 的工作原理。
- 非ajax是把要提交的内容放在submit里面，浏览器刷新提交数据。ajax即异步数据刷新，将要提交的数据与服务器接口交换数据，将得到的数据返回用于重组dom元素，以及改变一些页面效果。
- 动态添加script标签，script是不存在跨域问题的，所以可以跨域以get方式访问异域的数据。要跨域以post方式，需要使用iframe标签。ajax是使用XMLHttpRequest来和服务器进行异步通信，所以原理完全不同。
请解释 JSONP 的工作原理，以及它为什么不是真正的 AJAX。
- JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方，JSON是地下党们用来书写和交换情报的“暗号”，而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没？一个是描述信息的格式，一个是信息传递双方约定的方法。
你使用过 JavaScript 模板系统吗？
- 如有使用过，请谈谈你都使用过哪些库，比如 Mustache.js，Handlebars 等等。
- 大量的正则表达式用于替换掉html中代表数据的内容。生成静态的html页面
请解释变量声明提升。
- 在中间声明的函数，会提升到最先去声明，但是赋值位置不会提升。
请描述下事件冒泡机制。
- 点击document中的div ，也会触发到document的click事件，这就是冒泡啦，！如果要停止冒泡，ie下e.returnValue = false。ff下,stop啥的。

Node.js的适用场景？

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

介绍js的基本数据类型。

 number,string,boolean,object,undefined

Javascript如何实现继承？

 通过原型和构造器

["1", "2", "3"].map(parseInt) 答案是多少？

 [1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix) 但 map 传了 3 个 (element, index, array)

如何创建一个对象? （画出此对象的内存图）

 function Person(name, age) {
   this.name = name;
   this.age = age;
   this.sing = function() { alert(this.name) } 
 }

谈谈This对象的理解。

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

事件是？IE与火狐的事件机制有什么区别？如何阻止冒泡？

 1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。  
 2. 事件处理机制：IE是事件冒泡、火狐是 事件捕获；
 3. ev.stopPropagation();

.call() 和 .apply() 的区别？

 例子中用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4); 
   
 注意：js 中的函数其实是对象，函数名是对 Function 对象的引用。

   function add(a,b)
   {
       alert(a+b);
   }
   
   function sub(a,b)
   {
       alert(a-b);
   }
   
   add.call(sub,3,1);

JQuery的源码看过吗？能不能简单说一下它的实现原理？

在 jQuery 中， jQuery 对象实际上是一个仿数组的对象，代表通过选择器得到的所有 DOM 对象的集合，它像数组一样有 length 属性，表示代表的 DOM 对象的个数，还可以通过下标进行遍历。
95 行的 jQuery.each 是 jQuery 中用来遍历这个仿数组，对其中的每个元素进行遍历处理的基本方法，callback 表示处理这个 DOM 对象的函数。通常情况下，我们并不使用这个方法，而是使用 jQuery 对象的 each 方法进行遍历。jQuery 对象的 css 和 text 方法在内部实际上使用 jQuery 对象的 each 方法对所选择的元素进行处理。

jquery 中如何将数组转化为json字符串，然后再转化回来？
- 知乎
- jQuery中没有提供这个功能，所以你需要先编写两个jQuery的扩展：
  
  $.fn.stringifyArray = function(array) {
  return JSON.stringify(array)
  }
  
  $.fn.parseArray = function(array) {
  return JSON.parse(array)
  }
  
  然后调用：
  $("").stringifyArray(array)

针对 jQuery 的优化方法？

 *基于Class的选择性的性能相对于Id选择器开销很大，因为需遍历所有DOM元素。
 
 *频繁操作的DOM，先缓存起来再操作。用Jquery的链式调用更好。   
  比如：var str=$("a").attr("href");
 
 *for (var i = size; i < arr.length; i++) {}
  for 循环每一次循环都查找了数组 (arr) 的.length 属性，在开始循环的时候设置一个变量来存储这个数字，可以让循环跑得更快： 
  for (var i = size, length = arr.length; i < length; i++) {}

那些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
```
  setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
  闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
```
JQuery一个对象可以同时绑定多个事件，这是如何实现的？

1、jQuery("#id").click(func1).mouseover(func2)//方法连写，func为方法的名字
2、jQuery("#id").click(function(){//你的具体方法实现}),mouser(function(){//你的具体方法实现});
3、jQuery("#id").bind("click mouseover",func)//两个事件中间有空格，func为方法的名字
4、jQuery("#id").bind("load scroll",function(){//你的具体方法实现});

如何判断当前脚本运行在浏览器还是node环境中？（阿里）

  通过判断Global对象是否为window，如果不为window，当前脚本没有运行在浏览器中

对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

       前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。
      1、实现界面交互
      2、提升用户体验
      3、有了Node.js，前端可以实现服务端的一些事情
   

  前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好，
  
   参与项目，快速高质量完成实现效果图，精确到1px；
  
   与团队成员，UI设计，产品经理的沟通；
  
   做好的页面结构，页面重构和用户体验；
  
   处理hack，兼容、写出优美的代码格式；
  
   针对服务器的优化、拥抱最新前端技术。

平时如何管理你的项目？

          先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等；
          
          编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
          
          标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
          
          页面进行标注（例如 页面 模块 开始和结束）；
          
          CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）；
          
          JS 分文件夹存放 命名以该JS功能为准的英文翻译。
          
          图片采用整合的 images.png png8 格式文件使用 尽量整合在一起使用方便将来的管理

如何设计突发大规模并发架构？

移动端（Android IOS）怎么做好用户体验?

      清晰的视觉纵线、信息的分组、极致的减法、
      利用选择代替输入、标签及文字的排布方式、
      依靠明文确认密码、合理的键盘利用、

备注：

根据自己需求选择性阅读，前端的路上我们一起携手共进！
个人收藏有不少关于前端开发的书籍以及资料，如有需要，请通过邮箱索要！

出一套适应不同分辨率，不同终端的前端实现方案你有什么思路?

流式布局: 使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。这样的布局方式，就是移动web开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。
响应式开发:CSS3 中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽度区间的网页布局。
超小屏幕(移动设备) 768px
以下小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上

px em rem 取用选择依据?

px 像素(Pixel)。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度DPI。
em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
rem 是 CSS3 新增的一个相对单位(root em，根 em)，使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
区别:IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。

src 与 href 的区别

src(source)指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档中，如js脚本，img图片和iframe等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，类似于将所指向资源嵌入当前标签内。
href(hypertext reference/超文本引用)指向网络资源所在位置，建立和当前元素(锚点) 或当前文档(链接)之间的链接，如果我们在文档中添加那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。

说说你对 this 的理解?

this 是一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。

作为纯粹的函数调用 this 指向全局对象
作为对象的方法调用 this 指向调用对象
作为构造函数被调用 this 指向新的对象(new 会改变 this 的指向)
apply 调用 this 指向 apply 方法的第一个参数

介绍一下 JS 有哪些内置对象

Object 是 JavaScript 中所有对象的父对象
数据封装类对象:Object、Array、Boolean、Number、String
其他对象:Function、Argument、Math、Date、RegExp、Error

表单验证传输的什么数据?明文还是暗文==加密?如何加密?是每一次传输数据，都是加密之后才传输吗?

GET 是从服务器上请求数据，POST 是发送数据到服务器。事实上，GET方法是把数据参数队列(query string)加到一个 URL 上，值和表单是一一对应的。

比如说， name=John。在队列里，值和表单用一个&符号分开，空格用+号替换，特殊的符号转换成十六进制的代码。因为这一队列在 URL 里边，这样队列的参数就能看得到，可以被记录下来，或更改。通常 GET 方法还限制字符的大小(大概是 256 字节 )。

事实上 POST 方法可以没有时间限制的传递数据到服务器，用户在浏览器端是看不到这一过程的，所以 POST 方法比较适合用于发送一个保密的(比如信用卡号)或者比较大量的数据到服务器。

区别
Post 是允许传输大量数据的方法，而 Get 方法会将所要传输的数据附在网址后面，然后一起送达服务器，因此传送的数据量就会受到限制，但是执行效率却比 Post 方法好。
总结:
1、get 方式的安全性较 Post 方式要差些，包含机密信息的话，建议用 Post 数据提交方式;
2、在做数据查询时，建议用 Get 方式;而在做数据添加、修改或删除时，建议用 Post 方式;
所以
表达如果是向服务器传输数据(如帐号密码等)都是加密数据(post)，如果只是单单想要从服务器获得数据或者传输的数据并不重要，可以直接使用明文方式传输( get )

闭包?

简单的说，作用域是针对变量的，比如我们创建一个函数 a1，函数里面又包了一个子函数 a2。此时就存在三个作用域:全局作用域、a1 作用域、a2 作用域;
即全局作用域包含了 a1 的作用域，a2 的作用域包含了 a1 的作用域。
当 a1 在查找变量的时候会先从自身的作用域区查找，找不到再到上一级 a2 的作用域查找，如果还没找到就到全局作用域区查找，这样就形成了一个作用域链。
理解闭包首先要理解，js 垃圾回收机制，也就是当一个函数被执行完后，其作用域会被收回，如果形成了闭包，执行完后其作用域就不会被收回。
如果某个函数被他的父函数之外的一个变量引用，就会形成闭包。
闭包的作用，就是保存自己私有的变量，通过提供的接口(方法)给外部使用，但外部不能直接访问该变量。

请说说事件委托机制?这样做有什么好处?

事件委托，就是某个事件本来该自己干的，但是自己不干，交给别人来干。就叫事件委托。打个比方:一个 button 对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击事件，让自己的父节点来监控自己的点击事件。
好处:
A，提高性能:列如，当有很多 li 同时需要注册事件的时候，如果使用传统方法来注册事件的话，需要给每一个 li 注册事件。然而如果使用委托事件的话，就只需要将事件委托给该一个元素即可。这样就能提高性能。
B，新添加的元素还会有之前的事件;

在 JS 的计时器运行原理是怎样的，为什么可以触发计时效果? 计时器是多线程吗?

javascript 引擎只有一个线程，强迫异步事件排队等待被执行。
setTimeout 和 setInterval 本质上不同的地方是他们如何执行异步代码的。
如果一个定时器正在执行的时候被阻塞了，那么它将会被推迟到下一个可能的执行
点，这既是使得延迟时间有可能会超过声明定时器时设置的值。
Interval 如果有足够的时间来执行(大于制定的延迟)，那么它将会无延迟的一个紧
接着一个执行。

原理:
计时器通过设定一定的时间段(毫秒)来异步的执行一段代码。因为 Javascript 是一个单线程语言，计时器提供了一种绕过这种语言限制来执行代码的能力。
总结:
计时器是单线程的，需要等待上一个执行完，如果上一个没有执行完，下一个需要延迟执行，直到上一个执行完。

一个页面上有大量的图片(大型电商网站)，加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

图片懒加载
在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
如果图片为 css 图片，可以使用 CSSsprite，SVGsprite，Iconfont、Base64 等技术。
如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。
如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

Vue.js 核心思想:

1、数据驱动(基于操作 dom 的方式)
(1)、Dom 是数据的一种自然映射(双向数据绑定)手动改变 DOM 非常麻烦使用 vue.js 之后，只需要改变数据，通过改变 Directives 指令,当数据发生变化，会通过数据指令去修改对应的 DOM。

(2)、Vue.js 还会对事件进行一定的监听，当我们改变视图(view)的时候通过 DOM Listeners 来改变数据。

2、组件化
Vue-cli:(它是 vue 的脚手架工具) 作用:帮助我们完成基础的代码(包括:目录结构、本地调试、代码部署、热加载、单元测试)

组件的设计原则:
页面上每一个独立的可视/可交互区域视为一个组件每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护展示面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。

angularJS

angularJS 的适用场景
AngularJS 是为了克服 HTML 在构建应用上的不足而设计的。HTML 是一门很好的为静态文本展示设计的声明式语言，但要构建 WEB 应用的话它就显得乏力了，所以说 angular 适合做单页面应用程序
angularJS 是什么
AngularJS 是一个 JavaScript 框架。它可通过

前端面试宝典第三版

Front-End

前端开发工程师面试宝典！ （本文部分有转载，不定期更新！）

前言（README.md）

欢迎大家一起交流提高

HTML

CSS

JavaScript

Web浏览器安全

前端工程化

github与Git

npm 官方网站

数据结构

操作系统

你能描述一下当你制作一个网页的工作流程吗？

如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？

你都使用哪些工具来测试代码的性能？

什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？

请尽可能完整得描述下从输入URL到整个网页加载完毕及显示在屏幕上的整个流程

文档为什么要分类型？

如果网页内容需要支持多语言，你会怎么做？

data-属性的作用是什么？

常见兼容性问题？

iframe有那些缺点？

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

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

你最喜欢的图片替换方法是什么，你如何选择使用。

在书写高效 CSS 时会有哪些问题需要考虑？

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

列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？

CSS3有哪些新特性？

解释下事件代理。

AMD vs. CommonJS？

什么是哈希表？

描述以下变量的区别：null，undefined 或 undeclared？

什么是闭包，如何使用它，为什么要使用它？

闭包会带来什么问题？怎么避免？

你能解释一下 JavaScript 中的继承是如何工作的吗？

在什么时候你会使用 document.write()？

请尽可能详尽的解释 AJAX 的工作原理。

请解释 JSONP 的工作原理，以及它为什么不是真正的 AJAX。

你使用过 JavaScript 模板系统吗？

请解释变量声明提升。

请描述下事件冒泡机制。