阎王要你三更死，焉能留你到五更！

记得印象中好像遇到过这种问题，模糊记得最后好像是将AS 3.0代码改成了2.0后解决之；所以这次很自信地跟他（flash同事）说肯定是你的问题，让他改，而我则在一旁围观，现在因为嫌太麻烦，所以不想改代码（原先的代码是：ExternalInterface.call(“resize”,”220px”);），于是只有Google了……

实验N种方法之后，最后意想不到的是：问题竟然出在了没有给html代码中的object指定id。-_-#!

a标签：不能包含其他a标签

pre标签：不能包含img、object、big、small、sub和sup标签

button标签：不能包含input、select、textarea、label、button、form、fieldset、iframe和isindex标签

label标签：不能包含其他label标签

form标签：不能包含其他form标签

此文系翻译之W3C中Element Prohibitions片段，原文如下：

The following elements have prohibitions on which elements they can contain (see SGML Exclusions). This prohibition applies to all depths of nesting, i.e. it contains all the descendant elements.

a
must not contain other a elements.
pre
must not contain the img, object, big, small, sub, or sup elements.
button
must not contain the input, select, textarea, label, button, form, fieldset, iframe or isindex elements.
label
must not contain other label elements.
form
must not contain other form elements.

只好再次留脚印了，不过还得加点关键词： Jena、RDF、OWL、语义网，便于自己以后查找（有健忘的毛病）

昨天已经是第二个同事说我的性格的问题了，首先还得感谢他们，因为我是个喜欢别人提出我的不足（或者说是确实存在的一些注意的问题）的人。

首先得说下我是个倾向于独立思考问题的一类，常说物以类聚，不得不承认自己喜欢那种能独立思考的，有自己见解的人，不管最后的结果怎样，至少尽自己最大的努力去尝试过。

因为公司人员流动的原因，我们技术组长找我谈了次话，提醒了我在带新人时的问题。因为组长忙于负责另一个大型的项目，所以就把帮助新人更快了解公司的工作方面的任务交给了我。今天终于有时候可以静下来思考这个问题，发现自己确实没做好这件重要的事，因为公司需要通过新人的实习表现来决定是否雇佣，对于来到公司的新人我没有做到有足够的耐心，因为不停的问我问题，我开始变得烦躁起来，但并不会到讨厌的地步（因为我属于那种不会记愁的），只是感觉有点烦，说话的口气也就失去了平常那种平和的态度，可能确实像组长说的那样吧：还有点孩子气，不够成熟。（这里满足下对我个人问题感兴趣的guy，因为我一直知道自己不够成熟，所以才一直单身着的，我害怕我总是一时冲动而已，而伤害其他人）对于自己没有耐心的问题，自己也有点茫然，一直想改，可是遇到问题时总是忘记的一干二净了…… ：（

昨天晚上跟另一个同事一起吃饭，因为我吃饭的速度是比较快的，早就吃完了，然后就坐那边等他，吃完饭后同事就跟我提到了这个问题，从我平时的表现，说我速度快的有点让人感觉我做事有点急燥。哎，人活着总有解决不完的问题；其实我只想做事更迅速点，使用更少的时间完成更多的事（这并不是说只要速度不要质量，本人有点倾向于完美型的）。这个问题也不知道该追溯到什么时候，可能是因为要想不断进步就得不断的学习的思想，所以总感觉自己有很多的不懂的东西，要学的太多了，可能也就慢慢导致自己养成了这种做事的习惯。自己现在真的无法问题这个问题了，到底是讲求速度还是力求稳呢（速度给人急躁的感觉，但是稳又给人犹豫不决的印象）？虽然漠然但是思想还是很清晰，就是力求完美，以自己最快的速度达到最好的质量，再困难也不放弃（这也许就是为什么成功人士一直强调的一定要做自己喜欢的事，这样才能时刻保持激情！）

最后还是想提醒自己：付诸行动

其实我个人觉得他问这个题重点是考浏览器缓存机制,资源下载序,css渲染与js执行顺序.

这个问题其实听起来是个非常基础的题目，但是感觉自已还是很模糊，所以本人在网上找了些资源，再加上自已的一些测试，将结果分享给大家，说错的地方希望大家指正批评.

HTTP协议基于请求响应模式，客户端向服务器发送一个请求，请求头包含请求的方法，URI，协议版本以及包含请求修饰符，
客户端信息和内容的类似 MIME的消息结果。服务器则以一个状态行为作为响应，相应的内容包括消息协议的版本，
成功或错误编码加上包含服务器信息，实体元信息以及可能的实体内容。

缓存:

当浏览器第一次请求某个URL时，顺利访问的话，服务器返回状态200的状态,
同时会返回给浏览器一些Headers集合，例如set-cookie,Last-Mondified,Etag等等
下面重点说明Last-Mondified与Etag,即浏览器缓存.

HTTP/1.x 200 OK
Server: Microsoft-IIS/7.5
Last-Modified: Thu, 31 Dec 2009 09:29:09 GMT
Etag: “e46de5b4fb89ca1:0″
Expires: Thu, 07 Jan 2010 00:00:00 GMT

Last-Mondified: 最后一次修改时间
Etag: 资源的状态唯一标识(每个资源的etag都不同,例如img,js,css。。。。)
Expires: 指定资源在浏览器缓存中的过期时间 (需要在服务端设定)

浏览器接收到服务器这些信息后，就会将资源缓存在本地目录中,同时保存文件的上述信息.
如果有set-cookie的话，且浏览器未禁用cookie,则会保存cookie信息,当cookie过期时间大于当前时间时，浏览器会将cookie保存在本地硬盘.
下次发送时会同header头一起发送给服务器，当然条件是相同域，path约束相符等等情况下.

第二次请求时，根据 HTTP 协议的规定，浏览器会向服务器传送 If-Modified-Since 与 If-None-Match 报头,
这两个报头实际上是第一次请求时服务器返回的Last-Modified,Etag.发送这两个报头目地是询问服务器，该资源在时间内有没有被修改过.
如果该资源未被修改，则服务器会直接返回HTTP 304 （Not Changed.）状态码,内容为空,此时不会下载资源，浏览器则自动从缓存目录中读取资源.

使用Last-Modified/Etag 可以减少传输成本，但不会减少http请求
测试结果截图(来自互联网):

如果给文件加上关于过期时间(Expires)的header报文,这样浏览器就会先检查缓存中的文件，如果没有过期，就直接使用缓存中的文件,从而不会发送http请求.
测试结果截图(来自互联网):

前面描述的只是一些普通的浏览器缓存状态，在实际应用中，如页面跳转（点击页面链接跳转，window.open，在地址栏敲回车，刷新页面）等操作，会有一些区别

普通页面跳转包括链接点击跳转，用js脚本打开新页面（window.open），iframe时
第一次请求服务器返回200,并返回资源的Last-Modified/Etag,
第二次请求时，浏览器发送上次接收的Last-Modified/Etag,服务器直接返回304(HTTP/1.x 304 Not Modified)
如果设置了Expires,且未过期，浏览器直接从缓存目录中读取，不发送请求给服务器
F5刷新时
与普通请求区别在于，即便资源设置了Expires且未过期，浏览器也会发送相应请求,然后根据服务器返回状态来决定是否下载资源.
Ctrl+F5刷新时与无缓存时效果一样，服务器返回200(资源全部重新下载).

其实明白上述的原理后，我们可以对web服务器header头进行合理的设置，从而可以大大提高性能.
以iis7为例,iis6设置差不多(iis管理–httpheaders选项卡–选择允许内容过期).

例如网站下有一个images文件夹，里面放着很多较大的图片，但这些图片最少1天之内不会被更改.
那么，我们可以给这个文件夹设置过期时间.
在iis7下切换至该文件夹的功能视图–选择iis类别中的http响应标头–设置常用标头–使web内容过期
测试:
环境:Live Http Headers + Firefox 3.5.6
在html文当中包含5张该文件夹下的图片.
第一次请求时，发送了6次http请求,6次下载(文档+5张图片)
第二次请求时，只发送了一次http请求,1次下载(文档,而图片则是直接从浏览器缓存中读取)
如果F5刷新,发送了6次http请求,对于5张图片，服务器返回HTTP/1.x 304 Not Modified,所以浏览器不会下载图片.总共1次下载.

下载资源顺序
主文档当然是第一个下载,其次
IE6是按html中定义的文档流顺序来下载外部资源，从上至下.
FF则略有不同,FF会优先下载js或css,而图片资源延迟到后面下载.
(经测试IE7,IE8也是先下载js或css,其它资源延后下载)

测试结果:
文档:

<HTML>
<HEAD>
  <TITLE> New Document </TITLE>
  <link href="main.css" rel="Stylesheet" />
  <script type="text/javascript" src="/AreaCounter.js"> </script>
</HEAD>
<BODY>
  <div>
       <img src="csdnindex_piclogo.gif" />
       <link href="index090703.css" rel="Stylesheet" />
       <img src="475x60ttt_2.jpg"/>
       <script language='JavaScript' type='text/javascript' src='/csdn_ggmm.js'> </script>
  </div>
</BODY>
</HTML>

IE7/IE8/FF下载顺序:

渲染或解析(非DOM)

对于 js 运行，以及页面加载相关事件的触发，特别做了测试。在 Firefox 下，打开测试页面：

(以下测试数据来自互联网)

[22:13:32.947] HTML Start
[22:13:32.947] normal inline script run time
[22:13:34.904] normal external script run time
[22:13:35.775] [body] normal external script run time
[22:13:35.789] [body end] normal external script run time
[22:13:35.789] HTML End
[22:13:35.791] deferred inline script run time
[22:13:35.791] deferred external script run time
[22:13:35.793] DOMContentLoaded
[22:13:38.144] images[0] onload
[22:13:38.328] images[1] onload
[22:13:39.105] images[2] onload
[22:13:39.105] images[3] onload
[22:13:39.106] window.onload

很明显，JS 的运行严格按照文档流中的顺序进行。其中 deferred 的脚本会在最后运行（注：Firefox 3.5 开始支持 defer，而且支持得很完美）。

再来看下 IE8，结果如下：

[22:33:56.806] HTML Start
[22:33:56.826] normal inline script run time
[22:33:57.786] normal external script run time
[22:33:57.812] deferred inline script run time
[22:33:57.816] document.readyState = interactive
[22:33:57.934] [body] normal external script run time
[22:33:58.310] [body end] normal external script run time
[22:33:58.310] HTML End
[22:33:58.346] deferred external script run time
[22:33:58.346] images[0].readyState = loading
[22:33:58.346] images[0].readyState = complete
[22:33:58.346] images[0] onload
[22:33:58.361] doScroll
[22:33:58.451] images[1].readyState = loading
[22:33:58.479] images[1].readyState = complete
[22:33:58.479] images[1] onload
[22:33:58.794] images[2].readyState = loading
[22:33:58.854] images[2].readyState = complete
[22:33:58.854] images[2] onload
[22:33:58.876] images[3].readyState = loading
[22:33:58.876] images[3].readyState = complete
[22:33:58.876] images[3] onload
[22:33:58.887] document.readyState = complete
[22:33:58.888] window.onload

可以看出，IE8 下，defer 只对 external 脚本有效，对 inline 脚本无效。

css下载和渲染几乎是同时进行的.即下载完成后会立即渲染到页面.
当某一脚本下载完成时，也会立刻解析和运行。脚本的运行严格按照文档流中的顺序进行，deferred 的脚本会在正常脚本运行之后运行,
所以特别注意js脚本放置顺序.如果第二个外部脚本中直接调用运行第一个外部脚本中的全局变量时，会产生脚本错误.
特别需要留意：脚本运行时，会暂停该脚本之下所有资源的下载（因为脚本可能改变文档流，甚至跳转页面，浏览器的暂停策略是合理的）。

至于DOM的渲染是根据浏览器的渲染引擎来决定的.
这里可以了解各个浏览器的渲染引擎 :http://www.mac52ipod.cn/post/Trident-Gecko-WebKit-Presto.php

ps:defer是个很有用的东西,当某个脚本被标识为defer=true时，浏览器下载完该脚本后，不会立即执行该脚本，而是对其它资源进行下载和解析.
默认情况下,defer为false,所以尽量不要在标识defer的js块或外部js文件中使用全局变量.
例子

<script type="text/javascript">
alert(a);
</script>

<script type="text/javascript">
var a=3
</script>

该脚本会报a未定义的错误，如果将第一个脚本块增加 defer=true标记,即可正常运行.所以说加上 defer 有点类似于 window.onload，但比onload灵活!

<script type="text/javascript" defer="defer"> //等同于defer=true
alert(a);
</script>

本文系摘自：http://topic.csdn.net/u/20100105/11/382a3b43-e0a7-4adf-aa91-bf6ff7e25539.html

上文中的defer比较有意思。

h1#technique-one {
        width: 250px;
        height: 25px;
        background-image: url(logo.gif);
        }
        h3#technique-one span {
                display: none;
}

PS：此写法是CSS-Tricks发表的“Nine Techniques for CSS Image Replacement”一文中提到的此方法，感觉很不错，所以在此分享一下。

使用一下确实不错，原本已经被Minify过的jquery.js（Gzip前为55.9K）经过压缩后传输到客户端的文件只有18.8K，而prototype.js（原为126.7K）压缩后变成了28.3K，文件大幅度减小，达到加快页面的显示的效果，这也只是SEO之一，其实还有很多其实的，可以通过Firefox的两个插件（Page Speed和YSlow）来测试