web浏览器中的js

1、js的执行阶段：

js的执行分以下两个阶段：

a、载入文档内容，并执行<script>里的代码（包括内联脚本和外部脚本），脚本通常会按它们在文档里出现的顺序执行，所有脚本里的js代码都是从上往下，按照它的条件，循环以及吉他控制语句中的出现顺序执行

b、当文档载入完成，并且所有脚本执行完成后，js执行就进入第二个阶段，这个阶段是异步的，而且是由事件驱动的，在事件驱动阶段，web浏览器调用事件处理程序函数（由第一阶段里执行的脚本指定的HTML事件处理程序），来响应异步发生的事件。

js都有一个单线程执行模型，脚本和事件处理程序（无论如何）在同一个时间只能执行一个，没有并发性，这保持了js编程的简单性

 

2、脚本的同步、异步和延迟加载

默认情况下，脚本的执行是同步和阻塞的，单script标签可以用defer和async属性来改变脚本的执行方式，这些都是布尔属性，没有值

<script defer src="..."></script>
<script async src="..."></script>

defer：它使得浏览器延迟脚本的执行，直到文档的载入和解析完成，并可以操作。

async：使得浏览器可以尽快的执行脚本，而不用在下载脚本时阻塞文档解析。异步脚本时载入后直接执行，这意味着它们可能会无序执行。在不支持async的浏览器里，可以通过动态创建script标签，并把它插入到文档中，来实现异步载入和执行。

function loadAsync(url){
    var head = document.getElementByTagName('head')[0];
    var s = document.createElement('srcipt');
    s.src = url;
    head.appendChild(s);
}

如果同时有以上两个属性，则会用async，而忽略defer

 

3、js执行的时间线：

a、web浏览器创建document对象，并且开始解析web页面，解析html元素和它们的文本内容后添加element对象和text节点到文档中，在这个阶段，document.readyState的属性值为loading

b、当html解析器遇到没有async和defer的script标签时，它把这些元素添加到文档中，然后执行行内或外部脚本，这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停，这样脚本就可以用document.write方法来把文本插入到输入流中，解析器恢复时这些文本会成为文档的一部分，同步脚本经常简单定义函数和注册后面使用的注册事件处理程序，它们可以遍历和操作文档树。

c、当解析器遇到有async属性的script元素时，它开始下载脚本，并继续解析文档，脚本会在它下载完成后尽快执行，但是解析器没有停下来等它下载，异步脚本禁止使用document.write方法，它们可以看到自己的script元素和之前的所有文档元素。

d、当文档解析完成，docuemnt.readyState属性变为interactive。

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

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

g、这时，文档已经完全解析完成，但是浏览器可能孩在等待其它内容载入，如图片，当所有这些内容完成载入时，并且所有异步脚本完成载入和执行，doucment.readyState的属性变为complete，web浏览器触发window对象上的onload事件

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

 

4、web浏览器上js的安全性：同源策略

注意：脚本本身的来源和同源策略并不相关，相关的时脚本所嵌入的文档的来源。理解这一点非常重要。

同源策略是对js代码能够操作哪些web内容的一条完整的安全限制，脚本只能读取和所属文档来源相同的窗口和文档的属性。从不同的web服务器载入的文档具有不同的来源，通过同一主机的不同端口载入的文档具有不同的来源，使用http协议和https协议载入的文档具有不同的来源，即使它们来自同一个服务器.

不严格的同源策略，同源策略太过于严格，下面介绍三种不严格的同源策略

a、document对象的的domain属性：在默认情况下，domain存放的是载入文档的服务器的主机名，可以设置这一属性，不过使用的字符串必须具有有效的域前缀或它本身，列如：home.example.com，就可以把它设置成example.com，但不能设置成home.example。domain值中必须有一个点号，不能把它设置成com或其它顶级域名。

如果两个窗口或窗体包含的脚本把domain设置成了相同的值，那么这两个窗口就不再受同源策略的约束，它们可以相互读取对方的属性

b、跨域资源共享（Cross-Origin Resource Sharing），这个标准草案用新的Origin：请求头和新的Access-Control-Allow-Origin响应头来扩展HTTP，它允许服务器用头信息显示地列出源，或使用通配符来匹配所有的源并允许由任何地址请求文件，这样就解决了HTTP的跨域请求。

c、跨文档消息（cross-document messaging）：允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本，而不管脚本的来源是否不同。调用window对象上的postMessage()方法，可以异步传递消息事件到窗口的文档里（可以用onmessage事件句处理程序函数来处理它）。