学习教材为：https://wangdoc.com/javascript/bom/index.html

1.如何让JS可以控制浏览器的各种功能？

网页内嵌了 JavaScript 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。

2.有哪些方法可以网页中嵌入 JavaScript 代码？

• <script>元素直接嵌入代码。
• <script>标签加载外部脚本
• 事件属性
• URL 协议

3.script标签的type属性有什么作用？

用来指定脚本类型。对 JavaScript 脚本来说，type属性可以设为两种值。
text/javascript：这是默认值，也是历史上一贯设定的值。如果你省略type属性，默认就是这个值。对于老式浏览器，设为这个值比较好。
application/javascript：对于较新的浏览器，建议设为这个值。

4.如何防止攻击者篡改外部脚本？

script标签通过设置integrity属性，写入外部脚本的Hash签名，用来验证脚本的一致性，从而避免攻击者篡改外部脚本。

5.网页是如何加载的？

浏览器一边下载 HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析。
解析过程中，浏览器发现<script>元素，就暂停解析，把网页渲染的控制权转交给 JavaScript 引擎。
如果<script>元素引用了外部脚本，就下载该脚本再执行，否则就直接执行代码。
JavaScript 引擎执行完毕，控制权交还渲染引擎，恢复往下解析 HTML 网页。

6.为什么要把脚本文件都放在网页尾部加载？

加载外部脚本时，浏览器会暂停页面渲染，等脚本下载并执行完，再继续进行渲染。为了避免外部脚本加载很长时间，浏览器就会一直等待脚本下载完成，造成网页长时间失去响应，浏览器呈现假死状态，脚本放在网页尾部加载。
DOM结构生成之间调用DOM节点，javascript会报错，如果脚本在网页尾部加载就不会出现这种情况。

7.defer属性和async属性的异同？

脚本之间没有依赖关系，就使用async属性，如果脚本之间有依赖关系，就使用defer属性。如果同时使用async和defer属性，后者不起作用，浏览器行为由async属性决定。
都可以解决脚本文件下载阻塞网页渲染的问题；
defer脚本执行的顺序，就是脚本在页面中出现的顺序；async脚本执行的顺序，哪个脚本先下载结束，就先执行哪个脚本；
defer浏览器完成解析页面才会执行下载完成的脚本；async浏览器解析过程中有下载完成的脚本，就会先执行脚本；
defer只对外部加载的脚本起作用。

8.如何实现脚本的动态加载？

<script>元素还可以动态生成，生成后再插入页面，从而实现脚本的动态加载。
动态生成script元素 document.creatElement('script')；
将生成的script元素插入 document.head.appendChild(script)。

9.浏览器的组成？

核心是两部分：渲染引擎和 JavaScript 解释器（又称 JavaScript 引擎）。

10.重流和重绘的异同？

重流和重绘并不一定一起发生，重流必然导致重绘，重绘不一定需要重流；
重流和重绘的触发因素不一样：触发重流的因素-添加、删除可见的DOM，元素位置改变，元素尺寸改变，页面渲染初始化，浏览器窗口尺寸改变；触发重绘的因素-某元素的背景色，边框颜色、文字颜色改变。

11.如何理解window对象？它有哪些属性和方法？

浏览器里面，window对象（注意，w为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。

属性：

• window.name属性是一个字符串，表示当前浏览器窗口的名字。窗口不一定需要名字，这个属性主要配合超链接和表单的target属性使用。
• window.closed属性返回一个布尔值，表示窗口是否关闭
• window.opener属性表示打开当前窗口的父窗口。如果当前窗口没有父窗口（即直接在地址栏输入打开），则返回null
• window.self和window.window属性都指向窗口本身。这两个属性只读。
• window.frames属性返回一个类似数组的对象，成员为页面内所有框架窗口，包括frame元素和iframe元素。
• window.length属性返回当前网页包含的框架总数。如果当前网页不包含frame和iframe元素，那么window.length就返回0。
• window.frameElement属性主要用于当前窗口嵌在另一个网页的情况（嵌入<object>、<iframe>或<embed>元素），返回当前窗口所在的那个元素节点。
• window.top属性指向最顶层窗口，主要用于在框架窗口（frame）里面获取顶层窗口。
• window.parent属性指向父窗口。如果当前窗口没有父窗口，window.parent指向自身。
• window.status属性用于读写浏览器状态栏的文本。

方法：

• window.alert()方法弹出的对话框，只有一个“确定”按钮，往往用来通知用户某些信息。
• window.prompt()方法弹出的对话框，提示文字的下方，还有一个输入框，要求用户输入信息，并有“确定”和“取消”两个按钮。
• window.confirm()方法弹出的对话框，除了提示信息之外，只有“确定”和“取消”两个按钮，往往用来征询用户是否同意。
• window.open方法用于新建另一个浏览器窗口，类似于浏览器菜单的新建窗口选项。它会返回新窗口的引用，如果无法新建窗口，则返回null。
• window.close方法用于关闭当前窗口，一般只用来关闭window.open方法新建的窗口。
• window.stop()方法完全等同于单击浏览器的停止按钮，会停止加载图像、视频等正在或等待加载的对象。
• window.moveTo()方法用于移动浏览器窗口到指定位置。它接受两个参数，分别是窗口左上角距离屏幕左上角的水平距离和垂直距离，单位为像素。
• window.moveBy()方法将窗口移动到一个相对位置。它接受两个参数，分别是窗口左上角向右移动的水平距离和向下移动的垂直距离，单位为像素。
• window.resizeTo()方法用于缩放窗口到指定大小。
• window.resizeBy()方法用于缩放窗口。它与window.resizeTo()的区别是，它按照相对的量缩放，window.resizeTo()需要给出缩放后的绝对大小。

12.Navigator 对象有哪些属性和方法？

属性：

• navigator.userAgent属性返回浏览器的 User Agent 字符串，表示浏览器的厂商和版本信息；
• Navigator.plugins属性返回一个类似数组的对象，成员是 Plugin 实例对象，表示浏览器安装的插件，比如 Flash、ActiveX 等；
• Navigator.platform属性返回用户的操作系统信息，比如MacIntel、Win32、Linux x86_64等 ；
• navigator.onLine属性返回一个布尔值，表示用户当前在线还是离线（浏览器断线）；
• Navigator.language属性返回一个字符串，表示浏览器的首选语言。该属性只读；
• Navigator.geolocation属性返回一个 Geolocation 对象，包含用户地理位置的信息；
• navigator.cookieEnabled属性返回一个布尔值，表示浏览器的 Cookie 功能是否打开。

方法：

• navigator.javaEnabled()方法返回一个布尔值，表示浏览器是否能运行 Java Applet 小程序；
• Navigator.sendBeacon()方法用于向服务器异步发送数据。
• 实验性属性：navigator.deviceMemory；navigator.hardwareConcurrency；navigator.connection。

13.Cookie的用途有哪些？Cookie 与 HTTP 协议的关系？

Cookie 主要保存状态信息，以下是一些主要用途。

用途：

• 对话（session）管理：保存登录、购物车等需要记录的信息。
• 个性化信息：保存用户的偏好，比如网页的字体大小、背景色等等。
• 追踪用户：记录和分析用户行为。

关系：

• Cookie 由 HTTP 协议生成，也主要是供 HTTP 协议使用。

14.AJAX 需经过哪些步骤？

• 创建 XMLHttpRequest 实例；
• 发出 HTTP 请求；
• 接收服务器传回的数据；
• 更新网页数据。

15.如何理解同源？

协议、域名、端口三者皆相同。