首先感谢比尔、感谢微软、感谢MSDN,是他们让我看到他们富有创意的一面,好了好了不废话了。

我们经常把多个CSS或者多个JS并成一个,以节省请求,但是这样最少还是要两个。在MSDN的Blog上看到原来也是可以把JS和CSS并在一个文件里,那怎样做呢?利用注释,先看一下这代码。

<!-- /*
window.onload=function(){
document.getElementById("test2").innerHTML="传说中滴JS测试者。如果你看到我,那<strong>JS</strong>也生效了";
}
<!-- */
<!-- #test1,#test2{border:3px #000 solid;padding:5px;color:#123456;background-color:#ccc;} strong{color:red;}

CSS处理时会忽视掉<!–,这时JS部分只是CSS的注释/* js */,而JS处理时把<!–转成// 也就是JS的单行注释,单行注释会把后面的/*和*/干掉,同时也干掉了CSS,不废话了,看演示的例子

在网上运行时还要通过程序输出个“*/*”的头,不然MIME不对有的浏览器不干活。PHP的是这样:

<?header('Content-type: */*');?>

理论上在服务器上指定某种后缀的MIME是“*/*”应用也行得通,不过我没有试。把JS跟CSS写在同一个文件特别适合第三方调用的那种,虽然文件大了一点,但能少了一半的请求数,帅帅滴。补充说明,直接这样使用会是两个200的,要节省还要涉及到服务器配置,最少我还不知道单程序可以实现的。

当然,这样的格式写起来一定很不爽,不过配合程序来读原来已经的,并处理一下就可以,这样就可以保持原来文件也方便维护,输出文件又省点请求,如果想的话,处理处理缓存,跟静态文件差不多了。这里有份C#的,据说是官方滴,我的是PHP的,因为还没写缓存的机制就不拿出来丢人了,其实原理也很简单,会编程的三两下就搞定。

再其实,我是想找把多份CSS合并的方式,合成一个不难,可以是处理好各模块化的分离同时能在客户端缓存及方便程序调用才是难的,CSS又不像JS可以在客户端异步调用,谁有好的方式介绍一下给我。

Creative Commons License

共有 20 条评论

  1. snwebsite

    妙哉!妙哉!

  2. 冷韵

    这个……没多少意义吧。
    不过嗷嗷说的多份CSS合并倒是很值得研究的。

  3. old9

    赞个~
    “而JS处理时把转成// ”这句漏写点东西哇~

  4. aoao

    to:冷韵 其实意义很大。少了一个文件可以节省很多资源的。
    to:old9 已经补上了,越来越讨厌FCK,应该自动处理的不自动处理,

  5. xin2l

    哉妙!哉妙!(路过~~)

  6. 子乌

    像我一样,直接把css读取到页面里即可~

  7. oncelive

    不错吧你的站点做个友情连接,
    不过我不是专业的搞这个
    不太懂,偶只会简单静态的网页,呵呵

  8. awflasher

    真够bt的~嘿嘿:)

  9. 北京翻译公司

    果然强….

  10. JAY

    “逻辑”和“样式”的混合是程序设计上应该避免的问题,但没想到博主居然还将其更加混合,这是很有问题的。
    如果仅是为了炫耀对不同注释的掌握程度的话,大可不必这样。如果从节约空间考虑,现在估计没多少空间用得着如此仅仅计较。
    所以,我觉得这样做是有严重设计上的问题的。

  11. aoao

    to JAY
    样式跟js都是按原来的写法写。只是在输出的时候由程序混在一起。这样写并不是为了节约空间。单独的压缩会更好。
    我只是提供实现的方式,对于做到减少请求数还要应用到服务器配置。

  12. 在线代理

    高招啊,是在是高招。
    居然可以这样。也难为你能够想到

  13. 西藏旅游

    我一般是只用css + JS
    现在学了点见识了

  14. dw

    说实在的,有点变态,如果像你说的那样有意义,无论是IE还是Firefox,亦或是W3C都会让你不用那么费劲折腾都办了,而且你实在想减少请求,你可以都放在HTML里嘛?最少也是合法啊

  15. 这名都有人叫

    就是为了减少个请求数..
    我被你打败了..
    一点意义都没有!

  16. keel

    最有意义的作法用程序读取JS和CSS后,直接将CSS和JS代码并到页面中输出.这样连CSS的请求数都消除了:)
    可惜后期维护工作量很大,AOAO的作法也有可能会有这个问题.有更好的建议么?

  17. warran

    既然用了php了。
    何不这样

    if($_GET["action"]==”css”){
    echo ‘body{color:red}’;
    }else{
    echo ‘alert(”test”)’;
    }

  18. aaa

    JS和CSS本质是一个,所以它们能合并.
    微软的东西,微弱自己明白.

  19. aoao

    其实只是玩玩概念
    没什么实际意义的。挖哈哈。。

  20. Rock

    如果你们经过了performance的严格考验就不会说那些没常识的话了。。。支持楼主

发表评论

(必填)

(必填)

 评论仅支持"a、abbr、strong、em、blockquote、code"几个简单的标签