高并发优化页面HTTP请求
问题：
在页面上有许多js，css的链接，在低并发访问时，往往看不出问题存在。
但是在高并发访问的情况下，这些HTTP请求无疑会增加服务器的负担。
HTTP请求知识梳理：
Stalled（阻塞）：
浏览器对同一个主机域名的并发连接数有限制，因此如果当前的连接数已经超过上限，那么其余请求就会被阻塞，等待新的可用连接；此外脚本也会阻塞其他组件的下载；
优化措施：
1、将资源合理分布到多台主机上，可以提高并发数，但是增加并行下载数量也会增大开销，这取决于带宽和CPU速度，过多的并行下载会降低性能；
2、脚本置于页面底部；
DNS Lookup（域名解析）：
请求某域名下的资源，浏览器需要先通过DNS解析器得到该域名服务器的IP地址。在DNS查找完成之前，浏览器不能从主机名那里下载到任何东西。
优化措施：
1、利用DNS缓存（设置TTL时间）；
2、利用Connection:keep-alive特性建立持久连接，可以在当前连接上进行多个请求，无需再进行域名解析；
Initial connection（初始化连接）：
TCP建立连接的三次握手时间
SSL（包含于HTTPS连接中）：
http是超文本传输协议，以明文方式发送内容，不提供任何方式的数据加密，如果被不法分子截取浏览器和服务器之间的传输报文，会获取其中的信息。
https 是安全套接字层超文本传输协议，就是在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。因此建立HTTPS连接的时间相当于三次握手的时间+SSL时间。
Request sent（发送请求）：
发送HTTP请求的时间（从第一个bit到最后一个bit）
优化措施：
1、减少HTTP请求，可以使用CSS Sprites、内联图片、合并脚本和样式表等；
2、对不常变化的组件添加长久的Expires头（相当于设置久远的过期时间），在后续的页面浏览中可以避免不必要的HTTP请求；
Waiting（等待响应）：
通常是耗费时间最长的。从发送请求到收到响应之间的空隙，会受到线路、服务器距离等因素的影响。
优化措施：
使用CDN(内容分发网络)，将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求，提高响应速度；
Content Download（下载）：
下载HTTP响应的时间（包含头部和响应体）
优化措施：
1、通过条件Get请求，对比If-Modified-Since和Last-Modified时间，确定是否使用缓存中的组件，服务器会返回“304 Not Modified”状态码，减小响应的大小；
2、移除重复脚本，精简和压缩代码，如借助自动化构建工具webpack、grunt、gulp等；
3、压缩响应内容，服务器端启用gzip压缩，可以减少下载时间；
（一） 原页面：
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" class="fill i-layout-default">
<head>
<title>页面title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="@{/a.css}"/>
<link rel="stylesheet" th:href="@{/b.css}"/>
head>
<body>
<div>页面div>
<script th:src="@{/common/a.js}">script>
<script th:src="@{/common/b.js}">script>
<script th:src="@{/common/c.js}">script>
<script th:src="@{/common/d.js}">script>
body>
html>
（二）优化思路：
在单线程测试下，一个js文件即使很小(简单来说，下载耗时很小)，所耗费的请求时间也要10-20ms(请求响应耗时)。
在高并发的情况下，每个请求都要占据服务器资源，会导致有的请求超时，因此应当尽量减少页面的css，js请求。
(1)css采用合并css文件，放在一个文件中。
(2)采用webpack.js整合打包并压缩处理。
方案一：将所有js直接合并打包
//webpack.config.js 只展示部分代码
module.exports = {
mode: 'none', //development,production
entry: {
js_import: ["/common/a.js","/common/b.js","/common/c.js","/common/d.js"]
},
plugins: [
//UglifyJsPlugin会将js压缩成无空格换行符的形式
new UglifyJsPlugin({
uglifyOptions: {
parallel:true,
ie8: true,
sourceMap: true,
}
})
]
};
方案二：将所有js放入一个新的js目录在打包这个新文件
/forImport/new.js：
//new.js 仅用于合并打包js
import {a} from "../common/a";
import {b} from "../common/b";
import {c} from "../common/c";
import {d} from "../common/d";
webpack.config.js：
//webpack.config.js 只展示部分代码
module.exports = {
mode: 'none', //development,production
entry: {
js_import: ["/forImport/new.js"]
},
plugins: [
//UglifyJsPlugin会将js压缩成无空格换行符的形式
new UglifyJsPlugin({
uglifyOptions: {
parallel:true,
ie8: true,
sourceMap: true,
}
})
]
};
注意：
在优化过程中，我将已经被压缩处理过的js(诸如jquery.min.js)，继续打包进来，会导致其无法正常使用（大概是因为压缩过后变量重名的问题）。应该使用未曾被压缩过的js。
（三）优化后的页面：
减少了js，css的请求数(减少了总的请求响应时长)，压缩了大小(减少了下载时长)。
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" class="fill i-layout-default">
<head>
<title>页面title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" th:href="@{/new.css}"/>
head>
<body>
<div>页面div>
<script th:src="@{/js_import.js}">script>
body>
html>