Chrome浏览器加载CSS文件TTFB waiting超时的奇葩问题
今天本来调试 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秒钟,真是莫名其妙。
下面这个是用另一个浏览器 360极速Chrome(内核版本 45.0.2454.101) 加载就是正常的
总共只用了 13ms
还有个 Firefox(43.0.3) 的
也是正常的,而且速度也比Chrome快多了
感觉问题可能是出在 css 代码内容上了,于是尝试几种方法修改了下,
只调换代码顺序没有用,
但修改任意参数值后加载就正常了,
或者中间或末尾加个空行也行
感觉应该并不是某个样式导致的
所以最好也最简单的方法就是在所有 css 代码末尾都空一行吧
这样 Chrome 加载就正常了,对这种BUG实在无语
Chrome浏览器加载CSS文件TTFB waiting超时的奇葩问题的更多相关文章
- webpack模块加载css文件及图片地址
webpack支持css文件加载并打包,只需安装相应加载器并在配置文件中配置 . 加载的css文件内容会与该模块里的js内容混合封装,这样做的好处是一个js文件包含了所有的css与js内容,有效减少了 ...
- webpack加载css文件及其配置
webpack加载css文件及其配置 当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去,但是如果我们的css文件有很多的话,一个个的导 ...
- Nginx 做代理服务器时浏览器加载大文件失败 ERR_CONTENT_LENGTH_MISMATCH 的解决方案
此文章仅作为本人的笔记,文章转载自 http://blog.csdn.net/defonds/article/details/46042809 Nginx 做反向代理,后端是 tomcat,chro ...
- js动态加载css文件和js文件的方法
今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...
- AngularCSS--关于angularjs动态加载css文件的方法(仅供参考)
AngularCSS CSS on-demand for AngularJS Optimize the presentation layer of your single-page apps by d ...
- spring MVC 项目 WEB-INF下的jsp不能加载css文件
一.项目目录 二.解决方法(已解决) 1. jsp文件加入 <link href="<c:url value="/css/main.css" />&qu ...
- 浏览器加载js文件顺序
在默认情况下,下载和执行js都会阻塞页面的渲染,当然现在浏览器支持并行下载,但仍然会阻塞图片等的下载和渲染,所以通常建议把js文件放body底.对于执行顺序,不管是外部js还是内部,只要 遇到< ...
- jQuery动态加载css文件实现方法
$("<link>").attr({ rel: "stylesheet",type: "text/css",href: &quo ...
- Google浏览器如何加载本地文件
Chrome浏览器加载本地文件 一般来说,为了安全起见,浏览器是不能通过load方法来加载本地文件的,load方法只能加载远程服务器上的文件. 在浏览器默认的情况下,试图加载一个本地文件,会出现交叉域 ...
随机推荐
- 在PHP中如何连接到数据库
首先我们先运行WampServer中的phpMyAdmin随即弹出phpMyAdmin页面 在弹出的页面中左边是数据库列表 右边是相应的设置 选择一个数据库 在里面创建一张数据表 注意创建数 ...
- leetcode Binary Tree Postorder Traversal 二叉树后续遍历
先给出递归版本的实现方法,有时间再弄个循环版的.代码如下: /** * Definition for binary tree * struct TreeNode { * int val; * Tree ...
- NET那点不为人知的事
ASP.NET那点不为人知的事(一) 我们上网时,在浏览器地址输入网址:Http://www.cnblogs.com,按下回车,一张网页就呈现在我们眼前.这究竟发生了什么?对于一名优秀的Progr ...
- Glue4Net简单部署基于win服务的Socket程序
smark 专注于高并发网络和大型网站架规划设计,提供.NET平台下高吞吐的网络通讯应用技术咨询和支持 Glue4Net简单部署基于win服务的Socket程序 在写一些服务应用的时候经常把要它部署到 ...
- 流媒体:V4L2视频获取
从深圳回来已经20多天了,除了完善毕业设计程序和论文,其他时间都去玩游戏了.真的是最后的一段时间能够无忧无虑在校园里挥霍自己的青春了.今天完成的答辩,比想象的要简单,一直以来想把我现在的这个流媒体的东 ...
- 开发框架(OrchardNoCMS)介绍(一)
基于ASP.NET MVC的热插拔模块式开发框架(OrchardNoCMS)介绍(一) Orchard CMS是针对CMS开发的,对于很多开发需求来说,内容管理这块儿可能并不需要,而需要它的模块式开发 ...
- 线性回归,logistic回归和一般回归
1 摘要 本报告是在学习斯坦福大学机器学习课程前四节加上配套的讲义后的总结与认识.前四节主要讲述了回归问题,回归属于有监督学习中的一种方法.该方法的核心思想是从连续型统计数据中得到数学模型,然后将该数 ...
- javascript中字符串常用操作整理
javascript中字符串常用操作整理 字符串的操作在js中非常频繁,也非常重要.以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊...今天就对字符串的一些常用 ...
- ASP.NET MVC学习笔记-----Filter
ASP.NET MVC学习笔记-----Filter(1) Filter类型 接口 MVC的默认实现 Description Authorization IAuthorizationFilter Au ...
- CFileDialog类与16进制格式的dat文件
CFileDialog类与16进制格式的dat文件 要将数据保存为.dat文件,而且是16进制的数字,怎么保存? 要读取.dat文件,文件是16进制的,怎么读取? 用CFileDialog类可以得到[ ...