Nginx 合并请求连接且加速网站访问实例详解

前言

作为这个世界上最好的web服务器之一，Nginx的优势不明而喻。下面来讲讲，Nginx是如何合并请求连接的。

小知识

当我们在浏览网页的时候，对浏览速度有一个重要的影响因素，就是浏览器的并发数量。并发数量简单通俗的讲就是，当浏览器网页的时候同时工作的进行数量。

当然浏览器的并发请求数目限制是针对同一域名的，同一时间针对同一域名下的请求有一定数量限制，超过限制数目的请求会被阻塞。

首先我们看下各个浏览器的并发连接数：

罗列一下浏览器这么决定可能有什么考虑

  • 由于TCP 协议的限制，PC 端只有65536个端口可用以向外部发出连接，而操作系统对半开连接数也有限制以保护操作系统的 TCPIP 协议栈资源不被迅速耗尽，因此浏览器不好发出太多的 TCP 连接，而是采取用完了之后再重复利用 TCP 连接或者干脆重新建立 TCP 连接的方法。
  • 如果采用阻塞的套接字模型来建立连接，同时发出多个连接会导致浏览器不得不多开几个线程，而线程有时候算不得是轻量级资源，毕竟做一次上下文切换开销不小。
  • 这是浏览器作为一个有良知的客户端在保护服务器。就像以太网的冲突检测机制，客户端在使用公共资源的时候必须要自行决定一个等待期。当超过2个客户端要使用公共资源时，强势的那个邪恶的客户端可能会导致弱势的客户端完全无法访问公共资源。从前迅雷被喷就是因为它不是一个有良知的客户端，它作为 HTTP 协议客户端没有考虑到服务器的压力，作为 BT 客户端没有考虑到自己回馈上传量的义务。

淘宝tengine

我们在访问有些网站的时候，会看到代码中的部分js和css文件是通过一次请求获取的，上面的小知识知道浏览器请求的并发数量是有限制的，但是如果把多条记录合并一次请求就可能会加快响应速度。

淘宝使用的tengine是基于nginx的web服务器，从11年底开源。开源模块nginx-http-concat，可以合并多个文件在一个响应报文中。

安装

初次安装第三方模块nginx-http-concat

wget http://tengine.taobao.org/download/tengine-2.2.0.tar.gz
wget https://github.com/alibaba/nginx-http-concat/archive/master.zip -O nginx-http-concat-master.zip
unzip nginx-http-concat-master.zip
tar -xzvf tengine-2.2.0.tar.gz
cd tengine-2.2.0

配置编译安装

 ./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --add-module=../nginx-http-concat-master
 make
 make install

如果已经安装过Nginx，只是配置第三方插件。Nginx -V，检查一下Nginx的版本，如果没有，下载对应的版本。

执行一下代码即可。

./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module --add-module=../nginx-http-concat-master
make

编译成功以后

#复制之前请备份nginx执行文件
cp /objs/nginx /usr/local/nginx/sbin/nginx

杀掉Nginx，重启即可。

配置

在location段增加如下配置：

location /static/css/ {
  concat on;
  concat_max_files 20;
  concat_unique off;
  concat_types text/css application/javascript;
}

合并方式

http://static.52itstyle.com/static/css/??index.css,common.css?v=20171111

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 由于Nginx配置文件问题导致打不开网站unknown directive的解决

    由于Nginx配置文件问题导致打不开网站unknown directive 下午手贱看了看nginx的配置文件(PS:老是记不住位置/usr/local/nginx/conf/nginx.conf),稍微改了一些东西,保存重启nginx后发现网站打不开了... 当时就毛了,ping是通的,连vpn也是通的,唯独网站打不开,看来肯定是把nginx的配置文件弄坏了 打开文件看了半天也没发现有什么问题 执行/usr/local/nginx/sbin/nginx -t  出现以下提示 nginx: [e

  • 加速nginx性能: 开启gzip和缓存

    加速nginx性能: 开启gzip和缓存

    开启gzip 配置 # 开启gzip gzip on; # 启用gzip压缩的最小文件,小于设置值的文件将不会压缩 gzip_min_length 1k; # gzip 压缩级别,1-10,数字越大压缩的越好,也越占用CPU时间,后面会有详细说明 gzip_comp_level 2; # 进行压缩的文件类型.javascript有多种形式.其中的值可以在 mime.types 文件中找到. gzip_types text/plain application/javascript applicat

  • nginx中使用nginx-http-concat模块合并静态资源文件

    首先了解一下 nginx-http-concat,他是一个淘宝的开源Nginx模块,是一个能把多个CSS和JS合并成一个请求的Nginx模块,对于Web性能优化非常有意义. Github地址:https://github.com/alibaba/nginx-http-concat, 先看看淘宝用起来是什么样的,访问淘宝网主页,查看源代码可以看到类似的这样的style/script链接 复制代码 代码如下: <link rel="stylesheet" href="//g

  • 详解在使用CDN加速时Nginx获取用户IP的配置方法

    关于CDN 内容分发网络(Content delivery network或Content distribution network,缩写:CDN)是指一种通过互联网互相连接的电脑网络系统,利用最靠近每位用户的服务器,更快.更可靠地将音乐.图片.视频.应用程序及其他文件发送给用户,来提供高性能.可扩展性及低成本的网络内容传递给用户. 内容分发网络的总承载量可以比单一骨干最大的带宽还要大.这使得内容分发网络可以承载的用户数量比起传统单一服务器多.也就是说,若把有100Gbps处理能力的服务器放在只

  • WIN下Nginx缓存加速配置方法

    Nginx.conf 程序代码 复制代码 代码如下: worker_processes 1; events { worker_connections 1024; } http { include mime.types; include proxy.conf; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name localhost; loc

  • Nginx 合并请求连接且加速网站访问实例详解

    Nginx 合并请求连接且加速网站访问实例详解

    前言 作为这个世界上最好的web服务器之一,Nginx的优势不明而喻.下面来讲讲,Nginx是如何合并请求连接的. 小知识 当我们在浏览网页的时候,对浏览速度有一个重要的影响因素,就是浏览器的并发数量.并发数量简单通俗的讲就是,当浏览器网页的时候同时工作的进行数量. 当然浏览器的并发请求数目限制是针对同一域名的,同一时间针对同一域名下的请求有一定数量限制,超过限制数目的请求会被阻塞. 首先我们看下各个浏览器的并发连接数: 罗列一下浏览器这么决定可能有什么考虑 由于TCP 协议的限制,PC 端只有

  • Linux Nginx 配置SSL访问实例详解

    Linux Nginx 配置SSL访问实例详解 生成证书 可以通过以下步骤生成一个简单的证书: 首先,进入你想创建证书和私钥的目录,例如: $ cd /usr/local/nginx/conf 创建服务器私钥,命令会让你输入一个口令: $ openssl genrsa -des3 -out server.key 1024 创建签名请求的证书(CSR): $ openssl req -new -key server.key -out server.csr 在加载SSL支持的Nginx并使用上述私钥

  • vue axios数据请求get、post方法及实例详解

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下. import axios from 'axios' 引入之后我们就可以进行数据请求了,在methods中创建一个方法 methods:{ getInfo(){ let url = "url" axios.get(url).then((r

  • python字典的元素访问实例详解

    说明 1.字典中没有下标的概念,使用key值访问字典中对应的value值.当访问的key值不存在时,代码会报错. 2.get('key'):直接将key值传入函数,当查询到相应的value值时,返回相应的值,当key值不存在时,返回None,代码不会出错. 3.get(key,数据):当查询相应的value值时,返回相应的值,当没有key值时,返回自定义的数据值. 实例 # 定义一个字典 dic = {'Name': '张三', 'Age': 20} # 使用 key 值访问元素 print(d

  • Nginx静态压缩和代码压缩提高访问速度详解

    Nginx静态压缩和代码压缩提高访问速度详解

    目录 前言 nginx静态资源动态压缩 nginx静态资源静态压缩 总结 前言 基于目前大部分的应用,都使用了前后端分离的框架,vue的前端应用,也是十分的流行. 不知道大家伙,有无遇到这样的问题: 随着前端框架的页面,功能开发不断的迭代:安装的依赖,不断的增多: 这样导致的问题,就是我们的前端框架,会变得十分庞大,打包出来的dist目录会变得很大了喔!!! 这样就会导致一个问题:首次访问应用,会变得很慢!!! 这确实是一个严重的问题!!!T_T 对于这个问题,咋们今天就从代码压缩+nginx静

  • JavaScript同源策略和跨域访问实例详解

    本文实例讲述了JavaScript同源策略和跨域访问.分享给大家供大家参考,具体如下: 1. 什么是同源策略 理解跨域首先必须要了解同源策略.同源策略是浏览器上为安全性考虑实施的非常重要的安全策略. 何谓同源: URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源. 同源策略: 浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性. (白帽子讲web安全[1]) 从一个域上加

  • Nginx的优化、安全与防盗链实例详解

    Nginx的优化、安全与防盗链实例详解

    目录 1.Nginx的页面优化 1.1 Nginx的网页压缩 1.2  配置Nginx的图片缓存 1.3  Nginx的连接超时设置 1.4 Nginx的并发设置 2.Nginx的页面安全 2.1 查看Nginx版本的方式 方式一:curl模拟访问获取 方式二:浏览器访问查看 2.2 隐藏版本号 3.Nginx的日志分割 4.Nginx防盗链 4.1 盗链的过程 4.2 Nginx防盗链的设置 5.fpm参数优化 总结 1.Nginx的页面优化 1.1 Nginx的网页压缩  在Nginx的ng

  • 微信小程序 数据访问实例详解

    微信小程序 数据访问实例详解

    先简单说一下,小程序的结构 如图所示 1.每个视图(.wxml)只需要添加对应名字的脚本(.js)和样式(.wxss)就可以了,不需要引用,page下面的脚本以及样式都是继承至最外面的app.js , app.wxcss 2.脚本也就是.js文件,他有固定格式:page,是用于获取数据的 3.utils是用来放置数据接口的 数据访问,如果懂点ajax,都不是问题,没啥好讲的 微信小程序,因为IDE太烂了,如果代码再写得难以阅读,整个项目就很难维护了. 因为没有写过app,不知道在app中数据访问

  • php判断是否连接上网络的方法实例详解

    本文实例讲述了PHP判断是否连接上网络的方法.分享给大家供大家参考.具体实现方法如下: 首先写个函数 function varify_url($url){ $check = @fopen($url,"r"); if($check){ $status = true; }else{ $status = false; } return $status; } 接着在需要的地方直接调用即可 $url = "http://www.baidu.com"; if(varify_ur

  • PHP与jquery实时显示网站在线人数实例详解

    我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据.本文将结合实例给大家介绍使用jQuery和PHP来实现动态数字展示效果. 本例假设要在页面上动态展示(无需刷新整个页面,只是局部刷新动态数字)当前在线用户数,常见在一些统计平台上应用.在HTML页面中只需定义以下结构: <div class="count">当前在线:<span id="number"></span>&

随机推荐