从事前端也有一段日子了，但也算有些知识储备， 今天朋友问我该怎么构建一个高性能的项目，我便把自己总结的一些经验贴出来。
代码规范：制定前端开发代码规范文档 ， 由于js是一门弱类型的解释性语言 ，编码风格有很多。但是团队代码规范一定要统一。这便于以后项目的维护，优化，版本迭代。
接口规范：制定RESTful架构接口规范文档。规范的统一格式数据有助于前后端友好的配合，提高开发效率，方便前端http拦截。设置统一的提示语，警告语，错误语等等，（个人感觉最大的好处还是能减少前后台打架）
工程化：前端项目的工程化是必须的，前端项目涉及到多页面，多功能，多状态，甚至多系统，怎么能把复杂逻辑化作简易代码， 把代码有组织的管理起来，不在零散，把统一复用的东西统一起来，是我们必须考虑的一个问题 组件化概念，css全局化和局部模块化 css的唯一性和易用性，代码量， 效率问题 缓存控制、缓存复用、请求合并、按需加载、同步/异步加载、资源管理 框架选用 等等，
主流框架：
由于前端工作的特殊性，需要前端开发人员不断的学习新的知识，但是在面对让人眼花缭乱的新技术的时候，往往不知道该选择哪个学习，下面我们来分析一下这三个框架各自吸引人的优点。
Vue是一个轻量级的框架，通过进行双向数据的绑定来驱动界面，很多程序员学习新框架的时候，都会先从Vue开始，因为它的官方文档介绍的非常清楚，而且能够非常快速的通过异步批处理的方式更新DOM，可以把解耦的、可复用的组件组合在一起使用，还可以允许多种模块的安装，使用的场景很灵活。
React这个框架源于Facebook的内部项目，因为公司对当时盛行的JavaScript MVC框架不满意，所以就自己写了一套好用的框架。React可以通过对DOM的模拟从而减少与DOM的交互，从而轻易的解决了跨浏览器兼容的问题，它的模块化把组件隔离，出现问题时方便程序员修改，还因为同构JavaScript所以有助于搜索引擎的优化。
Angular是一个以JavaScript编写的库，拥有良好的应用程序，模板的功能非常强大，自带丰富的angular指令，可以通过指令扩宽HTML，而且可以通过表达式绑定数据到HTML，因为引入了Java的一些内容，所以很容易就可以写出复用代码，有效提高了团队开发的速度。
链接：https://www.jianshu.com/p/f2f98c04b05b
前端渐进式：依靠缓存，Web Workers等现代技术打造的渐进式web应用。
HTTP：
作为一个前端开发，必定少不了和网络打交道，所以了解http是提高性能的重要方式
工作原理
HTTP是基于客户/服务器模式，且面向连接的。典型的HTTP事务处理有如下的过程： [8]
（1）客户与服务器建立连接；
（2）客户向服务器提出请求；
（3）服务器接受请求，并根据请求返回相应的文件作为应答；
（4）客户与服务器关闭连接。
客户与服务器之间的HTTP连接是一种一次性连接，它限制每次连接只处理一个请求，当服务器返回本次请求的应答后便立即关闭连接，下次请求再重新建立连接。这种一次性连接主要考虑到WWW服务器面向的是Internet中成干上万个用户，且只能提供有限个连接，故服务器不会让一个连接处于等待状态，及时地释放连接可以大大提高服务器的执行效率。 [8]
HTTP是一种无状态协议，即服务器不保留与客户交易时的任何状态。这就大大减轻了服务器记忆负担，从而保持较快的响应速度。HTTP是一种面向对象的协议。允许传送任意类型的数据对象。它通过数据类型和长度来标识所传送的数据内容和大小，并允许对数据进行压缩传送。当用户在一个HTML文档中定义了一个超文本链后，浏览器将通过TCP/IP协议与指定的服务器建立连接。 [8]
从技术上讲是客户在一个特定的TCP端口（端口号一般为80）上打开一个套接字。如果服务器一直在这个周知的端口上倾听连接，则该连接便会建立起来。然后客户通过该连接发送一个包含请求方法的请求块。
HTTP规范定义了9种请求方法，每种请求方法规定了客户和服务器之间不同的信息交换方式，常用的请求方法是GET和POST。服务器将根据客户请求完成相应操作，并以应答块形式返回给客户，最后关闭连接。 [8]
运作方式
在WWW中，“客户”与“服务器”是一个相对的概念，只存在于一个特定的连接期间，即在某个连接中的客户在另一个连接中可能作为服务器。基于HTTP协议的客户/服务器模式的信息交换过程，它分四个过程：建立连接、发送请求信息、发送响应信息、关闭连接。 [7]
HTTP协议是基于请求/响应范式的。一个客户机与服务器建立连接后，发送一个请求给服务器，请求方式的格式为，统一资源标识符、协议版本号，后边是MIME信息包括请求修饰符、客户机信息和可能的内容。服务器接到请求后，给予相应的响应信息，其格式为一个状态行包括信息的协议版本号、一个成功或错误的代码，后边是MIME信息包括服务器信息、实体信息和可能的内容。
图3 http运作方式的一种
其实简单说就是任何服务器除了包括HTML文件以外，还有一个HTTP驻留程序，用于响应用户请求。你的浏览器是HTTP客户，向服务器发送请求，当浏览器中输入了一个开始文件或点击了一个超级链接时，浏览器就向服务器发送了HTTP请求，此请求被送往由IP地址指定的URL。驻留程序接收到请求，在进行必要的操作后回送所要求的文件。在这一过程中，在网络上发送和接收的数据已经被分成一个或多个数据包（packet），每个数据包包括：要传送的数据；控制信息，即告诉网络怎样处理数据包。TCP/IP决定了每个数据包的格式。如果事先不告诉你，你可能不会知道信息被分成用于传输和再重新组合起来的许多小块。
许多HTTP通讯是由一个用户代理初始化的并且包括一个申请在源服务器上资源的请求。最简单的情况可能是在用户代理(UA)和源服务器(O)之间通过一个单独的连接来完成。
当一个或多个中介出现在请求/响应链中时，情况就变得复杂一些。中介有三种：代理(Proxy)、网关(Gateway)和通道(Tunnel)。一个代理根据URI的绝对格式来接受请求，重写全部或部分消息，通过URI的标识把已格式化过的请求发送到服务器。网关是一个接收代理，作为一些其它服务器的上层，并且如果必须的话，可以把请求翻译给下层的服务器协议。一个通道作为不改变消息的两个连接之间的中继点。当通讯需要通过一个中介(例如：防火墙等)或者是中介不能识别消息的内容时，通道经常被使用。
报文格式
HTTP报文由从客户机到服务器的请求和从服务器到客户机的响应构成。请求报文格式如下： [7]
请求行 － 通用信息头 － 请求头 － 实体头 － 报文主体
请求行以方法字段开始，后面分别是 URL 字段和 HTTP 协议版本字段，并以 CRLF 结尾。SP 是分隔符。除了在最后的 CRLF 序列中 CF 和 LF 是必需的之外，其他都可以不要。有关通用信息头，请求头和实体头方面的具体内容可以参照相关文件。
应答报文格式如下：
状态行 － 通用信息头 － 响应头 － 实体头 － 报文主体
状态码元由3位数字组成，表示请求是否被理解或被满足。原因分析是对原文的状态码作简短的描述，状态码用来支持自动操作，而原因分析用来供用户使用。客户机无需用来检查或显示语法。有关通用信息头，响应头和实体头方面的具体内容可以参照相关文件。
状态信息：
1xx:信息
消息描述
100 Continue服务器仅接收到部分请求，但是一旦服务器并没有拒绝该请求，客户端应该继续发送其余的请求。
101 Switching Protocols服务器转换协议：服务器将遵从客户的请求转换到另外一种协议。
2xx:成功
消息描述
200 OK请求成功（其后是对GET和POST请求的应答文档。）
201 Created请求被创建完成，同时新的资源被创建。
202 Accepted供处理的请求已被接受，但是处理未完成。
203 Non-authoritative Information文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝。
204 No Content没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的。
205 Reset Content没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。
206 Partial Content客户发送了一个带有Range头的GET请求，服务器完成了它。
3xx:重定向
消息描述
300 Multiple Choices多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。
301 Moved Permanently所请求的页面已经转移至新的url。
302 Found所请求的页面已经临时转移至新的url。
303 See Other所请求的页面可在别的url下被找到。
304 Not Modified未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求（一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档）。服务器告诉客户，原来缓冲的文档还可以继续使用。
305 Use Proxy客户请求的文档应该通过Location头所指明的代理服务器提取。
306 Unused此代码被用于前一版本。目前已不再使用，但是代码依然被保留。
307 Temporary Redirect被请求的页面已经临时移至新的url。
4xx:客户端错误
消息描述
400 Bad Request服务器未能理解请求。
401 Unauthorized被请求的页面需要用户名和密码。
401.1登录失败。
401.2服务器配置导致登录失败。
401.3由于 ACL 对资源的限制而未获得授权。
401.4筛选器授权失败。
401.5ISAPI/CGI 应用程序授权失败。
401.7访问被 Web 服务器上的 URL 授权策略拒绝。这个错误代码为 IIS 6.0 所专用。
402 Payment Required此代码尚无法使用。
403 Forbidden对被请求页面的访问被禁止。
403.1执行访问被禁止。
403.2读访问被禁止。
403.3写访问被禁止。
403.4要求 SSL。
403.5要求 SSL 128。
403.6IP 地址被拒绝。
403.7要求客户端证书。
403.8站点访问被拒绝。
403.9用户数过多。
403.10配置无效。
403.11密码更改。
403.12拒绝访问映射表。
403.13客户端证书被吊销。
403.14拒绝目录列表。
403.15超出客户端访问许可。
403.16客户端证书不受信任或无效。
403.17客户端证书已过期或尚未生效。
403.18在当前的应用程序池中不能执行所请求的 URL。这个错误代码为 IIS 6.0 所专用。
403.19不能为这个应用程序池中的客户端执行 CGI。这个错误代码为 IIS 6.0 所专用。
403.20Passport 登录失败。这个错误代码为 IIS 6.0 所专用。
404 Not Found服务器无法找到被请求的页面。
404.0（无）–没有找到文件或目录。
404.1无法在所请求的端口上访问 Web 站点。
404.2Web 服务扩展锁定策略阻止本请求。
404.3MIME 映射策略阻止本请求。
405 Method Not Allowed请求中指定的方法不被允许。
406 Not Acceptable服务器生成的响应无法被客户端所接受。
407 Proxy Authentication Required用户必须首先使用代理服务器进行验证，这样请求才会被处理。
408 Request Timeout请求超出了服务器的等待时间。
409 Conflict由于冲突，请求无法被完成。
410 Gone被请求的页面不可用。
411 Length Required"Content-Length" 未被定义。如果无此内容，服务器不会接受请求。
412 Precondition Failed请求中的前提条件被服务器评估为失败。
413 Request Entity Too Large由于所请求的实体的太大，服务器不会接受请求。
414 Request-url Too Long由于url太长，服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时，就会发生这种情况。
415 Unsupported Media Type由于媒介类型不被支持，服务器不会接受请求。
416 Requested Range Not Satisfiable服务器不能满足客户在请求中指定的Range头。
417 Expectation Failed执行失败。
423锁定的错误。
5xx:服务器错误
消息描述
500 Internal Server Error请求未完成。服务器遇到不可预知的情况。
500.12应用程序正忙于在 Web 服务器上重新启动。
500.13Web 服务器太忙。
500.15不允许直接请求 Global.asa。
500.16UNC 授权凭据不正确。这个错误代码为 IIS 6.0 所专用。
500.18URL 授权存储不能打开。这个错误代码为 IIS 6.0 所专用。
500.100内部 ASP 错误。
501 Not Implemented请求未完成。服务器不支持所请求的功能。
502 Bad Gateway请求未完成。服务器从上游服务器收到一个无效的响应。
502.1CGI 应用程序超时。 ·
502.2CGI 应用程序出错。
503 Service Unavailable请求未完成。服务器临时过载或宕机。
504 Gateway Timeout网关超时。
505 HTTP Version Not Supported服务器不支持请求中指明的HTTP协议版本。
