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

Posted 2022-12-01 做枚温婉的妹纸吧哈哈

多个页面共享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