2010-8-2 update:经过测试发现,但script的src和link的href属性值为#的时候,也会发生同样的事情:给服务器发送一个HTTP请求,并把当前页面作为返回值。浏览器的异同与下面的结论相同。通过js动态生成的script和link元素也一样。 ————-============————-============———— 有些时候,我们在写HTML页面的过程中,通过script标签来外联外部的js文件,可是不小心给src属性赋值为空,当然有时候也会在link元素中带上了空属性值的href属性,我们想当然的认为这个没多大的影响,浏览器也会按照你认为的方式来解析它们。但是这个想当然估计错误了。先看几个测试页面:《HTML5 Doctype下href=””》,《HTML5 Doctype下src=””》,《XHTML1.0 Doctype下href=””》。 使用firebug来查看DOM节点树的link和script节点,你就会发现怪异的事情发生了:link和script节点的内容居然是当前html页面的内容!!确实不可思议,就连容错机制最好的XHTML1.0的DTD声明也无济于事,这恐怕就是浏览器渲染页面的问题了。script节点src属性为空的时候就更恐怖了,会造成了语法错误。可更不可思议的是,出现这个问题的浏览器居然不是IE。经过多个浏览器的测试,IE和Opera都能很好的处理这个问题,可是Firefox、Chrome、Safari居然出现了。 对于这个初步总结为:当link标签的href属性为空、script标签的src属性为空的时候,浏览器渲染的时候会把当前页面的URL作为它们的属性值,从而把页面的内容加载进来作为它们的值。动态修改它们的href或者src属性值为空的时候,也将会出现这个问题:《动态修改href为空》。 因此,在我们平时写HTML页面,或者动态生成这两个标签的时候,尽量避免陷入了上面出现的陷阱,好好对待浏览器,编写符合规范的HTML标签语法和嵌套规则,多余的就别多此一举去倒弄,它回报给你的将是更少的开发时间和精力。 当某天你测试上面给出的测试样例并没有发现这个问题的时候,那就是浏览器修复了这个bug了。
2010-6-12 Updates:既然我们通常说道Gzip压缩的效果如何的好(确实很好),那我们就来说一下Gzip压缩的原理吧:当服务器开启了Gzip压缩后,当从服务器加载一个文件的时候,就会将这个文件里相似的字符串临时地替换为规定形式的标记,之后在支持Gzip压缩的浏览器中替换回来并显示到页面上。如果文件里相似或者相同的字符串越多,压缩效果就越好。所以这个对HTML、JS、CSS文件压缩效果非常明显,因为它们的代码中有非常多相似的字符串可以压缩。为了证实这个说法,写了两个测试页面:《Gzip file1》,《Gzip file2》,第一个文件的原始大小为4K左右,第二个为10K左右,而压缩效果明显是第二个压缩的更尽致。 因此,利用Gzip的压缩原理,可以对文件的内容适当的做些手脚来使得压缩效果更加的尽致。 Updates:外联js文件的时候,给script标签带上async和defer属性 浏览器正常加载js文件的方式在性能上是比较糟糕的,阻塞了后续资源的加载和渲染,直到js文件加载并执行完毕。而async属性就顾名思义了,它使得js文件的加载和执行是异步的,不会阻塞后续资源的加载:《async加载Javascript测试》。当然了,要支持async的浏览器才行。 defer首先在IE下支持,最新版的FF等浏览器也相继支持了。它的主要作用是让js延迟加载,而不阻塞后续资源的加载和页面的渲染。这对于支持它的浏览器得到了一定程度的优化,而不支持的会忽略掉这个属性。 因此,建议同时加上async和defer属性,对大部分的浏览器都得到了优化,而不支持的浏览器也会按照默认的方式加载,何乐而不为呢。 昨天分享了些关于Web性能优化的几个方面《WEB性能优化系列一》,接下来分享下另外的一些优化方面的心得体会,算是续上一篇博文,欢迎指正~ 因为本文的篇幅较小,就不提供链接目录了,提供PDF格式的文档下载:《WEB性能优化系列二》 1. Use efficient CSS selectors:使用高效的CSS选择符 关于高效的CSS选择符的叙述,很多书籍和网站很多博客都有相关的说明,尤其《Writing Efficient CSS for … 了解更多
这几天看了秦歌的博客的其中一些关于XHTML和HTML,以及关于DOCTYPE的一些博文,开始关注到了DOCTYPE的一些细节的知识。促使浏览器使用XHTML1.0或者XHTML1.1还是HTML的DTD来解析文档,可是使用DOCTYPE嗅探来实现。现在浏览器的解析模式有标准模式(Standards Mode)以及所谓的怪癖模式(Quirks Mode),而标准模式的DOCTYPE的声明方式有下面的几种: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <?xml version=”1.0″ encoding=”utf-8″?><!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> … 了解更多