学习教材为: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.如何理解同源?
协议、域名、端口三者皆相同。