前端知识体系

来源：互联网发布：淘宝金丝楠木手串真假编辑：程序博客网时间：2024/06/01 15:10

web前端知识体系：

首先，我们需要一定的理论知识，不管是你听别人讲授、自己看书还是网上淘资料，你都需要一定

的理论知识，每一种程序开发，都避免不了。第二，有了这些理论知识我们就可以编码了——不错——

but，没有人能抵挡住第三方框架和类库的诱惑，例如jquery；第三，有了这些理论知识和协助我们的

类库框架，我们就可真正的编码了。大家可能以为编码开发不就是写代码吗，还有啥？——这里面道道

多着呢；最后，开发程序的目的，最终是为了能高效、稳定的运行在相应的环境中，这其中又有哪些事

情需要我们去做？请期待；

一：理论知识

硬知识：

http标准：浏览器要从服务端获取网页，网页也可能将信息再提交给服务器，这其中都有

http的连接。web系统既然和http链接有瓜葛，你就必须去了解它。

http的请求过程：

1、建立一个socket连接，socket是通过ip和端口建立的，DNS解析过程（把网址

解析为ip地址，如果IP地址中不包含端口号就用默认端口）。现在已经拥有了

目标ip和端口号，这样我们就可以打开socket连接了。

socket的连接过程：

套接字：源IP地址和目的IP地址以及源端口号和目的端口号的组合称为套接

字。其用于标识客户端请求的服务器和服务。

（1）服务器监听：是服务器端套接字并不定位具体的客户端套接字，而是处于等

待连接的状态，实时监控网络状态。

（2）客户端请求：是指由客户端的套接字提出连接请求，要连接的目标是服务器

端的套接字。为此，客户端的套接字必须首先描述它要连接的服务器的套

接字，指出服务器端套接字的地址和端口号，然后就向服务器端套接字提

出连接请求。

（3）连接确认：是指当服务器端套接字监听到或者说接收到客户端套接字的连

接请求，它就响应客户端套接字的请求，建立一个新的线程，把服务器端

套接字的描述发给客户端，一旦客户端确认了此描述，连接就建立好了。

而服务器端套接字继续处于监听状态，继续接收其他客户端套接字的连接

请求。

DNS的过程：首先我们知道我们本地的机器上在配置网络时都会填写DNS，这样本机就

会把这个url发给这个配置的DNS服务器，如果能够找到相应的url则返回其ip，

否则该DNS将继续将该解析请求发送给上级DNS，整个DNS可以看做是一个树

状结构，该请求将一直发送到根直到得到结果。

DNS服务器：DNS中保存了一张域名(domain name)和与之相对应的IP地

址 (IP address)的表，以解析消息的域名。域名是Internet上某一台（有时也指地理位置）。域名是由一串用点分隔的名字组成的，通常包

含组织名，而且始终包括两到三个字母的后缀，以指明组织的类型或

该域所在的国家或地区。一个IP地址可以有多个域名，而IP地址不一定

有域名。

域名组成：一个完整的域名由二个或二个以上部分组成，各部分

之间用英文的句号"."来分隔。最后一个"."的

右边部分称为顶级域名或一级域名（TLD），最后一个"."的左边部分称为

二级域名（SLD）。二级域名左边为三级域名，以此类推。

2.请求连接成功建立后，开始向web服务器发送请求，这个请求一般是GET或POST命令

（POST用于 FORM参数的传递）。

GET命令的格式为：GET 路径/文件名 HTTP/1.0

文件名指出所访问的文件，HTTP/1.0指出Web浏览器使用的HTTP版本。

现在可以发送GET命令： GET /mydir/index.html HTTP/1.0。

3.应答 web服务器收到这个请求，进行处理。从它的文档空间中搜索子目录mydir的文件 index.html。

如果找到该文件，Web服务器把该文件内容传送给相应的Web 浏览器。为了告知浏览器，，Web服务器首先传送一些HTTP头信息，然后传送

具体内容（即HTTP 体信息），HTTP头信息和HTTP体信息之间用一个空行分开。常用的HTTP头信息有：

　　 ① HTTP 1.0 200 OK 　这是Web服务器应答的第一行，列出服务器正在运行的

HTTP版本号和应答代码。代码"200 OK"表示请求完成。

　　 ② MIME_Version:1.0　它指示MIME类型的版本。

　　 ③ content_type:类型　这个头信息非常重要，它指示HTTP体信息的MIME类型。

如：content_type:text/html指示传送的数据是HTML文档。

　　 ④ content_length:长度值　它指示HTTP体信息的长度（字节）。

4.关闭连接：当应答结束后，Web浏览器与Web服务器必须断开，以保证其它Web浏览

器能够与Web服务器建立连接。

http状态码的意义：

一、200状态码：成功 2××：成功处理了请求的状态码。

　　 1、200 ：服务器已成功处理了请求并提供了请求的网页。

　　 2、204：服务器成功处理了请求，但没有返回任何内容。

　　二、300状态码：重定向3×× ：每次请求中使用重定向不要超过 5 次。

　　 1、301：请求的网页已永久移动到新位置。当URLs发生变化时，使用301代码。搜索引擎

索引中保存新的URL。

　　 2、302：请求的网页临时移动到新位置。搜索引擎索引中保存原来的URL。

　　3、304：如果网页自请求者上次请求后没有更新，则用304代码告诉搜索引擎机器人，可

节省带宽和开销。

　　三、400状态码：客户端错误4×× ：表示请求可能出错，妨碍了服务器的处理。

　　 1、400：服务器不理解请求的语法。

　　 2、403：服务器拒绝请求。

　　 3、404：服务器找不到请求的网页。服务器上不存在的网页经常会返回此代码。

　　 4、410 ：请求的资源永久删除后，服务器返回此响应。该代码与 404（未找到）代码相

似，但在资源以前存在而现在不存在的情况下，有时用来替代404 代码。如果资

源已永久删除，应当使用 301 指定资源的新位置。

　　四、500状态码：服务器错误5×× ：表示服务器在处理请求时发生内部错误。这些错误可能

是服务器本身的错误，而不是请求出错。

　　1、500 ：服务器遇到错误，无法完成请求。

　　 2、503：服务器目前无法使用（由于超载或停机维护）。

http头部信息：

HTTP的头域包括通用头、请求头、响应头和实体头四个部分。每个头域由一个域名，冒号

（:）和域值三部分组成。

　 1、通用头部：是客户端和服务器都可以使用的头部，可以在客户端、服务器和其他应用程序之间提供一些非常有用的通用功能，如Date头部。

通用头域包含请求和响应消息都支持的头域，通用头域包含缓存头部 Cache- Control、Pragma及信息性头部Connection、Date、Transfer- Encoding、Update、Via。

　　 2、请求头部：是请求报文特有的，它们为服务器提供了一些额外信息，比如客户端希望接收什么类型的数据，如Accept头部。

请求头用于说明是谁或什么在发送请求、请求源于何处，或者客户端的喜好及能力。服务器可以根据请求头部给出的客户端信息，试着为客户端提供更好的响应。请求头域可能包含下列字段Accept、Accept-Charset、Accept-Encoding、Accept-Language、Authorization、From、Host、If-Modified-Since、If-Match、If-None-Match、If-Range、If-Range、If-Unmodified-Since、Max-Forwards、Proxy-Authorization、 Range、Referer、User-Agent。对请求头域的扩展要求通讯双方都支持，如果存在不支持的请求头域，一般将会作为实体头域处理。

　　 3、响应头部：便于客户端提供信息，比如，客服端在与哪种类型的服务器进行交互，如 Server头部。

响应头向客户端提供一些额外信息，比如谁在发送响应、响应者的功能，甚至与响应相关的一些特殊指令。这些头部有助于客户端处理响应，并在将来发起更好的请求。响应头域包含Age、Location、Proxy-Authenticate、Public、Retry-After、 Server、 Vary、Warning、WWW-Authenticate。对响应头域的扩展要求通讯双方都支持，如果存在不支持的响应头域，一般将会作为实体头域处理。

　　 4、实体头部：指的是用于应对实体主体部分的头部，比如，可以用实体头部来说明实体主体部分的数据类型，如Content-Type头部。

实体头部提供了有关实体及其内容的大量信息，从有关对象类型的信息，到能够对资源使用的各种有效的请求方法。总之，实体头部可以告知接收者它在对什么进行处理。请求消息和响应消息都可以包含实体信息，实体信息一般由实体头域和实体组成。实体头域包含关于实体的原信息，实体头包括信息性头部 Allow、Location，内容头部Content-Base、Content-Encoding、Content-Language、 Content-Length、 Content-Location、Content-MD5、Content-Range、Content- Type，缓存头部Etag、Expires、Last- Modified、extension-header。

cookie状态管理：

状态管理：将浏览器与web服务器之间的多次交互作为一个整体来处理，并且将多次交互所涉及的数据(即状态)保存下来。

客户端状态管理技术：即将状态（也就是多次交互所涉及的数据）保存在客户端（浏览器）

服务器端状态管理技术：即将状态保存在web服务器端。

cookie：a,是一种客户端的状态管理技术。b,服务器临时保存在浏览器端的少量的数据。

工作原理：当浏览器访问服务器时，服务器可以将少量数据以set-cookie消息头的方式发送给

浏览器,浏览器会将这些数据临时保存下来。当浏览器再次访问服务器，会将之前

保存的这些数据以cookie消息头的方式发送给服务器。

添加cookie： //name:cookie的名称，value:cookie的值。

Cookie c = new Cookie(String name,String value);

response.addCookie(c);

查询cookie： Cookie[] request.getCookies(); //如果没有任何的cookie，返回null。

String cookie.getName(); //返回cookie的名称

String cookie.getValue(); //返回cookie的值

编码问题：cookie的值或者名称只允许出现合理的ascii字符串。如果是中文，需要将中文转换成ascii字符串，否则报错。

String URLEncoder.encode(String str,String code); //编码

String URLDecoder.decode(String str,String code); //解码

生存时间问题：缺省情况下，浏览器会把cookie保存在内存里面，只要浏览器不关闭，cookie 就会一直存在，浏览器关闭，cookie就会被销毁。

setMaxAge(int seconds);

注： a,单位是秒。 b,seconds > 0 浏览器会将cookie保存在硬盘上，如果超

过了指定的时间，则cookie会被删除。 seconds < 0 缺省值(cookie保存在内存中). seconds = 0 删除cookie.比如，要删除一个名称为"cart"的cookie,

Cookie c = new Cookie("cart","");

c.setMaxAge(0);

response.addCookie(c)：

路径问题：a.什么是cookie的路径问题：浏览器在向服务器上的某个地址发请求时，会比较该地址是否符合cookie的路径的要求，只有符合条件的cookie才会被发送出去。

b.cookie的默认的路径等于添加该cookie的组件(servlet/jsp)的路径。

比如：/web07/biz01/addCookie.jsp 添加了一个名称为"cart"的cookie,则该 cookie 有一个默认的路径("/web07/biz01/")。

c.匹配规则：请求地址必须等于cookie的路径，或者是其子路径。

cookie的路径是 --/web07/biz01/

/web07/biz01/findCookie2.jsp yes

/web07/biz01/sub/findCookie3.jsp yes

/web07/findCookie1.jsp no

d.cookie.setPath(String path)修改默认路径;

比如： cookie.setPath("/appname"); 这样，应用内部的某个组件所添加的cookie 可以被该应用内部的其他组件访问到。

cookie的限制：

a. cookie可以被用户禁止。

b. cookie不安全(对于敏感数据，需要加密)。

c. cookie只能保存少量的数据(大约是4k)。

d. cookie的数量也有限制(大约是几百个)。

e.cookie只能保存字符串

方法 GET POST：

Http定义了与服务器交互的不同方法，最基本的方法有4种，分别是GET，POST，PUT，

DELETE。URL全称是资源描述符，将URL当作抽象的资源来看待和设计，我们可以这样认为：一个URL地址，它用于描述一个网络上的资源，而HTTP中的GET，POST，PUT，DELETE就对应着对这个资源的查，改，增，删4个操作。到这里，大家应该有个大概的了解了，GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。

GET:GET用于信息获取，而且应该是安全的和幂等的。所谓安全的意味着该操作用于获取信息而非修改信息。换句话说，GET 请求一般不应产生副作用。就是说，它仅仅是获取资源信息，就像数据库查询一样，不会修改，增加数据，不会影响资源的状态。

POSS:POST表示可能修改变服务器上的资源的请求。

区别：GET请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割

URL和传输数据，参数之间以&相连.POST把提交的数据则放置在是HTTP包的包体中。

存疑"GET方式提交的数据最多只能是1024字节，理论上POST没有限制.

HTTPS：

网景公司设计了SSL（Secure Sockets Layer）协议用于对HTTP协议传输的数据进行加密，从而就诞生了HTTPS。HTTPS在传输数据之前需要客户端（浏览器）与服务端（网站）之间进行一次握手，在握手过程中将确立双方加密传输数据的密码信息。TLS/SSL协议不仅仅是一套加密传输的协议，更是一件经过艺术家精心设计的艺术品，TLS/SSL中使用了非对称加密，对称加密以及HASH算法。

w3c标准：

标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和 XML，表现标准语言主要包括CSS行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

代码标准规范：参考 http://www.cnblogs.com/EricaMIN1987_IT/p/3868593.html

html html5：

超级文本标记语言（英文缩写：HTML）：是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准。它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。

脚本语言：是为了缩短传统的编写-编译-链接-运行（edit-compile-link-run）过程而创建的计算机编程语言。每次运行都会使对话框逐字重复。脚本语言(JavaScript，VBscript等)介于 HTML和C,C++,Java,C#等编程语言之间。　HTML通常用于格式化和链接文本。而编程语言通常用于向机器发出一系列复杂的指令。

公共网关接口：Common Gate Interface简称CGI。HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具，其程序须运行在网络服务器上。它提供一个计算机程序同HTTP协议或者WWW服务的接口，也就是人机交互接口；有了它，服务器可以提供交互式的站点以代替过去静态的文本和图象。绝大多数的CGI程序被用来解释处理来自表单的输入信息，并在服务器产生相应的处理，或将相应的信息反馈给浏览器。CGI程序使网页具有交互功能。

组件：组件（Component）是对数据和方法的简单封装。C++ Builder中，一个组件就是一个从 TComponent派生出来的特定对象。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。使用组件可以实现拖放式编程、快速的属性处理以及真正的面向对象的设计。

html5：最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言，随后

和W3C的xhtml2.0(标准)相结合，产生现在最新一代的超文本标记语言。

可以简单点理解成：HTML 5 ≈ HTML4.0+CSS3+JS+API。

特点：1、只有简简单单的声明 <!DOCTYPE html>

它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容

2、提供了一些新的html5标签<header> 、<nav>、<article>、<aside>、<footer>..

3、强大的绘图功能 Canvas标签 SVG

html：

语义化：

语义化的HTML就是正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码的

同时让网络爬虫很好地解析。有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获

取更多的有效信息，提升网页的权重。HTML 告诉我们一块内容是什么（或其意义），而不是它

长的什么样子，它的样子应该由CSS来决定。（结构与样式分离！写语义化的 HTML 结构其实

很简单，首先掌握 HTML 中各个标签的语义，在看到内容的时候想想用什么标签能更好的描述

它，是什么就用什么标签。

网络爬虫：又称网络蜘蛛、网络机器人，是一种搜索引擎用于自动抓取网页资源的

程序或者说叫机器人。从某一个网址为起点，去访问，然后把网页存回到数据库中，如

此不断循环，一般认为搜索引擎爬虫都是靠链接爬行的，所以管他叫爬虫。这个只有开

发搜索引擎才会用到。对于网站而言，只要有链接指向我们的网页，爬虫就会自动提取

我们的网页。

DOM：

DOM（对象文档模型（Document Object Model）），是W3C组织推荐的处理可扩展置标语言的标准编程接口。DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。也就是说，这是表示和处理一个HTML或XML文档的常用方法。DOM技术是用户页面可以动态的变化，从而大大使页面的交互性增强。但是DOM必须通过JavaScript等脚本语言来进行读取，改变HTML、XHTML以及XML等文档。

简单说就是DOM规定了HTML，XML等的一些规范，使JavaScript可以根基这些规范来进行各种操作。而这些规范我们可以用树来形象的表示：

通过这样的树，我们就可以很快找到我们想要操作的节点，进而进行各种属性，方法，事件等的操作。

2D、3D:

根据2维三维的坐标在h5提供的新特性canvas进行绘制图像。

本地存储：

HTML5storage提供了一种方式让网站能够把信息存储到你本地的计算机上，并再以后需要的时候进行获取。这个概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去。Html5的storage是存储在你的计算机上，网站在页面加载完毕后可以通过JavaScript来获取这些数据。

css css3:

层叠规则：

概念：CSS中的层叠就是让多个来源的样式叠加在一起，然后结合样式的特殊性（后面详细介绍）、继承性，确定最终应用的样式。

样式的来源分五种：

1、浏览器默认的样式；

2、用户自定义样式。一些页面中会提供一些让用户自定义字体大小颜色等的快捷键；

3、外部样式，即<link>引用的CSS后缀文件；

4、内部样式，即写在<style></style>标签内的样式；

5、内联样式，即直接写在style属性内的样式（现在的网页设计强调结构、表现、行为三者分离，所以这个还是少用为好。我会强迫

性移除内联样式的，哈哈）；

规则：找出一个给定元素的所有声明后，先按显式权重和来源进行排序。如果相同，则比较特殊性。若再相同，则比较顺序。

选择器：

选择器的用法和功能参照：http://www.cnblogs.com/AllenChou/p/4684753.html

排版：

尺寸单位rem所有引用 rem 定义的字体大小都是相对于根元素 <html>文本的

大小，相对于使用 em，这种方式将我们从手动计算字体大小的繁琐过程中解脱出来。

绘制：

基本图形的绘制：

矩形：通过CSS设置宽度、高度、背景色即可

圆角矩形：在矩形设置的基础上，增加圆角属性设定，这里用的单位是百分比,好处是可适应整体大小的变化而变化。

圆:设置为正方形，将圆角设成50%即可，其实就是圆角的半径为正方形的的半径。

椭圆：在圆形的基础上，将正方形设置成矩形即可。

三角形：做一个正方形，宽高都设成100px，设定四个边的border的宽度为10px，每

条边设置不同的颜色。继续，将各条边的宽度放大，将正方形宽高都设成0px，将每条边的border的宽度都设成50px（原正方形宽度或高度的一半）

最后把不需要的边都透明掉，只留下底边，并且透明掉背景

直形：压缩高度或宽度就变成了直线

弧：本质上是利用圆角来实现，现在需要把矩形的左上角的圆角绘制成弧形，那么把右边和底边border的宽度设成0px，让他们不可见，设置左

上角圆角的半径，让其变大，看得明显些，其余的圆角半径全都设成0px，这样一个弧形就完成了。

详细参考：http://www.cnblogs.com/kongxianghai/p/5463391.html

动画：

常用动画库：

animate.css：是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库。包含了60多款不同类型的CSS3动画，包括：晃动，闪动，各种淡出淡出效果，如果你想快速的整合各种CSS3动画特效的话，使用它即可方便的实现。

magic.css、

Effect.css：针对不同UI的CSS3动画和过渡效果集，包含了丰富的CSS3动画和过渡效果

Hover.css是一套使用CSS3动画实现的Hover特效集锦，包含了：2D变形、边框过渡效果

阴影过渡效果、页脚翻转效果。

常用动画：http://www.cnblogs.com/starof/p/4968769.html

javascript:

DOM APP：

DOM的工作模式是：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。

document.getElementById() 根据Id获取元素节点

主要应用：http://www.cnblogs.com/kissdodog/archive/2012/12/25/2833213.html

BOM APP:

BOM（Browser Object Document）即浏览器对象模型。

BOM提供了独立于内容而与浏览器窗口进行交互的对象；

由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；

BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组

织是W3C，BOM最初是Netscape浏览器标准的一部分。

作用：

可以移动、调整浏览器大小的window对象，可以用于导航的

location对象与history对象，可以获取浏览器、操作系统与用户屏幕信息

的navigator与screen对象，可以使用document作为访问HTML文档的入

口，管理框架的frames对象等。

详见：http://www.cnblogs.com/2010master/p/5824215.html

事件：

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript

侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数

的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发

某个函数。事件在 HTML 页面中定义。鼠标点击、页面或图像载入、

鼠标悬浮于页面的某个热点之上、在表单中选取输入框、确认表单、键盘按键

直接在dom对象上注册事件名称，就是DOM0写法

document.getElementById("test").onclick =function(e){};

DOM2事件通过addEventListener和removeEventListener管理 addEventListener当然就是注册

事件，她有三个参数，分别为："事件名称", "事件回调", "捕获/冒泡"。

ajax:

实现动态刷新，提升用户体验，缺点也还不少，比如破坏了浏览器的back功能，

同一个URL打开的界面并不是完全相同，还有安全性能等方面

详解：http://www.cnblogs.com/yjzhu/archive/2013/01/28/2879542.html

这里以表单为例说一下实现Ajax的步骤：

先从表单中获取我们需要的数据、然后建立相应的URL、设置onreadystatechangge

函数、打开连接、发送请求。

例子见：http://www.cnblogs.com/myvin/p/4865364.html

json:

Json其实是一种专门为AJAX无刷新传输数据而设计的标准，因为AJAX传递简单数据，直接用

string就可以了，而在传递复杂数据时，则需要自己进行格式的定义，并进行数据的组装和解析的过程，

如果数据不是一般的复杂，这将是一个令人异常痛苦的过程，而Json可以将复杂对象序列化成一个字

符串，并在浏览器端在讲字符串反序列化为Javascript对象，供方便的读取，而且Json几乎支持所有语

言。

服务器端：通过C#序列化.Net对象为Json字符串

浏览器端：Json字符串反序列化为Javascript对象

特点：一种数据格式（就是规范你的数据要怎么表示）、JSON是基于文本的数据格式、

轻量级的数据格式

xml:

XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。

服务器端解析是通过XSLT转换工具（如Xalan）将XML和XSL合成为HTML，送到客户端。

客户端解析是把XML和XSL都显现给客户端，把解析的任务交给浏览器

websocket:

WebSocket protocol 是HTML5一种新的协议。它是实现了浏览器与服务器全双工通信

(full-duplex)。HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。

建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和

通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的 HTTP 请求，

服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过

这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

应用实例方法：https://my.oschina.net/u/1266171/blog/357488

ECMAScript：

语法：

开启严格模式:如果需要在函数中开启，在函数的第一行加上这段字符串”use strict”，如果

需要整js代码中开启，在js第一行加上这段字符”use strict”。

定义变量：let （类似于var）let声明的变量不会有变量提升，只有在前面定义了在后面

才能使用;let存在块级作用域（当大括号结束时，块级作用域中的变量都会被销

毁）;let不能多次重复定义一个变量

定义常量const:常量：常量指的是不会改变的数据（Window Linux Unix）

作用：一旦申明一个常量：值不能再改变、常量具有块级作用域。

字符串的扩展：

模板语法：`模板字符串`

箭头函数:()=>{}：js中使用匿名函数的位置太多了，固定结构为function(){}，为了方

便书写，es6规定了一种新的写法来简化匿名函数：去掉function改为=>,结构为()=>{}

具体参见：http://www.cnblogs.com/jolene/p/6067290.html

宿主对象：

本地对象(Boolean, Number, String…)独立于宿主环境的 ECMAScript 实现提供的对象

内置对象(Global & Math)由ECMAScript实现提供的、独立于宿主环境的所有对象，在

ECMAScript程序开始执行时出现

宿主对象(BOM & DOM)所有非本地对象都是宿主对象（host object），即由

ECMAScript 实现的宿主环境提供的对象。所有 BOM 和 DOM 对象都是宿主对象。

对象详细讲解：http://blog.csdn.net/byrantch/article/details/51172997

原型链继承：

就是一个引用类型继承另一个引用类型的属性和方法。简单回顾下构造函数、原型和实例的关

系，每一个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含

一个指向原型对象的内部指针。如果我们让一个原型对象等于另一个类型的实例，显然，此时的原

型对象将要包含另一个原型的指针，相对的，另一个原型中也包含着一个指向另一个构造函数的指

针，另一个原型又是另一个类型的实例，如此层层递进，就构成了原型的链条，这就是原型链的概

念。先从实例中查找属性和方法，如果找不到，在从实例的原型中查找（原型property 原型链 __proto__）;

继承模式见：http://www.cnblogs.com/shirly77/p/6648971.html

上下文环境：

当ECMAScript开始执行时，创建一个全局执行环境；每次进入一个函数时（这个函数被调用

），则创建一个当前函数的执行环境并压入栈，离开此函数时从栈中弹出此执行环境并销毁。

每一个执行环境有一个与其相关的变量对象，变量对象记录了此执行环境中定义的变量及

函数。

详细讲解：http://www.cnblogs.com/leoo2sk/archive/2010/12/19/ecmascript-scope.html

作用域、闭包：

作用域链：

其中每个执行环境都会关联一个作用域链，如果形象一点，你可以将作用域链想象成一个指针栈，其中每个元素都是指向某个变量对象的指针，

从栈顶到栈底，指向的对象变量依次是当前环境变量对象，上一层环境变量对象，…，最后一个指向全局环境变量对象。

闭包：

闭包就是能访问另一个函数作用域中变量的函数。因为闭包通常通过匿名函数实现，所以经常有人将闭包和匿名函数两个名词混用。闭包的优点很明

显，就是可以访问另一个函数域中的变量，缺点也明显，比较耗内存（因为同时保持了N个变量对象）。许多高手通过闭包创造了很多美妙的

JavaScript编程模式，如模拟块作用域，模拟私有变量等等

执行模型：

当ECMAScript开始执行时，创建一个全局执行环境和全局变量对象；后面每次进入一个函数时（这个函数被调用），则创建一个当前函数的执行环

境并压入栈，同时创建此执行环境的变量对象和作用域链，作用域链的创建规则是复制上一层环境的作用域链，并将指向本环境变量对象的指针放到

链首；离开函数时，从栈中弹出此执行环境并销毁，同时销毁环境的变量对象和作用域链。

正则表达式：

A,\{d}表示单个数字， \{d}{n}表示n个数字的序列， \{d}{3}匹配3个数字的序列

B,在方括号中的字符集表示匹配这些字符中任意一个， [-. ]匹配一个短横线，一个

点或一个空格（点在括号中没有特殊含义）

C,后接'?'的组件是可选的，\{d}{3} [-. ]? \{d}{4} ,表示开始是3个数字，后接一个可

选的短横线或空格，然后是4个数字

正则的扩展：1、构造函数可以通过第二个参数添加正则表达式的修饰符了；

2、添加了关于utf16字符、粘性匹配的正则表达式修饰符；

3、粘性匹配指：用一个正则表达式连续对一个字符串进行匹配，每次匹配的

起始位置是上一次的结束位置；

4、可以通过属性查看正则的内容（sticky）和修饰符（flags）了；

详见：http://blog.csdn.net/qq20004604/article/details/70667364

严格模式：

详细讲解：http://www.cnblogs.com/liyunhua/p/4495547.html

软知识：

设计模式：

目的：为了代码可重用性、让代码更容易被他人理解、保证代码可靠性。设计模式使代码编写真正工程化；

设计模式是软件工程的基石脉络，如同大厦的结构一样。

类型：

创建型模式：单例模式、抽象工厂模式、建造者模式、工厂模式、原型模式。
结构型模式：适配器模式、桥接模式、装饰模式、组合模式、外观模式、享元模式、代理模式。
行为型模式：模版方法模式、命令模式、迭代器模式、观察者模式、中介者模式、备忘录模式、解释器模
式（Interpreter模式）、状态模式、策略模式、职责链模式(责任链模式)、访问者模式。
工厂模型：定义一个用于创建对象的接口，让子类决定将哪一个类实例化。Factory Method使一个类
的实例化延迟到其子类。
命令模式：将一个请求封装为一个对象，从而使你可用不同的请求对客户进行参数化；对请求排队或
记录请求日志，以及支持可取消的操作。
更多见：http://baike.baidu.com/link?url=7PefZ9XARvKzHnJ6BV2xB4sdW6096dhQMtF0gcE34RlqY
7hCuB9yEh6Lq2Bkulrtr2wLxeFibGiPnw8guCoaNv-JKEPHAXhXZrBJmWRU8Yv-yf-Il6DgU-OzEqFDaG50
设计：http://www.cnblogs.com/maowang1991/archive/2013/04/15/3023236.html或者见菜鸟教程

面向对象：它强调系统的结构应该直接与现实世界的结构相对应，应该围绕现实世界中的对象来构造系

统，而不是围绕功能来构造系统。

1、面向对象的基本哲学是认为世界是由各种各样具有自己的运动规律和内部状态的对象所组成的；2、不同对象之间的相互作用和通讯构成了完整的现实世界。

详见：面向对象思想

算法：十大算法

快速排序算法、堆排序算法、归并排序、二分查找算法、BFPRT(线性查找算法)、DFS（深度优先搜索）、

BFS(广度优先搜索)、Dijkstra算法、动态规划算法、朴素贝叶斯分类算法

算法编程思想及步骤：http://www.lupaworld.com/article-242544-3.html

数据结构：

数据结构是计算机存储、组织数据的方式。数据结构是指相互之间存在一种或多种特定关系的数据元素的集合。

通常情况下，精心选择的数据结构可以带来更高的运行或者存储效率。数据结构往往同高效的检索算法和索引技术有关。

四大部分：集合、线性、树形、图形

二：类库框架：

首先，jquery一定是大部分web前端开发者不可或缺的工具。而我利用jquery不仅仅停留在只

使用它的API和插件上，我还会自己去写jquery插件，我还会去读jquery的源码、了解jquery的设

计思路。如果你也能那样做，请相信我，你会收获到意想不到的效果。如果有一个问题：怎样才能

最最透彻的理解javascript的事件系统？最佳答案之一：读几遍（一遍可能读不懂）jquery关于事

件处理部分的源码！bootstrap不用再过多解释了吧，从github上的排名也能看出道道来。甚至连

我们公司的UI设计师，都从bootstrap上截图作为素材。fontAwesome是全世界最强大的图标系

统。相比于css制作图标来说，这个要好很多倍，不管是开发、效率还是维护上。icomoon.io能让

我自定义选择自己的图标文件。requirejs和seajs这种模块定义系统，也一定是你系统中不可或缺

的。我曾经看过一个教程，讲师就说：requirejs带来了既jquery之后的第二次前端技术变革。其

他的，backbone、angular、react这些也慢慢的开始发挥了他们的价值，此处精力有限就不再赘

述了——但是，他们很重要——你至少要试着去了解它们。

用于浏览器：

jQuery：

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框

架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功

能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；

拥有便捷的插件扩展机制和丰富的插件。入口模块、底层支持模块和功能模块

常用API:

页面元素的引用、jQuery对象与dom对象的转换、获取jQuery集合的某一项、同一函数实现set和

get 、集合处理功能、支持方法的连写。详见：http://www.jb51.net/article/21949.htm

常用插件：

顺序插件下载地址：http://files.cnblogs.com/itxiaoyan2013/6excel20.rar

表单验证插件：下载地址：http://files.cnblogs.com/itxiaoyan2013/Validform_v5.3.2.rar

各种常用的插件作用及其下载地址见：http://blog.csdn.net/yangguoqi/article/details/9999251

自制插件：

制作一个什么样的插件：制作什么插件，有什么用，怎么样？

jQuery插件文件命名：给你的jQuery插件命一个名称，然后去jQuery官网

http://plugins.jquery.com/查查是否有相同的插件，这很重要，如果已经存在类似的

插件，或改进或换名(建议如果有的话就好好参考一个别人的，也许你的比它更好)

，文件命名jquery.[你的插件名].js，如：jquery.dataForAjax.js。

书写插件代码：jQuery插件架构、如何传入参数和参数的使用、

测试jQuery插件：

发布jQuery插件：

详细流程：http://blog.csdn.net/fdsa123456/article/details/4297331

代码解读、设计思路：

详见：http://www.cnblogs.com/coco1s/p/5261646.html

设计思路：方法的封装，JQuery做的另外一件事就是批量操作；选择Dom对象（选择器）形成一个JQuery对象 2.对这个JQuery对象进行方法的调用。

bootstrap：

是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成，下载工具包，并且在HTML中引用bootstrap.min.css或者bootstrap.css文件，两者的效果都是一样的差别就在于第一个是简化版，省去了一些没有意义的空格，一般在我们进行开发的时候使用，可以减少占用的内存，但是如果我们要对其源代码进行修改或者查询的话，还是一般使用bootstrap.css。

常用样式：

设置文本框等长度、按钮尺寸、

详见：http://blog.csdn.net/u012947019/article/details/16983583

常用插件：

过渡效果 bootstrap-transition.js，模态对话框 bootstrap-modal.js、

下拉菜单 bootstrap-dropdown.js滚动监听 bootstrap-scrollspy.js

常见：http://caibaojian.com/bootstrap/javascript.html

衍生框架：ProUI

ProUI是一个响应和功能全面的管理和前端模板基于流行的Bootstrap3.2框

架。它覆盖默认的Bootstrap来匹配自己的现代风格和清洁设计,同时扩展了它在很

大程度上没有过于复杂而失去它的简单。即使你不熟悉的框架,也可以很容易地复

制模板的UI组件。ProUI是一套专业、现代、完整和灵活的管理和前端模板,可用于

构建各种项目:Web应用程序,后台网站,前端网站,自定义管理面板,管理

板,CMS,CRM甚至一个组合,博客,商业网站。我建议你好好看看预览发现所有的包

含功能!

fontAwesome、 icomoon.io:

fontawesome图标提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小，颜色，

阴影。

引入路径：在 <head> 标签里, 引入。

把CSS文件夹和fonts复制到网站根目录(记得安装字体)即可使用。使用i标签表示icon

自定义一种字体，给不同的字配置作为 icon 的图案，然后通过 CSS 嵌入其中使用。

icomoon.io:icomoon图标是一个超赞超实用的开源图标系列

下载选定icomoon图标，Web代码编写

详见：http://blog.csdn.net/goodgirl1991/article/details/50416974

requirejs:

RequireJS是一款遵循AMD规范协议的JavaScript模块加载器，不但能在浏览器端充分利用，同样能在其

他的JavaScript运行时环境。

定义一个模块：

在RequireJS中，通过向全局变量注册define函数来声明一个模块。在定义模块时，我们要遵循一下

的规范：

一个JavaScrip文件即为一个模块，即一个JavaScrip文件只能定义一个define函数。

RequireJS最佳实践推荐，定义模块时不要指定模块标识。这样方便后期压缩。

RequireJS最佳实践推荐推行尽量将代码封装到define函数里面。尽量不要使用shim配置项。

加载一个模块：

RequireJS提供require这个函数用来加载模块，同样有些规范需要我们遵守，

一个JavaScrip文件最好只定义一个require模块入口。

require一般放在页面的入口出，用来加载其他的模块。

AMD规范协议：完整描述了模块的定义，依赖关系，引用关系以及加载机制。以简单而优雅的方式统一了

JavaScript的模块定义和加载机制，并迅速得到很多框架的认可和采纳。

详细步骤：http://blog.csdn.net/local_people/article/details/47144511

seajs:

seajs是一个模块加载器,本来我们是需要手动创建 script标签引入 js文件的，但用seajs后，它就自动帮我们完成这些工作。

原理：

模块加载：

就是当调用有加载功能的函数如 seajs.use 、 require 、require.async 时，

其内部代码会创建一个script标签，把src设置成你要引入的js文件，然后append到DOM文档中进行加载，

　　当加载完毕后，再把这个script标签移除掉，所以当我们审查元素时看不到有那个<script>标签，

　　但因为文件已经引入了，即使把这个script移除也不会影响代码使用.

模块依赖：

例如 a.js 依赖于 b.js，那在sea.js内部代码中，就先加载b.js然后再加载a.js，这样就可以解决依赖问题了。

命名冲突：

sea.js是用define( fn )函数来定义模块的，里面的变量都是局部的，得给外面一个接口调用才行啊。

　　 so, exports对象就出场啦，当你使用sea.js定义一个模块的时候，你可以把你的对外函数接口都放在exports对象上。

详细解析：http://www.cnblogs.com/ada-zheng/p/4330506.html

BackBone Angular:

BackBone.js:

Backbone.js 是一个重量级js MVC 应用框架，也是js MVC框架的鼻祖。它通过Models数据模型进行键值绑定及custom事件处理，通过模型集合器Collections提供一套丰富的API用于枚举功能，通过视图Views来进行事件处理及与现有的Application通过JSON接口进行交互。

简而言之，Backbone是实现了web前端MVC模式的js库.

Backbone依赖于Underscore.js， DOM 处理依赖于 Backbone.View 和 jQuery ，

因此，在引入Backbone.js之前，Underscore.js必须在它之前引入，而jQuery也最好一并

引入，最后再引入Backbone.js

详见：https://segmentfault.com/a/1190000002386651

MVC:

MVC：后端服务器首先（过程1）通过浏览器获取页面地址，对网址进行解析，得到视图View给它的一个网址，然后通过控制器controller进行解析，然后去找对应的数据（过程2），找到数据后，再将数据Model返回给控制器（过程3），控制器controller再对数据进行加工，最后返回给视图（过程4），即更新视图View。这种结构在后端是非常清晰且易实现的

Angular:

AngularJs（后面就简称ng了）是一个用于设计动态web应用的结构框架。首先，它是

一个框架，不是类库，是像backbone一样提供一整套方案用于设计web应用。它不仅仅是

一个javascript框架，因为它的核心其实是对HTML标签的增强.

标签增强：使你能够用标签完成一部分页面逻辑，具体方式就是通过自定义标签、自定义属

性等，这些HTML原生没有的标签/属性在ng中有一个名字：指令（directive）。

应用：首先从官网http://angularjs.org/下载angular.js，引入你的页面中，然后我们使用

最简单的手工启动方式，直接调用bootstrap方法。

详见：http://www.cnblogs.com/lvdabao/p/AngularJs.html

react:

原理：引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套 DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时， React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并。

深度学习：http://www.ruanyifeng.com/blog/2015/03/react.html

用于node.js：

自带模块：

http、url、fs

解释：http://blog.csdn.net/zerojustgg/article/details/61414782

其他模块：

jquery、backbone、express

详见：http://blog.csdn.net/zzulp/article/details/8114540

三：编码开发：

如果你专门做web前端，就不要在用vs了，当然要选择sublime。写html语句还用手动一条一

条写吗？你得需要zencoding的协助，否则效率太差了。另外，针对html、css、js的压缩、合并、

语法检查，文件的清除、复制这些操作，你还要手动去做吗？——你需要grunt或者gulp的帮助。　

在此毛遂自荐自己的教程《用grunt搭建自动化web开发环境》，讲的比较详细，适合初学者学习。

如果你的系统中有比较多的js代码或者文件，请选择一个合适的模块定义规范——CMD / AMD请用

git来帮助你做文件版本管理，最简单的就是使用github。调试、测试，也都有专门的工具，都是需要学的……

开发工具：

编辑器：

sublime：

zencoding：

“#”表id，“.”表类，“+”表并列，“>”指子内容，“()”指同级范围，

“[]”表属性，#和.的简写，“*”表标签克隆，“{}”表标签内容，

“$”表连续数。

详细解释：http://blog.chinaunix.net/uid-22414998-id-3184766.html

常用插件和快捷键

快捷键：就近选择相同项: ctrl+d，选择当前文件所有匹配项: alt+f3，

`选择文本的包裹标签: ctrl+shift+`，向上扩展一层: ctrl+shift+a；

插件：emmet：类似jQuery的语法，编码蹭蹭往上提。不过要求PyV8环境

侧边栏增强插件SideBarEnhancements：大大增强右键列表的功能，装上就能用

控制台呼出插件Terminal:用node，Grunt等等要调出控制台的娃知道的，简直神奇有木有，装上就能用。

webstorm：

任何一个编辑器都需要保存(ctrl + s)，这是所有win平台上编辑类软件的特点，但是webstorm编辑文件右上

角是没有那个熟悉的 * 的。
好处：省去了ctrl + s之后，在结合Firefox的vim，基本不动鼠标就可以看到结果页面了。
坏处：没有以前的 * 标识，万一键盘误操作也会被立即存储。

应用技巧：http://blog.csdn.net/juvary/article/details/51176168

效率工具：

grunt：

一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：压缩文件、合并文件、简单语法检查 1、安装nodeJS环境 2、安装grunt。

深度学习：http://www.cnblogs.com/yexiaochai/p/3603389.html

插件讲解：http://blog.csdn.net/playboyanta123/article/details/43230831

uglify:

uglify是一个文件压缩插件 http://www.cnblogs.com/artwl/p/3449303.html

concat:

concat是grunt中用来做文件连接的常用插件,多个文件合并成一个文件,多个合并任务

http://www.bkjia.com/webzh/880551.html

cssmin:

压缩项目目录中的所有css文件

http://blog.csdn.net/isaisai/article/details/44983085

jshint:

JSHint 是一个使用 JavaScript 编写的 JavaScript 的代码质量检查工具，主要用来检查代码质量

以及找出一些潜在的代码缺陷。 http://www.cnblogs.com/haogj/p/4781677.html

watch:

watch 可以监控特定的文件，在添加文件、修改文件、或者删除文件的时候自动执行自定义的任

务，比如 livereload 等等。http://www.cnblogs.com/haogj/p/4785288.html

gulp：

Gulp 是基于 NodeJS 的项目，一个用作自动化构建的工具，核心通过各种 Transform Stream 来实现文件

的处理，然后再进行输出。Transform Streams 是 NodeJS Stream 的一种，是可读又可写的，它会对传给它

的对象做一些转换的操作。

一系列相应的插件：

gulp-load-plugins：自动加载 package.json 中的 gulp 插件

gulp-clean-css：压缩 CSS 文件，gulp-htmlmin：压缩 HTML 文件，

gulp-babel: 使用 babel 编译 JS 文件

深度学习：http://www.cnblogs.com/2050/p/4198792.html

模块定义：

AMD requirejs:

RequireJS是一个工具库，主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块，实现异步或动

态加载，从而提高代码的性能和可维护性。它的模块管理遵守AMD规范。

CMD seajs:

CMD模块定义:在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下：define(factory); define Function

模块定义与使用方法：http://www.cnblogs.com/libin-1/p/6024997.html

commonjs:

所有代码都运行在模块作用域，不会污染全局作用域。
模块可以多次加载，但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
模块加载的顺序，按照其在代码中出现的顺序。

对模块使用详解：http://javascript.ruanyifeng.com/nodejs/module.html

版本管理：

git github:

Git:是一个强调速度的分布式版本控制软件和源代码管理系统.

版本控制：是一种记录若干文件内容变化，以便将来查阅特定版本修订情况的系统。

分布式版本控制：分布式版本管理系统就是为了解决这个单点问题，在这类系统中，像Git、Mercurial、

Bazaar以及Darcs等，客户端并不只是提取最新的文件快照，而是把原始的代码仓库完整地镜

像下来。这么一来，任何一处协同工作用的服务器发生故障，事后都可以用任何一个镜像出来

的本地仓库恢复。因为每一次的提取操作，实际上都是一次对代码仓库的完整备份。更进一

步，这类系统都可以指定和若干不同的远端代码仓库进行交互。因此，你就可以在同一个项目

中，分别和不同工作小组的人相互协作。你可以根据需要设定不同的协作流程。

git原理步骤学习：http://blog.csdn.net/wengpingbo/article/details/8985132

github:只支持Git作为唯一版本库格式的项目托管平台Github，

GitHub是一个利用Git提供免费的代码托管服务的网站。

使用方法：

第一种是项目的创建人将你添加到项目的合作贡献者列表中，这样你就可以直接向这个项目推送

代码。

第二种是Fork一份代码到自己的空间下，这样的一份代码自己具有推送的权限。如果开发的进展很

好，项目的创建者可以将Fork的这些项目添加为Remote仓库，在他认为合适的时候将代码fetch到自己

的仓库中进行合并，也可以由我们发起请求，请创始人将代码合并。GitHub上提倡的就是使用这种方式

进行开发合作。

主要讲解：http://blog.csdn.net/lifuxiangcaohui/article/details/17216733

svn:

SVN是一种集中式的版本控制工具，所有的客户端将自己的代码上传到中央服务器，中央服务器的版本数据库会

保存上传的各个版本的代码，并进行统一管理。

SVN是一个增量式的版本控制，它不会讲各个版本的副本都完整的保存下来，而只会记录下版本之间的差异，然后

按照顺序更新或者恢复特定版本的数据。这使得服务端的存储量会非常低。

使用应用安装：http://blog.sina.com.cn/s/blog_3eba8f1c0102wx6k.html

调试：

chrome控制台：使用详解：http://www.codeceo.com/article/chrome-console.html

firebug :使用方法和技巧：http://www.cnblogs.com/felix-/p/4319698.html

测试：

grunt 、qunit：

安装grunt-contrib-qunit，在Gruntfile.js当中载入grunt-contrib-qunit，创建测试任务

详细解说：http://blog.csdn.net/zqjflash/article/details/39610429

gulp相应的插件：

gulp-protractor

四：运行环境

浏览器：

浏览器兼容性：

css hack：

把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

CSS Hack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法

实现方式：条件注释法，类内属性前缀法，选择器前缀法

详细见：http://www.jb51.net/css/493362.html

JavaScript 事件系统：

讲解:http://www.cnblogs.com/dojo-lzz/p/4324208.html

渐进增强、优雅降级：

由于低级浏览器不支持css3，但css3的效果又太优秀不忍放弃，所以在高级浏览中使用css3而低

级浏览器只保证最基本的功能。

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然

后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

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

　　区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基

础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；

而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

详解：http://www.cnblogs.com/mofish/p/3822879.html

响应式布局：

响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定

的版本。

步骤：1、布局及设置meta标签。2、通过媒体查询来设置样式media query

3、设置多种视图宽度，字体设置。4、响应式设计需要注意的问题

详细：http://www.cnblogs.com/dreamsboy/p/5656009.html

web安全：

同源策略：

同源策略：指的是浏览器对不同源的脚本或者文本的访问方式进行的限制

同源：就是指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可。

同源策略限制的不同源之间的交互主要针对的是js中的XMLHttpRequest等请求

详解：http://www.cnblogs.com/chaoyuehedy/p/5556557.html

xss 跨站点攻击：

利用系统执行了未经过滤的危险代码，XSS是一种基于网页脚本的注入方式，也就是将脚本攻

击载荷写入网页执行以达到对网页客户端访问用户攻击的目的，属于客户端攻击。

详见：http://netsecurity.51cto.com/art/201301/376873.htm

CSRF跨站点请求伪造：

原理与xss相反，CSRF是伪造成合法用户发起请求。当用户登录以站点时用浏览器打开一恶意网址，就有可能遭受攻击。

详见：http://www.cnblogs.com/dolphinX/p/3403520.html

点击劫持：

点击劫持（ClickJacking）是一种视觉上的欺骗手段。大概有两种方式，一是攻击者使用一个透明

的iframe，覆盖在一个网页上，然后诱使用户在该页面上进行操作，此时用户将在不知情的情况下点击透

明的iframe页面；二是攻击者使用一张图片覆盖在网页，遮挡网页原有位置的含义

解决方法：在防御图片覆盖攻击时，需要检查用户提交的HTML代码中，img标签的style属性是否可能

导致浮出。

详解：http://www.2cto.com/article/201603/492656.html

SQL注入：

SQL注入攻击将危险代码绕过正常的文本输入变为可执行的SQL执行语句从而操纵数据库，从而进一步探

测、操纵数据库信息。属于服务器攻击。

原理：通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器

执行恶意的SQL命令。

利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单

中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。

详见：http://blog.csdn.net/stilling2006/article/details/8526458

性能优化：

压缩：

GZIP：即网页压缩，是由WEB服务器和浏览器之间共同遵守的协议，也就是说WEB服务器和浏览器都必

须支持该技术，而现在主流的浏览器都是支持的。

协商过程详见:http://www.cnblogs.com/sniper007/archive/2012/07/31/2616901.html

CSS sprites：

网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，

当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

原理：CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的

“background-image”，“background- repeat”，“background-position”的组合进行背景定位，

background-position可以用数字能精确的定位出背景图片的位置。

详解：http://www.cnblogs.com/mofish/archive/2010/10/12/1849062.html

合并减少http请求：

每次请求都会带上一些额外的信息进行传输，当请求的资源很小，比如1个不到1k的图标，可能

request带的数据比实际图标的数据量还大。所以当请求越多的时候，在网络上传输的数据自然就多，

传输速度自然就慢了。

原因解释：http://blog.csdn.net/chenchun91/article/details/52207008

合并文件：是通过把所有的脚本放到一个文件中来减少HTTP请求的方法，如可以简单地把所有的

CSS文件都放入一个样式表中。当脚本或者样式表在不同页面中使用时需要做不同的修改，这可能会相

对麻烦点，但即便如此也要把这个方法作为改善页面性能的重要一步。

缓存：

参考：http://blog.csdn.net/liaoyulin0609/article/details/51762935

CDN:

cdn: 内容分发网络，其基本思路是尽可能的避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输更快、更稳定。通过在网络各处放置节点服务器所构成的现有互联网基础之上的一层虚拟网络，CDN系统能够实时的根据网络流量和各节点的连接，负载状况以及用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的就是使用户能够就近的获取请求数据，解决网络访问拥挤状况，提高用户访问系统的响应时间。

详见：http://blog.csdn.net/zyhlwzy/article/details/49202615

避免重定向：

重定向：用户的原始请求（例如请求A）被重定向到其他的请求（例如请求B）。这是HTTP世界中本来就存在的技术和现象，它本身没有所谓的好和坏，它的存在也确实有其理由

http中状态码的标记：301表示永久重定向，302表示临时重定向。

原理讲解：http://www.cnblogs.com/chenxizhang/archive/2013/05/05/3060804.html

node：

重点学习：http://www.ruanyifeng.com/blog/2015/05/command-line-with-node.html

0 0