您的位置:首页 > Web前端 > JavaScript

JS权威指南学习笔记-浏览器中的JS

2016-11-22 22:19 357 查看
多个页面共享JS文件,实际上只会下载一次,其他的页面会从浏览器缓存中获取。

脚本的执行默认是同步和阻塞的,当HTML解析器遇到
script
标签时,必须先加载、执行完脚本后才会继续文档的解析和渲染。

defer

脚本的执行会阻塞页面的渲染,因此,在简单的开发中可以将脚本放到文档结束的位置,来避免空白的出现。然而defer属性为我们提供了另一种解决办法,它的意思是延迟脚本的执行,即便把脚本放在
head
部分,也会在文档解析渲染完成后再执行。

设置defer属性的脚本会按照在文档中出现的顺序依次执行。

async

这是html5中新增的属性,意思是异步地加载执行脚本,加载脚本的时候继续进行页面的解析和渲染,一旦脚本加载完成后就立即执行脚本。

所以可能不是按照顺序来执行的,如果存在依赖可能会出错。

如果async和defer属性同时使用,会忽略defer,使用async。

此外,脚本的异步加载和执行还可以通过动态生成
<script>
节点来实现。

参考:script的defer和async

onerror

不是事件,是window对象的一个属性,如果该属性是一个方法, 那么在发生未捕获异常的时候会调用该函数。

JS加载执行的流程(时间线)

详见《JS权威指南》第13.3.4节,《客户端JavaScript时间线》。

简单来说,JS的执行分为同步加载执行和异步事件驱动两个阶段。

当所有节点都生成了,会触发
document
对象上的
DomContentLoaded
事件,此时JS从同步脚本执行阶段进入到异步事件驱动阶段;

当所有资源,如图片、异步脚本载入执行完毕,会触发
window
对象的
load
事件,
document.readyState
变成
complete
.

条件注释

IE浏览器支持条件注释:

<!--[if lte IE 8]> //低于或等于IE8
do something
<[end if]-->


通过这种方式来解决IE的兼容问题。

同源策略

JS脚本只能和其所属文档来源相同的窗口和文档进行交互。

这里的来源是指:协议、服务器主机、端口号。

需注意:脚本的来源不重要,是它所嵌入的页面需要同源。

通过Ajax发出的Http请求也只能是向和所属页面同源的服务器发出。

跨域问题:

document.domain

该属性用来重置页面的域,默认是服务器主机名, 如果一个站点有多个子域名,例如food.example.com、hobby.example.com….那么受同源策略的限制,不能进行互相访问,如果将页面的document.domain
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  js