js和css的顺序关系
- - Kejun's Bloghead里的顺序如下，考虑会对请求有何影响：. a,b – head里出现外联js，无论如何放，css文件都不能和body里的请求并行 （图1）. c – head里的内联js只要在所有外联css前面，css文件可以和body里的请求并行（图2）. d – head里的内联js只要在任一外联css后面，css文件就不能和body里的请求并行（图1）.
js和css的顺序关系
标签：
前端
| 发表时间：2012-02-02 23:41 | 作者：Kejun
出处：http://hikejun.com/blog
1. head里的顺序如下，考虑会对请求有何影响：
a. 外部js在css前面
<script src="1.js"></script> <link rel="stylesheet" type="text/css" href="1.css?sleep=5s"> <link rel="stylesheet" type="text/css" href="2.css?sleep=5s">
b. 外部js在css后面
<link rel="stylesheet" type="text/css" href="1.css?sleep=5s"> <link rel="stylesheet" type="text/css" href="2.css?sleep=5s"> <script src="1.js"></script>
c. 内部js在css后面
<script> // do something </script> <link rel="stylesheet" type="text/css" href="1.css?sleep=5s"> <link rel="stylesheet" type="text/css" href="2.css?sleep=5s">
d. 内部js在css前面
<link rel="stylesheet" type="text/css" href="1.css?sleep=5s"> <link rel="stylesheet" type="text/css" href="2.css?sleep=5s"> <script> // do something </script>
e. 内联css在外联css前面
<style>
body { background:red; }
</style>
<link rel="stylesheet" type="text/css" href="1.css?sleep=5s">f. 内联css在外联css后面
<link rel="stylesheet" type="text/css" href="1.css?sleep=5s">
<style>
body { background:red; }
</style>结果：
a,b – head里出现外联js，无论如何放，css文件都不能和body里的请求并行 （图1）
c – head里的内联js只要在所有外联css前面，css文件可以和body里的请求并行（图2）
d – head里的内联js只要在任一外联css后面，css文件就不能和body里的请求并行（图1）
e – firefox/ie下，要等1.css加载完生效。safari/chrome下，则先生效，再加载1.css
f – 等1.css加载完生效
2. 内联js要等它前面的所有外联css文件加载完后执行。之前写过一篇 子资源原理的笔记。
<link rel="stylesheet" type="text/css" href="1.css?sleep=5s"> <script> s_time = +new Date; // 5s后才执行，所以在这里记录开始时间是不准确的。 </script>
3. 外联js放在页面最后，高级浏览器会自动做优化。如：
<head> <link rel="stylesheet" type="text/css" href="1.css?sleep=5s"> <link rel="stylesheet" type="text/css" href="2.css?sleep=5s"> </head> <body> <img src="1.png"> <img src="2.png"> <img src="3.png"> <script src="1.js"></script> </body>
firefox/chrome/safari加载的优化处理相似。见图3。
4. 内联长执行时间js，无论放在页面任何位置，都会影响整个页面的渲染。 测试文件，如：
<body>
<img src="1.png">
<img src="2.png">
<img src="3.png">
<button id="bn">button</button>
<script type="text/javascript">
document.getElementById('bn').onclick = function() {
alert(1);
}
// 正常渲染时间
document.body.appendChild(document.createTextNode(+new Date - s_time + 'ms'));
</script>
<script>
// 执行5s。重新打开页面（不是刷新），整个页面空白5s。
// 前面的dom结构正常渲染，但不显示，等5s后全部显示出来。
</script>
</body>在页面初始执行阶段如果有长执行时间的内联js，对性能的影响是非常非常严重的！但是，如果把那段执行5s的js放到外部就不会有上述影响，或者移到domreay/onload后执行也可以。
依据上述结论组织页面中的css和js才会更合理。
相关 [js css 关系] 推荐：
在线调试并共享HTML,CSS,JS
- Albert - [米随随] s5s5如题，以后同人讲代码时可以用到. 2004年04月9日 -- MSN中文专业站 (0). 2006年06月5日 -- 读“疲倦的博客们”有感 (9). 2005年07月20日 -- 基于web2.0的网站创意 (33).
[html/css/js]搜索建议提示
- - CSDN博客推荐文章// 根据id获取dom元素. // 将label绑定到input上作为输入提示. // 获取输入焦点时，隐藏提示标签. // 失去输入焦点时，判断输入框的是否有值，有则显示提示标签. // 窗口加载完dom结构时. .
用javascript预加载图片、css、js的方法研究
- - 博客园_Ruby's Louvre预加载的好处可以让网页更快的呈现给用户，缺点就是可能会增加无用的请求（但图片、css、js这些静态文件可以被缓存），如果用户访问的页面里面的 css、js、图片被预加载了，用户打开页面的速度会快很多，提升用户体验. 在用到一些大图片展示的时候，预加载大图是很不错的方法，图片更快的被呈现给用户. 不多说了，作为一个前端攻城师都懂的，下面分享我做的测试和得到的结果.
收集免费的HTML/CSS/JS UI工具包
- - Jackchen Design 1984随着HTML5和CSS3以及网页设计布局的全面翻新创新改革. 让很多网页设计者和界面设计师都知道一个道理. 这不仅仅是未来提高工作的效率，还能更好的去处理网页整体视觉效果. 优秀的工具包可以让您的工作事半功倍是肯定. 重要的是可以让流程更加清晰快速的呈现出来. 所以对于很多好的网站（比如Facebook，twitter，YaHOO等）你看第一眼就能知道他们所属的风格指向.
Ratchet：使用 HTML，JS，CSS 创建 iPhone App 原型
- - 我爱水煮鱼Ratchet 是一个免费的开源的工具，它主要的功能就是可以使用最简单的 HTML，CSS，JavaScript 这些 Web 技术就能很容易创建 iPhone 应用原型. Ratchet 使用非常简单，只需要简单的几行代码就能创建绝大部分 iOS 的组件，如：Bars, Lists, Buttons, Segmented controllers, Counts, Forms, Toggles, Popovers, Sliders, Push 等等.
100个惊人的CSS、JS代码技术
- - 设计达人最近在Codepen看到Top Pens of 2013这个专题，专题内容为2013年上最优秀的前100个CSS、HTML5和Javascript Pens，在惊叹技术人员的创造力同时我们还能学习这些技术，对交互设计师而言还能获取灵感哦. Top Pens of 2013专题地址： http://codepen.io/2013/popular.
CSSでカーニング（文字詰め）等を可能にするJSライブラリ・kerning.js
- 三十不归 - かちびと.netゆっくり過ごす方も多そうですね. さて、休みですし、ちょっとネタ的. をCSSで出来るようにしたJSライブラ. jQueryやmootoolsなどにも依存していないようです. これだけ聞くとかなり使えそうなんですけど. でも個人的にこういうチャレンジは称えたいので敬意を示すつもりで記事にします. CSSで出来る、と言っても独自の記述法を加える事でテキストコンテンツでのカーニングを実現するタイプなので好みが分かれそうですね.
禁止静态文件缓存的方法，可用于JS与CSS文件上
- - CSDN博客互联网推荐文章什么情况下，要禁止静态文件缓存：. 1、经常可能要改动的 js, css. 比如 一个html 文件， test.html 在 1.0版本中. 修改后 v1.1版本：. 新增加了一个foo.js 同时，也改动了common.js , 在common.js 中定义了新的类，并在foo.js 中使用了common.js. .
【Web 开发必备】 史上最全的浏览器 CSS & JS Hack 手册
- - 博客园_首页 浏览器渲染页面的方式各不相同，甚至同一浏览器的不同版本（“杰出代表”是 IE）也有差异. 因此，浏览器兼容成为前端开发人员的必备技能. 如果有一份浏览器 Hack 手册，那查询起来就方便多了. 这篇文章就向大家分享 Browserhacks 帮我们从网络上收集的各个浏览器特定的 CSS & JavaScript Hack，记得推荐和分享啊.