最短方式引入css和js

起因

自Velocity china 2010 WPO大会回来之后,整个人都“性能化”了,到处找可以省一个字符的地方,感觉可以变成疯子了……

这次测试怎么样可以用最少的字符,引入css和js。其实也就是style和script标签可以简写到什么程度。

标准模式 & 丑陋模式

现代比较标准的style和script标签的写法是这样的:

<!-- style标签 -->  
<style type="text/css"> /* some css rules */ </style>  
<!-- 内联script标签 -->  
<script type="text/javascript> /* some javascript */ </script>  
<!-- 外部script -->  
<script type="text/javascript" src="some.js"></script>  
<!-- link标签 -->  
<link rel="stylesheet" type="text/css" href="some.css />  

这是相当标准的使用方式,多数IDE,包括Visual Studio、Aptana、Eclipse的自动完成都是这么生成的,而且延用至今也绝对是可依赖的。

另外还有比较丑陋的写法,算是旧时代的遗留产物,包括:

  • <script>标签加上language="javascript"

    无数年前的产物,大概是netscape和ie打架时候的属性,在今天已经完全没用了。

  • <style>标签加上language="css"

    其实从一开始就没有这回事,但总有这么一部分人自以为聪明地去给<style>也加language属性。

当然这些不是这次讨论的主角,丑陋的东西已经快绝种了。

可以去除的属性

众所周知,现代浏览器中的脚本语言几乎只有javascript一个,而样式更是只有css一种,因此<script>标签和<style>标签的type其实是一种摆设,可以尝试着去掉。

去除type属性,需要从2方面去考虑和验证:

  • 是否影响到浏览器的执行。
  • 是否符合标准。

检验的方法很简单,前者直接运行,后者直接扔到w3c验证器上去看一看就行了,以下是这次测试用的HTML:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8" />
    <title>最短的style和script</title>
    <style>
        body { color: red; }
    </style>
</head>  
<body>  
    <script>
        document.write('some');
    </script>
</body>  
</html>  
  • 期望输出:红色的some。
  • 结果:所有浏览器都正确地完成了渲染。
  • w3c验证器结果:通过HTML5验证。

事实证明,<script><style>标签上的type属性是可以去掉的。

同理,<link>type属性也是可以去掉的,因此这里只给结论,就不拿测试过程说事了。

其他的

有一件众所周知的事:<script>标签不能自闭合。

这个多数前端人员是知道的,自闭合<script>标签会形成非常诡异的DOM结构,大致像下面所示:

<body>  
    <script src="some.js" />
</body>  
</html>  

会变成下面这样

<body>  
<script src="some.js">  
    </body>
    </html>
</script>  

当然也有人会觉得,当DOCTYPE设定为xhtml的时候,<script><style>标签没有type属性是不可以的。

关于这个问题,还是明确一下DOCTYPE的作用:

  • 让浏览器进入standard模式,这需要DOCTYPE至少为<!DOCTYPE html>
  • 告诉w3c验证器这是哪个标准的网页。

除此之外,浏览器完全不在意DOCTYPE究竟是什么,只要进入了standard模式,浏览器都会以最大的兼容性来渲染页面,并不会因为DOCTYPE声明了xhtml,而某个标签没有闭合,就渲染出错误的内容。

简单来说,浏览器在standard模式下只有一种渲染工作方式,DOCTYPE已经失去了意义。

因此,如果为了w3c验证器,那么修改一下DOCTYPE吧,不要害怕浏览器会因为DOCTYPE被修改了而渲染出不符合预期的效果。而如果仅仅为了让浏览器正常的工作,就让DOCTYPE见鬼去好了……

结论

  • <script>/<style>/<link>的type属性都可以去掉。
  • <script>千万不能自闭合。
  • 不追求这点字节的,还是让IDE去自动生成吧^_^