提升Web性能的技巧

1. 采用反向代理服务器(Reverse Proxy Server)来对应用进行加速和保护

其作用主要在以下三方面：

负载平衡 – 运行在反向代理服务器上的负载平衡器会在不同的不服务器间进行传输平衡。透过它，你可以进行无差别的服务器增添。
存静态文件 – 对于直接的文件请求，例如图片文件或代码文件，可以直接存储在反向代理服务器然后直接发送给用户，从而可以进行快速访问并为应用服务器进行减负使得程序性能得到提升。
安全保护 – 反向代理服务器可以进行高安全度配置和对威胁进行识别和监测。

2. 增添一个负载平衡器

为网站增添一个负载平衡器是一个相对简单的变更，但是它可以带来不错的性能和安全性提升。负载平衡器的作用在于在不同服务器间进行传输分发。

负载平衡器的实施前提是有一个反向代理服务器，它在接收到Internet通信后把相关请求发送到其它服务器。平衡器的妙处在于它支持两个或以上的应用服务器，使用选择算法来分割服务器间的请求。

3. 缓存静态和动态内容

缓存技术的使用可使内容更快地展示给用户，其处理策略有：在需求发出时更快地处理内容，把内容存放在更快的设备上，或是使内容离用户更近。

4. 数据压缩

压缩技术是一个巨大的潜在性能加速器。其主要作用体现在对图片，视频或音频等文件，能够进行高效的压缩处理。

5. 优化SSL/TLS访问

尽管SSL/TLS变得越来越流行，但是它对于性能的影响也应得到重视。其对性能的影响主要体现在两个方面：

每当新的连接开启，初始化握手都是无法避免的，即浏览器每次都需要使用HTTP/1.X建立服务器连接。
存放于服务器上的加密数据会越来越大，加密后用户读取时也需要进行解码。

那么该如何进行处理呢？

会话缓存—使用ssl_session_cache来直接缓存建立新SSL/TLS连接的参数
会话ID化—把指定SSL/TLS的标识/ID存放起来，但要建立新连接时，就可以直接取用，从而免去重新建立通信的繁琐。
OCSP stapling优化—通过抓取SSL/TLS认证信息来减免建立通信的时间。

6. 部署HTTP/2或SPDY

对于已经启用SSL/TLS的网站，一旦结合HTTP/2和SPDY将能实现性能上的强强联合；因为其结果是会让单一连接的建立仅需一次通信握手。SPDY和HTTP/2的主要特性是它们使用的是单一连接而不是多方连接。

7. 定期更新软件版本

8. 优化Linux性能

例如对Linux进行以下配置或处理：

Backlog队列

如果你有一些将要停用的连接，可以考虑增加net.core.somaxconn。

文件描述符

NGINX允许每个连接最多使用两个文件描述符。如果你的系统服务的是多个连接，你可能需要考虑增大sys.fs.file_max的值。

瞬时端口

当作为一个代理使用时，NGINX会为每个upstream服务器创建临时的瞬时(ephemeral)端口。因此可以尝试加大net.ipv4.ip_local_port_range的值来增加可用端口数。

9. 优化Web服务器性能

访问日志优化

在NGINX中，在access_log中加入buffer=size参数来实现日志的缓存写入；加入flush=time则可实现在某个时间间隔后进行缓存内容写入。

缓存

启用缓存可使连接响应更快。

客户端活动连接

活动连接可减少重连的次数，特别是启用SSL/TLS的情况下。

Upstream活动连接

Upstream连接指的是连接到程序服务器，数据库服务器等的连接。

限制资源的访问

采取合适的策略来限制资源访问可以提高性能和安全性。

进行worker处理

Worker处理模式就是请求驱动处理模式。NGINX使用了一个基于事件的模型和OS依赖机制来有效地对请求进行分发。

进行socket分表

Socket分表可以为每个worker处理创建一个socket监听器,当核心委派连接分到给监听器时，可以马上知道哪个处理是即将执行的，从而使处理流程变得简洁。

线程池处理

任何计算机线程都有可能由于单个缓慢的操作而挂起。对于web服务器软件来说，磁盘访问是一个性能瓶颈，例如进行数据复制等操作。当使用线程池来处理时，可以把一些响应慢的操作单独地放入某个任务组里面，从而不会对其它操作造成影响。

10.进行实时监控以快速解决问题和瓶颈

实施实时监控，可以全面掌握系统的运行情况，发现问题解决问题，甚至是找出造成性能瓶颈或运行缓慢的原因。

例如可对如下的问题进行监控：

服务器宕机
连接访问丢失
服务器缓存丢失严重
服务器发送了错误的数据

一、架构简介

1、软件主要分为两种架构C/S和B/S

C/S——Customer(客户端）/Server(服务器）

B/S——Browser（浏览器）/Server

Browser:html、css、javaScript、jquery、ajax

Server:java、jsp、servlet、filter、list、ener、spring、spring mvc、mybatis

2、W3C标准

网页主要由3部分组成：结构—HTML用于描述页面的结构、表现—CSS控制页面中元素的样式、行为—JavaScript负责页面的行为

二、HTML（Hypertext Markup Language)超文本标记语言

元素：也称标签

父元素：（父标签）和子元素直接上下级关系

祖先元素：包含父元素

兄弟元素：例如header和body

子元素：和父标签有直接上下级关系

后代元素：后代元素包含子元素

三、常用标签

1、标题标签

  <!-- html中的标题标签:h1~h6 -->

    <!-- h标签强调的是重要性 -->

    <h1>这是一级标题</h1>

    <h2>这是二级标题</h2>

    <h3>这是三级标题</h3>

    <h4>这是四级标题</h4>

    <h5>这是五级标题</h5>

    <h6>这是六级标题</h6>

2、段落标签

  <p>

      锄 禾日当午，<br/>

      汗滴禾下土。<br/>

      谁知盘中餐，<br/>

      粒粒皆辛苦。<br/>

    </p>

3、换行标签

      锄禾日当午，<br/>

      汗滴禾下土。<br/>

      谁知盘中餐，<br/>

      粒粒皆辛苦。<br/>

4、特殊符号

空格：  

<：<

5、分割线

    <hr/>

      我是分割线

    <hr/>

6、无序列表

ul:unordered list 无序列表

li:list item 具体表单项

   <ul>

       <li>张三</li>

       <li>极速</li>

       <li>23</li>

       <li>极其</li>

    </ul>

7、有序列表

ol:ordered list 有序列表

li:list item 具体表单项

  <ol>

       <li>张三</li>

       <li>极速</li>

       <li>23</li>

       <li>极其</li>

    </ol>

8、img标签

img标签用于加载图片

alt:表示图片未正常加载的时候需要显示的信息

src:图片的路径

相对路径:表示的是相对于当前文件所在目录的路径

1）和当前文件在同一个目录下

2）图片据在的目录和当前文件在同一个文件夹

3）图片所在的目录是当前文件的上一级或上级 e.g ../img/im.gif或../../img/im.gif

绝对路径:

互联网资源:http://

本地资源:file:///

9、iframe框架

<body>

这是iframe页面

<iframe src="img.html" width="300" heigth="500"></iframe>

</body>

8、a标签

a标签中的属性：

href="":代表要跳转的地址

target="",规定在何处打开目标页面

四、表格

 <table border="1" align="center" cellspacing="0" width="400" heigth="233">

      <tr>

           <td>姓名</td>

           <td>年龄</td>

           <td>性别</td>

           <td>籍贯</td>

      </tr>

      <tr>

           <td>张三</td>

           <td>32</td>

           <td>男</td>

           <td>河北</td>

      </tr>

      <tr>

           <td>李三</td>

           <!-- 跨行 -->

           <td rowspan="2" style="color:red;font-    size:30">25</td>

           <td>女</td>

           <td >重庆</td>

      </tr>

       <tr>

           <td>张三1</td>

           <!-- colspan 跨列 -->

           <td colspan="3">22</td>

      </tr>

    </table>

五、表单

<body>

    <!--

    action:表示要跳转到目标地址

    method:指定表单的请求方式

        post:浏览器不会以地址栏的方式传递参数

        get:表单的默认请求方式，如果以get请求提交，表单的参数会在地址栏中传递

     -->

        <form action="2.html" method="get">

              用户名：<input type="text" name="username" value="张三"/>

              <br/>密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" name="pwd"/>

             <br> 性别：<input type="radio" name="gender" value="1"/>男

                  <!-- 单选按钮通过name来区分组 -->

                 <input type="radio" name="gender" value="2"/>女

             <br/>爱好：<input type="checkbox" name="hobby" value="1"/>羽毛球

             <input type="checkbox" name="hobby" value="2"/>篮球

             <!-- 对于select 下拉列表而言，name和value是分开的 -->

             <br/>籍贯：

             <select name="address">

                 <option value="1">河北 </option>

                 <option value="2">湖南 </option>

                 <option value="3">山西 </option>

             </select>

             <br/><input type="submit"  value="Submit"/>

        </form>

 </body>

六、CSS

1、样式表

1）行内样式表

id：identifier属性在整个html页面中必须是唯一

 <p id="sss" class="ab">什么颜色？</p>

　 2）内部样式表

<style type="text/css">

</style>

3）外部样式表

 <link rel="stylesheet" type="text/css"href="style.css" />

2、选择器

#sss{

color:red;

backgroud-color:yellow;

}

P{

color:red

}

.ab{

font-size:30px;

}

</style>

<head>

　　<style type="">/*一个并集选择器*/

    h1,h2,h3,p{

    font-size:12px;

    color:green;

    }    /*并集选择器内依次有交集选择器(h2.special)、类选择器(special)、ID选择器(#one)*/

    h2.special,.special,#one{

    text-decoration: underline;

    color: red;

    }/*交集选择器*/

    h2.special{

    color:blue;

    font-size: 30px

    }
　</style>
</head>
<body>

    <h2>示例文字000</h2><!--应用于上方的并集选择器，绿字-->

    <h2 class="special">这是一段文字</h2><!--应用于下方交集选择器，交集选择器和并集选择器重复定义的内容，以交集选择器为准，下划线，蓝色大字，而不是红色-->

    <p class="special">这是一段文字</p><!--体现并集选择器中的类选择器，下划线，并集选择器优先级低于类选择器，所以不是绿字，是红字-->

    <h4 id="one">这是一段文字</h4><!--体现并集选择器中的ID选择器，下划线，红字-->

    <h4>这是一段文字</h4><
/body>

注意

    <!-- 标签不能交叉嵌套 -->

    <p>

      <i>i标签倾斜</i>

      <b>b标签加粗&lt;</b>

    </p>

    <!-- 注释不能嵌套 -->

   <!-- 一定要设置 标签的正常结束 -->