Can I use?
› http://caniuse.com/
Less
› http://lesscss.org
Cool Libraries
› Bootstrap from Twitter
› Jetstrap
这是一个创建于 5222 天前的主题，其中的信息可能已经有所发展或是发生改变。
<link rel="stylesheet" type="text/css" /> 和 <style type="text/css">@import "";</style> 应该是最常用的外链样式表的方式了。
可是，如果遭遇到带宽不够，或者什么原因导致网页展开了，而 css 还没 load 完或出错。那么，页面就难看了。
但，如果，将 <style> 放入 JS 调用后 document.write 呢？会不会改善这个出错几率不高但实实在在存在的问题呢？
因为据我所了解的。。 JS 会被强制载入，而且可以多线程后台运行，完全不愁 load 没完成。
<script type="text/javascript" src="css.js"></script>
css.js 内容：
var siteCss = '\
<style type="text/css">\
/* 对于 JS 里，使用多行代码很容易， */\
div, table, tr, td, ul, li { font-size:14px; line-height:14px; font-family:Verdana,'宋体'; table-layout:fixed; } \
</style>\
';
document.writeln ( siteCss );
以上内容已经测试能运行。
但不知道，性能，或，可行性上，是否实用，懂的指点一下？
可是，如果遭遇到带宽不够，或者什么原因导致网页展开了，而 css 还没 load 完或出错。那么，页面就难看了。
但，如果，将 <style> 放入 JS 调用后 document.write 呢？会不会改善这个出错几率不高但实实在在存在的问题呢？
因为据我所了解的。。 JS 会被强制载入，而且可以多线程后台运行，完全不愁 load 没完成。
<script type="text/javascript" src="css.js"></script>
css.js 内容：
var siteCss = '\
<style type="text/css">\
/* 对于 JS 里，使用多行代码很容易， */\
div, table, tr, td, ul, li { font-size:14px; line-height:14px; font-family:Verdana,'宋体'; table-layout:fixed; } \
</style>\
';
document.writeln ( siteCss );
以上内容已经测试能运行。
但不知道，性能，或，可行性上，是否实用，懂的指点一下？
 |
1
rveo OP 额，'宋体' 这里应该转义一下，忘了。
|
 |
2
billychow 2010-08-06 18:51:02 +08:00 via Android
没有任何意义。
|
 |
5
huacnlee 2010-08-06 19:50:28 +08:00 via Android
你把 css 引用写在 head，并在JS之前，问题就解决了
|
|
6
huacnlee 2010-08-06 19:52:22 +08:00 via Android
建议你看看 Yslow 那十多条规则
|
 |
7
dimlau 2010-08-06 20:01:01 +08:00
#5 +1
|
 |
8
brando 2010-08-06 21:12:28 +08:00
带宽不至于如此严重的差吧。。。而且那个做法太GEEK了，极端了，只适合独乐乐。
|
|
9
rveo OP |
|
10
rveo OP 你们去留意一下 QQ 163 SINA 这些国内大网站的 CSS 。。
你会发现，他们的 主要样式表 全都都直接输出。。而不是选择 <link> 这些。。 因为他们了解国内的互联网现状。。 |
|
11
rveo OP 额，一不留神，有很多 2 个句号了，不好意思。
|
|
12
huacnlee 2010-08-06 22:11:09 +08:00
别想得太复杂了,CSS直接写当然更好不过,你的页面不只一个,建议设置CSS,Javascript文件长期缓存,一般建议是在300d以上,这样一来,再次打开页面的时候,这些文件几乎没有什么下载成本.
而且写在HTML反而每次打开页面都会重新下载. 减少每个页面Javascript/CSS/Image的个数是一个不错的优化,可以试着在程序执行的时候把多个文件整合成一个. 另外如果网络真哪么差,哪就少用图片做风格吧! 总之要不段的减少HTTP请求数,这样页面加载速度就上来了. 别想着延迟加载样式或脚本,这样会起反作用,这些作法Yahoo的人研究过好多方法,最后还是标准的写法效果是最好的 |
|
13
dimlau 2010-08-06 22:13:23 +08:00
@rveo
1、我猜很多人有另一种洁癖：页面内尽可能少得出现JS。这其实解释在节省页面加载时间吧？ 2、你光考虑网速（前提是这个方法真有效的话）了，却造成另一种后果，不支持JS的浏览器怎么办？ 3、这个方法我觉得不见得能节省时间，你的方法使用的JS文件本身字节数应该就比正常CSS文件多一些，再加上不同浏览器对JS文件的解释速度……这个我也不内行，不说了。 4、你的意思是在页面显示之前先对样式表load完毕……对于你希望照顾的低网速用户，这显然是更差的体验——白屏一下然后突然展示出来。 5、好的设计，我觉得应该做到去除样式表之后依然有很好的可读性。所以对于css文件的加载速度可以忽略不计。 |
|
14
huacnlee 2010-08-06 22:14:04 +08:00
@rveo #6
你是写在头里面的,但如果你后面出现一段CSS,哪怕只是一个: <style type="text/css">.a {color:red;}</stype> 也会有反作用的,浏览器会等着最后个CSS加载到了再渲染样式,也就出现了你所说的样式显示不出来的请况. 同样Javascript加载CSS也是一样的结果 当然CSS直接写在HTML Attributes里面不在这个里面. |
|
15
rveo OP @huacnlee 当然不是 多个 CSS 或 混合 CSS 输出，就是说 1 个 CSS 外链。
我说的主要问题是，CSS 会出现 load 不完的情况，而 JS 不会。我是想探讨这个问题。而他们的加载速度，加载模式，可能是一模一样。 |
|
16
rveo OP @dimlau
嗯，嗯，第 2 确实是个问题。 第 3 跟第 4 应该是同一个问题，让用户等，当然是不好。 但是他们带宽窄，是已经知道会慢的了，我觉得，相比慢还杂乱排版，应该比慢但排版没问题的用户体验差很多。。 第 5 值得衡量思考。。 |
|
17
billychow 2010-08-06 22:28:13 +08:00
跟网速关系并不大，关键是网络稳定性，丢包这问题，根本出现在网络环境上，你再怎么折腾，把样式弄到 JS 里不是一样的吗，下载 JS 文件的时候还不是照样可以丢……
所以没有任何意义 分隔 CSS/JS 的好处就是代码更简洁，同时应用 CDN 等加速访问，也可以节省带宽 而内联的好处就是 HTTP 次数会少一些，仅此而已。 就算是那些大门户网站，你丢包的时候还是一样的显示不全的。 |
|
18
rveo OP @billychow 你遇到过页面完成而 JS load 不完的么？我没遇到过。而 CSS 在页面完成还没 load 完的我却常见，尤其是访问国外网站。或许，我实在是太幸运了，没遇到过。说说你遇到的情况？
|
|
19
billychow 2010-08-07 00:10:28 +08:00 via Android
有的，js 载入不完整很容易造成脚本错误。这种机率对我来说和css加载不全机率差不多，极少出现。
|
 |
20
disinfeqt 2010-08-07 00:47:10 +08:00
“你遇到过页面完成而 JS load 不完的么？我没遇到过。而 CSS 在页面完成还没 load 完的我却常见”
我真是快笑死了。楼主，不要再班门弄斧了。 |
|
22
disinfeqt 2010-08-07 03:02:16 +08:00
@rveo Literally V2EX accepts all kinds of (even naive/stupid) questions.
But definately not those kind of questions that dilapidate people's time/life. |
 |
26
chone 2010-10-05 12:25:24 +08:00
这样做对于性能没有帮助而且理论上渲染开始的时间会更晚，而且不适用于不支持javascript的设备
link标签的外联css会在页面加载的同时被加载 而@import要等到页面加载结束才会被加载 还有lz说的大型网站使用行内css不是因为你说的那个原因，是为了减少页面的request从而提高加载速度 |
 |
27
spark 2010-10-05 13:02:38 +08:00
自找麻烦，Sina, 163等也只是因为首页访问量过大才会那么做的，你看一下频道页就知道，你觉得你的网站会比她们高么？
yslow没有要求用js引入css，反倒是js引用位置有所要求 |
Select Language