6.1 浏览器JavaScript引擎.pdfVIP

6.1 浏览器的JavaScript引擎 JavaScript代码嵌⼊⽹页的⽅法 直接添加代码块 加载外部脚本 ⾏内代码 外部脚本的加载 ⽹页底部加载 多个脚本的加载 defer属性 async属性 脚本的动态嵌⼊ 加载使⽤的协 JavaScript虚拟机 单线程模型 Event Loop 任务队列 参考链接 浏览器通过内置的JavaScript引擎，读取⽹页中的代码，对其处理后运⾏。 JavaScript代码嵌⼊⽹页的⽅法 在⽹页中嵌⼊JavaScript代码有多种⽅法。 直接添加代码块 通过script标签，可以直接将JavaScript代码嵌⼊⽹页。 script // some JavaScript code /script 加载外部脚本 script标签也可以指定加载外部的脚本⽂件。 script src=example.js/script 如果脚本⽂件使⽤了⾮英语字符，还应该注明编码。 script charset=utf-8 src=http://img. 3/attachments/i 加载外部脚本和直接添加代码块，这两种⽅法不能混⽤。下⾯代码的console.log语句直 script charset=utf-8 src=example.js console.log(Hello World!); /script ⾏内代码 除了上⾯两种⽅法，HTML语⾔允许在某些元素的事件属性和a元素的href属性中，直接写 div onclick=alert(Hello)/div a href=javascript:alert(Hello)/a 这种写法将HTML代码与JavaScript代码混写在⼀起，⾮常不利于代码管理，不建议使⽤。 外部脚本的加载 ⽹⻚底部加载 正常的⽹⻚加载流程是这样的。 1. 浏览器⼀边下载HTML⽹⻚，⼀边开始解析 2. 解析过程中，发现script标签 3. 暂停解析，下载script标签中的外部脚本 4. 下载完成，执⾏脚本 5. 恢复往下解析HTML⽹⻚ 也就是说，加载外部脚本时，浏览器会暂停⻚⾯渲染，等待脚本下载并执⾏完成后，再继 将脚本⽂件都放在⽹⻚尾部加载，还有⼀个好处。在DOM结构⽣成之前就调⽤DOM，JavaS head script console.log(document.body .innerHTML); /script /head 上⾯代码执⾏时会报错，因为此时body元素还未⽣成。 ⼀种解决⽅法是设定DOMContentLoaded事件的回调函数。 head script document.addEventListener(DOMContentLoaded, function(eve console.log(document.body .innerHTML); }); /script /head 另⼀种解决⽅法是，使⽤script标签的onload属性。当script标签指定的外部脚本⽂件 script src=jquery .min.js onload=console.log(document.body .inne /script 但是，如果将脚本放在⻚⾯底部，就可以完全按照正常的⽅式写，上⾯两种⽅式都不需要。 body !-- 其他代码 -- script console.log(document.body .innerHTML); /script /body 多个脚本的加载 如果有多个script标签，⽐如下⾯这样。 script src=http://img. 3/attachments/image/cimg/script script src=2.js/script 浏览器会同时平⾏下载1.js和2.js，但是执⾏时会保证先执⾏1.js，然后再执⾏2.js， 当然，加载这两个脚本