第九次:浏览器模型参考问题

学习教材为: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.如何理解同源?

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容