V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
rveo
V2EX  ›  CSS

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

  •  
  •   rveo · 2010-08-06 18:38:25 +08:00 · 7243 次点击
    这是一个创建于 5226 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <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 );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    就算是那些大门户网站,你丢包的时候还是一样的显示不全的。
    rveo
        18
    rveo  
    OP
       2010-08-06 22:39:58 +08:00
    @billychow 你遇到过页面完成而 JS load 不完的么?我没遇到过。而 CSS 在页面完成还没 load 完的我却常见,尤其是访问国外网站。或许,我实在是太幸运了,没遇到过。说说你遇到的情况?
    billychow
        19
    billychow  
       2010-08-07 00:10:28 +08:00 via Android
    有的,js 载入不完整很容易造成脚本错误。这种机率对我来说和css加载不全机率差不多,极少出现。
    disinfeqt
        20
    disinfeqt  
       2010-08-07 00:47:10 +08:00
    “你遇到过页面完成而 JS load 不完的么?我没遇到过。而 CSS 在页面完成还没 load 完的我却常见”
    我真是快笑死了。楼主,不要再班门弄斧了。
    rveo
        21
    rveo  
    OP
       2010-08-07 02:55:12 +08:00
    @disinfeqt 不知道才问,才需要 知道的人 给个仔细的说法。难道 V2EX 不接收菜鸟问题?
    disinfeqt
        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.
    rveo
        23
    rveo  
    OP
       2010-08-07 03:10:07 +08:00
    @disinfeqt 这个现象存在,我才会有这样的疑问。如果你非要这么形容我,我也无可奈何。蛇有蛇道,鼠有鼠路。
    Los
        24
    Los  
       2010-08-07 03:30:26 +08:00
    @rveo 抱歉,你的title起得实在是缺少美感,挺影响版面的
    rveo
        25
    rveo  
    OP
       2010-08-07 03:35:41 +08:00
    @Los 抱歉,无法编辑,而且我写标题时无法衡量字体大小的改变造成的长度问题。
    chone
        26
    chone  
       2010-10-05 12:25:24 +08:00
    这样做对于性能没有帮助而且理论上渲染开始的时间会更晚,而且不适用于不支持javascript的设备
    link标签的外联css会在页面加载的同时被加载
    而@import要等到页面加载结束才会被加载
    还有lz说的大型网站使用行内css不是因为你说的那个原因,是为了减少页面的request从而提高加载速度
    spark
        27
    spark  
       2010-10-05 13:02:38 +08:00
    自找麻烦,Sina, 163等也只是因为首页访问量过大才会那么做的,你看一下频道页就知道,你觉得你的网站会比她们高么?

    yslow没有要求用js引入css,反倒是js引用位置有所要求
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5468 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 07:22 · PVG 15:22 · LAX 23:22 · JFK 02:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.