共计 2775 个字符，预计需要花费 7 分钟才能阅读完成。
问题背景
大家看看这个页面，有没有发现什么问题？
主页：http://www.javastack.cn/
是的，页面 CSS 款式全失落了，导致页面凌乱。。
这个页面是我人为删除了款式（为了演示），真正呈现问题是另外一个页面，最近栈长发现有个页面时不时就会呈现款式错乱的问题，很诡异！！
于是这篇就记录下排查过程，和大家分享下解决方案，兴许你会感觉这和 Nginx 有啥关系？？我也万万想不到，这确实是因为 Nginx 限流引起的。。
开始排查
页面款式错乱，那必定是查看款式文件呗。
款式文件地位：
页面中有很多这样的款式文件引入，比方：
<link type="text/css" rel="styleSheet" href="/css/style.css" />
<link type="text/css" rel="styleSheet" href="/css/page.css" />
<link type="text/css" rel="styleSheet" href="/css/plugin.css" />
...这样写没问题呀，之前始终好好的，很神奇，怎么会时不时款式错乱，开始狐疑本人的认知了。
尝试解决 1）
因为我的项目中应用到了 Spring Boot，而 CSS 文件是放在 /resources/static/css 目录下，我思考加上 static 试下：
<link type="text/css" rel="styleSheet" th:href="/static/css/style.css" />
<link type="text/css" rel="styleSheet" th:href="/static/css/page.css" />
<link type="text/css" rel="styleSheet" th:href="/static/css/plugin.css" />
...后果还是不行。
其实应用 Spring Boot，static 目录就是默认的资源目录之一，援用资源文件时并不需要加上 static，我感觉只是做了一次与自我认知反抗的无谓的尝试。
Spring Boot 这些根底的货色我就不介绍了，不会的能够关注公众号 Java 技术栈，回复：boot，看我整顿的系列具体教程，实战源码也上传到了 Github 仓库：
https://github.com/javastacks…
尝试解决 2）
因为我的项目中应用到了 Thymeleaf（模板引擎），思考应用 Thymeleaf 的标签 th:href 进行引入试试：
<link type="text/css" rel="styleSheet" th:href="@{/css/style.css}" />
<link type="text/css" rel="styleSheet" th:href="@{/css/page.css}" />
<link type="text/css" rel="styleSheet" th:href="@{/css/plugin.css}" />
...改了之后还是没什么用，而后用网页查看模式看页面生成的源码，发现 Thymeleaf 生成的 href 和之前的一样，看来问题并不是出在这里。
解决的转折
就是因为看了一下网页源码，而后我再顺便点了一下 Console 面板：
而后就发现了这个 503 谬误：
503 Service Temporarily Unavailable
而后再点进去 Network 面板看看：
终于定位到问题了，款式文件加载失败！！！
这个 503 响应码显著是来自服务器端的谬误。
留神到下面的 Network 面板没有，我只发动了一个网页刷新申请，浏览器后盾却发动了一堆的申请列表，这外面就包含有 js、css 等动态资源的申请。
什么意思？
也就是说，尽管我只向浏览器发动了一个申请，实际上是向服务器发动了 N 个申请，这和页面上援用到的 css、js 文件数量有关系，这些动态资源的申请也会纳入一个新申请。
如果 Nginx 限流设置的是每秒 5 个申请：
limit_req_zone $binary_remote_addr zone=mylimit:10m rate=5r/s;而页面上的 css、js 文件数量却达到了 8 个，如果在一秒之内加载残缺个页面及附带的 8 个资源，那其余 4 个资源势必会被限流规定挡住，如果是 2 秒加载完就没问题（每秒 4、5 个）。
终于找到了页面时不是时款式错乱的起因了！！
解决方案
既然页面上引入的每个 css、js 文件也算一个申请，那就得调整限流规定了。
能够依据被申请的资源文件数量再作一个限流调整：
limit_req_zone $binary_remote_addr zone=mylimit:10m rate=20r/s;但这样可能又会影响所有的页面，包含接口，因为每个页面的资源文件数量是不同的，纯接口又是没有页面跳转的，也就不大可能会援用动态资源文件。
我的想法是能够放弃之前的所有限流，对 css、js 等动态资源的拜访就勾销限流。
放弃所有限流：
location / {
limit_req zone=mylimit;
proxy_pass http://javastack.cn;
}动态资源不限流：
location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {proxy_pass http://javastack.cn;}批改之后，从新加载 Nginx 配置，重复测试，页面显示失常了。
总结
这个坑其实和 Nginx 自身并没有关系，但却和 Nginx 非亲非故，通过这个问题，也让我感觉到很多技术咱们只晓得简略的用，或者只知其一，不知其二，就比如说我上一个遇到的 Nginx 的坑：
Nginx 转发时的一个坑，运维竟然让我背锅！！
这些细节的坑我怎么能想到呢？我不可能把 Nginx 文档全副熟读一遍。。这些问题也只有碰到了才会去尝试解决，不找理由，说白了，还是我把握的不够深，不够全面吧！
但事实也很残暴，不可能全副技术都学得精湛，工夫精力也不容许，技术更新也快，但有一点，遇到问题了，咱们要学会总结经验，防止下次再犯，这样也是一个常识的积攒过程。
好了，明天的分享就到这里了，前面栈长会分享更多好玩的 Java 技术和最新的技术资讯，关注公众号 Java 技术栈第一工夫推送，我也将支流 Java 面试题和参考答案都整顿好了，在公众号后盾回复关键字 “ 面试 ” 进行刷题。
版权申明： 本文系公众号 “Java 技术栈 ” 原创，转载、援用本文内容请注明出处，剽窃、洗稿一律投诉侵权，后果自负，并保留追究其法律责任的权力。
近期热文举荐：
1.1,000+ 道 Java 面试题及答案整顿 (2022 最新版)
2. 劲爆！Java 协程要来了。。。
3.Spring Boot 2.x 教程，太全了！
4. 别再写满屏的爆爆爆炸类了，试试装璜器模式，这才是优雅的形式！！
5.《Java 开发手册（嵩山版）》最新公布，速速下载！
感觉不错，别忘了顺手点赞 + 转发哦！
