Web前端面试常识

大四校招即将席卷而来，现在临时抱抱佛脚，百度一下大概可能会问到的知识点，愿与君共勉吧！

1.Doctype(html4)

A.strict 严格版本

B.transitional 过渡版本(防止浏览器不支持)

C.frameset 框架版本(取代body标签)

2.字符编码常见类型

ASCII码:IOS国际标准128个字符

GB2312编码:国标码，ANSI编码里的一种，ASCII+汉字

GBK:汉字内码扩展规范,GB2312的汉字扩展(包含生僻字)

Unicode:统一格式编码,包含各国语言

UTF-8:提高了Unicode的编码效率

ISO-8859-1:ASCII+西欧语言、希腊语、泰语、阿拉伯语、希伯来语对应的文字符号。

3.浏览器默认字符编码

IE6、IE7、IE8、Firefox 默认字符编码：gb2312；

Chrome、Safari 默认字符编码：ISO-8859-1；

Opera默认编码：gbk。

--摘自 http://blog.csdn.net/generalyy0/article/details/8239782

作用:

由于NASI不支持UTF-8，因此当使用UTF-8时需要转换编码防止编程错误。

Html <meta charset="utf-8">

XML <?XML version=”1.0” encoding=”utf-8”>

为了扩充ASCII编码，以用于显示本国的语言，不同的国家和地区制定了不同的标准，由此产生了 GB2312, BIG5, JIS 等各自的编码标准。这些使用 2 个字节来代表一个字符的各种汉字延伸编码方式，称为 ANSI 编码，又称为"MBCS（Muilti-Bytes Charecter Set，多字节字符集）"。在简体中文系统下，ANSI 编码代表 GB2312 编码，在日文操作系统下，ANSI 编码代表 JIS 编码，所以在中文 windows下要转码成gb2312,gbk只需要把文本保存为ANSI 编码即可。不同 ANSI 编码之间互不兼容，当信息在国际间交流时，无法将属于两种语言的文字，存储在同一段 ANSI 编码的文本中。一个很大的缺点是，同一个编码值，在不同的编码体系里代表着不同的字。这样就容易造成混乱。导致了unicode码的诞生。

其中每个语言下的ANSI编码，都有一套一对一的编码转换器，Unicode变成所有编码转换的中间介质。所有的编码都有一个转换器可以转换到Unicode，而Unicode也可以转换到其他所有的编码。

--来自百度百科http://baike.baidu.com/link?url=TFEXcDFu4Ykk_NGShT1or0ae9idefAr2Ztx6-M_2bD2y6KQpc1qIso_mIeEmJ93Ag0bLIwg8sNHnNl-tcXTK8q

4.异步编程

异步编程的方法，大概有下面四种。

回调函数

事件监听

发布/订阅

Promise 对象:Promise就是为了解决这个问题而提出的。它不是新的语法功能，而是一种新的写法，允许将回调函数的横向加载，改成纵向加载。采用Promise，连续读取多个文件

异步：

yield 命令。它表示执行到此处，执行权将交给其他线程。也就是说，yield命令是异步两个阶段的分界线。

Generator 函数是协程在 ES6 的实现。由于 JavaScript 没有多线程，所以 Generator 函数交出的是函数的（而不是交出线程的）执行权。暂停执行和恢复执行;函数体内外的数据交换和错误处理机制。

编译器的"传名调用"实现，往往是将参数放到一个临时函数之中，再将这个临时函数传入函数体。这个临时函数就叫做 Thunk 函数。Thunk 函数现在可以用于 Generator 函数的自动流程管理。

目标：使得JavaScript可以用来编写复杂的应用程序、函数库和代码的自动生成器

摘自:http://www.tuicool.com/articles/RnQVra

5.ECMA6要点

新增Class关键词，更好的定义类

新增=>，从参数到返回值

增加let,只在代码块内有效，相当于块级作用域(不存在申明提升)

数组、对象解构赋值，参数传递更容易

增加generator，依旧是单线程,yeild暂停,next往下执行

属性扩展，如

模块${}，import

语言改进参考 http://kangax.github.io/compat-table/es6/

学习参考 http://es6.ruanyifeng.com/#docs/intro

6.HTML5

特性：

向前兼容性，

跨平台运行性，

简单易用性，

用户友好性

WebForm(代码简单，用户友好，兼容，功能强大)，

video(内置，易于脚本操作，编解码器不统一，不支持rmvb，不能全屏，不能切换比特率，跨域限制，资源消耗过大)，

canvas（消耗资源少，2d库，代码长，重绘，没有事件），

geolocation，workers，socket（comet），storage(空间大，仅本地使用，独立，易开发，兼容，安全，时限，xss)

7.模块加载框架 sea.js,用于解决依赖关系,类似还有requireJS

遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同，SeaJS不会扩展封装语言特性，而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载，将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来，可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。

8.懒加载

以往的遍历页面中所有的图片，将其src缓存起来后删除图片的src属性，当图片进入用户的可视区域后再为图片附加src属性。这种方案存在着以下不足：

① 在IE和FF下，懒加载的脚本运行时，有部分图片已经于服务器建立链接，这部分abort掉，再在滚动时延迟加载，反而增加了链接数。

② 在chrome下，由于webkit内核bug,导致无法abort掉下载，懒加载脚本完全无用。

③ 它只能针对图片的懒加载，但无法懒加载页面的某个模块（即延迟渲染页面的DOM节点）。

思路如下：

① 提供一种方式来让我们手动为页面中每个需要懒加载的图片缓存它的src属性，例如：原来的图片为<img src="xxx.jpg" />,现在改为<img data-src="xxx.jpg">。这样，页面在解析的时候，所有懒加载的图片在所有的浏览器下都不会下载，图片进入视野区域时再将data-src赋值给src属性。

② 提供延迟加载页面模块的方案。将研究发现，textarea是个不错的容器，浏览器会将该标签内的内容当作普通文本看待。因此，可以将页面中需要懒加载的模块放入textarea容器中，带需要的时候再将其取出。淘宝美食网正是大量运用了模块延迟加载方案。

9.前后端分离的实践

前端：负责View和Controller层。

后端：负责Model层，业务处理/数据等。

Node.js作为中间数据展示

10.网页渲染与回流

WEB 页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验简单地说，页面渲染就是浏览器将HTML 代码根据CSS 定义的规则显示在浏览器窗口中的这个过程。

渲染过程

1. 用户输入网址（假设是个 HTML 页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回 HTML 文件；

2. 浏览器开始载入 HTML 代码，发现 <head> 标签内有一个 <link> 标签引用外部 CSS 文件；

3. 浏览器又发出 CSS 文件的请求，服务器返回这个 CSS 文件；

4. 浏览器继续载入 HTML 中 <body> 部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了；

5. 浏览器在代码中发现一个 <img> 标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；

7. 浏览器发现了一个包含一行 JavaScript 代码的 <script> 标签，赶快运行它；

8. JavaScript 脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个 <div>（style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；

9. 终于等到了 </html> 的到来，浏览器泪流满面……

10. 等等，还没完，用户点了一下界面中的“换肤”按钮，JavaScript 让浏览器换了一下 <link> 标签的 CSS 路径；

11. 浏览器召集了在座的各位 <div><span><ul><li> 们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。浏览器每天就这么来来回回跑着，要知道不同的人写出来的 HTML 和 CSS 代码质量参差不齐，说不定哪天跑着跑着就挂掉了。好在这个世界还有这么一群人——页面重构工程师，平时挺不起眼，也就帮视觉设计师们切切图啊改改字，其实背地里还是干了不少实事的。

reflow（回流）

说到页面为什么会慢？那是因为浏览器要花时间、花精力去渲染，尤其是当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow（回流）。

11. BigPipe

BigPipe是一个重新设计的基础动态网页服务体系。大体思路是，分解网页成叫做Pagelets的小块，然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。这是类似于大多数现代微处理器的流水线执行过程：多重指令管线通过不同的处理器执行单元，以达到性能的最佳。虽然BigPipe是对现有的服务网络基础过程的重新设计，但它却不需要改变现有的网络浏览器或服务器，它完全使用PHP和JavaScript来实现。

12.冒泡和事件捕获

事件委托（代理）的原理为冒泡。

这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。

ie：window.event.srcElement

标准下:event.target

nodeName:找到元素的标签名

oUl.onmouseover = function(ev){

var ev = ev || window.event;

var target = ev.target || ev.srcElement;

//alert(target.innerHTML);

if(target.nodeName.toLowerCase() == "li"){

target.style.background = "red";

}

oUl.onmouseout = function(ev){

var ev = ev || window.event;

var target = ev.target || ev.srcElement;

//alert(target.innerHTML);

if(target.nodeName.toLowerCase() == "li"){

target.style.background = "";

}

提高性能，且新加的元素还会有之前的事件。

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

IE 5.5: div -> body -> document

IE 6.0: div -> body -> html -> document

Mozilla 1.0: div -> body -> html -> document -> window

（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。

（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过 IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。

事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。

假设一个元素div，它有一个下级元素p。

<div>

</div>

这两个元素都绑定了click事件，如果用户点击了p，它在div和p上都触发了click事件，那这两个事件处理程序哪个先执行呢？事件顺序是什么？

两种模型

以前，Netscape和Microsoft是不同的实现方式。

Netscape中，div先触发，这就叫做事件捕获。

Microsoft中，p先触发，这就叫做事件冒泡。

两种事件处理顺序刚好相反。IE只支持事件冒泡，Mozilla, Opera 7 和 Konqueror两种都支持，旧版本的Opera's 和 iCab两种都不支持。

事件捕获

当你使用事件捕获时，父级元素先触发，子级元素后触发，即div先触发，p后触发。

事件冒泡

当你使用事件冒泡时，子级元素先触发，父级元素后触发，即p先触发，div后触发。

W3C模型

W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document。

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡，方法就是绑定事件时通过addEventListener函数，它有三个参数，第三个参数若是true，则表示采用事件捕获，若是false，则表示采用事件冒泡。

ele.addEventListener('click',doSomething2,true)

true=捕获

false=冒泡

传统绑定事件方式

在一个支持W3C DOM的浏览器中，像这样一般的绑定事件方式，是采用的事件冒泡方式。

ele.onclick = doSomething2

IE浏览器

如上面所说，IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。

ele.attachEvent("onclick", doSomething2);

附：事件冒泡（的过程）：事件从发生的目标（event.srcElement||event.target）开始，沿着文档逐层向上冒泡，到document为止。

事件的传播是可以阻止的：

• 在W3c中，使用stopPropagation（）方法

• 在IE下设置cancelBubble = true；

在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~

3.阻止事件的默认行为，例如click <a>后的跳转~

• 在W3c中，使用preventDefault（）方法；

• 在IE下设置window.event.returnValue = false;

不是所有的事件都能冒泡，例如：blur、focus、load、unload（不知道摘自哪儿。。）。

13.JSONP(with padding)

JSONP使用script元素作为Ajax传输的技术。（动态插入javascript）不受同源策略的影响，包含JSON编码数据的响应体会自动解码

14.热门的前端框架React

最热门的前端框架，毫无疑问是 React 。React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站.从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。

React.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

上一节的代码， HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写

React 允许将代码封装成组件（component）

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现。

15.热门的前端框架Angular

是一款开源 JavaScript 函式库，由 Google 维护，用来协助单一页面应用程式运行的。它的目标是透过 MVC 模式 (MVC) 功能增强基于浏览器的应用，使开发和测试变得更加容易。

函式库读取包含附加自定义（标签属性）的HTML，遵从这些自定义属性中的指令，并将页面中的输入或输出与由JavaScript变量表示的模型绑定起来。这些JavaScript变量的值可以手工设置，或者从静态或动态JSON资源中获取。

Angular在呈现和资料中间，可以简单建立双向的数据绑定。

一但建立双向绑定。使用者输入，会由Angular自动传到一个变量中，再自动读到所有绑到它的内容，更新它。

将应用逻辑与对DOM的操作解耦。这会提高代码的可测试性。

将应用程序的测试看的跟应用程序的编写一样重要。代码的构成方式对测试的难度有巨大的影响。

将应用程序的客户端与服务器端解耦。这允许客户端和服务器端的开发可以齐头并进，并且让双方的复用成为可能。

指导开发者完成构建应用程序的整个历程: 从用户界面的设计，到编写业务逻辑，再到测试。

Angular遵循软件工程的MVC模式,并鼓励展现，数据，和逻辑组件之间的松耦合.通过依赖注入（dependency injection），Angular为客户端的Web应用带来了传统服务端的服务，例如独立于视图的控制。因此，后端减少了许多负担，产生了更轻的Web应用。

16.热门的前端框架Backbone

Backbone.js为复杂WEB应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API；视图可以声明事件处理函数，并通过RESRful JSON接口连接到应用程序。

backbone.js提供了一套web开发的框架，通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互.它是基于jquery和underscore的一个js框架。

主要组成：

1.model：创建数据，进行数据验证，销毁或者保存到服务器上

2.collection：可以增加元素，删除元素，获取长度，排序，比较等一系列工具方法，说白了就是一个保存 models的集合类

3.view：绑定html模板，绑定界面元素的事件，初始的渲染，模型值改变后的重新渲染和界面元素的销毁等

优势：

1. 将数据和界面很好的分离开来。

2. 将事件的绑定很好的剥离出来，便于管理和迭代。

3. 使得Javascript程序的模块化更加清晰、明了。

应用场景：

最适合的应用场景是单页面应用，并且页面上有大量数据模型，模型之间需要进行复杂的信息沟通

17.REST

REST（英文：Representational State Transfer，简称REST）描述了一个架构样式的网络系统，比如 web 应用程序。它首次出现在 2000 年 Roy Fielding 的博士论文中，他是 HTTP 规范的主要编写者之一。在目前主流的三种Web服务交互方案中，REST相比于SOAP（Simple Object Access protocol，简单对象访问协议）以及XML-RPC更加简单明了，无论是对URL的处理还是对Payload的编码，REST都倾向于用更加简单轻量的方法设计和实现。值得注意的是REST并没有一个明确的标准，而更像是一种设计的风格。

它主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁，更有层次，更易于实现缓存等机制。

客户端和服务器之间的交互在请求之间是无状态的。从客户端到服务器的每个请求都必须包含理解请求所必需的信息。如果服务器在请求之间的任何时间点重启，客户端不会得到通知。此外，无状态请求可以由任何可用服务器回答，这十分适合云计算之类的环境。客户端可以缓存数据以改进性能。分层，底层独立。