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

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

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

  1. @charset "utf-8";
  2. html { font-size: 125%; }
  3. html,body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dt,dd { padding: 0; margin: 0; }
  4. body,h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: .6rem; }
  5. table { border-collapse: collapse; border-spacing: 0; }
  6. fieldset,img { border: 0; }
  7. address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; }
  8. ul,ol { list-style: none; }
  9. abbr,acronym { border: 0; }
  10. a,input,textarea { outline: none; -moz-outline-style: none; }
  11. a,button,label { cursor: pointer; }
  12. input,select { vertical-align: middle; }
  13. a { text-decoration: none; }
  14. hr,article,aside,details,figcaption,figure,footer,header,menu,nav,section { display: block; margin: 0; padding: 0; }
  15. blockquote,q { quotes: none; }
  16. blockquote:before,blockquote:after,q:before,q:after { content: ''; }
  17. ins { background-color: #FF9; color: #000; text-decoration: none; }
  18. mark { background-color: #FF9; color: #000; font-style: italic; font-weight: bold; }
  19. del { text-decoration: line-through; }
  20. abbr[title],dfn[title] { border-bottom: 1px dotted; cursor: help; }
  21. 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秒钟,真是莫名其妙。

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

总共只用了 13ms

还有个 Firefox(43.0.3) 的

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

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

只调换代码顺序没有用,

但修改任意参数值后加载就正常了,

或者中间或末尾加个空行也行

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

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

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

Chrome浏览器加载CSS文件TTFB waiting超时的奇葩问题的更多相关文章

  1. webpack模块加载css文件及图片地址

    webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了 ...

  2. webpack加载css文件及其配置

    webpack加载css文件及其配置 当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去,但是如果我们的css文件有很多的话,一个个的导 ...

  3. Nginx 做代理服务器时浏览器加载大文件失败 ERR_CONTENT_LENGTH_MISMATCH 的解决方案

    此文章仅作为本人的笔记,文章转载自  http://blog.csdn.net/defonds/article/details/46042809 Nginx 做反向代理,后端是 tomcat,chro ...

  4. js动态加载css文件和js文件的方法

    今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...

  5. AngularCSS--关于angularjs动态加载css文件的方法(仅供参考)

    AngularCSS CSS on-demand for AngularJS Optimize the presentation layer of your single-page apps by d ...

  6. spring MVC 项目 WEB-INF下的jsp不能加载css文件

    一.项目目录 二.解决方法(已解决) 1. jsp文件加入 <link href="<c:url value="/css/main.css" />&qu ...

  7. 浏览器加载js文件顺序

    在默认情况下,下载和执行js都会阻塞页面的渲染,当然现在浏览器支持并行下载,但仍然会阻塞图片等的下载和渲染,所以通常建议把js文件放body底.对于执行顺序,不管是外部js还是内部,只要 遇到< ...

  8. jQuery动态加载css文件实现方法

    $("<link>").attr({ rel: "stylesheet",type: "text/css",href: &quo ...

  9. Google浏览器如何加载本地文件

    Chrome浏览器加载本地文件 一般来说,为了安全起见,浏览器是不能通过load方法来加载本地文件的,load方法只能加载远程服务器上的文件. 在浏览器默认的情况下,试图加载一个本地文件,会出现交叉域 ...

随机推荐

  1. ODBC操作数据库

    /*ODBC使用步骤:(ODBC数据源由微软平台提供) * 1.配置ODBC数据源(控制面板->管理工具->ODBC数据源) * 2.加载并注册驱动程序,导入java.sql.*包 * 3 ...

  2. 什么是PHP

    PHP(PHP: Hypertext Preprocessor的缩写,中文名:“超文本预处理器”)是一种通用开源脚本语言.语法吸收了C语言.Java和Perl的特点,入门门槛较低,易于学习,使用广泛, ...

  3. ACE模板之Jqgrid

    Asp.Net MVC中使用ACE模板之Jqgrid   第一次看到ACE模板,有种感动,有种相见恨晚的感觉,于是迅速来研究.它本身是基于bootstrap和jqueryui,但更nice,整合之后为 ...

  4. Birdge(桥接)模式

    1.出现原因 1.同一个类型,有两个变化的维度(两个维度的抽象:一个抽象部分的抽象,一个实现部分的抽象) 2.如何应对这种“多维度的变化”?如何利用面向对象技术来使得同一类型可以轻松地沿着两个方向变化 ...

  5. 排序算法的C#实现

    8种主要排序算法的C#实现   新的一年到了,很多园友都辞职要去追求更好的工作环境,我也是其中一个,呵呵! 最近闲暇的时候我开始重温一些常用的算法.老早就买了<算法导论>,一直都没啃下去. ...

  6. SZU:A26 Anagram

    Judge Info Memory Limit: 32768KB Case Time Limit: 10000MS Time Limit: 10000MS Judger: Normal Descrip ...

  7. python 调用shell命令的方法

    在python程序中调用shell命令,是件很酷且常用的事情…… 1. os.system(command) 此函数会启动子进程,在子进程中执行command,并返回command命令执行完毕后的退出 ...

  8. ASP.NET Web API中的JSON和XML序列化

    ASP.NET Web API中的JSON和XML序列化 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyok ...

  9. twisted学习笔记4 部署Twisted 应用程序

    原创博文,转载请注明出处. Twisted是一个可扩展,跨平台的网络服务器和客户端引擎. Twisted Application 框架有五个主要基础部分组成:服务,应用程序,TAC文件插件和twist ...

  10. Word2Vec在中文的应用

    google最近新开放出word2vec项目,该项目使用deep-learning技术将term表示为向量,由此计算term之间的相似度,对term聚类等,该项目也支持phrase的自动识别,以及与t ...