JS权威指南学习笔记-浏览器中的JS
2016-11-22 22:19
357 查看
多个页面共享JS文件,实际上只会下载一次,其他的页面会从浏览器缓存中获取。
脚本的执行默认是同步和阻塞的,当HTML解析器遇到
设置defer属性的脚本会按照在文档中出现的顺序依次执行。
所以可能不是按照顺序来执行的,如果存在依赖可能会出错。
如果async和defer属性同时使用,会忽略defer,使用async。
此外,脚本的异步加载和执行还可以通过动态生成
参考:script的defer和async
简单来说,JS的执行分为同步加载执行和异步事件驱动两个阶段。
当所有节点都生成了,会触发
当所有资源,如图片、异步脚本载入执行完毕,会触发
通过这种方式来解决IE的兼容问题。
这里的来源是指:协议、服务器主机、端口号。
需注意:脚本的来源不重要,是它所嵌入的页面需要同源。
通过Ajax发出的Http请求也只能是向和所属页面同源的服务器发出。
跨域问题:
脚本的执行默认是同步和阻塞的,当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请求也只能是向和所属页面同源的服务器发出。
跨域问题: