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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,948评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,371评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,490评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,521评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,627评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,842评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,997评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,741评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,203评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,339评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,955评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2 349

推荐阅读更多精彩内容