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

Chrome浏览器加载CSS文件TTFB waiting超时的奇葩问题_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:29:16

原创

1320人浏览过

今天本来调试 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次尝试的结果。

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

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