Web浏览器中的JavaScript（二）

1. 客户端Javascript时间线：

    1）  Web浏览器创建Document对象，并开始解析Web页面，解析html元素和它们的文本内容后添加Element对象和Text节点到文档中。在这个阶段documen.readystate属性值是“loading”

    2）  当HTML解析器遇到没有async和defer属性的<script>元素时，它把这些元素添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载（如果需要）和执行时解析器会暂停。这样脚本就可以用documen.wrte()来把文本插入到输入流中。解析器恢复时这些文本会成为文档的一部分。同步脚本经常简单定义函数和注册后面使用的注册时间处理程序，但他们可以遍历和操作文档树，因为在他们执行时已经存在了。这样，同步脚本可以看到它自己的<script>元素和它们之前的文档内容。

    3）  当解析器遇到设置了async属性的<script>元素时，它开始下载脚本文本，并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器没有停下来等它下载。异步脚本禁止使用document.write()方法。它们可以看到自己的<script>元素和它之前的所有文档元素，并且可能或干脆不可能访问其他的文档内容。

    4）  当文档完成解析，document.readyState属性变成“interactive”。

    5）  所有有defer属性的脚本，会桉它们在文档里的出现顺序执行。异步脚本可能也会在这个时间执行。延迟脚本能访问完整的文档树，禁止使用document.write()方法。

    6）  浏览器在Document对象上触发DOMContentLoaded事件。这标志着程序执行从同步脚本执行阶段转换到事件驱动阶段。但要注意，这时可能还有异步脚本没有执行完成

    7）  这时，文档已经完全解析完成，但是浏览器可能还在等待其他内容载入，如图片。当所有这些内容完成载入时，并且所有异步脚本完成载入和执行，document.readyState属性改变为“complete”，Web浏览器触发Window对象上的load时间。

    8）  从此刻起，会调用异步事件，以异步响应用户输入事件、网络事件、计时器过期等。

这是一条理想的时间线，但是所有浏览器都没有支持它的全部细节。所有浏览器普遍支持load事件，都会触发它，它是决定文档完全载入并可以操作最通用的技术。DOMContentLoaded时间在load时间触发，当前所有浏览器都支持这个事件。

2.客户端Javascript兼容性和交互性的问题主要可以归纳为以下三类：

    1）  演化：Web平台一直在演变和发展当中。一个标准规范会倡导一个新的特性或API。如果特性看起来有用，浏览器开发商实现它。如果满足足够多的开发商实现它，开发者开始试用这个特性，然后这个特性就在Web平台中广泛使用。有时候浏览器开发商和Web开发商引领这种标准规范的指定，开发好官方的版本，之前该特性已经成为一个事实标准。另一种情况，新特性已经被添加到Web中，新浏览器支持它但是老浏览器不支持。Web开发者必须在使用老旧浏览器的大量用户和使用新式浏览器的少量用户之间做出权衡。

    2）  未实现：有时候，浏览器开发商之间对于某一特性是否能够有用到要实现存在观点上的差异。一些开发商实现了这个特性，而其他没有实现。有些现代浏览器实现的功能在老旧浏览器中没有实现，这种情况还好，但同样实现一个功能在不同浏览器中有很大差别，例如，IE不支持<canvas>元素，虽然所有其他浏览器已经实现了它。一个更加糟糕的例子是，Microsoft决定不实现Dom Level 2 Event规范（它定义了addEventListener（）和相关的方法）。这个规范在十年之前已经标准化了，其他浏览器厂商已经支持了很久了。

    3）  bug：每个浏览器都有bug，并且没有按照规范准确地实现所有客户端Javascript API。有时候编写能兼容各个浏览器的Javascript程序是一个糟透了的工作，必须研究已有浏览器中的各种bug

3.在客户端Javascript中检测浏览器类型和版本的方法是使用Navigator对象，确定当前浏览器的厂商和版本的代码通常叫做浏览器嗅探器或者客户端嗅探器。嗅探器也可以在服务器端完成，Web服务器根据User_Agent头部可以有选择地返回特定的javascript代码给客户端。

4.IE条件注释：

    1）  简介：

    IE中的条件注释（Conditionalcomments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。

    条件注释只能用于IE5以上。

    如果你安装了多个IE，条件注释将会以最高版本的IE为标准。

    条件注释的基本结构和HTML的注释(<!�C �C>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。

    2）  IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

    gt :greater than，选择条件版本以上版本，不包含条件版本

    lt : lessthan，选择条件版本以下版本，不包含条件版本

    gte :greater than or equal，选择条件版本以上版本，包含条件版本

    lte :less than or equal，选择条件版本以下版本，包含条件版本

    ! : 选择条件版本以外所有版本，无论高低

    3）  条件注释使用方法

    <!--[ifIE 5]>仅IE5.5可见<![endif]-->

    <!--[ifgt IE 5.5]>仅IE 5.5以上可见<![endif]-->

    <!--[iflt IE 5.5]>仅IE 5.5以下可见<![endif]-->

    <!--[ifgte IE 5.5]>IE 5.5及以上可见<![endif]-->

    <!--[iflte IE 5.5]>IE 5.5及以下可见<![endif]-->

    <!--[if!IE 5.5]>非IE 5.5的IE可见<![endif]-->

 <!--[if !IE]><!--> 您使用不是Internet Explorer <!--<![endif]-->

    <!--[if IE 6]><!--> 您正在使用InternetExplorer version 6或者一个非IE 浏览器

    <!--<![endif]-->

5.javascript不能做的：

    1）  javascript没有权限来写入或删除客户计算机上的任意文件或列出任意目录。这意味着javascript程序不能删除数据或植入病毒。

    2）  客户端javascript没有任何通用的网络能力

    3）  javascript程序可以打开一个新的浏览器窗口，但是为了防止广告商滥用弹出窗口，很多浏览器限制了这一功能，使得只有为了响应鼠标单击这样的用户触发事件的时候，才能使用它。

    4）  javascript程序可以关闭自己打开的浏览器窗口，但是不允许它不经过用户确认就关闭其他窗口

    5）  HTML FileUpload元素的value属性是只读的。如果可以设置这个属性，脚本就能设置它为任意期望的文件名，从而导致表单上传指定文件（比如密码文件）的内容到服务器

    6）  脚本不能读取从不同服务器载入的文档内容，除非这个就是包括该脚本的文档。类似地，一个脚本不能在来自不同服务器的文档上注册事件监听器。这就防止了脚本窃取其他页面的用户输入（例如，组成一个密码项的键盘的单击过程）。这一限制叫做同源策略。

2.同源策略：同源策略是对javascript代码能够操作哪些Web内容的一条完整的安全限制。当web页面使用多个<iframe>元素或者打开其他浏览器窗口的时候，这一策略通常就会发挥作用。在这种情况下，同源策略负责管理窗口或窗体中的javascript代码以及和其他窗口或帧的交互。具体来说，脚本只能读取和所属文档来源相同的窗口和文档的属性。

文档的来源包括协议，主机，以及载入文档的url端口。从不同Web服务器载入的文档具有不同的来源。通过同一主机的不同端口载入的文档具有不同的源。使用http：协议载入的文档和使用https协议载入的文档具有不同的源，即使他们来自同一个服务器。

文档本身的来源和同源策略并不相关，相关的是脚本所嵌入的文档的来源。例如，假设一个来自主机A的脚本被包含到（使用<script>标记的src属性）宿主B的一个Web页面中。这个脚本的来源是主机B，并且可以完整地访问包含它的文档的内容。如果脚本打开一个新窗口并载入来自主机B的另一个文档，脚本对这个文档的内容页具有完全的访问权限。但是，如果脚本打开第三个窗口并载入一个来自主机C的文档（或者是来自主机A），同源策略就会发挥作用，阻止脚本访问这个文档。

3.同源策略用例：可以防止脚本窃取信息，如果没有这一限制，恶意脚本（通过防火墙载入到安全的公司内网的浏览器中）可能会打开一个空窗口，欺骗用户进入并使用这个窗口在内网上浏览文件。恶意脚本就能够读取窗口的内容并将其发送回自己的服务器，同源策略防止了这种行为。