052：如何减少服务端带宽传输

  • 1 一个网站访问卡慢真正的原因
  • 2 静态资源手动压缩方案
  • 3 使用Nginx静态资源压缩实现原理
  • 4 大图片分段拆分展示方案
  • 5 浏览器静态资源缓存版本控制
  • 6 使用Nginx缓存静态页面设计思想
  • 7 使用Nginx缓存商品详情页面


1 一个网站访问卡慢真正的原因

课程内容：
1.设计一套能够支撑千万级并发难不难？
2.Nginx如何作为网关如何实现压缩、缓存
3.Nginx压缩静态资源实现原理
4.基于Nginx+Lua+OpenResty亿级别商品详情页面

一个网站访问卡慢真正的原因：带宽不足，静态资源加载慢

互联网高并发前端优化
1.动静分离架构模式
2.使用cdn缓存静态资源 就近原则 减少客户端与服务器端带宽传输
3.对静态资源实现压缩
4.使用缓存机制 Nginx、jvm内置缓存 分布式redis缓存 客户端缓存 多级缓存技术

2 静态资源手动压缩方案

静态资源压缩
如果图片过大压缩后模糊，建议使用图片分段形式展示；
1.人工压缩
Css/JS/IMG实现压缩地址：
2.Maven自动打包压缩 自动生成.min文件

<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.0.0.RELEASE</version>
</parent>
<dependencies>
    <!-- SpringBoot web 核心组件 -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
   </dependencies>
<!-- 构建相关配置 -->
<build>
    <!-- maven插件配置 -->
    <plugins>
        <plugin>
            <!-- YUI Compressor Maven压缩插件 -->
            <groupId>net.alchim31.maven</groupId>
            <artifactId>yuicompressor-maven-plugin</artifactId>
            <version>1.3.0</version>
            <configuration>
                <!-- 读取js,css文件采用UTF-8编码 -->
                <encoding>UTF-8</encoding>
                <!-- 不显示js可能的错误 -->
                <jswarn>false</jswarn>
                <!-- 若存在已压缩的文件，会先对比源文件是否有改动。有改动便压缩，无改动就不压缩 -->
                <force>false</force>
                <!-- 在指定的列号后插入新行 -->
                <linebreakpos>-1</linebreakpos>
                <!-- 压缩之前先执行聚合文件操作 -->
                <preProcessAggregates>true</preProcessAggregates>
                <!-- 压缩后保存文件后缀 -->
                <suffix>.min</suffix>
                <!-- 源目录，即需压缩的根目录 -->
                <sourceDirectory>${basedir}/mobile</sourceDirectory>
                <!-- 压缩js和css文件 -->
                <includes>
                    <include>**/*.js</include>
                    <include>**/*.css</include>
                </includes>
                <!-- 以下目录和文件不会被压缩 -->
                <excludes>
                    <exclude>**/*.min.js</exclude>
                    <exclude>**/*.min.css</exclude>
                    <exclude>scripts/data/*.js</exclude>
                </excludes>
            </configuration>
        </plugin>
    </plugins>
</build>

项目根目录控制台执行：mvn yuicompressor:compress

测试maven压缩效果：

nginx带宽统计 nginx带宽瓶颈_nginx

3 使用Nginx静态资源压缩实现原理

3.Nginx自带压缩
传统的压缩方案：实际上对注释、空格去除、换成一行；
Nginx 压缩：将常用语法关键字用字符替代，非常耗CPU
原理：使用字典匹配，将比较长的语法如function替换非常短字典a

gzip on;
gzip_buffers 32 4K;
gzip_comp_level 6;
gzip_min_length 100;
gzip_types application/javascript text/css text/xml;
gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
gzip_vary on;

配置文件内容详细介绍
gzip配置的常用参数
gzip on|off; #是否开启gzip
gzip_buffers 32 4K| 16 8K #缓冲(压缩在内存中缓冲几块? 每块多大?)
gzip_comp_level [1-9] #推荐6 压缩级别(级别越高,压的越小,越浪费CPU计算资源)
gzip_disable #正则匹配UA 什么样的Uri不进行gzip
gzip_min_length 200 # 开始压缩的最小长度(再小就不要压缩了,意义不在)
gzip_http_version 1.0|1.1 # 开始压缩的http协议版本(可以不设置,目前几乎全是1.1协议)
gzip_proxied # 设置请求者代理服务器,该如何缓存内容
gzip_types text/plain application/xml # 对哪些类型的文件用压缩 如txt,xml,html ,css
gzip_vary on|off # 是否传输gzip压缩标志

测试nginx压缩：

nginx带宽统计 nginx带宽瓶颈_java_02

4 大图片分段拆分展示方案

8兆图片通过技术手段压缩成2兆看起非常模糊。
当时腾讯课堂限制每张图片只能够有2兆
将图片分成多个拼接组成成一张，也就是等于原生图片；

5 浏览器静态资源缓存版本控制

静态资源缓存控制
客户端（浏览器）发送请求到服务器端，第一次请求的时候会缓存所有的静态资源到浏览器；
客户端发送第二次请求的时候，如果本地浏览器有缓存，就使用本地浏览器的；
Key：访问的url，value：网页内容
如果远程的文件发生变化的情况下，就使用远程的；

Http协议304状态码表示缓存，第一次访问会将资源缓存到浏览器客户端，如果该资源文件没有发生变化的情况下，不会重复向服务器端发送请求；
注意：七牛云CDN可能会缓存静态资源，建议每次发布生产环境中加上时间戳；

6 使用Nginx缓存静态页面设计思想

大型电商商品详情页面访问流程：客户端缓存（浏览器缓存）→CDN缓存（七牛云缓存）→Nginx缓存→JVM内置缓存 →Redis分布式缓存 →数据库

需要考虑问题：
Redis与数据库一致性问题，通过mq订阅binlog同步数据解决一致性问题
JVM与Redis保持一致性问题
Nginx缓存与服务器端真实缓存一致性问题

7 使用Nginx缓存商品详情页面

使用Nginx控制商品详情页面

# 代理缓存配置
	proxy_cache_path "./meite_cachedata"  levels=1:2 keys_zone=meitecache:256m inactive=1d max_size=1000g; 

    server {
        listen       80;
        server_name  localhost;

        gzip on;
		gzip_buffers 32 4K;
		gzip_comp_level 6;
        gzip_min_length 100;

		gzip_types application/javascript text/css text/xml;
        gzip_disable "MSIE [1-6]\."; #配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
        gzip_vary on;
        ##如果以details开头，缓存到nginx中
        location /details {
			#使用缓存名称
			proxy_cache meitecache;
		   #对以下状态码实现缓存
			proxy_cache_valid 200 206 304 301 302 1d;
			#缓存的key
			proxy_cache_key $request_uri;
			add_header X-Cache-Status $upstream_cache_status;
			proxy_pass   http://127.0.0.1:8080;
			index  index.html index.htm;
		}
		## 如果以all开头只做反向代理，不缓存到nginx中
		location /all {
			proxy_pass   http://127.0.0.1:8080;
			index  index.html index.htm;
		}
	}

查询所有商品没必要用缓存，查询商品详情可以用；
数据有更新可以在数据库中额外增加一个字段控制版本变动