博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Chrome浏览器加载CSS文件TTFB waiting超时的奇葩问题
阅读量:5303 次
发布时间:2019-06-14

本文共 1780 字,大约阅读时间需要 5 分钟。

今天本来调试 requirejs 加载js异常的问题,试了下Chrome浏览器,结果意外发现这个 CSS 加载异常的BUG,非常非常奇怪。

本地测试环境是 wi7x64 安装的 XAMPP 3.2.1 服务器套件没什么特殊配置。

目前就发现只对下面这段 css 代码有异常 seta.css:

@charset "utf-8";html { font-size: 125%; }html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd { padding: 0; margin: 0; }body,h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: .6rem; }table { border-collapse: collapse; border-spacing: 0; }fieldset,img { border: 0; }address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; }ul,ol { list-style: none; }abbr,acronym { border: 0; }a,input,textarea { outline: none; -moz-outline-style: none; }a,button,label { cursor: pointer; }input,select { vertical-align: middle; }a { text-decoration: none; }hr,article,aside,details,figcaption,figure,footer,header,menu,nav,section { display: block; margin: 0; padding: 0; }blockquote,q { quotes: none; }blockquote:before,blockquote:after,q:before,q:after { content: ''; }ins { background-color: #FF9; color: #000; text-decoration: none; }mark { background-color: #FF9; color: #000; font-style: italic; font-weight: bold; }del { text-decoration: line-through; }abbr[title],dfn[title] { border-bottom: 1px dotted; cursor: help; }hr { height: 1px; border: 0; border-top: 1px solid #CCC; margin: 1em 0; }

只是一个简单的 CSS reset 代码。(注意没有任何空行的哦)

目前测试只有 Chrome 浏览器出现该情况,测试了两个版本 chrome 46,47.0.2526.106(目前最新稳定版本)

以下测试都是在禁止缓存后N次尝试的结果。

Chrome浏览器加载CSS文件TTFB waiting超时的奇葩问题

如图中第二行 seta.css 的加载情况,1.4kb本地加载居然用了5秒钟,卡的要死了

这里写图片描述

这是加载耗时详情,TTFB 等待了 508.83ms , 下载用了5秒钟,真是莫名其妙。

下面这个是用另一个浏览器 360极速Chrome(内核版本 45.0.2454.101) 加载就是正常的

这里写图片描述

总共只用了 13ms

还有个 Firefox(43.0.3) 的

这里写图片描述

也是正常的,而且速度也比Chrome快多了

感觉问题可能是出在 css 代码内容上了,于是尝试几种方法修改了下,

只调换代码顺序没有用,

但修改任意参数值后加载就正常了,
或者中间或末尾加个空行也行

感觉应该并不是某个样式导致的

所以最好也最简单的方法就是在所有 css 代码末尾都空一行吧

这样 Chrome 加载就正常了,对这种BUG实在无语

转载于:https://www.cnblogs.com/zhouzme/p/5758399.html

你可能感兴趣的文章
java枚举类型enum的使用
查看>>
springBoot Ribbon Hystrix
查看>>
Oracle - 拼接多个字段 - wm_concat()函数
查看>>
常识的力量 - 防止错得太远
查看>>
[dubbo实战] dubbo+zookeeper伪集群搭建
查看>>
FI & RI
查看>>
springboot(5)单元测试及MockMVC类的使用及自定义异常处理
查看>>
Repeater控件用法
查看>>
PowerShell+NetApi 批处理执行程序
查看>>
渣渣小本求职复习之路每天一博客系列——Java基础(6)
查看>>
形态学滤波(1):腐蚀与膨胀
查看>>
redis-cluster 单个节点不可用
查看>>
离散型朴素贝叶斯实现
查看>>
火狐 SSL 收到了一个弱临时 Diffie-Hellman 密钥的解决办法
查看>>
verilog 运算符与优先级
查看>>
大神教你Nginx常用基础配置方案
查看>>
POJ 3207 【2-sat】.cpp
查看>>
生成缩略图
查看>>
Web设计禁忌(一)
查看>>
安装好MySQL后就开始学习如何后台创建自己的数据库吧!
查看>>