<link> 也好，@import 也好，似乎都会受速度限制，用 JS 的话呢？

2010-08-06 18:38:25 +08:00
 rveo
<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 );

以上内容已经测试能运行。

但不知道，性能，或，可行性上，是否实用，懂的指点一下？
7233 次点击
所在节点    CSS
27 条回复
rveo
2010-08-06 18:46:37 +08:00
额，'宋体' 这里应该转义一下，忘了。
billychow
2010-08-06 18:51:02 +08:00
没有任何意义。
rveo
2010-08-06 19:07:52 +08:00
@billychow 或许吧，之所以这么做，主要是国内带宽环境问题逼的。。
huacnlee
2010-08-06 19:48:33 +08:00
@import 有性能问题
huacnlee
2010-08-06 19:50:28 +08:00
你把 css 引用写在 head，并在JS之前，问题就解决了
huacnlee
2010-08-06 19:52:22 +08:00
建议你看看 Yslow 那十多条规则
dimlau
2010-08-06 20:01:01 +08:00
#5 +1
brando
2010-08-06 21:12:28 +08:00
带宽不至于如此严重的差吧。。。而且那个做法太GEEK了，极端了，只适合独乐乐。
rveo
2010-08-06 21:53:36 +08:00
@huacnlee <link> 肯定是在 <head> 里，也在 JS 之前。。

你们是不了解国内有多少用户还在 城中村 、 农村 、 合用一条 ADSL 吧？

他们的网速，你们有关注过么？
rveo
2010-08-06 22:01:44 +08:00
你们去留意一下 QQ 163 SINA 这些国内大网站的 CSS 。。

你会发现，他们的 主要样式表 全都都直接输出。。而不是选择 <link> 这些。。

因为他们了解国内的互联网现状。。
rveo
2010-08-06 22:03:21 +08:00
额，一不留神，有很多 2 个句号了，不好意思。
huacnlee
2010-08-06 22:11:09 +08:00
别想得太复杂了,CSS直接写当然更好不过,你的页面不只一个,建议设置CSS,Javascript文件长期缓存,一般建议是在300d以上,这样一来,再次打开页面的时候,这些文件几乎没有什么下载成本.
而且写在HTML反而每次打开页面都会重新下载.
减少每个页面Javascript/CSS/Image的个数是一个不错的优化,可以试着在程序执行的时候把多个文件整合成一个.
另外如果网络真哪么差,哪就少用图片做风格吧!
总之要不段的减少HTTP请求数,这样页面加载速度就上来了.
别想着延迟加载样式或脚本,这样会起反作用,这些作法Yahoo的人研究过好多方法,最后还是标准的写法效果是最好的
dimlau
2010-08-06 22:13:23 +08:00
@rveo

1、我猜很多人有另一种洁癖：页面内尽可能少得出现JS。这其实解释在节省页面加载时间吧？

2、你光考虑网速（前提是这个方法真有效的话）了，却造成另一种后果，不支持JS的浏览器怎么办？

3、这个方法我觉得不见得能节省时间，你的方法使用的JS文件本身字节数应该就比正常CSS文件多一些，再加上不同浏览器对JS文件的解释速度……这个我也不内行，不说了。

4、你的意思是在页面显示之前先对样式表load完毕……对于你希望照顾的低网速用户，这显然是更差的体验——白屏一下然后突然展示出来。

5、好的设计，我觉得应该做到去除样式表之后依然有很好的可读性。所以对于css文件的加载速度可以忽略不计。
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里面不在这个里面.
rveo
2010-08-06 22:21:52 +08:00
@huacnlee 当然不是 多个 CSS 或 混合 CSS 输出，就是说 1 个 CSS 外链。

我说的主要问题是，CSS 会出现 load 不完的情况，而 JS 不会。我是想探讨这个问题。而他们的加载速度，加载模式，可能是一模一样。
rveo
2010-08-06 22:27:27 +08:00
@dimlau

嗯，嗯，第 2 确实是个问题。

第 3 跟第 4 应该是同一个问题，让用户等，当然是不好。

但是他们带宽窄，是已经知道会慢的了，我觉得，相比慢还杂乱排版，应该比慢但排版没问题的用户体验差很多。。

第 5 值得衡量思考。。
billychow
2010-08-06 22:28:13 +08:00
跟网速关系并不大，关键是网络稳定性，丢包这问题，根本出现在网络环境上，你再怎么折腾，把样式弄到 JS 里不是一样的吗，下载 JS 文件的时候还不是照样可以丢……

所以没有任何意义
分隔 CSS/JS 的好处就是代码更简洁，同时应用 CDN 等加速访问，也可以节省带宽
而内联的好处就是 HTTP 次数会少一些，仅此而已。

就算是那些大门户网站，你丢包的时候还是一样的显示不全的。
rveo
2010-08-06 22:39:58 +08:00
@billychow 你遇到过页面完成而 JS load 不完的么？我没遇到过。而 CSS 在页面完成还没 load 完的我却常见，尤其是访问国外网站。或许，我实在是太幸运了，没遇到过。说说你遇到的情况？
billychow
2010-08-07 00:10:28 +08:00
有的，js 载入不完整很容易造成脚本错误。这种机率对我来说和css加载不全机率差不多，极少出现。
disinfeqt
2010-08-07 00:47:10 +08:00
“你遇到过页面完成而 JS load 不完的么？我没遇到过。而 CSS 在页面完成还没 load 完的我却常见”
我真是快笑死了。楼主，不要再班门弄斧了。

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1415

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX