高并发优化页面HTTP请求

最新推荐文章于 2024-07-24 11:55:34 发布

Funnee

最新推荐文章于 2024-07-24 11:55:34 发布

阅读量3.8k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/u010344410/article/details/94398892

版权

javascript 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

问题：

在页面上有许多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压缩，可以减少下载时间；

（一）原页面：

<!DOCTYPE html>
<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 -->
<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>
<!-- endsrcipt -->
</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的请求数(减少了总的请求响应时长)，压缩了大小(减少了下载时长)。

<!DOCTYPE html>
<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 -->
<script th:src="@{/js_import.js}"></script>
<!-- endsrcipt -->
</body>
</html>