JavaScript基础之十一(浏览器中的JavaScript)

JavaScript的执行

分为2个阶段:①document加载完毕,javascript代码会至上而下执行  ②第一个阶段完成以后进入第二个阶段——事件驱动的异步阶段:这个阶段浏览器会调用事件处理函数(当然这些函数都是在第一个阶段里面的),响应发生的事件(例如点击等)。

 

浏览器中的JavaScript线程模型

JavaScript核心语言并不包含任何线程机制,线程机制是浏览器提供的,浏览器会分配一个线程给JavaScript程序。JavaScript是一个单线程的,单线程意味着更加简单:例如两个事件处理函数不能同时被触发执行,在一个document里面操作dom不会有并发问题,不用考虑锁啥的。

单线程也意味着:当JavaScript脚本在运行时,浏览必须停止对用户的响应,直到JavaScript脚本运行完毕。所以如果JavaScript执行了计算密集的操作(耗时),会严重影响浏览器的响应。常见的现象是浏览器崩溃(未响应)

 

JavaScript在浏览器的执行时序(理想情况)

step1:浏览器创建一个document对象并且开始解析页面,HTML解析器解析到的标签会添加对应的对象到document里面。例如解析到了一个元素标签,就会添加一个Element对象到document里面。此时document.readyState为“loading”

step2:当HTML解析器遇到script标签时(并且没有async或defer属性),这时会把这个元素添加到document对象,并且同步执行JavaScript代码。如果脚本还在下载,则暂停,下载完毕然后执行。

step3:如果script标签有async或defer属性,那么会一边下载脚本,并继续往下执行解析,下载完成后执行。

step4:当文档完成解析,document.readyState状态为“interactive”

step5:浏览器会触发DOMContentLoaded事件,这个事件对象属于document对象。这个事件标志第一阶段完毕,过渡到第二阶段事件驱动的异步阶段

step6:DOMContentLoaded触发以后表示解析完成,但是浏览器可能还在等待img等资源的加载。当所有的资源加载完成,脚本执行完成。document.readyState状态为“complete”,并且触发window对象上的load事件(window.load)

step7:至此,浏览器可以跟用户愉快的玩耍了

 

tips 1:浏览器环境非常的多样化,差异化。版本和提供商也很多,IE下面又有各种文档模型,还有一些二流浏览器提供各种模式(高速模式等),也会导致兼容性问题,所以针对HTML5的标准实现也会有差异,这个需要我们开发过程中考虑,并且合理取舍,权衡。有一个查询兼容性的网站can I use(http://caniuse.com/

 

tips 2:IE下面判断版本可以使用注释

<!–[if IE 6]>
IE 6
<![endif]–>
<!–[if lte IE 7]>
“less than or equal” <= (“lt”, “gt” and “gte”)
<![endif]–>
<!–[if !IE]>
IE下不显示
<![endif]–>

 

浏览器中JavaScript安全性

因为浏览器给JavaScript提供了运行的环境,为了防止恶意的JavaScript代码。浏览器会限制JavaScript的一些行为,列举一些如下:

①不能访问客户机的目录(没有任何权限)

②不能扩展和使用网卡的能力

③一些弹出功能(浏览器可以做限制,禁止所有的JavaScript代码)

 

同源策略

这个是浏览器针对JavaScript参与的内容比较全面的安全限制,源是含了当前载入文档URL。哪些算是不通源的情况呢?列举部分如下:

①不同的域名  ②不同的端口  ③不同的协议(http,https)

tips:JavaScript脚本本身跟同源策略没有任何关系,有关系的是嵌入JavaScript的文档的源(通俗讲就是URL)

同源策略影响大部分来自不同源的window对象下对象和属性。基于XMLHTTPRequest对象的HTTP请求会被影响。

 

放宽同源策略的方法

有时候同源策略会过于严格,我们需要做一些放宽的处理,三种方法如下:

①设置document.domain:例如三个域名a.vancl.com,b.vancl.com,c.vancl.com,这时可以设置document.domain=”vancl.com”

②跨域资源共享:设置响应头Access-Control-Allow-Origin

③跨文档通信:HTML5里面的postMessage

javascript
作者:张雪飞
出处:https://zhangxuefei.site/p/887
版权说明:欢迎转载,但必须注明出处,并在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

1comments

发表评论

电子邮件地址不会被公开。 必填项已用*标注