## window对象补充知识点 * 三种对话框 ``` //window对象中的三种对话框 //alert()：警告对话框，用于提示页面信息 alert("请在安全的情况下输入密码"); console.log("a"); //confirm():确定操作对话框，用于页面询问是否达成某项操作。 //返回一个布尔类型的值，点击确定，返回true，点击取消，返回false var flag = confirm("确认删除吗？"); console.log(flag); if(confirm("确认删除吗？")) { alert("删除成功！"); } //prompt():用户输入对话框，在提示文字下面还有输入框， //要求用户输入信息，有确定和取消按钮，往往用来获取用户输入的数据 var name = prompt("请输入你的名字","Jack"); console.log(name); ``` * onload事件 ~~~JavaScript //load事件 //load事件发生在文档的浏览器窗口加载完毕的时候， //window.onload属性可以指定这个事件的回调函数 //其实是指，我们可以将页面的预处理代码定义在onload中 window.onload = function() { document.getElementById("aa").innerHTML="Hello,world!"; } ~~~ ## 关于浏览器的补充知识点 1. JavaScript代码嵌入到网页的四种方法 1.1 在script标签中写入代码 1.2 引入外部JS文件 1.3 事件属性，将我们的js代码写入事件中 1.4 URL协议，URL支持以JavaScript的协议方式，执行JavaScript代码 ~~~ <a href="https://www.baidu.com" onclick="alert('aaa');return false;">百度</a> <a href="javascript:alert('bbb')">百度</a> ~~~ 2. script标签的工作原理：浏览器加载JavaScript脚本，主要是通过script标签去完成的，有着如下的流程 * 浏览器一边下载HTML页面，一边开始解析； * 如果在解析的过程中，发现script标签 * 暂停解析，网页的渲染控制器，就交给JavaScript引擎； * 如果script标签引用的是外部js文件，则会下载该文件，否则直接执行 * 执行完成之后，控制器交给渲染引擎，继续向下解析HTML文档 3. 浏览器的组成-渲染引擎和JavaScript引擎 * 渲染引擎：作用是将网页代码渲染为用户可以感知的平面文档。不同的浏览器有着不同的渲染引擎。 * Chrome：Blink引擎 * IE：Trident引擎 * Firefox：Gecko引擎 * Safari：Webkit引擎 * Edge：EdgeHTML引擎 * 渲染引擎处理页面的步骤 * 解析代码：将HTML解析为DOM，css代码解析成CSSOM(CSS Object Model) * 对象合成：将DOM和CSSOM合成渲染树（render tree） * 布局：计算出渲染树的布局 * 绘制：将渲染树显示到屏幕上 * 以上四步，并非按照严格的顺序执行，往往第一步还没完成，第三步或第四步就已经开始执行 * JavaScript引擎 * 作用是读取JavaScript代码对其处理后执行 * JavaScript是一种解释型的语言，也就是说不需要编译，由解释器实时运行，这样的好处运行和修改比较方便，刷新页面就是重新解释。缺点就是每次运行的时候都要调用解释器，占用系统开销比较大，运行速度比一般的编译型语言稍慢一些。为了提高运行的速度，目前的浏览器都对JavaScript进行一定程度的编译，产生类似字节码的中间代码，用于提高运行速度。